:root { color-scheme:light; --ink:#2b2923; --muted:#71695e; --line:#cbbca6; --paper:#fff9ed; --wash:#e9dfcf; --green:#263f38; --mint:#a4472c; --lime:#e1b84b; --amber:#d59b31; --red:#9d382b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background-color:var(--wash); background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),repeating-linear-gradient(135deg,rgba(98,77,48,.025) 0,rgba(98,77,48,.025) 2px,transparent 2px,transparent 8px); background-size:100% 32px,auto; font:14px/1.45 Arial,Helvetica,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:26px 20px; color:#f8eed8; background:#253d37; border-right:5px solid #9f432b; box-shadow:inset -1px 0 #e1b84b; }
.logo { display:flex; align-items:center; gap:11px; }
.logo-mark { display:grid; place-items:center; width:48px; height:48px; border:3px solid #f8edd2; border-radius:50%; color:#263f38; background:var(--lime); box-shadow:2px 2px 0 #142721; font:900 20px/1 Georgia,serif; }
.logo strong,.logo > div > span { display:block; }
.logo strong { font:700 17px/1.1 Georgia,serif; letter-spacing:.02em; text-transform:uppercase; }
.logo > div > span { margin-top:3px; color:#d9cba9; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.nav-label { margin:34px 0 8px; color:#d5ad49; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.14em; text-transform:uppercase; }
.nav-item { display:flex; align-items:center; justify-content:space-between; width:100%; margin:3px 0; padding:10px 11px; border:1px solid transparent; border-radius:4px; color:#f0e7d4; background:transparent; text-align:left; }
.nav-item.active { color:#fffaf0; border-color:#c46749; background:#9f432b; box-shadow:2px 2px 0 #172923; }
.nav-dot { width:8px; height:8px; border:2px solid #f7e8bc; border-radius:50%; background:#d8a638; }
.sdk-note { margin-top:auto; padding:13px; border:1px dashed #b9a982; border-radius:4px; background:#1d332d; }
.sdk-note strong,.sdk-note span { display:block; }
.sdk-note span { margin-top:4px; color:#cdbf9f; font-size:11px; }
.sidebar-logout { display:flex; justify-content:space-between; margin-top:12px; padding:10px 11px; border:1px solid #9e8d6f; border-radius:4px; color:#f0e6d0; background:transparent; font-weight:800; }
.content { min-width:0; padding:30px; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px; padding-bottom:16px; border-bottom:3px double #9f432b; }
.eyebrow { color:#91432f; font:700 10px/1.3 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:4px 0 0; font:700 32px/1.05 Georgia,"Times New Roman",serif; letter-spacing:-.025em; }
.subtitle { margin:4px 0 0; color:var(--muted); }
.profile { padding:9px 12px; border:1px solid #b8a88f; border-radius:4px; background:#f6ecd9; box-shadow:2px 2px 0 rgba(91,70,42,.12); text-align:right; }
.profile strong,.profile span { display:block; }
.profile span { color:var(--muted); font-size:11px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.metric,.panel,.workflow { border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:4px 4px 0 rgba(91,70,42,.1); }
.metric { padding:14px 16px; border-top:4px solid #a4472c; }
.metric span { color:var(--muted); font:700 10px/1.3 "Courier New",monospace; letter-spacing:.08em; text-transform:uppercase; }
.metric strong { display:block; margin-top:5px; color:#263f38; font:700 23px/1 Georgia,serif; }
.layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:16px; }
.stack { display:grid; gap:16px; align-content:start; }
.panel,.workflow { padding:18px; }
.section-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:13px; }
.section-actions { display:flex; align-items:flex-end; flex-direction:column; gap:7px; }
.inline-add { min-height:0; padding:7px 10px; font-size:10px; white-space:nowrap; }
.section-head h2,.workflow h2 { margin:0; font:700 18px/1.2 Georgia,"Times New Roman",serif; }
.section-head p,.workflow > p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.vehicle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vehicle { padding:13px; border:1px solid #c7b69c; border-radius:4px; background:#f6eddd; box-shadow:inset 0 3px #d6a53a; }
.vehicle strong,.vehicle span { display:block; }
.vehicle span { margin-top:3px; color:var(--muted); font-size:11px; }
.vehicle-tag,.status { display:inline-block; width:max-content; margin-top:9px; padding:3px 7px; border:1px solid #a69679; border-radius:3px; color:#263f38; background:#e7ddc8; font:700 9px/1.2 "Courier New",monospace; letter-spacing:.04em; text-transform:uppercase; }
.list { display:grid; gap:8px; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #e7ede9; }
.list-row:first-child { border-top:0; }
.list-row strong,.list-row span { display:block; }
.list-row span { color:var(--muted); font-size:11px; }
.list-row .right { text-align:right; }
.primary,.secondary { min-height:42px; padding:10px 13px; border:1px solid transparent; border-radius:4px; font-weight:850; letter-spacing:.015em; }
.primary { color:#fff8e9; border-color:#82351f; background:var(--mint); box-shadow:2px 2px 0 #6e2c1b; }
.primary:hover { background:#8f3b25; }
.secondary { color:#263f38; border-color:#aa9a80; background:#eee3cf; }
.workflow > button { width:100%; margin-top:12px; }
.form { display:none; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.form.open { display:block; }
.panel .form.open + .vehicle-grid { margin-top:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
label { display:block; margin:9px 0 5px; color:#485a54; font-size:11px; font-weight:850; }
input,select,textarea { width:100%; min-height:42px; padding:9px 10px; border:1px solid #aa9a80; border-radius:4px; color:var(--ink); background:#fffaf0; outline:none; }
input:focus,select:focus,textarea:focus { border-color:#a4472c; box-shadow:0 0 0 3px rgba(164,71,44,.15); }
.form .primary { width:100%; margin-top:12px; }
.lookup { display:flex; margin-top:12px; }
.lookup input { border-radius:9px 0 0 9px; }
.lookup button { border-radius:0 9px 9px 0; white-space:nowrap; }
.selected { margin-top:12px; padding:13px; border-radius:11px; background:#f1f6f3; }
.selected strong,.selected span { display:block; }
.selected span { color:var(--muted); font-size:11px; }
.result { position:fixed; top:20px; left:50%; z-index:1200; width:max-content; max-width:min(560px,calc(100vw - 32px)); margin:0; padding:12px 16px; border:1px solid transparent; border-radius:12px; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-12px); transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s; box-shadow:0 16px 46px rgba(18,54,43,.2); font-weight:750; }
.result.success { color:#263f38; border-color:#b9a677; background:#f4e5b7; }
.result.error { color:#8f3029; border-color:#efc8c3; background:#fbe7e4; }
.result.show { opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s; }
table { width:100%; border-collapse:collapse; }
th,td { padding:11px 8px; border-bottom:1px solid #e5ebe7; text-align:left; font-size:12px; }
th { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:980px) { .app { grid-template-columns:190px minmax(0,1fr); } .content { padding:22px; } .layout { grid-template-columns:1fr; } }
@media (max-width:700px) { .app { display:block; } .sidebar { display:none; } .content { padding:16px; } .page-head { align-items:stretch; flex-direction:column; } .profile { text-align:left; } .metrics,.vehicle-grid { grid-template-columns:1fr; } }

.portal-page { color:#333; background:#f2f2f2; background-image:none; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; }
.portal-site-header { color:#fff; background:#3f556b; border-bottom:1px solid #283b4d; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.portal-header-top { display:flex; align-items:center; justify-content:space-between; width:min(1120px,calc(100% - 40px)); min-height:82px; margin:auto; gap:24px; }
.portal-wordmark { color:#fff; font:bold 27px/1 Arial,Helvetica,sans-serif; letter-spacing:-.04em; text-shadow:0 1px 0 #152433,0 2px 2px rgba(0,0,0,.4); }
.portal-wordmark small { display:block; margin-top:7px; color:#d8e0e7; font:normal 11px/1 Verdana,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.shop-contact { text-align:right; }
.shop-contact strong,.shop-contact span { display:block; }
.shop-contact strong { font:700 21px/1.2 Arial,Helvetica,sans-serif; }
.shop-contact span { margin-top:5px; color:#e2e7eb; font-size:11px; }
.portal-nav { display:flex; width:min(1120px,calc(100% - 40px)); margin:auto; border-right:1px solid rgba(255,255,255,.15); border-left:1px solid rgba(0,0,0,.18); }
.portal-nav button { min-height:39px; padding:0 18px; border:0; border-right:1px solid rgba(0,0,0,.2); border-radius:0; color:#f4f6f8; background:linear-gradient(#526a81,#364b60); font:12px Arial,Helvetica,sans-serif; text-shadow:0 1px #1e2b38; }
.portal-nav button:hover,.portal-nav button.active { background:linear-gradient(#344a60,#263b50); }
.portal-nav .nav-signout { margin-left:auto; color:#eef1f4; }
.portal-app { display:block; min-height:calc(100vh - 122px); }
.portal-page .content { width:min(1120px,calc(100% - 40px)); margin:auto; padding:25px 0 32px; }
.portal-page .page-head { align-items:center; margin-bottom:18px; padding:0; border:0; }
.portal-page h1 { margin:0; color:#34495e; font:600 26px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:0; }
.portal-page .subtitle { margin-top:3px; color:#777; }
.portal-page .profile { padding:8px 12px; border:1px solid #ccc; border-radius:3px; background:#fff; box-shadow:none; }
.portal-page .profile span { color:#777; }
.portal-page .metrics { gap:14px; margin-bottom:18px; }
.portal-page .metric,.portal-page .panel,.portal-page .workflow { border:1px solid #ccc; border-radius:4px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.portal-page .metric { padding:13px 15px; border-top:1px solid #ccc; }
.portal-page .metric span { color:#777; font:600 10px/1.3 Arial,Helvetica,sans-serif; letter-spacing:.03em; }
.portal-page .metric strong { margin-top:3px; color:#333; font:600 22px/1.2 "Segoe UI",Arial,sans-serif; }
.portal-page .layout { grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:18px; }
.portal-page .stack { gap:18px; }
.portal-page .panel,.portal-page .workflow { padding:15px; }
.portal-page .saved-vehicles-panel { padding:21px 18px 19px; }
.portal-page .saved-vehicles-panel h2 { font-weight:700; }
.portal-page .section-head h2,.portal-page .workflow h2 { color:#3c4f60; font:600 18px/1.25 "Segoe UI",Arial,sans-serif; }
.portal-page .section-head p,.portal-page .workflow > p { color:#777; font-size:11px; }
.portal-page .eyebrow { color:#777; font:600 10px/1.3 Arial,Helvetica,sans-serif; letter-spacing:.05em; }
.portal-page .appointments-panel { padding:0; overflow:hidden; }
.portal-page .appointments-panel .section-head { margin:0; padding:14px 15px 11px; border-bottom:1px solid #ccc; background:#f5f5f5; }
.table-scroll { width:100%; overflow-x:auto; }
.portal-page .appointments-table { margin:0; border-collapse:collapse; }
.portal-page .appointments-table th,.portal-page .appointments-table td { padding:10px 12px; border-right:1px solid #d5d5d5; border-bottom:1px solid #ccc; text-align:left; vertical-align:middle; }
.portal-page .appointments-table th:last-child,.portal-page .appointments-table td:last-child { border-right:0; }
.portal-page .appointments-table th { color:#555; background:#e8edf1; font:600 11px Arial,Helvetica,sans-serif; letter-spacing:0; text-transform:none; }
.portal-page .appointments-table tbody tr:nth-child(even) { background:#f7f7f7; }
.portal-page .appointments-table tbody tr:last-child td { border-bottom:0; }
.portal-page .appointments-table td { font-size:11px; }
.portal-page .appointments-table td span,.portal-page .appointments-table td small { display:block; }
.portal-page .appointments-table td small { margin-top:2px; color:#888; }
.appointment-cancellation-picker { padding:12px 14px 14px; border-top:1px solid #ccc; background:#f5f5f5; }
.appointment-cancellation-picker label { margin-top:0; }
.appointment-cancellation-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.appointment-cancellation-controls select { border-radius:4px 0 0 4px; }
.appointment-cancellation-controls button { border-left:0; border-radius:0 4px 4px 0; white-space:nowrap; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.confirmation-dialog { width:min(430px,calc(100vw - 32px)); padding:0; border:1px solid #777; border-radius:4px; color:#333; background:#fff; box-shadow:0 5px 20px rgba(0,0,0,.35); font:13px/1.5 Verdana,Arial,Helvetica,sans-serif; }
.confirmation-dialog::backdrop { background:rgba(20,30,40,.52); }
.confirmation-dialog form { padding:19px; }
.confirmation-dialog h2 { margin:0 0 8px; color:#3c4f60; font:600 20px/1.25 "Segoe UI",Arial,sans-serif; }
.confirmation-dialog p { margin:5px 0; color:#666; }
.confirmation-dialog #cancel-appointment-summary { color:#333; font-weight:700; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:13px; border-top:1px solid #ddd; }
.danger { min-height:42px; padding:10px 13px; border:1px solid #7d2424; border-radius:4px; color:#fff; background:linear-gradient(#b34a4a,#8d3030); font-weight:700; cursor:pointer; }
.danger:disabled { cursor:wait; opacity:.65; }
.portal-page .vehicle { border:1px solid #ccc; border-radius:3px; background:#fafafa; box-shadow:none; }
.portal-page .vehicle-tag,.portal-page .status { border:1px solid #bbb; border-radius:3px; color:#555; background:#eee; font:600 9px/1.2 Arial,Helvetica,sans-serif; }
.portal-page .primary,.portal-page .secondary { border-radius:4px; font-family:Arial,Helvetica,sans-serif; letter-spacing:0; box-shadow:inset 0 1px rgba(255,255,255,.25),0 1px 1px rgba(0,0,0,.12); }
.portal-page .primary { color:#fff; border-color:#2b5878; background:linear-gradient(#5d87a4,#3d6b8b); }
.portal-page .primary:hover { background:linear-gradient(#517b98,#345f7e); }
.portal-page .secondary { color:#333; border-color:#bbb; background:linear-gradient(#fff,#e4e4e4); }
.portal-page input,.portal-page select,.portal-page textarea { border-color:#bbb; border-radius:4px; background:#fff; box-shadow:inset 0 1px 1px rgba(0,0,0,.08); }
.portal-page input:focus,.portal-page select:focus,.portal-page textarea:focus { border-color:#66afe9; box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 0 6px rgba(102,175,233,.55); }
.booking-steps { display:flex; margin:0 0 14px; padding:0; border:1px solid #bbb; background:#eee; list-style:none; }
.booking-steps li { flex:1; padding:7px 5px; border-left:1px solid #bbb; color:#666; font:600 9px/1.25 Arial,Helvetica,sans-serif; text-align:center; }
.booking-steps li:first-child { border-left:0; }
.booking-steps li.active { color:#fff; background:#496984; }
.booking-step { min-width:0; margin:0; padding:0; border:0; }
.booking-step[hidden] { display:none; }
.booking-step legend { width:100%; padding:0 0 6px; border-bottom:1px solid #ddd; color:#3c4f60; font:600 13px/1.3 "Segoe UI",Arial,sans-serif; }
.booking-actions { display:grid; grid-template-columns:90px 1fr; gap:8px; margin-top:12px; }
.form .booking-actions .primary { margin-top:0; }
.booking-review { margin:8px 0 0; border:1px solid #ccc; background:#f7f7f7; }
.booking-review div { display:grid; grid-template-columns:76px 1fr; padding:7px 9px; border-top:1px solid #ddd; }
.booking-review div:first-child { border-top:0; }
.booking-review dt { color:#666; font-size:10px; }
.booking-review dd { margin:0; color:#333; font-weight:600; }
.portal-page .legacy-rule { margin:1px 7px -7px; border:0; border-top:1px solid #bbb; }
.portal-footer { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:18px 0 24px; border-top:1px solid #ccc; color:#777; font-size:11px; }
.portal-footer a { color:#476b8b; }

/* shared portal chrome applied to both surfaces */
.portal-page .sdk-note { margin:0; padding:11px 13px; border:1px solid #ccc; border-radius:4px; color:#555; background:#f5f5f5; }
.portal-page .sdk-note strong { color:#3c4f60; font:600 12px/1.3 "Segoe UI",Arial,sans-serif; }
.portal-page .sdk-note span { margin-top:4px; color:#777; font-size:11px; }
.portal-page .list-row { border-top:1px solid #e5e5e5; }
.portal-page .list-row span { color:#777; }
.portal-page .selected { padding:11px 12px; border:1px solid #ccc; border-radius:4px; background:#f5f8fa; }
.portal-page .selected span { color:#777; }
.portal-page .lookup input { border-radius:4px 0 0 4px; }
.portal-page .lookup button { border-radius:0 4px 4px 0; }
.portal-page .form { border-top:1px solid #ddd; }
.portal-page label { color:#555; font-weight:700; }
.portal-page .result { border-radius:4px; font-family:Verdana,Arial,Helvetica,sans-serif; font-weight:600; box-shadow:0 5px 20px rgba(0,0,0,.28); }
.portal-page .result.success { color:#25562f; border-color:#b5cdb5; background:#e9f3e9; }
.portal-page .result.error { color:#8a2929; border-color:#d9b3b3; background:#f7eaea; }

/* Northstar customer portal */
.customer-portal-page { --portal-red:#a90c08; --portal-dark-red:#750000; --portal-charcoal:#292929; color:#252525; background:#262626; font-family:Arial,Helvetica,sans-serif; font-size:15px; }
.customer-utility { min-height:36px; display:flex; align-items:center; justify-content:space-between; max-width:1260px; margin:auto; padding:0 22px; color:#fff; background:linear-gradient(#be1812,#820000); font-size:12px; font-weight:bold; text-shadow:0 1px #400; }
.customer-portal-page .portal-site-header { max-width:1260px; margin:auto; border:0; background:#fff; box-shadow:none; }
.customer-portal-page .portal-header-top { width:100%; min-height:88px; padding:12px 26px; border-bottom:1px solid #999; background:linear-gradient(105deg,#fff,#e7e7e7 65%,#fafafa); }
.customer-brand { display:flex; align-items:center; gap:14px; color:#222; text-decoration:none; transform:skew(-5deg); }
.customer-brand-mark { width:72px; height:57px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#444 0 24%,#bd1511 25% 72%,#700 73%); border:3px solid #ddd; outline:2px solid #333; font:bold italic 22px Arial; text-shadow:2px 2px #111; }
.customer-brand > span:last-child { line-height:.9; }
.customer-brand strong,.customer-brand small { display:block; }
.customer-brand strong { color:#b3130e; font-size:33px; letter-spacing:-2px; }
.customer-brand small { color:#222; font-size:21px; font-weight:bold; text-align:center; text-transform:none; }
.customer-portal-page .shop-contact { color:#555; }
.customer-portal-page .shop-contact strong { color:#222; font-size:16px; }
.customer-portal-page .shop-contact span { color:#666; }
.customer-portal-page .portal-nav { width:100%; min-height:43px; padding-left:20px; border-bottom:3px solid var(--portal-red); background:linear-gradient(#3b3b3b,#171717); }
.customer-portal-page .portal-nav button { min-width:125px; min-height:45px; padding:0 18px; color:#fff; border-right:1px solid #111; background:linear-gradient(#3b3b3b,#171717); font-family:Impact,"Arial Narrow",Arial,sans-serif; font-size:14px; letter-spacing:.45px; text-transform:uppercase; }
.customer-portal-page .portal-nav button:hover,.customer-portal-page .portal-nav button.active { background:linear-gradient(#ce1d17,#8c0000); }
.customer-portal-page .portal-nav .nav-signout { min-width:auto; margin-left:auto; font:12px Arial,Helvetica,sans-serif; text-transform:none; }
.customer-portal-page .portal-app { display:grid; grid-template-columns:220px minmax(0,1fr); width:min(1260px,100%); min-height:calc(100vh - 165px); margin:auto; background:#f4f4f4; }
.customer-menu { grid-row:1 / span 2; padding:18px 14px; color:#eee; background:#333; border-right:4px solid var(--portal-dark-red); }
.customer-menu h2 { margin:0 8px 15px; color:#fff; font:21px Impact,"Arial Narrow",Arial,sans-serif; text-transform:uppercase; }
.customer-menu button { width:100%; padding:12px; border:0; border-bottom:1px solid #555; color:#eee; background:transparent; text-align:left; font-size:14px; }
.customer-menu button.active { background:var(--portal-red); font-weight:bold; }
.customer-help { display:block; margin:24px 8px 0; padding:12px; border:1px solid #666; color:#ccc; font-size:12px; line-height:1.5; }
.customer-help strong,.customer-help span { display:block; }
.customer-help span { margin-top:4px; }
.customer-portal-page .content { width:auto; margin:0; padding:20px; }
.customer-portal-page .page-head { align-items:end; margin-bottom:16px; padding-bottom:10px; border-bottom:3px double #aaa; }
.customer-portal-page h1 { color:#252525; font:28px/1 Impact,"Arial Narrow",Arial,sans-serif; text-transform:uppercase; }
.customer-portal-page .last-login { color:#777; font-size:12px; }
.customer-portal-page .metrics { margin-bottom:16px; }
.customer-portal-page .metric,.customer-portal-page .panel,.customer-portal-page .workflow { border-color:#bbb; border-radius:0; background:#fff; box-shadow:0 1px 3px #bbb; }
.customer-portal-page .metric { padding:9px 12px; background:linear-gradient(#fff,#e5e5e5); }
.customer-portal-page .metric span { font-size:11px; }
.customer-portal-page .metric strong { color:#222; font:700 20px/1.2 Arial,Helvetica,sans-serif; }
.customer-portal-page .layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.7fr); grid-template-areas:"appointments schedule" "vehicles reschedule" "workorders ."; align-items:start; gap:16px; }
.customer-portal-page .layout > .stack { display:contents; }
.customer-portal-page .appointments-panel { grid-area:appointments; }
.customer-portal-page .saved-vehicles-panel { grid-area:vehicles; }
.customer-portal-page .work-orders-panel { grid-area:workorders; }
.customer-portal-page .schedule-panel { grid-area:schedule; }
.customer-portal-page .reschedule-panel { grid-area:reschedule; }
.customer-portal-page .legacy-rule { display:none; }
.customer-portal-page .panel,.customer-portal-page .workflow { padding:13px; }
.customer-portal-page .appointments-panel { padding:0; }
.customer-portal-page .appointments-panel .section-head,.customer-portal-page .section-head { margin:-13px -13px 12px; padding:10px 13px; border-bottom:1px solid #bbb; background:linear-gradient(#f8f8f8,#ddd); }
.customer-portal-page .appointments-panel .section-head { margin:0; }
.customer-portal-page .section-head h2,.customer-portal-page .workflow h2 { color:#252525; font:bold 18px/1.2 Arial,Helvetica,sans-serif; }
.customer-portal-page .section-head p,.customer-portal-page .workflow > p { color:#666; font-size:13px; }
.customer-portal-page .appointments-table th { color:#444; background:#e5e5e5; font:bold 11px Arial,Helvetica,sans-serif; text-transform:uppercase; }
.customer-portal-page .appointments-table td { font-size:14px; }
.customer-portal-page .primary { border-color:#650000; background:linear-gradient(#c81b15,#870000); text-shadow:0 1px #500; }
.customer-portal-page .primary:hover { background:linear-gradient(#da251e,#970000); }
.customer-portal-page .secondary { border-color:#999; background:linear-gradient(#fff,#ddd); }
.customer-portal-page .vehicle-grid { grid-template-columns:1fr 1fr; }
.customer-portal-page .vehicle { padding:10px 0; border:0; border-bottom:1px dotted #aaa; background:transparent; }
.customer-portal-page .vehicle span,.customer-portal-page .list-row span { font-size:12px; }
.customer-portal-page label { font-size:12px; }
.customer-portal-page .saved-vehicles-panel .section-head { align-items:stretch; flex-direction:column; }
.customer-portal-page .saved-vehicles-panel .section-actions { width:100%; align-items:center; justify-content:space-between; flex-direction:row; }
.customer-portal-page .inline-add { padding:10px 13px; font-size:14px; }
.customer-portal-page .vehicle:last-child { border-bottom:0; }
.customer-portal-page .booking-steps li.active { background:var(--portal-red); }
.customer-portal-page .booking-steps li { padding:10px 7px; font-size:13px; }
.customer-portal-page .booking-step legend { padding-bottom:9px; font-size:16px; }
.customer-portal-page .workflow label { margin-top:12px; font-size:14px; }
.customer-portal-page .workflow input,.customer-portal-page .workflow select { min-height:48px; font-size:16px; }
.customer-portal-page .workflow .primary,.customer-portal-page .workflow .secondary { font-size:16px; }
.customer-portal-page .portal-footer { grid-column:2; width:auto; margin:0 20px; color:#777; }
.customer-portal-page .confirmation-dialog h2 { color:#222; font-family:Impact,"Arial Narrow",Arial,sans-serif; text-transform:uppercase; }

@media (max-width:700px) {
  .portal-header-top { align-items:flex-start; flex-direction:column; padding:18px 0; gap:10px; }
  .shop-contact { text-align:left; }
  .portal-nav { width:100%; overflow-x:auto; }
  .portal-nav button { flex:0 0 auto; padding:0 13px; }
  .portal-nav .nav-signout { margin-left:0; }
  .portal-page .content,.portal-footer { width:calc(100% - 24px); }
  .portal-page .layout { grid-template-columns:1fr; }
  .customer-utility span:last-child,.customer-portal-page .shop-contact { display:none; }
  .customer-portal-page .portal-header-top { min-height:70px; padding:8px 14px; }
  .customer-brand-mark { width:52px; height:43px; font-size:17px; }
  .customer-brand strong { font-size:25px; }
  .customer-brand small { font-size:16px; }
  .customer-portal-page .portal-app { display:block; }
  .customer-menu { display:none; }
  .customer-portal-page .content { padding:14px; }
  .customer-portal-page .layout { display:grid; grid-template-columns:1fr; grid-template-areas:"appointments" "vehicles" "schedule" "reschedule" "workorders"; }
  .customer-portal-page .layout > .stack { display:contents; }
  .customer-portal-page .vehicle-grid { grid-template-columns:1fr; }
  .customer-portal-page .portal-footer { width:auto; margin:0 14px; }
}