:root{
  --bg:#f4f6f8;
  --dark:#0f172a;
  --panel:#111827;
  --card:#ffffff;
  --text:#111827;
  --muted:#475569;
  --primary:#f97316;
  --primary-dark:#ea580c;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --radius:18px;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg)!important;color:var(--text)!important;font-size:15px}
a{text-decoration:none} a:hover{text-decoration:none}
.app-shell{min-height:100vh;display:grid;grid-template-columns:286px minmax(0,1fr);background:var(--bg)}
.sidebar{background:linear-gradient(180deg,#020617,#111827);color:#fff;padding:24px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px}
.brand{display:flex;align-items:center;gap:12px;color:#fff!important}.brand:hover{color:#fff}.brand-icon{width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,var(--primary),#facc15);display:grid;place-items:center;font-size:24px;box-shadow:0 12px 28px rgba(249,115,22,.28)}.brand strong{display:block;color:#fff;font-size:18px;line-height:1}.brand small{display:block;color:#cbd5e1;font-size:12px;margin-top:4px}
.side-nav{display:grid;gap:8px}.side-nav a{color:#dbeafe!important;padding:12px 14px;border-radius:15px;display:flex;align-items:center;gap:10px;font-weight:800;transition:.18s}.side-nav a span{width:22px;text-align:center}.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.12);color:#fff!important}.sidebar-footer{margin-top:auto;color:#cbd5e1;font-size:13px;display:flex;align-items:center;gap:8px}.status-dot{width:10px;height:10px;background:#22c55e;border-radius:999px;box-shadow:0 0 0 5px rgba(34,197,94,.14)}
.main-content{min-width:0;padding:26px}.topbar{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px 20px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,520px) auto;gap:18px;align-items:center;margin-bottom:22px}.topbar h1{font-size:28px;margin:0;color:#0f172a;font-weight:900;letter-spacing:-.04em}.eyebrow{color:var(--primary-dark);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-bottom:4px}.top-search{gap:10px}.top-search input{height:48px;border:1px solid var(--line);border-radius:16px;padding:0 14px;width:100%;color:#111827;background:#fff}.top-search button{height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;font-weight:900;padding:0 18px}.user-chip{display:flex;align-items:center;gap:10px;white-space:nowrap}.user-chip .avatar{width:42px;height:42px;border-radius:15px;background:#111827;color:#fff;display:grid;place-items:center;font-weight:900}.user-chip strong{display:block;color:#111827;line-height:1}.user-chip small{display:block;color:#64748b;font-size:12px}.user-chip a{font-weight:900;color:var(--primary-dark)!important}.content-wrap{max-width:1360px;margin:0 auto}.mobile-header{background:#111827;color:#fff;border-radius:18px;margin-bottom:14px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}.mobile-header a{color:#fb923c;font-weight:900}
.card,.stat-card,.table-wrap,.checklist-item,.diagram-card{border:1px solid var(--line)!important;border-radius:var(--radius)!important;background:#fff!important;box-shadow:var(--shadow);color:#111827}.card-body{padding:22px}.shadow-sm{box-shadow:var(--shadow)!important}.border-0{border:1px solid var(--line)!important}.bg-light{background:var(--bg)!important}.text-muted{color:#475569!important}.form-label,label{font-weight:800;color:#111827}.form-control,.form-select,input,select,textarea{border:1px solid #d1d5db!important;border-radius:14px!important;padding:12px 14px!important;color:#111827!important;background:#fff!important}.form-control::placeholder,textarea::placeholder{color:#64748b!important}.input-group .form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group .btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.btn{border-radius:14px!important;font-weight:900!important;padding:.72rem 1rem}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark))!important;border:0!important;color:#fff!important}.btn-outline-primary{border-color:#fed7aa!important;color:#c2410c!important;background:#fff7ed!important}.btn-outline-primary:hover{background:var(--primary)!important;color:#fff!important}.btn-outline-secondary{border-color:#cbd5e1!important;color:#334155!important}.btn-secondary{background:#111827!important;color:#fff!important;border:0!important}.badge{border-radius:999px;padding:.5rem .65rem;font-weight:900}.display-6{font-weight:900;color:#111827}.stat-card{overflow:hidden;position:relative}.stat-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--primary),#facc15)}.stat-card .small{font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#475569!important}.stat-card .h3{font-weight:900;color:#0f172a}
table{width:100%;border-collapse:separate;border-spacing:0}.table{margin-bottom:0}.table th{background:#f8fafc!important;color:#334155!important;font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)!important}.table td{color:#111827!important;vertical-align:middle;border-color:var(--line)!important}.table-responsive{border-radius:16px;overflow:auto}
.login-body{background:#f4f6f8!important}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);background:#f4f6f8}.login-hero{background:linear-gradient(135deg,#020617,#111827);color:white;padding:64px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.login-hero:after{content:"";position:absolute;width:460px;height:460px;right:-160px;bottom:-160px;background:radial-gradient(circle,rgba(249,115,22,.35),transparent 68%)}.hero-badge{width:max-content;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:8px 13px;font-weight:900;margin-bottom:22px}.login-hero h1{font-size:54px;line-height:1;letter-spacing:-.06em;font-weight:900;color:#fff;margin:0 0 20px;max-width:760px}.login-hero p{color:#e2e8f0;font-size:18px;max-width:620px}.hero-features{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.hero-features span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;color:#e2e8f0}.hero-features strong{display:block;color:#fff}.login-panel{display:flex;align-items:center;justify-content:center;padding:28px}.login-card{width:100%;max-width:460px;background:#fff;border-radius:28px;padding:32px;box-shadow:0 30px 80px rgba(15,23,42,.16);border:1px solid var(--line)}.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}.login-brand span{width:42px;height:42px;border-radius:15px;background:linear-gradient(135deg,var(--primary),#facc15);display:grid;place-items:center}.login-brand strong{font-size:18px;color:#111827}.login-card h2{font-size:30px;font-weight:900;letter-spacing:-.04em;margin:0 0 8px;color:#0f172a}.login-card p,.login-help{color:#475569}.login-help{margin-top:16px;font-size:13px}.login-help strong{color:#111827}
.checklist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}.checklist-item{padding:.9rem}.vehicle-diagram{position:relative;height:260px;border:1px dashed #94a3b8;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fafc);overflow:hidden}.vehicle-diagram.readonly{pointer-events:none}.diagram-card{padding:1rem}.diagram-silhouette{position:absolute;inset:14% 18%;border:3px solid #9ca3af;border-radius:2rem;opacity:.7}.silhouette-top{inset:10% 32%;border-radius:3rem}.silhouette-top::before,.silhouette-top::after,.silhouette-front::before,.silhouette-rear::before,.silhouette-side::before{content:"";position:absolute;background:#9ca3af;opacity:.7}.silhouette-top::before{left:-18%;right:-18%;top:20%;height:8%}.silhouette-top::after{left:-18%;right:-18%;bottom:20%;height:8%}.silhouette-rear{inset:18% 28%;border-radius:1.5rem 1.5rem .8rem .8rem}.silhouette-rear::before{left:-12%;right:-12%;bottom:18%;height:10%}.silhouette-front{inset:18% 28%;border-radius:.8rem .8rem 1.5rem 1.5rem}.silhouette-front::before{left:-12%;right:-12%;top:18%;height:10%}.silhouette-side{inset:24% 15%;border-radius:1.5rem 2rem 1.5rem 1.2rem}.silhouette-side::before{left:8%;right:8%;bottom:-8%;height:18%;border-radius:999px}.damage-point{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:999px;border:2px solid #fff;background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.25);cursor:pointer}.damage-point::after{content:attr(data-short);position:absolute;inset:0;display:grid;place-items:center;font-size:9px;color:#fff;font-weight:900}.signature-pad{width:100%;height:260px;touch-action:none}.photo-thumb{aspect-ratio:1/1;object-fit:cover;border-radius:16px}.sticky-summary{position:sticky;top:1rem}
.mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:12px;height:66px;background:#020617;border-radius:24px;display:none;align-items:center;justify-content:space-around;z-index:99;box-shadow:0 20px 50px rgba(0,0,0,.25)}.mobile-bottom-nav a{color:#cbd5e1!important;font-size:18px;font-weight:900;display:grid;place-items:center;gap:0;line-height:1}.mobile-bottom-nav a span{font-size:10px}.mobile-bottom-nav a.primary{width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff!important;margin-top:-22px}
@media(max-width:1199px){.topbar{grid-template-columns:1fr;align-items:start}.top-search{display:flex!important}.sticky-summary{position:static}}
@media(max-width:991px){.app-shell{display:block;padding-bottom:88px}.sidebar{display:none}.main-content{padding:14px}.topbar{display:none}.content-wrap{max-width:100%}.mobile-bottom-nav{display:flex}.login-shell{grid-template-columns:1fr}.login-hero{padding:34px 22px}.login-hero h1{font-size:34px}.login-panel{padding:20px}.hero-features{display:none}.card-body{padding:18px}.row.g-3>[class*="col-"]{margin-bottom:0}.d-flex.justify-content-between{gap:12px;align-items:flex-start!important}.d-flex.justify-content-between .btn{white-space:nowrap}.input-group{display:grid;grid-template-columns:1fr}.input-group .form-control,.input-group .btn{border-radius:14px!important;margin-top:8px}.table-responsive{overflow:visible}.table thead{display:none}.table,.table tbody,.table tr,.table td{display:block;width:100%}.table tr{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.05)}.table td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)!important}.table td:last-child{border-bottom:0!important}.table td:before{content:attr(data-label);font-weight:900;color:#475569}.table td:empty{display:none}}
@media(max-width:575px){body{font-size:14px}.main-content{padding:12px}.login-card{padding:24px;border-radius:22px}.login-hero h1{font-size:30px}.display-6{font-size:2rem}.btn{width:auto}.d-flex.justify-content-between{display:block!important}.d-flex.justify-content-between .btn{margin-top:12px;width:100%}}


/* ===== V4.4 Mobile Hamburger Premium ===== */
@media(max-width:991px){
  .topbar{display:none!important;}

  .mobile-header{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:linear-gradient(135deg,#020617,#111827);
    color:#fff;
    border-radius:22px;
    margin:0 0 12px;
    padding:12px 14px;
    box-shadow:0 18px 38px rgba(15,23,42,.18);
  }

  .mobile-header *{color:inherit}

  .mobile-menu-toggle{
    width:46px;
    height:46px;
    border:0;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    font-size:22px;
    font-weight:900;
    display:grid;
    place-items:center;
    box-shadow:0 12px 25px rgba(249,115,22,.28);
  }

  .mobile-title{
    flex:1;
    min-width:0;
    display:grid;
    gap:2px;
  }

  .mobile-title strong{
    color:#fff;
    font-size:16px;
    line-height:1;
  }

  .mobile-title small{
    color:#cbd5e1;
    font-size:12px;
    font-weight:800;
  }

  .mobile-logout{
    color:#fb923c!important;
    font-weight:900;
    font-size:13px;
    white-space:nowrap;
  }

  .mobile-search{
    display:grid!important;
    grid-template-columns:1fr auto;
    gap:8px;
    width:100%;
    margin:0 0 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:8px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
  }

  .mobile-search input{
    width:100%!important;
    min-width:0!important;
    height:46px;
    border:0!important;
    border-radius:14px!important;
    padding:0 12px!important;
    background:#f8fafc!important;
    color:#111827!important;
    font-size:15px;
  }

  .mobile-search button{
    height:46px;
    border:0;
    border-radius:14px;
    padding:0 14px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:white;
    font-weight:900;
    white-space:nowrap;
  }

  .mobile-menu-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.55);
    backdrop-filter:blur(3px);
    z-index:120;
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
  }

  .mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(88vw,360px);
    background:#f8fafc;
    z-index:121;
    transform:translateX(-105%);
    transition:.24s ease;
    box-shadow:25px 0 70px rgba(2,6,23,.28);
    padding:16px;
    overflow:auto;
  }

  body.mobile-menu-open{
    overflow:hidden;
  }

  body.mobile-menu-open .mobile-menu-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  body.mobile-menu-open .mobile-drawer{
    transform:translateX(0);
  }

  .mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px;
    border-radius:22px;
    background:linear-gradient(135deg,#020617,#111827);
    color:#fff;
    margin-bottom:14px;
  }

  .mobile-drawer-head strong{
    display:block;
    color:#fff;
    font-size:17px;
  }

  .mobile-drawer-head small{
    display:block;
    color:#cbd5e1;
    font-size:12px;
    font-weight:700;
    margin-top:3px;
  }

  .mobile-drawer-head button{
    width:42px;
    height:42px;
    border:0;
    border-radius:15px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:26px;
    line-height:1;
  }

  .mobile-drawer-nav{
    display:grid;
    gap:10px;
  }

  .mobile-drawer-nav a{
    display:grid;
    grid-template-columns:46px 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;
    align-items:center;
    padding:13px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e5e7eb;
    color:#111827!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
  }

  .mobile-drawer-nav a span{
    grid-row:1 / 3;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#fff7ed;
    color:#ea580c;
    font-size:21px;
    font-weight:900;
  }

  .mobile-drawer-nav a strong{
    color:#111827;
    font-size:15px;
    line-height:1.1;
  }

  .mobile-drawer-nav a small{
    color:#64748b;
    font-size:12px;
    font-weight:700;
    margin-top:3px;
  }

  .mobile-drawer-nav a.active{
    border-color:#fed7aa;
    background:linear-gradient(135deg,#fff7ed,#fff);
  }

  .mobile-drawer-nav a.active span{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
  }

  .mobile-bottom-nav{
    display:flex!important;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    height:66px;
    background:#020617;
    border-radius:24px;
    align-items:center;
    justify-content:space-around;
    z-index:99;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
  }

  .mobile-bottom-nav a{
    color:#cbd5e1!important;
    font-size:18px;
    font-weight:900;
    display:grid;
    place-items:center;
    gap:0;
    line-height:1;
  }

  .mobile-bottom-nav a span{
    font-size:10px;
    margin-top:4px;
  }

  .mobile-bottom-nav a.primary{
    width:56px;
    height:56px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff!important;
    margin-top:-22px;
  }
}

@media(max-width:420px){
  .mobile-search{
    grid-template-columns:1fr;
  }

  .mobile-search button{
    width:100%;
  }
}