.dashboard-page{padding:130px 0 35px;min-height:calc(100vh - 130px)}
.dashboard-hero{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:34px}.dashboard-hero h1{font-size:clamp(36px,5vw,56px);line-height:1.05;margin-bottom:12px}.dashboard-hero h1 span{color:var(--blue)}.dashboard-hero p{color:var(--muted);font-size:17px}
.account-chip{display:flex;align-items:center;gap:12px;padding:13px 17px;background:var(--surface);border:1px solid var(--border);border-radius:18px;min-width:225px}.account-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#07101d;font-weight:900}.account-chip strong{display:block;font-size:13px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-chip button{padding:0;background:transparent;border:0;color:var(--blue);font:600 12px Inter,sans-serif;cursor:pointer}
.account-settings{margin-left:10px}.settings-panel{margin:-8px 0 42px;padding:24px;background:var(--surface);border:1px solid var(--border-strong);border-radius:18px}.settings-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.settings-header h2{font-size:26px}.settings-close{border:0;background:none;color:var(--text);font-size:28px;cursor:pointer}.profile-form{display:grid;grid-template-columns:1fr 1fr auto auto;align-items:end;gap:14px}.profile-form label{display:grid;gap:7px;font-size:13px;font-weight:800}.profile-form input{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-raised);color:var(--text);font:inherit}.profile-preview{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--blue);color:#07101d;font-weight:900}.profile-preview img,.account-avatar img{width:100%;height:100%;object-fit:cover}.account-avatar.has-image{padding:0;background:var(--surface-raised);overflow:hidden}.profile-form .form-status{grid-column:1/-1;margin:0}@media(max-width:750px){.profile-form{grid-template-columns:1fr}.profile-preview{justify-self:start}}
.dashboard-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:68px}.dashboard-summary article{display:flex;align-items:center;gap:15px;padding:21px;background:linear-gradient(145deg,rgba(24,34,56,.95),rgba(15,23,39,.95));border:1px solid var(--border);border-radius:18px}.summary-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:var(--blue-dim);font-size:20px}.dashboard-summary strong{display:block;font:800 28px "Space Grotesk"}.dashboard-summary article div span{color:var(--muted);font-size:13px}
.dashboard-section{margin-bottom:72px}.dashboard-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.dashboard-heading .eyebrow{margin-bottom:8px}.dashboard-heading h2{font-size:30px}.booking-list,.history-list{display:grid;gap:14px}.appointment-card,.history-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:21px 23px;background:var(--surface);border:1px solid var(--border);border-radius:19px}.date-tile{min-width:60px;padding:8px;border-radius:13px;background:var(--blue-dim);color:var(--blue);text-align:center;font-weight:900;line-height:1.1}.date-tile small{display:block;margin-bottom:3px;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.appointment-card h3,.history-card h3{font-size:18px;margin-bottom:3px}.appointment-card p,.history-card p{color:var(--muted);font-size:13px}.booking-meta{text-align:right;font-size:13px}.booking-meta strong{display:block;color:var(--blue);margin-bottom:4px}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(255,191,47,.13);color:var(--gold);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.reward-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px;background:linear-gradient(145deg,rgba(24,34,56,.95),rgba(15,23,39,.95));border:1px solid var(--border);border-radius:19px}.reward-board{position:relative;min-height:310px;display:grid;place-items:center;align-content:start;gap:8px;padding:18px;border:1px dashed var(--border-strong);border-radius:14px;background:linear-gradient(160deg,rgba(78,163,255,.08),rgba(84,214,140,.06));text-align:center;overflow:hidden}.wash-game{position:relative;width:min(100%,520px);min-height:274px}.wash-progress{height:10px;margin:0 20px 7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.wash-progress span{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .15s}.wash-game>strong{display:block;margin-bottom:9px;font:700 17px "Space Grotesk"}.wash-car{position:relative;width:min(100%,430px);height:190px;margin:0 auto;border-radius:48% 48% 24% 24%;background:linear-gradient(160deg,#d5e4ed,#6d8798 45%,#31485b);border:3px solid rgba(255,255,255,.4);box-shadow:inset 0 -18px 0 rgba(0,0,0,.18),0 16px 24px rgba(0,0,0,.25);overflow:hidden}.wash-car:before,.wash-car:after{content:"";position:absolute;bottom:-13px;width:58px;height:40px;border-radius:50%;background:#131a22;border:8px solid #526171}.wash-car:before{left:40px}.wash-car:after{right:40px}.car-window{position:absolute;left:25%;top:18px;width:50%;height:52px;border-radius:45% 45% 15% 15%;background:linear-gradient(135deg,#263d51,#9bc5d9);border:3px solid rgba(255,255,255,.5)}.car-light{position:absolute;top:82px;width:27px;height:15px;border-radius:50%;background:#fff6b2;box-shadow:0 0 14px #fff6b2}.car-light-left{left:20px}.car-light-right{right:20px}.dirt-patch{position:absolute;width:28px;height:23px;border-radius:50%;background:rgba(77,43,25,.8);box-shadow:4px 4px 0 rgba(43,27,17,.45);transition:opacity .2s,transform .2s}.dirt-patch.clean{opacity:0;transform:scale(.3)}.wash-mitt{position:absolute;left:50%;top:145px;z-index:3;width:64px;height:64px;border:0;border-radius:50%;background:#ffbf2f;box-shadow:0 6px 14px rgba(0,0,0,.3);font-size:31px;cursor:grab;touch-action:none;transform:translate(-50%,-50%)}.wash-mitt:active{cursor:grabbing}.wash-mitt.finished{display:none}.wash-game small{display:block;margin-top:11px;color:var(--muted);font-size:12px}.reward-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#07101d;font:900 25px "Space Grotesk";grid-column:1/-1;justify-self:center}.reward-controls{min-width:180px}.reward-controls .btn-primary{width:100%}.reward-controls .form-status{min-height:24px;font-size:12px}
@media(max-width:700px){.reward-card{grid-template-columns:1fr}.reward-controls{min-width:0}}
.vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.vehicle-card{position:relative;padding:23px;background:linear-gradient(145deg,rgba(24,34,56,.95),rgba(15,23,39,.95));border:1px solid var(--border);border-radius:19px;overflow:hidden}.vehicle-card:after{content:"";position:absolute;right:-22px;bottom:-35px;width:130px;height:80px;border:2px solid rgba(78,163,255,.15);border-radius:70% 65% 20% 20%;transform:rotate(-10deg)}.vehicle-icon{font-size:29px;margin-bottom:18px}.vehicle-card h3{font-size:20px;margin-bottom:6px}.vehicle-card p{color:var(--muted);font-size:13px}.vehicle-registration{display:inline-flex;margin-top:18px;padding:5px 9px;border-radius:6px;background:#e7e7dc;color:#1e2730;font:800 11px "Space Grotesk";letter-spacing:.07em}.empty-state{padding:32px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:18px;color:var(--muted)}.empty-state strong{display:block;color:var(--text);margin-bottom:6px}.empty-state a{color:var(--blue);font-weight:800}
.garage-model-card{padding:18px;background:linear-gradient(145deg,rgba(24,34,56,.95),rgba(15,23,39,.95));border:1px solid var(--border);border-radius:19px;overflow:hidden}.garage-model-card model-viewer{display:block;min-height:420px;background:radial-gradient(circle at 50% 35%,rgba(78,163,255,.12),transparent 58%),rgba(0,0,0,.16)}.garage-model-section .dashboard-heading p{color:var(--muted);font-size:13px}
@media(max-width:750px){.dashboard-hero{align-items:start;flex-direction:column}.dashboard-summary,.vehicle-grid{grid-template-columns:1fr}.appointment-card,.history-card{grid-template-columns:auto 1fr}.booking-meta{grid-column:2;text-align:left}.dashboard-heading{align-items:start;flex-direction:column}.dashboard-heading .btn-primary{width:auto}.dashboard-page{padding-top:115px}}

/* =========================================
KD VEHICLE LOOKUP
========================================= */

.car-lookup-section {
margin-top: 32px;
}

.car-lookup-card {
display: flex;
align-items: center;
gap: 24px;
padding: 28px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.lookup-icon {
width: 64px;
height: 64px;
flex: 0 0 64px;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
font-size: 30px;
}

.lookup-content {
flex: 1;
}

.lookup-content label {
display: block;
margin-bottom: 9px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.7;
}

.registration-form {
display: grid;
grid-template-columns: 1fr 1.3fr .65fr 1fr auto;
gap: 12px;
}

.registration-form input {
width: 100%;
min-height: 48px;
padding: 0 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(0, 0, 0, 0.18);
color: inherit;
font: inherit;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
outline: none;
box-sizing: border-box;
}

.registration-form input:focus {
border-color: rgba(255, 255, 255, 0.45);
}

.registration-form input[type="number"] {
min-width: 0;
}

.registration-form button {
flex: 0 0 auto;
white-space: nowrap;
}

.lookup-note {
margin: 9px 0 0;
font-size: 13px;
opacity: 0.55;
}

/* Vehicle result */

.vehicle-lookup-result {
margin-top: 18px;
padding: 28px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.025);
}

.vehicle-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}

.vehicle-result-header h3 {
margin: 4px 0 4px;
font-size: 25px;
}

.vehicle-result-header p {
margin: 0;
opacity: 0.6;
}

.registration-plate {
padding: 9px 15px;
border-radius: 7px;
background: #f6c928;
color: #111;
font-weight: 900;
letter-spacing: 0.08em;
font-size: 15px;
border: 2px solid #111;
}

/* Result body */

.vehicle-result-body {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 20px;
}

.vehicle-3d-placeholder {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(0, 0, 0, 0.18);
border: 1px dashed rgba(255, 255, 255, 0.15);
text-align: center;
}

.three-d-badge {
padding: 5px 9px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
}

.car-placeholder {
margin: 20px 0 8px;
font-size: 82px;
}

.vehicle-3d-placeholder p {
margin: 0;
font-weight: 800;
}

.vehicle-3d-placeholder span {
margin-top: 5px;
font-size: 13px;
opacity: 0.5;
}

/* Specs */

.vehicle-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-content: start;
}

.vehicle-spec {
padding: 18px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.04);
}

.vehicle-spec span {
display: block;
margin-bottom: 7px;
font-size: 12px;
opacity: 0.55;
}

.vehicle-spec strong {
font-size: 18px;
}

.add-garage-btn {
width: 100%;
min-height: 50px;
margin-top: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
color: inherit;
font: inherit;
font-weight: 800;
cursor: pointer;
transition: 0.2s ease;
}

.add-garage-btn:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}

/* Mobile */

@media (max-width: 700px) {

.car-lookup-card {
flex-direction: column;
align-items: stretch;
}

.lookup-icon {
align-self: flex-start;
}

.registration-form {
grid-template-columns: 1fr 1fr;
}

.registration-form button {
width: 100%;
grid-column: 1 / -1;
}

.vehicle-result-header {
align-items: flex-start;
flex-direction: column;
}

.vehicle-result-body {
grid-template-columns: 1fr;
}

.vehicle-specs {
grid-template-columns: 1fr 1fr;
}

}

@media (max-width: 420px) {

.vehicle-specs {
grid-template-columns: 1fr;
}

}