/* HITUNE customer Garage — cinematic vehicle-first presentation.
   Visual-only: preserves existing ownership/edit/delete behavior. */
#vehicles{--garage-cyan:#74dfff;--garage-blue:#8fc8ff;--garage-violet:#9a64ff;--garage-panel:#090e14;--garage-panel-2:#10161d;--garage-line:rgba(147,184,211,.16);--garage-text:#f4f7f9;--garage-muted:#91a0ad}
#vehicles .vehicle-account-grid{grid-template-columns:1fr;gap:16px;align-items:start}
#vehicles .garage-saved-vehicles{order:1}
#vehicles .garage-add-vehicle-card{order:2;position:relative;background:linear-gradient(155deg,rgba(15,21,29,.97),rgba(6,10,15,.99));border:1px solid rgba(123,181,220,.14);box-shadow:0 24px 70px rgba(0,0,0,.3);overflow:hidden;border-radius:16px}
#vehicles .garage-add-vehicle-card[hidden]{display:none!important}
#vehicles .garage-add-vehicle-card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--garage-cyan),rgba(154,100,255,.65),transparent);opacity:.78}
#vehicles .garage-add-vehicle-card h3{font-size:1.38rem;margin:.35rem 0 .45rem;color:var(--garage-text)}
#vehicles .garage-add-toggle{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;min-height:48px;border:1px solid rgba(116,223,255,.2)!important;border-radius:13px!important;background:linear-gradient(180deg,rgba(19,31,41,.92),rgba(10,16,22,.96))!important;color:#b8ecff!important;box-shadow:inset 0 1px rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.16)!important;font-weight:750!important;letter-spacing:.03em}
#vehicles .vehicle-method-tabs{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);padding:4px;border-radius:10px}
#vehicles .vehicle-method{border-radius:7px!important}
#vehicles .vehicle-method.active{background:rgba(116,223,255,.1)!important;border-color:rgba(116,223,255,.32)!important;color:#eafcff!important}
#vehicles .saved-vehicles-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 14px}
#vehicles .saved-vehicles-heading h2{margin:2px 0 0;font-size:1.42rem;color:var(--garage-text)}
#vehicles .saved-vehicles-heading p{margin:0;max-width:440px;text-align:right;font-size:.8rem;color:#7f8d99}
#vehicleList{display:grid;grid-template-columns:1fr;gap:13px}
#vehicleList .garage-vehicle-card{position:relative;display:grid;grid-template-columns:minmax(230px,36%) minmax(0,1fr);min-height:184px;padding:0!important;overflow:hidden;border:1px solid rgba(155,195,224,.15);border-radius:17px;background:radial-gradient(circle at 86% 14%,rgba(116,223,255,.05),transparent 24%),linear-gradient(155deg,rgba(14,20,27,.985),rgba(7,11,16,.995));box-shadow:0 18px 40px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025);isolation:isolate;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer}
#vehicleList .garage-vehicle-card:before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(116,223,255,.42),rgba(154,100,255,.24),transparent);opacity:.75;pointer-events:none}
#vehicleList .garage-vehicle-card:hover{transform:translateY(-2px);border-color:rgba(116,223,255,.32);box-shadow:0 24px 48px rgba(0,0,0,.32),0 0 0 1px rgba(116,223,255,.03) inset}
#vehicleList .garage-vehicle-card:focus-within{border-color:rgba(116,223,255,.42)}
.garage-vehicle-art{position:relative;min-height:184px;overflow:hidden;background:radial-gradient(circle at 72% 28%,rgba(116,223,255,.12),transparent 35%),radial-gradient(circle at 22% 78%,rgba(154,100,255,.1),transparent 36%),linear-gradient(145deg,#101922,#070b10 72%)}
.garage-vehicle-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 58%,rgba(7,11,16,.8) 100%),linear-gradient(0deg,rgba(4,8,12,.34),transparent 58%);pointer-events:none}
.garage-vehicle-image{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.01);transition:opacity .3s ease,transform .45s ease;filter:saturate(.9) contrast(1.04)}
.garage-vehicle-card.has-art .garage-vehicle-image{opacity:1;transform:scale(1)}
.garage-vehicle-card:hover .garage-vehicle-image{transform:scale(1.018)}
.garage-art-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#8395a4;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.garage-art-placeholder:before{content:"H";display:grid;place-items:center;width:42px;height:42px;margin:0 auto 8px;border:1px solid rgba(116,223,255,.26);border-radius:12px;color:#7de7ff;font-size:1.08rem;font-weight:900;box-shadow:inset 0 0 20px rgba(116,223,255,.06)}
.garage-vehicle-card.has-art .garage-art-placeholder{display:none}
.garage-art-status{display:none!important}
.garage-vehicle-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:20px 20px 18px}
.garage-vehicle-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.garage-vehicle-title strong{display:block;font-size:1.14rem;line-height:1.23;color:var(--garage-text);letter-spacing:-.02em}
.garage-vehicle-subtitle{margin-top:6px;font-size:.78rem;color:#8e9ca8}
.garage-vehicle-specs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.065)}
.garage-spec{min-width:120px;padding:0;border:0;background:none}
.garage-spec span,.garage-spec strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.garage-spec span{font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:#657784;margin-bottom:4px}.garage-spec strong{font-size:.8rem;color:#dce5eb;font-weight:650}
.garage-vehicle-actions{display:flex;align-items:center;gap:8px;margin-top:15px}.garage-vehicle-actions .btn{min-height:38px!important;padding:8px 12px!important;font-size:.7rem!important;border-radius:9px!important}.garage-vehicle-actions .garage-history-btn{flex:0 1 auto;border-color:rgba(116,223,255,.2)!important;color:#9aeaff!important;background:rgba(116,223,255,.045)!important}.garage-vehicle-actions .icon-action{flex:0 0 38px;width:38px;height:38px;border-radius:9px}
.garage-vehicle-open{position:absolute;right:16px;top:17px;color:#8293a0;font-size:1rem;line-height:1;pointer-events:none}

/* Vehicle detail experience */
dialog.garage-detail-dialog{width:min(720px,calc(100vw - 28px));max-height:min(860px,calc(100dvh - 30px));padding:0;border:1px solid rgba(141,183,215,.2);border-radius:20px;background:#080d12;color:#f3f6f8;box-shadow:0 30px 90px rgba(0,0,0,.62);overflow:auto}
dialog.garage-detail-dialog::backdrop{background:rgba(0,4,8,.82);backdrop-filter:blur(8px)}
.garage-detail-shell{min-height:100%}.garage-detail-hero{position:relative;aspect-ratio:16/8.4;min-height:260px;overflow:hidden;background:linear-gradient(145deg,#111b24,#06090d)}
.garage-detail-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080d12 0,rgba(8,13,18,.32) 40%,transparent 70%)}
.garage-detail-hero img{width:100%;height:100%;object-fit:cover;display:block}
.garage-detail-close{position:absolute;z-index:3;top:16px;left:16px;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(6,10,14,.72);color:#fff;backdrop-filter:blur(10px);cursor:pointer;font-size:19px}
.garage-detail-edit-top{position:absolute;z-index:3;top:18px;right:18px;border:0;background:transparent;color:#eef4f7;font-size:.82rem;cursor:pointer}
.garage-detail-body{position:relative;margin-top:-22px;padding:0 22px 24px;z-index:2}
.garage-detail-title{font-size:1.55rem;line-height:1.2;margin:0;color:#fff}.garage-detail-subtitle{margin-top:8px;color:#97a4af;font-size:.86rem}.garage-detail-color{display:flex;align-items:center;gap:9px;margin-top:12px;color:#e8edf0;font-size:.86rem}.garage-color-dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:linear-gradient(135deg,#d7d9dc,#8f969d)}
.garage-detail-facts{display:grid;grid-template-columns:1fr;gap:0;margin-top:18px;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.018)}.garage-detail-fact{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.garage-detail-fact:last-child{border-bottom:0}.garage-detail-fact span{color:#82909c;font-size:.76rem}.garage-detail-fact strong{font-size:.82rem;font-weight:650;overflow-wrap:anywhere}
.garage-detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.garage-detail-actions .btn{min-height:48px!important;font-size:.76rem!important;border-radius:10px!important}.garage-detail-actions .btn-primary{background:rgba(116,223,255,.1)!important;border:1px solid rgba(116,223,255,.3)!important;color:#a8efff!important}

@media(max-width:720px){
 #vehicles{padding-bottom:18px}
 #vehicles .vehicle-account-grid{gap:12px}
 #vehicles .saved-vehicles-heading{align-items:flex-start;flex-direction:column;margin-bottom:11px;padding:0 2px}
 #vehicles .saved-vehicles-heading h2{font-size:1.28rem}
 #vehicles .saved-vehicles-heading p{text-align:left;font-size:.73rem;line-height:1.45;color:#778692}
 #vehicleList{gap:12px}
 #vehicleList .garage-vehicle-card{display:block;min-height:0;border-radius:16px;background:linear-gradient(180deg,rgba(13,18,24,.99),rgba(7,11,15,.995));box-shadow:0 14px 30px rgba(0,0,0,.24)}
 .garage-vehicle-art{height:164px;min-height:164px}
 .garage-vehicle-art:after{background:linear-gradient(0deg,rgba(7,11,16,.95) 0,rgba(7,11,16,.2) 34%,transparent 68%),linear-gradient(90deg,rgba(7,11,16,.08),transparent 65%)}
 .garage-vehicle-image{object-fit:cover;object-position:center 52%}
 .garage-art-placeholder{font-size:.58rem;letter-spacing:.06em}
 .garage-art-placeholder:before{width:38px;height:38px;margin-bottom:7px;font-size:.95rem}
 .garage-vehicle-copy{padding:14px 14px 13px}
 .garage-vehicle-title{padding-right:22px}
 .garage-vehicle-title strong{font-size:1rem;line-height:1.25}
 .garage-vehicle-subtitle{font-size:.7rem;margin-top:4px;white-space:normal;overflow:visible;text-overflow:clip}
 .garage-vehicle-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;padding-top:10px}
 .garage-spec{min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:rgba(255,255,255,.018)}
 .garage-spec span{display:block!important;font-size:.5rem;margin-bottom:3px}
 .garage-spec strong{font-size:.7rem;color:#cad4db}
 .garage-spec+ .garage-spec strong:before{content:none}
 .garage-vehicle-actions{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px;gap:8px;margin-top:11px}
 .garage-vehicle-actions .garage-history-btn{display:flex!important;justify-content:center;align-items:center;width:100%;min-height:38px!important}
 .garage-vehicle-actions .icon-action{width:38px;height:38px;flex-basis:auto}
 .garage-vehicle-open{right:12px;top:auto;bottom:136px;transform:none;font-size:.9rem}
 #vehicles .garage-add-toggle{min-height:50px;margin-top:14px;border-radius:13px!important}
 #vehicles .garage-add-vehicle-card{border-radius:16px;padding:16px!important}
 .garage-detail-hero{min-height:230px;aspect-ratio:4/3}.garage-detail-body{padding:0 16px 20px}.garage-detail-title{font-size:1.28rem}.garage-detail-fact{grid-template-columns:105px minmax(0,1fr);padding:11px 12px}.garage-detail-actions{grid-template-columns:1fr 1fr}
}


/* Vehicle-specific service history card */
dialog.garage-history-dialog{width:min(620px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 30px));padding:0;border:1px solid rgba(141,183,215,.2);border-radius:18px;background:#080d12;color:#f3f6f8;box-shadow:0 30px 90px rgba(0,0,0,.62);overflow:hidden}
dialog.garage-history-dialog::backdrop{background:rgba(0,4,8,.82);backdrop-filter:blur(8px)}
.garage-history-shell{display:flex;flex-direction:column;max-height:min(760px,calc(100dvh - 30px))}.garage-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 20px 15px;border-bottom:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(17,25,34,.98),rgba(8,13,18,.98))}.garage-history-head h3{margin:4px 0 0;color:#fff;font-size:1.25rem}.garage-history-close{width:36px;height:36px;flex:0 0 36px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.035);color:#fff;font-size:20px;cursor:pointer}.garage-history-list{display:grid;gap:9px;padding:14px;overflow:auto}.garage-history-order{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;padding:14px 15px;border:1px solid rgba(147,184,211,.14);border-radius:12px;background:linear-gradient(145deg,rgba(16,23,31,.96),rgba(9,14,20,.98));color:#eef4f7;cursor:pointer;transition:border-color .18s ease,transform .18s ease}.garage-history-order:hover{border-color:rgba(116,223,255,.34);transform:translateY(-1px)}.garage-history-order>div{display:grid;gap:4px}.garage-history-ro-number{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#79dff7}.garage-history-order strong{font-size:.9rem}.garage-history-order small{color:#8695a1;font-size:.72rem}.garage-history-chevron{font-size:1.4rem;color:#7edff7}.garage-history-empty{display:grid;gap:7px;padding:30px 18px;text-align:center;color:#8f9da8}.garage-history-empty strong{color:#e8eef2;font-size:1rem}
@media(max-width:720px){dialog.garage-history-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 22px);border-radius:15px}.garage-history-head{padding:17px 16px 13px}.garage-history-list{padding:11px}.garage-history-order{padding:13px}}