*{box-sizing:border-box}
:root{--bg:#071019;--side:#08131d;--panel:#10202c;--panel2:#142735;--line:#2d485a;--text:#f3f6f8;--muted:#93a7b5;--yellow:#ffd400;--green:#24cf7b;--orange:#f1a62b;--red:#ff4654}
body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif}
button,input,select{font:inherit}button{cursor:pointer}
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--side);border-right:1px solid #1e3342;padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{font-size:29px;font-weight:900;font-style:italic;color:var(--yellow)}.logo span{color:white}.sub{font-size:8px;color:#9fb0bb;margin-top:3px}
.sidebar nav{display:grid;gap:6px;margin-top:28px}.nav{background:transparent;border:0;color:#dbe4e9;text-align:left;padding:12px 13px;border-radius:8px}.nav:hover{background:#102431}.nav.active{background:var(--yellow);color:#111;font-weight:800}
.side-foot{margin-top:auto}.intern{display:inline-block;border:1px solid #395365;color:#9eb0bc;border-radius:999px;padding:5px 8px;font-size:10px;margin-bottom:12px}.side-foot strong{display:block;color:var(--yellow);font-style:italic;font-size:19px}
main{min-width:0}.topbar{height:70px;padding:12px 24px;border-bottom:1px solid #1c303f;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#071019e8;backdrop-filter:blur(6px);z-index:5}
.topbar input{width:min(590px,58%);background:#10212e;border:1px solid #2d4859;color:white;border-radius:9px;padding:11px 13px;outline:0}.user{display:flex;align-items:center;gap:9px}.user>span{width:38px;height:38px;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center;font-weight:900}.user small{display:block;color:var(--muted)}
.hero{margin:18px 24px 12px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#0d1d29,#101d27);padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px}.hero small,.section-head small,.panel>small{color:var(--yellow);font-weight:800;letter-spacing:1px}.hero h1{margin:6px 0;font-size:38px}.hero p{margin:0;color:#c7d3da}
.hero-numbers{display:flex;gap:10px}.hero-numbers div{min-width:100px;border:1px solid #385466;border-radius:10px;padding:12px;background:#0b1923}.hero-numbers b{font-size:27px;display:block}.hero-numbers span{font-size:11px;color:#9fb1bc}.hero-numbers .danger{border-color:#94404b}
.critical{margin:0 24px 14px;border:1px solid #a3434d;background:#2a1117;border-radius:10px;padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:12px}.critical span{display:block;color:#d8b8bd;font-size:12px;margin-top:2px}.critical button,.panel button{background:#10212d;color:white;border:1px solid #3d586b;border-radius:8px;padding:8px 11px}.critical button:hover,.panel button:hover{border-color:var(--yellow);color:var(--yellow)}
.summary{margin:0 24px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sum{background:linear-gradient(#152735,#101e29);border:1px solid var(--line);border-radius:10px;padding:16px}.sum b{display:block;font-size:29px}.sum span{color:var(--muted);font-size:12px}
.section{scroll-margin-top:84px}.section-head{margin:0 24px 12px;display:flex;justify-content:space-between;align-items:end}.section-head h2{margin:4px 0 0;font-size:27px}.actions{display:flex;gap:8px}.primary,.toggle{padding:10px 13px;border-radius:8px}.primary{background:var(--yellow);border:1px solid var(--yellow);font-weight:800}.toggle{background:#10212d;border:1px solid #395568;color:white}.toggle.active{color:var(--yellow);border-color:var(--yellow)}
.vehicle-grid{margin:0 24px 18px;display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:13px}.vehicle-grid.list{display:block}.vehicle-grid.list .card{display:grid;grid-template-columns:220px 1fr;margin-bottom:12px}.vehicle-grid.list .photo{height:100%;min-height:150px}
.card{background:linear-gradient(#172a38,#101d27);border:1px solid #324c5e;border-radius:11px;overflow:hidden}.photo{height:145px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#152a38,#0f1e29)}
.placeholder{border:1px dashed #5a7587;border-radius:9px;padding:15px 20px;text-align:center;color:#9fb1bc}.placeholder b{display:block;color:white;font-size:13px;margin-bottom:4px}.placeholder span{font-size:11px}
.status{position:absolute;top:10px;left:10px;padding:6px 9px;border-radius:7px;font-size:11px;font-weight:800}.status.green{background:var(--green)}.status.orange{background:var(--orange);color:#2a1b00}.status.red{background:var(--red)}
.card-body{padding:14px}.title{display:flex;justify-content:space-between;gap:8px;align-items:center}.title h3{margin:0;font-size:18px}.plate{background:#eef2f4;color:#14212a;padding:3px 7px;border-radius:5px;font-weight:800;font-size:12px}.meta{font-size:12px;color:#c5d0d7;margin-top:5px}.service{margin-top:12px;display:grid;gap:8px}.row{display:flex;justify-content:space-between;font-size:13px}.left{display:flex;align-items:center;gap:8px}.dot{width:9px;height:9px;border-radius:50%}.dot.green{background:var(--green)}.dot.orange{background:var(--orange)}.dot.red{background:var(--red)}.vgreen{color:#63dfa3}.vorange{color:#ffd36c}.vred{color:#ff6a74}
.card-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}.open{border:0;background:var(--yellow);font-weight:800;border-radius:7px;padding:9px}.more{width:42px;border:1px solid #456074;background:#122431;color:white;border-radius:7px}
.panels{margin:0 24px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.panel{scroll-margin-top:84px;background:#10202c;border:1px solid #2d4758;border-radius:11px;padding:14px;min-height:205px;display:flex;flex-direction:column}.panel h3{margin:4px 0 8px}.line{padding:10px 0;border-bottom:1px solid #1f3442}.line b,.line span{display:block;font-size:12px}.line span{color:var(--muted);margin-top:3px}.panel button{margin-top:auto}
footer{border-top:1px solid #1e3442;padding:14px 24px;color:#8fa4b2;font-size:11px}
dialog{border:0;background:transparent;color:white;width:min(760px,calc(100% - 30px));padding:0}dialog::backdrop{background:#000b}.modal-card{position:relative;background:#0d1b26;border:1px solid #365164;border-radius:13px;padding:24px}.x{position:absolute;right:12px;top:8px;background:transparent;border:0;color:white;font-size:29px}.modal-card h2{margin:4px 0 4px}.muted{color:var(--muted)}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.box{background:#132532;border:1px solid #30495a;border-radius:9px;padding:13px}.box h4{margin:0 0 8px;color:var(--yellow)}.box ul{margin:0;padding-left:18px}.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick button{background:#10212d;color:white;border:1px solid #3d586b;border-radius:8px;padding:10px;text-align:left}.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form label{font-size:12px;color:#b8c6cf}.form input,.form select{width:100%;margin-top:5px;background:#0d1b26;border:1px solid #3a5668;color:white;border-radius:8px;padding:9px}.full{grid-column:1/-1}.save{margin-top:14px;width:100%;background:var(--yellow);border:0;border-radius:8px;padding:11px;font-weight:800}
@media(max-width:1150px){.vehicle-grid{grid-template-columns:repeat(2,1fr)}.summary,.panels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar nav{grid-template-columns:repeat(2,1fr)}.side-foot{display:none}.topbar{position:static;flex-direction:column;align-items:stretch;height:auto;gap:10px}.topbar input{width:100%}.hero{flex-direction:column;align-items:flex-start}.hero-numbers{width:100%;flex-wrap:wrap}.hero-numbers div{flex:1}.section-head{flex-direction:column;align-items:stretch;gap:10px}}
@media(max-width:560px){.vehicle-grid,.summary,.panels{grid-template-columns:1fr}.hero,.critical,.summary,.section-head,.vehicle-grid,.panels{margin-left:14px;margin-right:14px}.vehicle-grid.list .card{display:block}.modal-grid,.form{grid-template-columns:1fr}}

.delete-btn{
  border:1px solid #7e3640;
  background:#2a1117;
  color:#ff8790;
  border-radius:8px;
  padding:10px;
  text-align:left
}
.delete-btn:hover{
  border-color:var(--red);
  color:#fff;
  background:#3a141c
}
.warning-box{
  border:1px solid #7e3640;
  background:#271116;
  color:#efc6ca;
  border-radius:9px;
  padding:12px;
  margin:14px 0
}
.warning-box strong{color:#fff}
.confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px
}
.confirm-delete{
  border:0;
  background:var(--red);
  color:#fff;
  border-radius:8px;
  padding:11px;
  font-weight:800
}
.cancel-delete{
  border:1px solid #3d586b;
  background:#10212d;
  color:#fff;
  border-radius:8px;
  padding:11px
}

.box ul li{margin-bottom:9px}
.box ul li:last-child{margin-bottom:0}

.photo.has-image{
  background:#0d1a23;
}
.vehicle-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.24));
  pointer-events:none;
}
.image-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.image-actions button{
  border:1px solid #3d586b;
  background:#10212d;
  color:#fff;
  border-radius:8px;
  padding:10px;
}
.image-actions button:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}
.image-actions .remove-image{
  border-color:#7e3640;
  background:#2a1117;
  color:#ff8790;
}
.file-note{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
}

.placeholder-btn{
  cursor:pointer;
  background:rgba(0,0,0,.08);
}
.placeholder-btn:hover{
  border-color:var(--yellow);
  color:var(--yellow);
}
.placeholder-btn:hover b{color:var(--yellow)}

.top-actions{display:flex;align-items:center;gap:12px}
.info-btn{
  border:1px solid #3d586b;
  background:#10212d;
  color:#dbe5ea;
  border-radius:8px;
  padding:9px 11px
}
.info-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.explain-panel p{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin:4px 0 14px
}
.explain-panel{cursor:pointer}
.explain-panel:hover{border-color:#4e6a7d}
.info-steps{display:grid;gap:10px;margin-top:16px}
.info-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
  background:#132532;
  border:1px solid #30495a;
  border-radius:9px;
  padding:11px
}
.info-step b{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--yellow);color:#111
}
.info-step strong{display:block;margin-bottom:3px}
.info-step span{color:var(--muted);font-size:12px;line-height:1.45}
.legend{display:grid;gap:8px;margin-top:14px}
.legend-row{display:flex;gap:9px;align-items:center;color:#cbd5dc;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:50%}
@media(max-width:760px){.top-actions{justify-content:space-between}.info-btn{flex:1}}

.info-row{cursor:pointer;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.info-row:hover{background:#172c39}