@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;600;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans Georgian',sans-serif;background:#EEF1F6;color:#25324B;display:flex;min-height:100vh}
a{color:inherit}

/* ---- sidebar ---- */
aside{width:290px;background:#25324B;color:#E7ECF5;padding:26px 22px;flex-shrink:0;display:flex;flex-direction:column}
.logo{font-weight:800;font-size:17px;margin-bottom:24px}
.logo a{text-decoration:none}
.logo span{color:#5B8DEF}
aside label{display:block;font-size:10.5px;letter-spacing:1.5px;color:#8FA0BE;text-transform:uppercase;margin:16px 0 6px}
aside select,aside input{width:100%;background:#2F3E5C;border:1px solid #3D4E70;color:#E7ECF5;padding:12px;border-radius:8px;font-family:inherit;font-size:13.5px}
aside select:disabled{opacity:.5}
aside .find{width:100%;margin-top:22px;background:#5B8DEF;border:none;color:#fff;font-weight:800;padding:14px;border-radius:8px;font-family:inherit;font-size:14px;cursor:pointer}
aside .find:hover{background:#3F74E3}
aside .mycar{width:100%;margin-top:10px;background:transparent;border:1px dashed #3D4E70;color:#8FA0BE;padding:12px;border-radius:8px;font-family:inherit;font-size:12.5px;cursor:pointer;text-align:center;text-decoration:none;display:block}
.navlinks{margin-top:26px;border-top:1px solid #3D4E70;padding-top:18px}
.navlinks a{display:block;color:#B9C6DE;text-decoration:none;font-size:13px;padding:8px 0}
.navlinks a:hover{color:#fff}
.navlinks a.admin{color:#F0A93C;font-weight:600}
.sidefoot{margin-top:auto;font-size:11px;color:#6B7C9C;padding-top:20px}

/* ---- main ---- */
main{flex:1;padding:26px 32px;max-width:100%}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.topbar h1{font-size:20px;font-weight:800}
.topbar .auth button,.topbar .auth a{font-family:inherit;font-size:13px;padding:10px 18px;border-radius:8px;border:1px solid #C9D3E4;background:#fff;cursor:pointer;margin-left:8px;color:#25324B;text-decoration:none;display:inline-block}
.topbar .reg{background:#25324B;color:#fff;border-color:#25324B;font-weight:700}
.userchip{font-size:13px;color:#41506B}
.userchip b{color:#25324B}

/* ---- notification bell ---- */
.topbar .auth a.notif{position:relative;width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-left:8px}
.topbar .auth a.notif:hover{border-color:#5B8DEF}
.topbar .auth a.notif.on{border-color:#E5484D;color:#E5484D;animation:notifpulse 1.6s ease-in-out infinite}
.notif-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:#E5484D;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px #fff}
@keyframes notifpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{background:#fff;border-radius:14px;padding:18px;border:1px solid #E1E7F0}
.kpi small{font-size:11px;color:#7385A3;letter-spacing:1px;text-transform:uppercase}
.kpi b{display:block;font-size:20px;font-weight:800;margin-top:6px}
.kpi .gauge{font-size:26px;color:#5B8DEF}

h2{font-size:15px;font-weight:800;margin:26px 0 12px;color:#25324B}
h2 span{color:#7385A3;font-weight:400;font-size:12.5px}

/* ---- ad banner ---- */
.ad{display:flex;gap:14px;align-items:center;background:linear-gradient(90deg,#25324B,#33456A);color:#E7ECF5;border-radius:14px;padding:16px 20px;margin:18px 0;text-decoration:none}
.ad .tag{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8FA0BE;border:1px solid #4A5D82;padding:3px 7px;border-radius:5px}
.ad b{font-size:14.5px}
.ad p{font-size:12.5px;color:#B9C6DE;margin-top:3px}

/* ---- recommendation tables ---- */
.appgroup{margin-bottom:22px}
.table{background:#fff;border-radius:14px;border:1px solid #E1E7F0;overflow:hidden}
.trow{display:grid;grid-template-columns:66px 1.5fr 104px 1.15fr 78px 118px;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid #EEF1F6;font-size:13.5px}
.table.no-visc .trow{grid-template-columns:1.5fr 104px 1.15fr 78px 118px}
.ratecol{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.ratecol .stars{font-size:14px;color:#F0A93C;letter-spacing:1px}
.rcount{font-size:10.5px;color:#7385A3;text-decoration:none}
.rcount:hover{color:#2F5FCB}
.rate-link{font-size:11px;color:#98A6C0;text-decoration:none}
.rate-link:hover{color:#2F5FCB}
.vehmeta{display:flex;flex-wrap:wrap;gap:8px 20px;background:#fff;border:1px solid #E1E7F0;border-radius:14px;padding:14px 18px;margin-bottom:14px;font-size:13px;color:#54637F}
.vehmeta b{color:#25324B;font-weight:800;font-weight:600}
.trow:last-child{border-bottom:none}
.trow.head{background:#F7F9FC;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#7385A3;font-weight:600}
.visc{background:#EAF0FD;color:#2F5FCB;font-weight:800;padding:5px 8px;border-radius:6px;text-align:center;font-size:12px}
.visc.na{background:#F0F2F6;color:#8091AD}
.pname{font-weight:800}
.pname a{text-decoration:none}
.pname a:hover{color:#2F5FCB}
.brandtag{font-size:11px;color:#7385A3;font-weight:400}
.spec{font-size:12px;color:#7385A3}
.price{font-weight:800;font-size:16px}
.price.none{color:#B0641E;font-size:12.5px;font-weight:600}
.stock{color:#1E9E62;font-size:12px;font-weight:600}
.stock.out{color:#C34}
.cart{background:#5B8DEF;color:#fff;border:none;border-radius:8px;padding:10px 14px;font-family:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.cart:hover{background:#3F74E3}
.grouptitle{display:flex;align-items:center;gap:8px;margin:24px 0 10px}
.grouptitle h2{margin:0}
.grouptitle .cnt{font-size:11px;background:#E1E7F0;color:#54637F;padding:2px 8px;border-radius:20px}

/* ---- reviews ---- */
.reviews{background:#fff;border-radius:14px;border:1px solid #E1E7F0;padding:22px;margin:26px 0 40px}
.reviews h3{font-size:15px;font-weight:800}
.reviews h3 span{color:#7385A3;font-weight:400;font-size:12.5px}
.review{padding:14px 0;border-bottom:1px solid #EEF1F6;font-size:13.5px}
.review:last-child{border-bottom:none}
.who{font-weight:800;font-size:12.5px}.who span{font-weight:400;color:#7385A3}
.stars{color:#F0A93C;letter-spacing:1px}
.review p{margin-top:5px;color:#41506B}
.locked{margin-top:14px;background:#F7F9FC;border-radius:10px;padding:12px 16px;font-size:12.5px;color:#41506B}
.locked a{color:#2F5FCB;font-weight:800;text-decoration:none}
.revctx{margin-top:16px;background:#EAF0FD;border:1px solid #CFE0FB;color:#2F5FCB;border-radius:10px;padding:11px 15px;font-size:13px}

/* ---- generic cards / forms ---- */
.card{background:#fff;border-radius:14px;border:1px solid #E1E7F0;padding:22px;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#7385A3;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #C9D3E4;border-radius:8px;font-family:inherit;font-size:14px;color:#25324B}
.field textarea{min-height:90px;resize:vertical}
.btn{background:#5B8DEF;color:#fff;border:none;border-radius:8px;padding:12px 20px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#3F74E3}
.btn.dark{background:#25324B}
.btn.ghost{background:#fff;color:#25324B;border:1px solid #C9D3E4}
.btn.danger{background:#E5484D}
.btn.ok{background:#1E9E62}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:7px}
.muted{color:#7385A3;font-size:13px}
.center-wrap{margin:auto;max-width:420px;width:100%}
.center-wrap .card{padding:30px}
.center-wrap h1{font-size:22px;margin-bottom:6px}

/* ---- flash ---- */
.flashes{margin-bottom:16px}
.flash{padding:12px 16px;border-radius:10px;font-size:13.5px;margin-bottom:8px}
.flash.ok{background:#E4F6EC;color:#187a4b;border:1px solid #B7E4CA}
.flash.warn{background:#FDECEC;color:#B4292E;border:1px solid #F3C6C7}

/* ---- rating input ---- */
.ratepick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;font-size:26px}
.ratepick input{display:none}
.ratepick label{color:#D5DCE8;cursor:pointer}
.ratepick input:checked ~ label,.ratepick label:hover,.ratepick label:hover ~ label{color:#F0A93C}

/* ---- admin ---- */
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.tabbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabbar a{font-size:13px;padding:9px 15px;border-radius:8px;background:#fff;border:1px solid #E1E7F0;text-decoration:none;color:#41506B}
.tabbar a.active{background:#25324B;color:#fff;border-color:#25324B;font-weight:700}
.opbar{background:#EAF0FB;border:1px solid #C7D6F5;color:#2E4C86;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.inline.flex{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.newbox{margin-bottom:16px}
.newbox>summary{display:inline-block;list-style:none;cursor:pointer}
.newbox>summary::-webkit-details-marker{display:none}
.newbox>summary::marker{content:''}

/* collapsible order rows */
.orderrow{background:#fff;border:1px solid #E1E7F0;border-radius:14px;margin-bottom:10px;overflow:hidden}
.orderrow>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px}
.orderrow>summary::-webkit-details-marker{display:none}
.orderrow>summary::marker{content:''}
.orderrow>summary:hover{background:#F7F9FD}
.orderrow[open]>summary{border-bottom:1px solid #EEF1F6}
.orderrow .ocaret{color:#8FA0BE;font-size:12px;transition:transform .15s}
.orderrow[open] .ocaret{transform:rotate(90deg)}
.orderrow .onum{font-size:15px}
.orderrow .ocust{color:#41506B;font-size:13px}
.orderrow .odate{font-size:12px}
.orderrow .ototal{margin-left:auto;font-size:15px;white-space:nowrap}
.orderrow .odetails{padding:14px 16px}
/* status accents: received/fulfilled → green, rejected/cancelled → red */
.orderrow.ok{border-left:4px solid #1E9E62}
.orderrow.ok>summary{background:#F2FBF6}
.orderrow.ok>summary:hover{background:#E7F6EF}
.orderrow.bad{border-left:4px solid #E5484D}
.orderrow.bad>summary{background:#FDF2F2}
.orderrow.bad>summary:hover{background:#FBE8E9}

/* order product picker */
.opitem{display:grid;gap:8px;align-items:center;background:#F7F9FD;border:1px solid #E1E7F0;border-radius:9px;padding:8px 10px;margin-bottom:8px;transition:background .3s}
.opitem b{font-size:13.5px;color:#25324B}
.opitem input{padding:7px 8px;border:1px solid #C9D3E4;border-radius:7px;font-family:inherit;font-size:13.5px;width:100%}
.opitem input:focus{outline:none;border-color:#5B8DEF}
.opitem .rm{border:none;background:#EDF1F8;color:#8091AD;border-radius:7px;cursor:pointer;padding:8px 11px;font-family:inherit;font-weight:700;line-height:1}
.opitem .rm:hover{background:#FBEEEA;color:#C0603A}
#opresults .popt{display:flex;justify-content:space-between;align-items:center;gap:12px}
#opresults .opprice{color:#1E9E62;font-weight:700;font-size:12.5px;white-space:nowrap}
table.grid{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid #E1E7F0;font-size:13px}
table.grid th{background:#F7F9FC;text-align:left;padding:12px 14px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#7385A3}
table.grid td{padding:11px 14px;border-top:1px solid #EEF1F6;vertical-align:middle}
table.grid input,table.grid select{padding:8px 9px;border:1px solid #C9D3E4;border-radius:7px;font-family:inherit;font-size:13px}
table.grid input.w-price{width:80px}
table.grid input.w-sm{width:64px}
.pill{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:700}
.pill.eng{background:#EAF0FD;color:#2F5FCB}
.pill.gray{background:#EEF1F6;color:#54637F}
.pill.warn{background:#FFF3E0;color:#B26A00}
.inline{display:inline}
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select{padding:10px 12px;border:1px solid #C9D3E4;border-radius:8px;font-family:inherit;font-size:13px}
.rowactions{display:flex;gap:6px;align-items:center}

/* ---- VIN decoder ---- */
#vinbox .find{margin-top:10px}
.vindivider{display:flex;align-items:center;gap:10px;margin:20px 0 4px;color:#6B7C9C;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.vindivider::before,.vindivider::after{content:"";flex:1;height:1px;background:#3D4E70}
.vinresult{margin-bottom:18px}
.vincard{border-color:#C7D6F5}
.vinhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vinhead h2{margin:0}
.vinhead code{background:#EEF3FF;color:#3F74E3;padding:6px 10px;border-radius:7px;font-size:13px;letter-spacing:1px}
.vinspecs{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 4px}
.vinspecs span{display:flex;flex-direction:column;gap:2px}
.vinspecs small{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#7385A3}
.vinspecs b{color:#25324B;font-size:14px;font-weight:700}
.vinmatch-title{font-size:14px;margin:20px 0 10px;color:#25324B;font-weight:800}
.vinmatches{display:flex;flex-direction:column;gap:8px}
.vinmatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-decoration:none;background:#F7F9FD;border:1px solid #E1E7F0;border-radius:10px;padding:12px 14px;color:#25324B;transition:.15s}
.vinmatch:hover{border-color:#5B8DEF;background:#fff}
.vinmatch.best{background:#EEF5FF;border-color:#5B8DEF}
.vinmatch b{font-size:13.5px}
.vinmatch .besttag{width:100%;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#3F74E3;font-weight:800}
.vinmatch .why{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.vinmatch .why i{font-style:normal;font-size:10.5px;background:#E4EBF7;color:#4A5B7A;padding:2px 8px;border-radius:20px}
.vinmatch .why em{font-style:normal;font-size:11px;color:#7385A3}
.vinmatch .go{width:100%;font-size:12px;color:#3F74E3;font-weight:700}
.vinhint{margin-top:12px}
.warn{color:#C0603A}

/* ---- admin inline editing on the recommendation page ---- */
.adminbanner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#FFF6E6;border:1px solid #F0C97B;color:#8A6A24;border-radius:12px;padding:11px 16px;margin:14px 0;font-size:13px}
.adminbanner a{margin-left:auto;color:#3F74E3;font-weight:700;text-decoration:none}
.admintools{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:2px 2px 12px;margin-top:-4px;opacity:.72;transition:opacity .15s}
.trow:hover + .admintools,.admintools:hover{opacity:1}
.lnk{display:inline-flex;align-items:center;gap:5px;background:#EDF1F8;border:1px solid transparent;color:#5B6B85;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.2px;padding:5px 12px;border-radius:20px;cursor:pointer;transition:.15s;line-height:1}
.lnk:hover{background:#E2EAF7;color:#3F74E3}
.lnk.danger{background:#FBEEEA;color:#C0603A}
.lnk.danger:hover{background:#F6DDD4;color:#A94A28}
.adminedit{background:#F5F8FE;border:1px solid #D3E0F5;border-left:3px solid #5B8DEF;border-radius:10px;padding:16px;margin:2px 0 16px;box-shadow:0 4px 14px rgba(37,50,75,.05)}
.aegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 12px}
.aegrid label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#7385A3;position:relative}
.aegrid label.wide{grid-column:span 2}
.aegrid input,.aegrid select{padding:9px 11px;border:1px solid #C9D3E4;border-radius:8px;font-family:inherit;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:#25324B;background:#fff}
.aegrid input:focus,.aegrid select:focus{outline:none;border-color:#5B8DEF;box-shadow:0 0 0 3px rgba(91,141,239,.15)}
.presults{position:relative}
.pdrop{position:absolute;z-index:9;background:#fff;border:1px solid #C9D3E4;border-radius:8px;width:100%;max-height:220px;overflow:auto;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.popt{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #EEF1F6}
.popt:hover{background:#EEF5FF}
.popt span{color:#7385A3}
.aeactions{display:flex;align-items:center;gap:16px;margin-top:12px}

@media(max-width:900px){
  body{flex-direction:column}
  aside{width:100%}
  .aegrid{grid-template-columns:1fr 1fr}
  .aegrid label.wide{grid-column:span 2}
  .kpis,.admin-grid{grid-template-columns:repeat(2,1fr)}
  .trow{grid-template-columns:56px 1fr 92px;grid-auto-rows:auto}
  .table.no-visc .trow{grid-template-columns:1fr 92px}
  .trow .ratecol{display:none}
  .trow .spec,.trow .stock{display:none}
}

/* ==========================================================================
   GARAGE — service tracking & reminders (professional layout)
   ========================================================================== */

/* --- part-request CTA banner --- */
.garage-cta{background:linear-gradient(105deg,#EEF3FE,#F7FAFF);border:1px solid #CFE0FB;border-radius:16px;margin-bottom:20px;overflow:hidden}
.garage-cta>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px}
.garage-cta>summary::-webkit-details-marker{display:none}
.garage-cta>summary::marker{content:''}
.garage-cta .ico{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:#5B8DEF;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 12px rgba(91,141,239,.35)}
.garage-cta .txt{flex:1;min-width:200px}
.garage-cta .txt b{font-size:15.5px;color:#2A4B8D;display:block}
.garage-cta .txt span{font-size:12.5px;color:#5B6B85}
.garage-cta .chev{border:1px solid #B9D0F5;background:#fff;color:#2F5FCB;font-weight:700;font-size:13px;padding:9px 16px;border-radius:9px;white-space:nowrap}
.garage-cta[open] .chev{background:#2F5FCB;color:#fff;border-color:#2F5FCB}
.garage-cta .cta-form{padding:4px 20px 20px;border-top:1px solid #DCE7FA}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* --- vehicle card --- */
.veh{background:#fff;border:1px solid #E1E7F0;border-radius:16px;margin-bottom:20px;overflow:hidden;box-shadow:0 2px 10px rgba(37,50,75,.04)}
.veh-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 22px;background:linear-gradient(180deg,#FBFCFE,#F4F7FC);border-bottom:1px solid #EAEFF6}
.veh-ava{width:50px;height:50px;border-radius:13px;background:#25324B;color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.veh-title{flex:1;min-width:170px}
.veh-title h2{margin:0;font-size:17px;font-weight:800}
.veh-title p{margin:3px 0 0;font-size:12.5px;color:#7385A3}
.veh-sum{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.veh-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sum-pill{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.sum-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sum-pill.overdue{background:#FDECEC;color:#C0303A}
.sum-pill.soon{background:#FFF4E1;color:#B26A00}
.sum-pill.ok{background:#E4F6EC;color:#1B7A48}

/* --- maintenance panel --- */
.svc-panel{padding:16px 22px 20px}
.svc-bar-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.svc-bar-top .ttl{font-size:11px;font-weight:800;color:#54637F;text-transform:uppercase;letter-spacing:1.2px}
.odo{display:flex;align-items:flex-end;gap:8px}
.odo .field{margin:0}
.odo .field label{margin-bottom:5px}
.odo input{width:150px;padding:9px 11px;border:1px solid #C9D3E4;border-radius:8px;font-family:inherit;font-size:14px}
.odo .hint{font-size:11.5px;color:#98A6C0;max-width:200px;line-height:1.3}

.svc-list{display:flex;flex-direction:column;gap:10px}
.svc-item{border:1px solid #E7ECF3;border-left:4px solid #CBD5E4;border-radius:12px;background:#FCFDFF;overflow:hidden;transition:box-shadow .15s}
.svc-item:hover{box-shadow:0 3px 12px rgba(37,50,75,.06)}
.svc-item.is-overdue{border-left-color:#E5484D;background:#FFFBFB}
.svc-item.is-soon{border-left-color:#E7A93C;background:#FFFDF8}
.svc-item.is-ok{border-left-color:#1E9E62}
.svc-item.is-none{border-left-color:#CBD5E4}
.svc-row{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr 1fr minmax(120px,1.05fr) minmax(150px,180px) auto;gap:14px;align-items:center;padding:13px 16px}
.svc-comp{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;color:#25324B}
.svc-comp .ic{width:32px;height:32px;border-radius:9px;background:#EEF3FE;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.svc-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.svc-fact .k{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:#9AA8C0;font-weight:700}
.svc-fact .v{font-size:13px;color:#3B4A64;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-fact .v.dim{color:#BAC3D2;font-weight:400}
.svc-fact .v a{color:#2F5FCB;text-decoration:none;font-weight:700}
.svc-fact .v a:hover{text-decoration:underline}
.svc-status{display:flex;flex-direction:column;gap:7px}
.svc-badge{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;align-self:flex-start}
.svc-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.svc-badge.overdue{background:#FDECEC;color:#C0303A}
.svc-badge.soon{background:#FFF4E1;color:#B26A00}
.svc-badge.ok{background:#E4F6EC;color:#1B7A48}
.svc-badge.none{background:#EEF1F6;color:#8091AD}
.svc-badge-sub{font-size:11px;color:#8091AD;line-height:1.3}
.svc-prog{height:5px;border-radius:4px;background:#E9EEF5;overflow:hidden}
.svc-prog i{display:block;height:100%;border-radius:4px}
.svc-edit-btn{border:1px solid #D8E0EC;background:#fff;color:#4A5B7A;font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
.svc-edit-btn:hover{border-color:#5B8DEF;color:#2F5FCB;background:#F5F9FF}

.svc-edit{border-top:1px dashed #DCE4F0;background:#F6FAFE;padding:16px}
.svc-edit .eg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px}
.svc-edit .field{margin-bottom:12px}
.svc-edit .field:last-of-type{margin-bottom:0}
.svc-hist{margin-top:14px}
.svc-hist .h-ttl{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#9AA8C0;font-weight:700;margin-bottom:4px}
.svc-hist .h-row{padding:7px 0;border-top:1px solid #E9EEF6;color:#54637F;font-size:12.5px;display:flex;gap:8px;flex-wrap:wrap}
.svc-hist .h-row .hd{color:#25324B;font-weight:700}

.garage-empty{padding:30px;text-align:center}

/* --- VIN chip + gated (locked) car --- */
.vin-chip{display:inline-flex;align-items:center;gap:6px;background:#EEF3FE;color:#2F5FCB;border:1px solid #D3E0F5;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.8px;font-family:ui-monospace,'SF Mono',Menlo,monospace}
.vin-edit-link{font-size:11.5px;color:#7385A3;cursor:pointer;margin-left:8px;text-decoration:underline}
.vin-edit-link:hover{color:#2F5FCB}
.veh-lock{padding:20px 22px;background:linear-gradient(180deg,#FFFDF6,#FFF8E9);border-top:1px solid #F0E4C4}
.veh-lock .lock-h{display:flex;align-items:center;gap:9px;font-weight:800;color:#8A6A24;font-size:15px;margin-bottom:6px}
.veh-lock p{font-size:13px;color:#7A6A44;margin-bottom:14px;max-width:620px}
.vin-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.vin-form .field{margin:0}
.vin-form input{width:300px;max-width:100%;text-transform:uppercase;letter-spacing:1.5px;font-family:ui-monospace,'SF Mono',Menlo,monospace}
.veh-vinedit{padding:16px 22px;background:#F6FAFE;border-top:1px solid #E1E7F0}
.svc-pending{background:#FFF8E9;border:1px solid #F0E4C4;color:#8A6A24;border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px}

@media(max-width:900px){
  .cta-grid{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr 1fr;gap:10px 12px}
  .svc-comp{grid-column:span 2}
  .svc-status{grid-column:span 2}
  .svc-edit-btn{grid-column:span 2}
  .svc-edit .eg{grid-template-columns:1fr}
}