:root{--navy:#0b1b2b;--navy2:#122b42;--gold:#d9a72e;--gold2:#f4d47a;--cream:#f5f2e9;--card:#fff;--text:#172331;--muted:#66727f;--line:#d8dde3;--green:#147a4b;--red:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--cream);color:var(--text)}header{min-height:78px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 28px;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px #0003}.brand{display:flex;align-items:center;gap:12px}.brand img{width:58px;height:58px;object-fit:contain;border-radius:50%}.brand strong{display:block;letter-spacing:.8px;font-size:19px}.brand small{display:block;color:var(--gold2);margin-top:3px}nav{display:flex;gap:5px;flex-wrap:wrap}nav button{background:transparent;border:1px solid transparent;color:#fff;padding:10px 13px;border-radius:7px;cursor:pointer}nav button:hover{background:var(--navy2);border-color:#ffffff25}main{max-width:1250px;margin:0 auto;padding:30px 20px}.view{display:none}.view.active{display:block}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}h1{margin:0 0 6px;font-size:30px}h2{margin:0 0 12px}h3{margin:20px 0 8px}p{color:var(--muted)}button{font:inherit;cursor:pointer}.primary{background:var(--navy);border:2px solid var(--gold);color:#fff;padding:11px 17px;border-radius:8px;font-weight:800}.primary:hover{background:var(--navy2)}.full{width:100%;margin-top:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}.cards>div,.panel,.driver-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 2px 7px #0b1b2b08}.cards b{font-size:29px;display:block;color:var(--navy)}.cards span{color:var(--muted)}.panelhead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:12px}.panelhead input{width:min(350px,100%);padding:10px;border:1px solid var(--line);border-radius:7px}.job{display:grid;grid-template-columns:135px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.job:last-child{border-bottom:0}.ref{font-weight:900;color:var(--navy)}.job small{display:block;color:var(--muted);margin-top:5px}.actions{display:flex;gap:8px;flex-wrap:wrap}.status{font-size:12px;padding:6px 9px;border-radius:20px;background:#e8f5ec;color:var(--green);display:inline-block}.status.active{background:#fff4d7;color:#815b00}.status.done{background:#e8f5ec;color:var(--green)}.secondary{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:7px}.danger{color:var(--red)}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:20px;z-index:20}.hidden{display:none}.modalbox{background:#fff;width:min(780px,100%);border-radius:14px;padding:26px;position:relative;max-height:92vh;overflow:auto}.close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px}.modal label,.driver-card label{display:block;font-weight:700;margin:12px 0}.modal input,.modal textarea,.driver-card input,.driver-card textarea,.driver-card select,.top select{width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff}.modal textarea,.driver-card textarea{min-height:72px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}.muted{color:var(--muted)}.driver-card{margin-bottom:16px}.driver-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.step-title{color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:8px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.check{display:flex!important;gap:9px;align-items:center;padding:10px;background:#f7f8fa;border-radius:8px;margin:0!important}.check input{width:20px!important;height:20px;margin:0!important}.photo{border:2px dashed #b7bfcc;border-radius:9px;padding:16px;text-align:center;color:var(--muted);margin-top:12px}.photo input{border:0;padding:5px}.photo-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.photo-preview img{width:100%;height:120px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}.signature{width:100%;height:160px;border:1px solid var(--line);border-radius:8px;background:white;touch-action:none}.summary{background:#f7f8fa;border-radius:9px;padding:14px;margin-top:12px}.report{background:#fff;padding:35px;border-radius:10px;max-width:900px;margin:auto;box-shadow:0 2px 8px #0001}.report-head{display:flex;align-items:center;gap:18px;border-bottom:3px solid var(--gold);padding-bottom:15px;margin-bottom:20px}.report-head img{width:90px;height:90px;object-fit:contain}.report h1{font-size:26px}.report table{width:100%;border-collapse:collapse;margin:15px 0}.report td{padding:9px;border-bottom:1px solid #ddd;vertical-align:top}.report td:first-child{width:30%;font-weight:700}.report-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.report-photos img{width:100%;max-height:180px;object-fit:cover}.sigimg{max-width:300px;border:1px solid #ddd}.report-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:15px}.notice{padding:10px 12px;background:#fff4d7;border-left:4px solid var(--gold);border-radius:5px;margin:10px 0}.empty{padding:20px 0;color:var(--muted)}@media(max-width:750px){header{padding:8px 12px;align-items:flex-start}.brand img{width:48px;height:48px}.brand strong{font-size:15px}nav{justify-content:flex-end}.cards{grid-template-columns:1fr 1fr}.job{grid-template-columns:1fr}.grid,.formgrid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.panelhead{align-items:flex-start;flex-direction:column}.panelhead input{width:100%}.driver-header{flex-direction:column}.photo-preview,.report-photos{grid-template-columns:repeat(2,1fr)}}@media print{header,nav,.report-actions{display:none!important}body{background:#fff}.report{box-shadow:none;padding:0}.report-photos img{break-inside:avoid}}

.check-photo{margin:8px 0 4px 38px;padding:9px 10px;background:#fff;border:1px solid var(--line);border-radius:8px}
.photo-count{font-size:12px;color:var(--muted);font-weight:700;margin-right:8px}
.camera-btn,.gallery-btn{display:inline-flex!important;width:auto!important;align-items:center;gap:6px;padding:7px 9px;background:#f7f8fa;border:1px solid var(--line);border-radius:7px!important;margin:0 5px 0 0!important;font-weight:700!important;cursor:pointer}
.camera-btn input,.gallery-btn input{display:none!important}
.photo-preview.mini{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.thumb{position:relative;width:70px;height:70px}
.thumb img{width:70px;height:70px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.thumb button{position:absolute;right:-5px;top:-5px;width:22px;height:22px;border:0;border-radius:50%;background:#b42318;color:#fff;font-weight:800;line-height:20px;padding:0}
.inspection-row{padding:10px 0;border-bottom:1px solid var(--line)}
.inspection-row:last-child{border-bottom:0}
.locked-photos{margin:4px 0 0 38px;font-size:12px;color:var(--muted)}
.locked-note{font-size:13px;color:var(--green);font-weight:700}
.status.transit{background:#e7f0ff;color:#1d4f91}
.transit-card{border-left:4px solid var(--gold)}
.transit-summary{display:flex;flex-wrap:wrap;gap:10px;padding:12px;background:#f7f8fa;border-radius:8px;margin:12px 0}
.transit-summary span{padding:5px 8px;background:#fff;border-radius:6px}
.report-check{margin:15px 0;break-inside:avoid}
.report-check h4{margin:8px 0}
@media(max-width:750px){
  .check-photo{margin-left:0}
  .camera-btn,.gallery-btn{font-size:13px;padding:8px}
}

.walkaround{margin:16px 0;padding:14px;background:#f7f8fa;border:1px solid var(--line);border-radius:9px}
.walkaround h3{margin:0 0 6px}
.video-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.video-file-btn{display:inline-flex!important;width:auto!important;margin:0!important}
.video-preview{margin-top:12px}
.saved-video,.report-video{width:100%;max-width:720px;border-radius:8px;background:#000;display:block}
.recording-panel{position:fixed;inset:0;background:#000b;z-index:100;display:grid;place-items:center;padding:15px}
.recording-box{width:min(760px,100%);background:#fff;border-radius:14px;padding:18px}
.recording-box h3{margin-top:0}
.recording-box video{width:100%;max-height:65vh;background:#000;border-radius:9px;display:block}
.recording-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}
.recording-dot{font-weight:800;color:var(--red);margin-right:auto}
/* =========================================================
   DJM LOGIN SCREEN
   ========================================================= */

.login-screen{
  min-height:100vh;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.login-box{
  width:min(420px,100%);
  background:#fff;
  border-radius:16px;
  padding:35px;
  box-shadow:0 12px 40px #0005;
  text-align:center;
}

.login-box img{
  width:105px;
  height:105px;
  object-fit:contain;
  border-radius:50%;
  margin-bottom:10px;
}

.login-box h1{
  margin:0;
  color:var(--navy);
  font-size:25px;
  letter-spacing:1px;
}

.login-box p{
  margin:7px 0 24px;
}

.login-box label{
  display:block;
  text-align:left;
  font-weight:700;
  margin:14px 0;
  color:var(--text);
}

.login-box input{
  display:block;
  width:100%;
  margin-top:7px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  background:#fff;
}

.login-box input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px #d9a72e33;
}

.login-box .primary{
  margin-top:18px;
  padding:13px 17px;
}

.login-error{
  min-height:20px;
  margin:14px 0 0!important;
  color:var(--red)!important;
  font-weight:700;
}

@media(max-width:500px){
  .login-box{
    padding:28px 22px;
  }

  .login-box img{
    width:90px;
    height:90px;
  }
}


/* =========================================================
   DJM GLASS & LAYERED UI PREVIEW
   Visual-only refresh: workflow and application logic unchanged.
   ========================================================= */
:root{
  --glass:rgba(255,255,255,.74);
  --glass-strong:rgba(255,255,255,.9);
  --glass-line:rgba(255,255,255,.68);
  --shadow:0 18px 50px rgba(11,27,43,.11);
  --shadow-soft:0 8px 26px rgba(11,27,43,.08);
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 2%,rgba(217,167,46,.18),transparent 25rem),
    radial-gradient(circle at 92% 16%,rgba(31,72,105,.15),transparent 28rem),
    linear-gradient(145deg,#f8f5ed 0%,#eef2f4 52%,#f5f2e9 100%);
  background-attachment:fixed;
}
header{
  min-height:82px;
  background:rgba(11,27,43,.92);
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 10px 35px rgba(11,27,43,.18);
}
.brand img{box-shadow:0 0 0 1px rgba(217,167,46,.42),0 8px 22px #0005}
nav button{border-radius:12px;padding:10px 15px;transition:.2s ease}
nav button:hover{background:rgba(255,255,255,.1);border-color:rgba(217,167,46,.28);transform:translateY(-1px)}
main{padding-top:36px}
.top h1{font-size:34px;letter-spacing:-.8px;color:var(--navy)}
.top p{margin:5px 0 0}
.primary{
  border:1px solid rgba(244,212,122,.85);
  border-radius:12px;
  background:linear-gradient(145deg,#102b43,#0b1b2b);
  box-shadow:0 8px 20px rgba(11,27,43,.16),inset 0 1px rgba(255,255,255,.12);
  transition:.2s ease;
}
.primary:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(11,27,43,.22)}
.secondary{
  border:1px solid rgba(11,27,43,.1);
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(10px);
  border-radius:10px;
  transition:.2s ease;
}
.secondary:hover{background:#fff;transform:translateY(-1px)}
.cards{gap:18px}
.cards>div,.panel,.driver-card{
  position:relative;
  overflow:hidden;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}
.cards>div{padding:22px 23px;min-height:105px}
.cards>div:before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(var(--gold2),var(--gold));
}
.cards b{font-size:34px;letter-spacing:-1px}
.panel{padding:24px}
.panelhead{margin-bottom:16px}
.panelhead input,.modal input,.modal textarea,.driver-card input,.driver-card textarea,.driver-card select,.top select{
  border:1px solid rgba(11,27,43,.12);
  border-radius:12px;
  background:rgba(255,255,255,.76);
  box-shadow:inset 0 1px 2px rgba(11,27,43,.03);
  outline:none;
  transition:.2s ease;
}
.panelhead input:focus,.modal input:focus,.modal textarea:focus,.driver-card input:focus,.driver-card textarea:focus,.driver-card select:focus,.top select:focus{
  border-color:rgba(217,167,46,.75);
  box-shadow:0 0 0 4px rgba(217,167,46,.12);
  background:#fff;
}
.job{padding:18px 12px;border-radius:14px;border-bottom:0;margin:4px 0;transition:.2s ease}
.job:hover{background:rgba(255,255,255,.64);transform:translateX(2px)}
.ref{font-size:15px;letter-spacing:.3px}
.status{font-weight:800;border:1px solid rgba(20,122,75,.1)}
.status.active{border-color:rgba(217,167,46,.22)}
.status.transit{border-color:rgba(29,79,145,.15)}
.modal{background:rgba(5,14,23,.7);backdrop-filter:blur(8px)}
.modalbox{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(24px);
}
.driver-card{padding:22px}
.driver-header{padding-bottom:12px}
.step-title{border-bottom:0;position:relative;padding-bottom:12px}
.step-title:after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.inspection-row{padding:13px 0;border-color:rgba(11,27,43,.08)}
.check{background:rgba(255,255,255,.54);border:1px solid rgba(11,27,43,.06);border-radius:12px}
.check-photo,.walkaround,.summary,.transit-summary{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;
}
.camera-btn,.gallery-btn{
  background:rgba(255,255,255,.78);
  border-color:rgba(11,27,43,.1);
  border-radius:10px!important;
}
.photo-preview img,.thumb img{border-radius:11px;box-shadow:0 5px 14px rgba(11,27,43,.12)}
.signature{border-radius:14px;border-color:rgba(11,27,43,.12);box-shadow:inset 0 2px 8px rgba(11,27,43,.04)}
.notice{border:1px solid rgba(217,167,46,.25);border-left:4px solid var(--gold);background:rgba(255,244,215,.7);border-radius:12px}
.login-screen{
  background:
    radial-gradient(circle at 50% 18%,rgba(217,167,46,.18),transparent 20rem),
    linear-gradient(145deg,#07131f,#0b1b2b 48%,#12314b);
}
.login-box{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px;
  box-shadow:0 28px 80px rgba(0,0,0,.38);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
.login-box img{box-shadow:0 10px 30px rgba(11,27,43,.18),0 0 0 1px rgba(217,167,46,.25)}
.login-box input{border-radius:12px;background:rgba(255,255,255,.8)}
.report{border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8)}
@media(max-width:750px){
  header{min-height:72px;position:sticky;gap:8px}
  .brand small{display:none}
  nav{gap:2px}
  nav button{padding:9px 10px;border-radius:10px}
  main{padding:22px 13px 32px}
  .top h1{font-size:29px}
  .cards{grid-template-columns:repeat(3,1fr);gap:8px}
  .cards>div{min-height:88px;padding:16px 11px;border-radius:16px}
  .cards b{font-size:27px}
  .cards span{font-size:12px}
  .panel,.driver-card{border-radius:17px;padding:16px}
  .job{padding:15px 8px}
  .actions>*{flex:1;text-align:center}
  .modalbox{border-radius:20px;padding:22px 17px}
  .login-box{border-radius:22px}
}
@media(max-width:430px){
  .brand div{display:none}
  header{align-items:center}
  .brand img{width:46px;height:46px}
  nav{flex:1;justify-content:flex-end}
}


/* =========================================================
   DJM GLASS PREVIEW V2 — HIGH-IMPACT APP SHELL
   Visual-only. Existing IDs, controls and workflow preserved.
   ========================================================= */
body:before,body:after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(1px)}
body:before{width:520px;height:520px;right:-160px;top:90px;background:radial-gradient(circle,rgba(217,167,46,.18),rgba(217,167,46,0) 68%)}
body:after{width:620px;height:620px;left:-260px;bottom:-280px;background:radial-gradient(circle,rgba(18,43,66,.16),rgba(18,43,66,0) 70%)}
header{max-width:1480px;margin:14px auto 0;width:calc(100% - 28px);border-radius:22px;padding:10px 18px;top:12px}
.brand img{width:62px;height:62px}.brand strong{font-size:20px}.brand small{font-size:12px;letter-spacing:.35px}
nav{background:rgba(255,255,255,.055);padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:15px}
nav button{font-weight:700;color:rgba(255,255,255,.82)}
nav button:hover{color:#fff;background:rgba(255,255,255,.1)}
main{max-width:1220px;padding-top:54px}
#dashboard>.top,#archive>.top,#driver>.top{position:relative;padding:30px 32px;margin-bottom:20px;border-radius:26px;color:#fff;overflow:hidden;background:linear-gradient(125deg,rgba(11,27,43,.98),rgba(18,43,66,.94));box-shadow:0 24px 60px rgba(11,27,43,.18);border:1px solid rgba(255,255,255,.1)}
#dashboard>.top:before,#archive>.top:before,#driver>.top:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-90px;top:-190px;background:radial-gradient(circle,rgba(217,167,46,.34),rgba(217,167,46,0) 68%)}
#dashboard>.top:after{content:"OPERATIONS";position:absolute;right:28px;bottom:-13px;font-size:72px;font-weight:900;letter-spacing:5px;color:rgba(255,255,255,.035);pointer-events:none}
#dashboard>.top h1,#archive>.top h1,#driver>.top h1{color:#fff;font-size:38px;position:relative;z-index:1}
#dashboard>.top p,#archive>.top p,#driver>.top p{color:rgba(255,255,255,.64);font-size:15px;position:relative;z-index:1}
#dashboard>.top .primary{position:relative;z-index:1;background:linear-gradient(135deg,#f4d47a,#d9a72e);color:#0b1b2b;border:0;box-shadow:0 10px 26px rgba(217,167,46,.22)}
.cards{margin-top:-1px;gap:14px}
.cards>div{min-height:126px;padding:25px 26px 22px;border-radius:22px;background:rgba(255,255,255,.68)}
.cards>div:before{width:100%;height:4px;inset:0 0 auto;background:linear-gradient(90deg,var(--gold),rgba(217,167,46,.15))}
.cards>div:after{position:absolute;right:20px;top:18px;width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(11,27,43,.06);font-size:20px}
.cards>div:nth-child(1):after{content:"▦"}.cards>div:nth-child(2):after{content:"↗"}.cards>div:nth-child(3):after{content:"✓"}
.cards b{font-size:40px;line-height:1;margin-top:20px}.cards span{display:block;margin-top:7px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.panel{border-radius:25px;padding:27px;background:rgba(255,255,255,.66);box-shadow:0 22px 55px rgba(11,27,43,.09)}
.panelhead h2{font-size:22px}.panelhead input{height:45px;background:rgba(255,255,255,.82)}
#jobList,#archiveList{display:grid;gap:12px}
.job{grid-template-columns:150px 1fr auto;min-height:94px;margin:0;padding:18px 20px;background:rgba(255,255,255,.73);border:1px solid rgba(11,27,43,.06);border-radius:18px;box-shadow:0 5px 18px rgba(11,27,43,.045)}
.job:hover{transform:translateY(-2px);background:#fff;box-shadow:0 12px 28px rgba(11,27,43,.1)}
.ref{font-size:17px}.job strong{font-size:16px}.job small{line-height:1.45}
.status{padding:8px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.driver-card{border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 18px 45px rgba(11,27,43,.08)}
.driver-header{background:linear-gradient(135deg,rgba(11,27,43,.045),rgba(217,167,46,.055));margin:-22px -22px 20px;padding:22px;border-bottom:1px solid rgba(11,27,43,.06)}
.inspection-row{border:0;margin:8px 0;padding:0}.check{min-height:48px;padding:12px 14px!important;background:rgba(255,255,255,.74)}
.check-photo{margin-top:6px;padding:12px 14px;border-radius:0 0 14px 14px;border-top:0}
.walkaround{padding:18px}.summary,.transit-summary{padding:16px}
.modalbox{border-radius:28px;padding:30px}
.login-box{width:min(460px,100%);padding:42px 40px;background:rgba(255,255,255,.9)}
.login-box img{width:116px;height:116px}.login-box h1{font-size:27px}
@media(max-width:750px){
  header{width:calc(100% - 16px);margin:8px auto 0;top:7px;border-radius:18px;padding:8px 10px;align-items:center}
  .brand img{width:48px;height:48px}
  nav{background:transparent;border:0;padding:0}
  nav button{font-size:12px;padding:8px 7px}
  main{padding-top:28px}
  #dashboard>.top,#archive>.top,#driver>.top{padding:24px 20px;border-radius:22px;min-height:154px}
  #dashboard>.top h1,#archive>.top h1,#driver>.top h1{font-size:31px}
  #dashboard>.top:after{font-size:43px;right:14px}
  #dashboard>.top .primary{width:100%;margin-top:8px}
  .cards{grid-template-columns:repeat(3,1fr);gap:7px}
  .cards>div{min-height:103px;padding:17px 12px}
  .cards>div:after{right:10px;top:10px;width:29px;height:29px;font-size:14px}
  .cards b{font-size:30px;margin-top:25px}.cards span{font-size:10px}
  .panel{padding:15px;border-radius:21px}
  .job{grid-template-columns:1fr;padding:16px;border-radius:16px;gap:10px}
  .job .actions{justify-content:space-between}
}
@media(max-width:430px){
  nav button[data-view="archive"]{font-size:0}nav button[data-view="archive"]:after{content:"Archive";font-size:12px}
}


/* =========================================================
   DJM GLASS PREVIEW V3 — FINAL POLISH
   ========================================================= */
.cards>div:after{font-family:Arial,sans-serif;font-weight:800;color:var(--navy)}
.cards>div:nth-child(1):after{content:"≡"}.cards>div:nth-child(2):after{content:"↗"}.cards>div:nth-child(3):after{content:"✓"}
.panelhead{padding-bottom:14px;border-bottom:1px solid rgba(11,27,43,.065)}
.job{position:relative;overflow:hidden}
.job:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--gold2),var(--gold))}
.job>div:first-child{padding-left:5px}
.job .ref{letter-spacing:.45px}
.job .actions{align-items:center}
.status{min-width:86px;text-align:center;font-size:11px;letter-spacing:.25px;text-transform:uppercase}
#driver>.top select{position:relative;z-index:2;min-width:280px;padding:12px 42px 12px 14px;background:rgba(255,255,255,.94);color:var(--navy);font-weight:800}
.driver-card{border:1px solid rgba(255,255,255,.78)}
.driver-card h2,.driver-card h3{letter-spacing:-.2px}
.driver-header{position:relative}
.driver-header:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),rgba(217,167,46,0))}
.step-title{font-size:21px}
.check{font-weight:750;transition:.18s ease}.check:has(input:checked){background:rgba(232,245,236,.9);border-color:rgba(20,122,75,.16)}
.check input{accent-color:var(--green)}
.camera-btn,.gallery-btn{min-height:38px;box-shadow:0 3px 10px rgba(11,27,43,.05);transition:.18s ease}
.camera-btn:hover,.gallery-btn:hover{transform:translateY(-1px);background:#fff}
.walkaround{position:relative;overflow:hidden}.walkaround:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.signature{background:rgba(255,255,255,.9)}
.empty{padding:34px 20px;text-align:center;border:1px dashed rgba(11,27,43,.14);border-radius:16px;background:rgba(255,255,255,.35)}
@media(max-width:750px){
  body{background:linear-gradient(155deg,#f8f5ed 0%,#edf2f5 50%,#f5f2e9 100%)}
  header{box-shadow:0 10px 30px rgba(11,27,43,.22)}
  .brand{gap:8px}.brand strong{font-size:14px;letter-spacing:.5px}
  main{padding-left:10px;padding-right:10px}
  #driver>.top select{min-width:0;width:100%}
  .driver-card{padding:14px;border-radius:20px}
  .driver-header{margin:-14px -14px 16px;padding:17px 14px}
  .driver-header:after{left:14px;right:14px}
  .step-title{font-size:19px}
  .inspection-row{margin:7px 0}
  .check{min-height:52px}
  .check-photo{padding:11px 10px}
  .camera-btn,.gallery-btn{width:calc(50% - 5px)!important;justify-content:center;margin-right:3px!important}
  .photo-count{display:block;margin-bottom:9px}
  .walkaround{padding:15px}
  .video-actions>.primary,.video-actions>.gallery-btn{width:100%!important;justify-content:center}
}

/* DJM premium automotive theme */
body{font-family:"Arial Narrow","Roboto Condensed",Inter,Arial,sans-serif}
.brand strong,.top h1,.ref,.driver-card h2,.driver-card h3{font-family:"Arial Narrow","Roboto Condensed",Inter,Arial,sans-serif;font-weight:900}
.brand small,.brand-tagline{text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.brand img,.login-box img{filter:contrast(1.08) saturate(1.18) drop-shadow(0 0 7px rgba(244,212,122,.35));}
.brand img{border:1px solid rgba(244,212,122,.65)}
.login-box img{border:2px solid rgba(244,212,122,.65)}
.cards{grid-template-columns:repeat(4,1fr)}
.cards>div:nth-child(4):after{content:"→"}
.make-badge{display:inline-grid;place-items:center;min-width:58px;height:42px;padding:0 10px;border-radius:50%;background:linear-gradient(145deg,#102b43,#07131f);border:1px solid var(--gold);color:var(--gold2);font-size:9px;font-weight:900;letter-spacing:.15px;text-align:center;box-shadow:0 5px 14px rgba(11,27,43,.18)}
.job-ref-line{display:flex;align-items:center;gap:10px}
#dashboard>.top{background:linear-gradient(120deg,#07131f,#102b43 62%,#3a3420)}
#driver>.top{background:linear-gradient(120deg,#07131f,#102b43 62%,#3a3420)}
@media(max-width:750px){.cards{grid-template-columns:repeat(2,1fr)}.make-badge{min-width:54px;height:38px}.brand small{letter-spacing:.7px}}

/* V4 structural automotive redesign */
body{background:#081522;color:#eaf0f5}
main{max-width:1260px}
header{background:rgba(5,18,30,.96);border:1px solid rgba(217,167,46,.22)}
.login-screen{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(360px,.75fr);gap:0;background:radial-gradient(circle at 25% 35%,#24394a 0,#07131f 47%,#030a11 100%);padding:0}
.login-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(circle at 50% 48%,rgba(217,167,46,.18),transparent 32%);position:relative}
.login-showcase:after{content:"VEHICLE DELIVERY & COLLECTION";margin-top:26px;color:#f4d47a;font-weight:800;letter-spacing:4px;font-size:12px}
.login-showcase img{width:min(390px,58vw);filter:saturate(1.35) contrast(1.12) drop-shadow(0 0 25px rgba(244,212,122,.32))}
.login-showcase strong{font-size:16px;letter-spacing:7px;margin-top:12px;color:#fff}
.login-box{margin:auto;background:rgba(5,18,30,.82);border:1px solid rgba(244,212,122,.42);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.38)}
.login-box h1{color:#f0b93e}.login-box p{color:#aebdca}.login-box label{color:#dce5ec}.login-box input{background:#0d2132;border-color:#31475a;color:#fff}.login-box .primary{background:linear-gradient(135deg,#ffe18b,#d9a72e);color:#081522}
.admin-hero,.driver-hero{min-height:245px!important;background:linear-gradient(100deg,#06121e 0%,#0e263a 52%,#342d1d 100%)!important;border:1px solid rgba(244,212,122,.2)!important;position:relative}
.admin-hero:after,.driver-hero:after{content:"";position:absolute;right:110px;bottom:0;width:360px;height:170px;background:radial-gradient(ellipse at center,rgba(217,167,46,.22),transparent 66%);transform:skewX(-12deg)}
.admin-hero>div:first-child,.driver-hero>div:first-child{z-index:2}
.admin-hero h1,.driver-hero h1{font-size:44px!important}.admin-hero p,.driver-hero p{font-size:17px!important}
.admin-hero:before{content:"DRIVEN WITH CARE  ·  DELIVERED WITH TRUST";position:absolute;left:32px;bottom:28px;color:#e7b947;font-size:11px;letter-spacing:3px;font-weight:900}
.driver-hero:before{content:"DRIVEN WITH CARE  ·  DELIVERED WITH TRUST";position:absolute;right:32px;top:28px;color:#e7b947;font-size:11px;letter-spacing:2px;font-weight:900}
.cards>div,.panel,.driver-card{background:#0c2031;color:#eaf0f5;border-color:#233b4e}
.cards span,.job small,.muted{color:#91a3b3!important}
.panelhead{border-color:#263c4e}.panelhead input{background:#10283b;color:#fff;border-color:#2b4355}
.job{background:#10283a;border-color:#263e51;color:#fff}.job:hover{background:#153149}.job strong,.ref{color:#fff}
.driver-job-hero{display:grid;grid-template-columns:1fr 280px;gap:18px;padding:26px 28px;margin-bottom:18px;border-radius:24px;background:linear-gradient(120deg,#071522,#102b40 62%,#2d291d);border:1px solid rgba(217,167,46,.32);box-shadow:0 20px 45px rgba(0,0,0,.24);color:#fff}
.vehicle-title{display:flex;gap:14px;align-items:center;margin-bottom:18px}.vehicle-title h2{margin:0;font-size:30px}.vehicle-title strong{color:#f4d47a}
.route-line{margin:8px 0;color:#d6e0e7}.route-line span{color:#e4b23f;margin-right:9px}.route-line b{color:#f4d47a}
.driver-job-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.vehicle-visual{position:relative;width:100%;height:120px;border-radius:16px;overflow:hidden;background:linear-gradient(155deg,#1b3b51,#091722 58%,#443821);border:1px solid rgba(244,212,122,.22);display:flex;align-items:flex-end;justify-content:flex-end;padding:12px}.vehicle-visual:before{content:"";position:absolute;left:-10%;right:-10%;bottom:24px;height:3px;background:linear-gradient(90deg,transparent,#d9a72e,transparent);transform:rotate(-6deg)}.vehicle-visual .car-silhouette{font-size:70px;line-height:1;color:#050b10;text-shadow:0 -2px 0 #d9a72e;transform:skewX(-14deg)}.vehicle-visual span{position:absolute;left:12px;top:12px;font-size:10px;letter-spacing:1.5px;color:#f4d47a;font-weight:900}
.driver-card .check{background:#f8f4eb;color:#0b1b2b}.driver-card .check-photo{background:#efe9de;color:#0b1b2b}.driver-card input,.driver-card textarea{background:#f8f4eb;color:#0b1b2b}
.driver-card .camera-btn{background:#071b2b;color:#fff;border-color:#d9a72e}.driver-card .gallery-btn{background:#f8f4eb;color:#0b1b2b}
.step-title{border-left:4px solid #d9a72e;padding-left:12px}
@media(max-width:750px){
 .login-screen{display:flex;padding:18px}.login-showcase{display:none}
 body{background:linear-gradient(155deg,#07131f,#0e2638 50%,#1c1a13)}
 .admin-hero,.driver-hero{min-height:270px!important}
 .admin-hero h1,.driver-hero h1{font-size:38px!important}
 .admin-hero:before,.driver-hero:before{left:20px;right:auto;bottom:18px;top:auto;font-size:9px;letter-spacing:1.5px}
 .driver-job-hero{grid-template-columns:1fr;padding:20px;border-radius:22px}
 .driver-job-side{align-items:flex-start}.vehicle-visual{height:95px}
 .driver-card{background:#0c2031}.driver-card h2,.driver-card h3,.driver-card label{color:#fff}
}

/* V5 exact concept composition */
.screen-kicker{display:block;color:#eab83f;font-size:10px;letter-spacing:3px;font-weight:900;margin-bottom:8px}
.admin-hero{height:270px;align-items:center;padding:34px 38px!important}
.admin-hero h1{font-size:34px!important;line-height:1.02;margin:0 0 10px!important}.admin-hero h1 b{font-size:42px}.admin-hero p{max-width:260px}
.admin-road-art,.driver-road-art{position:absolute;right:0;top:0;bottom:0;width:55%;overflow:hidden;border-radius:0 24px 24px 0;background:radial-gradient(circle at 72% 42%,rgba(255,187,51,.7),rgba(255,145,0,.18) 18%,transparent 39%),linear-gradient(155deg,transparent 32%,rgba(255,255,255,.08) 33%,transparent 34%),linear-gradient(130deg,#182f3f,#3c301c)}
.admin-road-art:before,.driver-road-art:before{content:"";position:absolute;width:310px;height:84px;right:45px;bottom:30px;background:#03090d;border-radius:70% 22% 16% 20%;transform:skewX(-18deg);box-shadow:0 -5px 0 #e1aa32,0 16px 22px rgba(0,0,0,.55)}
.admin-road-art:after,.driver-road-art:after{content:"●      ●";position:absolute;right:70px;bottom:11px;color:#03090d;font-size:48px;letter-spacing:105px;white-space:nowrap}
.admin-road-art span,.driver-road-art span{position:absolute;right:30px;top:24px;color:rgba(255,255,255,.16);font-size:11px;letter-spacing:4px;font-weight:900}
.cards>div{min-height:150px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.cards>div i{font-style:normal;color:#f1bc3f;font-size:27px;margin-bottom:7px}.cards>div b{margin:0;font-size:35px}.cards>div span{text-transform:none;font-size:14px;color:#fff!important}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}.quick-actions button{min-height:56px;border-radius:14px;background:#0c2031;color:#fff;border:1px solid #304759;font-weight:800;font-size:14px}.quick-actions .primary{background:linear-gradient(135deg,#ffe28c,#dda92f);color:#071522;border-color:#e4b23f}.quick-actions button:hover{transform:translateY(-1px);border-color:#d9a72e}
.panelhead h2:after{content:"  →";color:#e5b23b}
.job{grid-template-columns:170px 1fr auto;min-height:88px}.make-badge{width:52px;height:52px;border-radius:50%;font-size:8px;background:radial-gradient(circle,#243b4d 0,#07131f 66%);box-shadow:inset 0 0 0 3px #07131f,0 0 0 1px #d9a72e}
.driver-hero{height:330px!important;padding:30px 28px!important;display:block!important}.driver-hero>div:first-child{width:48%}.driver-hero h1{font-size:42px!important}.driver-hero h1 b{color:#f2b83d}.script-tag{position:absolute;right:26px;top:30px;z-index:3;color:#fff;font-family:cursive;font-size:22px;line-height:1.05;transform:rotate(-5deg);text-shadow:0 2px 8px #000}.driver-road-art{width:62%}.driver-picker{position:absolute;left:14px;right:14px;bottom:12px;z-index:5;display:grid;grid-template-columns:140px 1fr;align-items:center;background:rgba(5,17,28,.92);border:1px solid #d9a72e;border-radius:15px;padding:7px 8px}.driver-picker b{color:#efba3c;padding-left:10px}.driver-picker select{width:100%;background:#142c3d!important;color:#fff!important;border:1px solid #3b5365!important}
.driver-job-hero{grid-template-columns:1fr 220px;background:radial-gradient(circle at 80% 50%,rgba(217,167,46,.16),transparent 30%),linear-gradient(120deg,#071522,#10283a)}.driver-job-hero .make-badge{width:58px;height:58px}.driver-job-side .vehicle-visual{height:100px}
.inspection-list{display:grid;gap:10px}.inspection-row{border:1px solid rgba(217,167,46,.18)!important;border-radius:14px!important;overflow:hidden}.driver-card .check{font-size:16px;padding:15px!important}.driver-card .check:before{content:"🚗";margin-right:9px}.driver-card .check-photo{display:flex;align-items:center;gap:9px;padding:10px 14px!important}.driver-card .photo-count:before{content:"▧ ";color:#d9a72e}.driver-card .camera-btn{margin-left:auto!important}
@media(max-width:750px){
 .admin-hero{height:260px!important}.admin-road-art{width:54%;opacity:.75}.admin-hero h1{font-size:29px!important}.admin-hero h1 b{font-size:36px}
 .cards{grid-template-columns:repeat(4,1fr)!important}.cards>div{min-height:105px;padding:10px 5px}.cards>div i{font-size:19px}.cards>div b{font-size:26px}.cards>div span{font-size:10px!important}
 .quick-actions{grid-template-columns:repeat(2,1fr)}
 .driver-hero{height:350px!important}.driver-hero>div:first-child{width:70%}.driver-road-art{width:72%;top:80px}.script-tag{font-size:17px}
 .driver-picker{grid-template-columns:105px 1fr}.driver-job-hero{grid-template-columns:1fr}.driver-card .check-photo{flex-wrap:wrap}.driver-card .camera-btn{margin-left:0!important}
}

/* Target mockup rebuild */
.login-screen{min-height:100vh!important;display:grid!important;grid-template-columns:minmax(320px,1fr) minmax(360px,.95fr)!important;gap:0!important;padding:0!important;background:radial-gradient(circle at 18% 35%,rgba(235,170,45,.26),transparent 22%),linear-gradient(135deg,#0b2335 0,#061522 54%,#020b13 100%)!important}
.login-showcase{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;min-height:100vh!important;background:linear-gradient(180deg,rgba(5,18,29,.12),rgba(4,15,24,.45)),radial-gradient(circle at 70% 30%,rgba(247,179,51,.42),transparent 18%),linear-gradient(155deg,#142d3e 0,#0c2132 42%,#071521 100%)!important}
.login-showcase:before{content:"";position:absolute;width:72%;height:16%;right:-5%;bottom:25%;border-radius:70% 24% 18% 25%;background:#02080d;transform:skewX(-16deg);box-shadow:0 -6px 0 #e6ad32,0 24px 45px #000}
.login-showcase:after{content:"";position:absolute;left:-20%;right:-20%;bottom:16%;height:34%;border-top:5px solid rgba(242,178,54,.7);transform:rotate(-10deg);background:linear-gradient(180deg,transparent,rgba(0,0,0,.42))}
.login-showcase img{width:min(390px,62vw)!important;height:auto!important;position:relative;z-index:3;filter:saturate(1.25) contrast(1.08) drop-shadow(0 0 22px rgba(244,181,50,.6))!important}
.login-tagline{position:relative;z-index:4;margin-top:20px;color:#fff;font-weight:900;letter-spacing:8px;line-height:2;text-align:center;font-size:16px}
.login-script{position:absolute;z-index:4;left:9%;bottom:27%;font:italic 34px/1 cursive;color:#fff;transform:rotate(-8deg);text-shadow:0 3px 12px #000}
.login-box{align-self:center!important;justify-self:center!important;width:min(440px,84%)!important;padding:38px 32px!important;border:1px solid rgba(226,174,54,.55)!important;border-radius:28px!important;background:rgba(4,17,28,.86)!important;box-shadow:0 25px 70px rgba(0,0,0,.45)!important;backdrop-filter:blur(20px)}
.login-box>img{display:none!important}.login-welcome{text-align:center;color:#fff;font-size:18px}.login-box h1{text-align:center!important;color:#efb83d!important;font-size:30px!important;margin:6px 0!important}.login-box>p:not(.login-error){text-align:center;color:#d5dbe0;margin:0 0 28px}.login-box label{color:#fff;font-weight:700}.login-box input{height:54px!important;margin-top:8px!important;background:#10293a!important;border:1px solid #41596a!important;border-radius:13px!important;color:#fff!important}.login-options{display:flex;justify-content:space-between;align-items:center;margin:14px 0 20px;font-size:13px}.login-options label{display:flex;align-items:center;gap:8px;font-weight:400}.login-options input{width:18px!important;height:18px!important;margin:0!important}.login-options span{color:#efb83d}.login-box #loginButton{height:58px!important;border-radius:15px!important;font-size:19px!important;background:linear-gradient(110deg,#ffe18b,#e4aa2e)!important;color:#07131e!important}.login-box #loginButton b{float:right;font-size:24px}.login-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:30px -10px -6px}.login-trust div{text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:3px}.login-trust div:last-child{border:0}.login-trust b{color:#efb83d;font-size:27px}.login-trust strong{font-size:12px}.login-trust small{font-size:10px;color:#c7d0d7}
header{max-width:1220px!important;margin:10px auto 0!important;border:1px solid rgba(217,167,46,.34)!important;border-radius:24px!important;background:rgba(4,17,28,.93)!important;box-shadow:0 12px 35px rgba(0,0,0,.28)!important}.brand img{filter:saturate(1.25) contrast(1.08) drop-shadow(0 0 8px rgba(230,174,48,.38))!important}.brand strong{font-size:22px!important}.brand strong::first-letter{color:#fff}.brand small{color:#f0bb42!important;text-transform:uppercase;letter-spacing:2px!important;font-weight:800!important}
main{max-width:1000px!important}.admin-hero,.driver-hero{border:1px solid rgba(217,167,46,.48)!important;box-shadow:0 18px 45px rgba(0,0,0,.32)!important}.admin-hero{background:linear-gradient(90deg,#071b2b 0 45%,#172d3a 45% 100%)!important}.driver-hero{background:linear-gradient(90deg,#071b2b 0 39%,#172d3a 39% 100%)!important}.admin-road-art,.driver-road-art{background:radial-gradient(circle at 76% 34%,rgba(255,185,49,.85),rgba(255,135,0,.14) 18%,transparent 38%),linear-gradient(160deg,transparent 30%,rgba(255,255,255,.13) 31%,transparent 32%),linear-gradient(140deg,#243945,#40321c)!important}
.quick-actions button{font-size:15px!important}.panel{border-radius:22px!important}.panelhead h2{font-size:21px!important}
.driver-job-hero{border-color:rgba(217,167,46,.5)!important;border-radius:22px!important}.driver-card{border-radius:22px!important}.step-title:before{content:"1";display:inline-grid;place-items:center;width:42px;height:42px;border:2px solid #e5ae2f;border-radius:50%;margin-right:12px;color:#fff}.inspection-row{background:#fbfaf6!important;color:#07131e!important}.inspection-row .check span{font-weight:800!important}.inspection-row .check-photo{background:#fbfaf6!important}.inspection-row .photo-count{color:#5d6871!important}.inspection-row .camera-btn{background:#07131e!important;color:#fff!important;border:1px solid #e0a92d!important}.inspection-row .gallery-btn{background:#fff!important;color:#07131e!important;border:1px solid #d4d7da!important}
@media(max-width:760px){.login-screen{grid-template-columns:1fr!important}.login-showcase{min-height:48vh!important}.login-showcase img{width:230px!important}.login-tagline{font-size:11px;letter-spacing:4px}.login-script{font-size:24px;bottom:10%}.login-box{margin:-28px auto 25px;position:relative;z-index:8;width:90%!important}.login-trust{margin-top:22px}header{margin:0!important;border-radius:0 0 18px 18px!important}.brand strong{font-size:17px!important}}

/* Login isolation fix: app must never render behind login */
body:has(#loginScreen:not([style*="display: none"])) > header,
body:has(#loginScreen:not([style*="display: none"])) > main,
body:has(#loginScreen:not([style*="display: none"])) > #modal{display:none!important}
#loginScreen[style*="display: none"]{display:none!important}

/* LOGIN PAGE ONLY — target mockup pass */
#loginScreen.login-screen{position:fixed;inset:0;z-index:10000;overflow:auto;grid-template-columns:1.08fr .92fr!important;background:#061521!important;color:#fff}
#loginScreen .login-showcase{min-height:100vh!important;position:relative!important;isolation:isolate!important;background:radial-gradient(circle at 75% 27%,rgba(255,188,62,.65) 0 2%,rgba(232,130,20,.34) 3% 13%,transparent 31%),linear-gradient(180deg,rgba(8,28,43,.05),rgba(2,11,18,.56)),linear-gradient(145deg,#163548 0 42%,#6d431e 43% 51%,#0b1b28 52% 100%)!important}
#loginScreen .login-showcase:before{z-index:-1!important;width:78%!important;height:17%!important;right:-8%!important;bottom:20%!important;border-radius:65% 16% 14% 24%!important;transform:skewX(-17deg) rotate(-2deg)!important;background:linear-gradient(180deg,#111b21 0 34%,#02070b 35% 100%)!important;border-top:3px solid #d8a52f!important;box-shadow:-25px 28px 55px #000!important}
#loginScreen .login-showcase:after{z-index:-2!important;bottom:0!important;height:38%!important;transform:none!important;border:0!important;background:linear-gradient(165deg,transparent 0 22%,rgba(217,167,46,.8) 22.5% 23%,#17222a 23.5% 31%,#071019 31.5% 100%)!important}
#loginScreen .login-showcase img{width:min(420px,58%)!important;margin-top:-16vh!important;filter:saturate(1.35) contrast(1.12) drop-shadow(0 0 26px rgba(233,178,52,.48))!important}
#loginScreen .login-tagline{margin-top:18px!important;font-size:15px!important;letter-spacing:7px!important;line-height:2!important}
#loginScreen .login-script{left:10%!important;bottom:22%!important;font-size:38px!important;line-height:.88!important;color:#fff!important}
#loginScreen .login-script:after{content:"";display:block;width:160px;height:3px;margin-top:12px;background:#e3aa2f;transform:rotate(-4deg)}
#loginScreen .login-box{width:min(455px,80%)!important;padding:42px 38px 30px!important;background:linear-gradient(145deg,rgba(8,30,45,.96),rgba(3,16,26,.96))!important;border:1px solid rgba(225,171,47,.42)!important;border-radius:28px!important;box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05)!important}
#loginScreen .login-welcome{font-size:20px!important;font-weight:800!important}
#loginScreen .login-box h1{font-size:34px!important;letter-spacing:1px!important;margin:5px 0 3px!important}
#loginScreen .login-box>p:not(.login-error){font-size:14px!important;color:#cbd3d9!important;margin-bottom:30px!important}
#loginScreen .login-box label{font-size:13px!important}
#loginScreen .login-box input:not([type=checkbox]){height:56px!important;border-radius:14px!important;background:#0b2638!important;border:1px solid #496171!important;padding:0 16px!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.22)!important}
#loginScreen .login-box input:focus{outline:none!important;border-color:#e1aa30!important;box-shadow:0 0 0 3px rgba(225,170,48,.12)!important}
#loginScreen .login-options{margin:16px 0 22px!important}
#loginScreen #loginButton{height:60px!important;font-weight:900!important;letter-spacing:.2px!important;box-shadow:0 8px 24px rgba(218,164,42,.22)!important}
#loginScreen .login-trust{border-top:1px solid rgba(255,255,255,.1);padding-top:22px!important;margin-top:28px!important}
@media(max-width:760px){
 #loginScreen.login-screen{position:fixed!important;display:block!important;background:#061521!important}
 #loginScreen .login-showcase{min-height:44vh!important;padding:30px 20px 70px!important}
 #loginScreen .login-showcase img{width:210px!important;margin-top:0!important}
 #loginScreen .login-tagline{font-size:10px!important;letter-spacing:4px!important;line-height:1.8!important}
 #loginScreen .login-script{left:7%!important;bottom:8%!important;font-size:24px!important}
 #loginScreen .login-script:after{width:100px!important}
 #loginScreen .login-box{width:calc(100% - 28px)!important;margin:-42px 14px 18px!important;padding:30px 22px 24px!important}
 #loginScreen .login-box h1{font-size:28px!important}
 #loginScreen .login-trust{grid-template-columns:repeat(3,1fr)!important}
}

/* LOGIN ASSET BUILD — login page only */
#loginScreen.login-screen{position:fixed!important;inset:0!important;z-index:10000!important;display:block!important;overflow:auto!important;background:#020b12!important;padding:0!important}
#loginScreen .login-stage{position:relative;box-sizing:border-box;width:min(100%,620px);min-height:100vh;margin:0 auto;padding:34px 28px 26px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(3,14,23,.04) 0%,rgba(3,14,23,.03) 45%,rgba(3,14,23,.74) 76%,#03101a 100%),url("login-background.png") center top/cover no-repeat;box-shadow:0 0 90px #000}
#loginScreen .login-logo-new{display:block!important;width:min(330px,66vw)!important;height:auto!important;max-height:none!important;object-fit:contain;margin:0 auto 2px!important;filter:drop-shadow(0 0 16px rgba(255,185,44,.42))!important}
#loginScreen .login-tagline{position:static!important;margin:0!important;color:#fff!important;text-align:center!important;font-size:15px!important;line-height:1.45!important;font-weight:800!important;letter-spacing:6px!important;text-shadow:0 2px 8px #000}
#loginScreen .login-script{position:absolute!important;left:7%!important;top:32%!important;bottom:auto!important;z-index:2!important;font:italic 31px/.86 cursive!important;color:#fff!important;transform:rotate(-7deg)!important;text-shadow:0 3px 10px #000!important}
#loginScreen .login-script:after{content:"";display:block;width:118px;height:4px;margin-top:12px;background:#f1b52f;transform:rotate(-4deg);box-shadow:0 2px 4px #000}
#loginScreen .login-box{position:relative!important;z-index:3!important;align-self:auto!important;justify-self:auto!important;width:100%!important;box-sizing:border-box!important;margin-top:34vh!important;padding:27px 30px 25px!important;border:1px solid rgba(255,204,105,.78)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(4,19,30,.88),rgba(3,13,22,.92))!important;box-shadow:0 24px 55px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08)!important;backdrop-filter:blur(13px)!important}
#loginScreen .login-welcome{font-size:20px!important;font-weight:400!important;text-align:center!important}
#loginScreen .login-box h1{margin:5px 0 2px!important;text-align:center!important;font-size:32px!important;line-height:1.1!important;color:#f2b83d!important;letter-spacing:.4px!important}
#loginScreen .login-box>p:not(.login-error){margin:0 0 23px!important;text-align:center!important;color:#fff!important;font-size:15px!important}
#loginScreen .login-field{height:54px;box-sizing:border-box;display:flex;align-items:center;gap:13px;margin:10px 0;padding:0 15px;border:1px solid #607383;border-radius:13px;background:rgba(10,37,54,.92)}
#loginScreen .login-field .field-icon{font-size:21px;color:#fff;line-height:1}
#loginScreen .login-field .eye-icon{margin-left:auto;color:#fff;font-size:20px}
#loginScreen .login-field input{min-width:0;flex:1;height:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font-size:15px!important}
#loginScreen .login-field input:focus{outline:none!important}
#loginScreen .login-options{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:14px 2px 20px!important;font-size:13px!important}
#loginScreen .login-options label{display:flex!important;align-items:center!important;gap:8px!important;font-weight:400!important;color:#fff!important}
#loginScreen .login-options input{width:20px!important;height:20px!important;margin:0!important;accent-color:#e7ad31}
#loginScreen .login-options span{color:#ffc438!important}
#loginScreen #loginButton{height:60px!important;border:0!important;border-radius:16px!important;background:linear-gradient(110deg,#ffd978,#e7a923)!important;color:#07131e!important;font-size:20px!important;font-weight:900!important;box-shadow:0 8px 24px rgba(229,170,41,.28)!important}
#loginScreen #loginButton b{float:right!important;margin-right:5px;font-size:26px!important;line-height:20px}
#loginScreen .login-error{margin:8px 0 0!important;text-align:center!important}
#loginScreen .login-trust{position:relative!important;z-index:3!important;width:100%!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin:18px 0 0!important;padding:0!important;border:0!important}
#loginScreen .login-trust>div{min-height:88px;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-direction:column!important;gap:4px!important;padding:4px 9px!important;border-right:1px solid rgba(255,255,255,.16)!important;text-align:center!important;color:#fff!important}
#loginScreen .login-trust>div:last-child{border-right:0!important}
#loginScreen .trust-icon{display:grid;width:38px;height:38px;place-items:center;color:#f3b42e!important;font-size:27px!important;font-weight:800!important;line-height:1!important}
#loginScreen .shield{border:3px solid #f3b42e;border-radius:8px 8px 14px 14px;font-size:18px!important}
#loginScreen .handshake{font-size:29px!important}
#loginScreen .clock{border:3px solid #f3b42e;border-radius:50%;font-size:20px!important}
#loginScreen .login-trust strong{font-size:13px!important;line-height:1.25!important}
#loginScreen .login-trust small{font-size:11px!important;color:#e3e7ea!important}
#loginScreen[style*="display: none"]{display:none!important}
body:has(#loginScreen:not([style*="display: none"]))>header,body:has(#loginScreen:not([style*="display: none"]))>main,body:has(#loginScreen:not([style*="display: none"]))>#modal{display:none!important}
@media(min-width:761px){#loginScreen .login-stage{width:min(100%,560px);padding-top:25px}#loginScreen .login-box{margin-top:30vh!important}}
@media(max-width:520px){#loginScreen .login-stage{width:100%;padding:24px 20px 20px;min-height:100svh;background-position:center top}#loginScreen .login-logo-new{width:min(280px,68vw)!important}#loginScreen .login-tagline{font-size:12px!important;letter-spacing:4px!important}#loginScreen .login-script{top:31%!important;font-size:25px!important}#loginScreen .login-box{margin-top:32vh!important;padding:23px 22px 22px!important;border-radius:25px!important}#loginScreen .login-box h1{font-size:28px!important}#loginScreen .login-trust{margin-top:15px!important}#loginScreen .login-trust>div{padding-left:5px!important;padding-right:5px!important}}

/* LOGIN GLASS CARD — stronger premium glass + gold glow */
#loginScreen .login-box{
  border:1px solid rgba(255,199,76,.88)!important;
  background:
    linear-gradient(145deg,rgba(19,35,48,.50),rgba(2,12,20,.64))!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:
    0 0 0 1px rgba(255,221,145,.10) inset,
    0 0 22px rgba(241,181,47,.38),
    0 0 58px rgba(225,157,24,.20),
    0 24px 55px rgba(0,0,0,.52)!important;
}
#loginScreen .login-box:before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:30px;
  background:linear-gradient(135deg,rgba(255,222,145,.60),rgba(217,167,46,.10) 35%,rgba(217,167,46,.48) 78%,rgba(255,229,163,.70));
  filter:blur(7px);opacity:.72;pointer-events:none;
}
#loginScreen .login-box:after{
  content:"";position:absolute;left:7%;right:7%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,239,194,.95),transparent);
  box-shadow:0 0 15px rgba(255,198,68,.85);pointer-events:none;
}
#loginScreen .login-field{
  background:rgba(7,29,43,.56)!important;
  border-color:rgba(143,167,184,.58)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}

/* LOGIN GLASS TRANSPARENCY TUNE */
#loginScreen .login-box{
  background:linear-gradient(145deg,rgba(10,27,40,.27),rgba(2,12,20,.38))!important;
  -webkit-backdrop-filter:blur(10px) saturate(135%)!important;
  backdrop-filter:blur(10px) saturate(135%)!important;
  border-color:rgba(255,199,76,.92)!important;
  box-shadow:
    0 0 0 1px rgba(255,229,163,.10) inset,
    0 0 28px rgba(241,181,47,.46),
    0 0 70px rgba(225,157,24,.23),
    0 24px 55px rgba(0,0,0,.42)!important;
}

/* LOGIN FINAL VISIBILITY + TRUST ROW */
#loginScreen .login-box{
 background:linear-gradient(145deg,rgba(7,24,36,.12),rgba(2,12,20,.22))!important;
 -webkit-backdrop-filter:blur(5px) saturate(125%)!important;
 backdrop-filter:blur(5px) saturate(125%)!important;
}
#loginScreen .login-options{justify-content:flex-start!important}
#loginScreen .login-trust{margin-top:18px!important;padding:8px 0 4px!important;background:rgba(2,12,20,.18)!important;border-radius:18px!important}
#loginScreen .login-trust>div{min-width:0!important;min-height:92px!important;justify-content:flex-start!important}
#loginScreen .login-trust strong{display:block!important;min-height:32px!important;font-size:12px!important;line-height:1.2!important}
#loginScreen .login-trust small{display:block!important;font-size:10px!important;line-height:1.2!important}
#loginScreen .trust-icon{width:34px!important;height:34px!important;border:0!important;border-radius:0!important}
#loginScreen .trust-icon svg{display:block;width:32px;height:32px;fill:none;stroke:#f3b42e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:420px){#loginScreen .login-trust strong{font-size:11px!important}#loginScreen .login-trust small{font-size:9px!important}}

/* LOGIN BUTTON — deep polished logo gold */
#loginScreen #loginButton{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,218,112,.95)!important;
  background:
    linear-gradient(180deg,#ffe49a 0%,#e3ad35 18%,#b97808 52%,#d69a20 76%,#f2c85c 100%)!important;
  color:#080d12!important;
  text-shadow:0 1px 0 rgba(255,239,184,.55)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -3px 7px rgba(92,49,0,.38),
    0 0 18px rgba(229,165,37,.48),
    0 7px 20px rgba(0,0,0,.36)!important;
}
#loginScreen #loginButton:before{
  content:"";position:absolute;left:4%;right:4%;top:2px;height:42%;
  border-radius:14px 14px 45% 45%;
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0));
  pointer-events:none;
}
#loginScreen #loginButton:hover{
  filter:brightness(1.08) saturate(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -3px 7px rgba(92,49,0,.38),0 0 26px rgba(239,178,47,.62),0 8px 22px rgba(0,0,0,.4)!important;
}
#loginScreen #loginButton:active{transform:translateY(1px);filter:brightness(.96)}

/* TRUST ROW TYPOGRAPHY — clean three-column labels */
#loginScreen .login-trust>div{box-sizing:border-box!important;padding:5px 8px 8px!important}
#loginScreen .login-trust strong{
  min-height:0!important;
  margin-top:2px!important;
  white-space:nowrap!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:0!important;
}
#loginScreen .login-trust small{
  margin-top:1px!important;
  white-space:nowrap!important;
  font-size:8.5px!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  color:rgba(255,255,255,.82)!important;
}
@media(max-width:390px){
 #loginScreen .login-trust>div{padding-left:3px!important;padding-right:3px!important}
 #loginScreen .login-trust strong{font-size:10px!important}
 #loginScreen .login-trust small{font-size:7.5px!important}
}

/* ADMIN MOCKUP MATCH */
#dashboard{max-width:560px;margin:0 auto}
#dashboard .admin-mobile-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(145deg,#0d202d,#06131d);border:1px solid rgba(255,255,255,.24);border-radius:26px 26px 0 0;color:#fff}
#dashboard .admin-mobile-head .brand img{width:72px;height:72px}
#dashboard .admin-mobile-head strong{font-size:25px;letter-spacing:.4px}#dashboard .admin-mobile-head em{font-style:normal;color:#e9ae2e}
#dashboard .admin-mobile-head small{font-size:9px;letter-spacing:2px;color:#fff}
.admin-menu{width:52px;height:52px;border-radius:14px;border:1px solid #ffffff18;background:#102432;color:#fff;font-size:28px}
#dashboard .admin-hero{height:190px;margin:0;position:relative;overflow:hidden;padding:34px 22px;display:block;background:linear-gradient(90deg,rgba(2,10,16,.83) 0%,rgba(2,10,16,.25) 55%,rgba(2,10,16,.05)),url('admin-hero.png') center/cover no-repeat;border-radius:0}
#dashboard .admin-hero h1{position:relative;z-index:1;color:#fff;font-size:31px;line-height:1.02;text-shadow:0 2px 8px #000}
#dashboard .admin-hero p{position:relative;z-index:1;color:#fff;font-size:15px;line-height:1.4}
#dashboard .cards{grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0 8px 18px;background:#03131d}
#dashboard .cards>div{min-height:132px;padding:19px 5px 12px;text-align:center;border-radius:17px;background:linear-gradient(145deg,#12232e,#071722);border:1px solid #ffffff4a;box-shadow:none;color:#fff}
#dashboard .cards>div:before{display:none}#dashboard .cards i{display:block;font-style:normal;color:#f1b82f;font-size:27px;margin-bottom:11px}
#dashboard .cards b{font-size:25px;color:#fff}#dashboard .cards span{font-size:12px;color:#fff}
#dashboard .quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 8px 18px;background:#03131d;margin:0}
#dashboard .quick-actions button{min-height:56px;border-radius:13px;border:1px solid #ffffff2f;background:#0b1d29;color:#fff;font-weight:800}
#dashboard .quick-actions #newJob{background:linear-gradient(180deg,#ffe08a,#e5a51f);color:#071018;border-color:#f7cf65;box-shadow:inset 0 1px #fff8,0 5px 14px #0004}
#dashboard .quick-actions .preview-disabled{opacity:.55;cursor:not-allowed}
#dashboard .admin-jobs{margin:0 8px 18px;padding:14px;background:linear-gradient(145deg,#0b1d29,#06151f);border:1px solid #ffffff30;border-radius:18px;color:#fff;box-shadow:none}
#dashboard .admin-jobs .panelhead{display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:8px}
#dashboard .admin-jobs .panelhead h2{color:#fff;font-size:21px;margin:0}.view-all{color:#8fdfff;font-size:12px}
#dashboard .admin-jobs #jobSearch{grid-column:1/-1;margin-top:8px;background:#0d202c;color:#fff;border-color:#ffffff22}
#dashboard .admin-jobs .job{background:#0b1d28;border:1px solid #ffffff20;margin:8px 0;padding:12px;border-radius:14px;color:#fff}
#dashboard .admin-jobs .ref,#dashboard .admin-jobs .job b{color:#fff}#dashboard .admin-jobs .job small{color:#d7e0e5}
#dashboard .make-badge{background:#101f29!important;border:1px solid #d7a52d!important;color:#f3c65b!important;border-radius:50px!important}
@media(max-width:600px){main{padding:0!important}#dashboard{max-width:none}body:not(:has(#loginScreen:not([style*="display: none"]))){background:#03131d}#dashboard .admin-mobile-head{border-radius:0}#dashboard .admin-mobile-head strong{font-size:21px}#dashboard .admin-mobile-head .brand img{width:62px;height:62px}#dashboard .admin-mobile-head small{font-size:7px}.admin-menu{width:48px;height:48px}}

/* ADMIN STEP 1 — remove old desktop header so mockup header stands alone */
body:has(#dashboard.active)>.legacy-header{display:none!important}
body:has(#dashboard.active)>main{padding-top:18px!important}

/* ADMIN STEP 2 — force uploaded hero artwork */
#dashboard .admin-hero{
  background-image:
    linear-gradient(90deg,rgba(2,10,16,.84) 0%,rgba(2,10,16,.48) 38%,rgba(2,10,16,.08) 68%,rgba(2,10,16,.02) 100%),
    url('./admin-hero.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
#dashboard .admin-hero:before,#dashboard .admin-hero:after{content:none!important;display:none!important}

/* ADMIN STEP 3 — deep polished logo-gold header lettering */
#dashboard .admin-mobile-head strong em{
  color:#d79b1e!important;
  background:linear-gradient(180deg,#fff0a6 0%,#efc04c 22%,#b87408 53%,#d99d20 74%,#f5cf68 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,235,160,.35)) drop-shadow(0 0 5px rgba(221,158,27,.22));
}

/* ADMIN STEP 3B — match premium mockup header proportions */
#dashboard .admin-mobile-head{
  min-height:102px!important;
  padding:13px 18px!important;
  border-radius:28px 28px 0 0!important;
  background:linear-gradient(145deg,#0d202d 0%,#06131d 70%,#091925 100%)!important;
}
#dashboard .admin-mobile-head .brand{gap:14px!important}
#dashboard .admin-mobile-head .brand img{
  width:82px!important;height:82px!important;
  filter:drop-shadow(0 0 8px rgba(224,165,35,.25));
}
#dashboard .admin-mobile-head strong{
  font-size:28px!important;
  line-height:1!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;
}
#dashboard .admin-mobile-head small{
  margin-top:9px!important;
  font-size:9px!important;
  line-height:1!important;
  letter-spacing:2.1px!important;
  color:#fff!important;
  white-space:nowrap!important;
}
#dashboard .admin-menu{
  width:58px!important;height:58px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,rgba(20,43,58,.9),rgba(8,25,36,.92))!important;
  color:#fff!important;
  font-size:31px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 7px 18px rgba(0,0,0,.2)!important;
}
@media(max-width:600px){
 #dashboard .admin-mobile-head{min-height:94px!important;padding:11px 14px!important}
 #dashboard .admin-mobile-head .brand img{width:72px!important;height:72px!important}
 #dashboard .admin-mobile-head strong{font-size:24px!important}
 #dashboard .admin-mobile-head small{font-size:7.5px!important;letter-spacing:1.65px!important}
 #dashboard .admin-menu{width:54px!important;height:54px!important;font-size:29px!important}
}

/* ADMIN ACTIONS — only working controls, with full-width gold New Job */
#dashboard .quick-actions{grid-template-columns:repeat(2,1fr)!important}
#dashboard .quick-actions #newJob{
  grid-column:1/-1!important;
  min-height:62px!important;
  background:linear-gradient(180deg,#ffe49a 0%,#e3ad35 18%,#b97808 52%,#d69a20 76%,#f2c85c 100%)!important;
  border:1px solid rgba(255,218,112,.96)!important;
  color:#080d12!important;
  text-shadow:0 1px 0 rgba(255,239,184,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 7px rgba(92,49,0,.38),0 0 18px rgba(229,165,37,.32),0 7px 20px rgba(0,0,0,.30)!important;
}
#dashboard .admin-hero h1 b{
  font-weight:900!important;
  color:#d79b1e!important;
  background:linear-gradient(180deg,#fff0a6 0%,#efc04c 22%,#b87408 53%,#d99d20 74%,#f5cf68 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,235,160,.38)) drop-shadow(0 0 5px rgba(221,158,27,.24));
}

/* ADMIN GOLD SYNC — use the exact LOGISTICS metallic treatment */
#dashboard .admin-hero h1 #adminGreeting{
  color:#0b1b2b!important;
  background:none!important;
  -webkit-text-fill-color:#0b1b2b!important;
  filter:none!important;
  text-shadow:0 1px 2px rgba(255,255,255,.18)!important;
}
#dashboard .admin-hero h1 b{
  font-weight:900!important;
  color:#d79b1e!important;
  background:linear-gradient(180deg,#fff0a6 0%,#efc04c 22%,#b87408 53%,#d99d20 74%,#f5cf68 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  filter:drop-shadow(0 1px 0 rgba(255,235,160,.35)) drop-shadow(0 0 5px rgba(221,158,27,.22))!important;
}
#dashboard .quick-actions #newJob{
  background:linear-gradient(180deg,#fff0a6 0%,#efc04c 22%,#b87408 53%,#d99d20 74%,#f5cf68 100%)!important;
  border:1px solid #d79b1e!important;
  color:#0b1b2b!important;
  font-weight:900!important;
  text-shadow:0 1px 0 rgba(255,240,180,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -2px 5px rgba(91,51,0,.28),0 0 12px rgba(221,158,27,.22),0 6px 16px rgba(0,0,0,.25)!important;
}

/* ADMIN GOLD CORRECTION — solid LOGISTICS gold and bold white greeting */
#dashboard .admin-hero h1 #adminGreeting{
  color:#fff!important;
  background:none!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:900!important;
  filter:none!important;
  text-shadow:0 2px 8px rgba(0,0,0,.72)!important;
}
#dashboard .admin-hero h1 b{
  color:#d79b1e!important;
  background:none!important;
  -webkit-text-fill-color:#d79b1e!important;
  font-weight:900!important;
  filter:none!important;
  text-shadow:0 2px 7px rgba(0,0,0,.48)!important;
}
#dashboard .quick-actions #newJob{
  background:#d79b1e!important;
  border-color:#e8b844!important;
  color:#0b1b2b!important;
  font-weight:900!important;
  text-shadow:none!important;
  box-shadow:inset 0 1px 0 rgba(255,236,164,.48),inset 0 -2px 4px rgba(105,62,0,.22),0 6px 16px rgba(0,0,0,.25)!important;
}

/* ADMIN NEW JOB — polished shiny gold, same base logo gold */
#dashboard .quick-actions #newJob{
  background:linear-gradient(180deg,#f5ca5d 0%,#e7ad2e 20%,#d79b1e 48%,#b97808 70%,#e0a62a 88%,#f0c453 100%)!important;
  border:1px solid #efc456!important;
  box-shadow:inset 0 2px 1px rgba(255,247,203,.70),inset 0 -3px 5px rgba(100,57,0,.30),0 0 12px rgba(215,155,30,.24),0 7px 17px rgba(0,0,0,.27)!important;
}

/* ADMIN STATUS CARDS — match approved mockup */
#dashboard .cards{
  gap:10px!important;
  padding:0 10px 20px!important;
}
#dashboard .cards>div{
  min-height:150px!important;
  padding:28px 8px 18px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#101d25 0%,#071620 100%)!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.18)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
#dashboard .cards>div i{
  display:block!important;
  margin:0 0 15px!important;
  color:#e4a91e!important;
  font-size:30px!important;
  line-height:1!important;
  font-style:normal!important;
}
#dashboard .cards>div b{
  display:block!important;
  margin:0 0 7px!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:900!important;
}
#dashboard .cards>div span{
  color:#fff!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:600!important;
  white-space:nowrap!important;
}

/* ADMIN STATUS ICONS — match mockup shapes and colours */
#dashboard .cards .stat-icon{width:40px!important;height:40px!important;margin:0 0 15px!important;display:flex!important;align-items:center!important;justify-content:center!important}
#dashboard .cards .stat-icon svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#dashboard .cards .stat-active svg{fill:currentColor;stroke:#ffd45c;stroke-width:1.2}
#dashboard .cards .stat-total{color:#f2b91f!important}
#dashboard .cards .stat-active{color:#e7a91d!important}
#dashboard .cards .stat-completed{color:#78e33e!important}
#dashboard .cards .stat-transit{color:#f2b326!important}

/* ADMIN STATUS CARDS — same glass treatment as approved login box */
#dashboard .cards>div{
  background:linear-gradient(145deg,rgba(8,25,36,.62),rgba(4,16,25,.48))!important;
  border:1px solid rgba(215,155,30,.58)!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,196,67,.05),
    0 8px 24px rgba(0,0,0,.24),
    0 0 14px rgba(215,155,30,.10)!important;
}

/* ADMIN HEADER — restored logout */
#dashboard .admin-head-actions{display:flex;align-items:center;gap:8px}
#dashboard .admin-logout{
  min-height:42px;padding:0 13px;border-radius:12px;
  border:1px solid rgba(215,155,30,.58);
  background:linear-gradient(145deg,rgba(8,25,36,.72),rgba(4,16,25,.56));
  color:#fff;font-weight:800;font-size:12px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.2);
}

/* ADMIN STATUS CARDS — exact login-box glass language */
#dashboard .cards>div{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(145deg,rgba(10,34,48,.72) 0%,rgba(7,28,41,.58) 58%,rgba(5,22,33,.52) 100%)!important;
  border:1px solid rgba(224,168,39,.92)!important;
  border-radius:26px!important;
  -webkit-backdrop-filter:blur(18px) saturate(118%)!important;
  backdrop-filter:blur(18px) saturate(118%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,181,.20),
    inset 0 -1px 0 rgba(116,69,0,.20),
    0 0 0 1px rgba(255,207,83,.08),
    0 8px 24px rgba(0,0,0,.30),
    0 0 16px rgba(215,155,30,.16)!important;
}
#dashboard .cards>div:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,rgba(255,222,125,.12) 0%,rgba(255,255,255,.025) 34%,transparent 56%,rgba(218,154,22,.06) 100%)!important;
}
#dashboard .cards>div>*{position:relative;z-index:1}

/* ADMIN STATUS CARDS — approved login glass, tuned per-card so four glows do not merge */
#dashboard .cards>div{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(7,24,36,.12),rgba(2,12,20,.22))!important;
  -webkit-backdrop-filter:blur(5px) saturate(125%)!important;
  backdrop-filter:blur(5px) saturate(125%)!important;
  border:1px solid rgba(255,199,76,.92)!important;
  box-shadow:
    0 0 0 1px rgba(255,229,163,.10) inset,
    0 0 12px rgba(241,181,47,.22),
    0 10px 24px rgba(0,0,0,.32)!important;
}
#dashboard .cards>div:before{
  content:""!important;display:block!important;position:absolute!important;
  inset:0!important;z-index:0!important;border-radius:inherit!important;
  background:linear-gradient(135deg,rgba(255,222,145,.15),rgba(217,167,46,.025) 35%,transparent 58%,rgba(255,229,163,.08))!important;
  filter:none!important;opacity:1!important;pointer-events:none!important;
}
#dashboard .cards>div:after{
  content:""!important;display:block!important;position:absolute!important;
  left:7%!important;right:7%!important;top:0!important;height:1px!important;bottom:auto!important;
  background:linear-gradient(90deg,transparent,rgba(255,239,194,.95),transparent)!important;
  box-shadow:0 0 8px rgba(255,198,68,.50)!important;
  pointer-events:none!important;border-radius:0!important;
}
#dashboard .cards>div>*{position:relative!important;z-index:1!important}


/* ADMIN STATUS CARDS — translucent shiny gold glass */
#dashboard .cards{
  position:relative!important;
  isolation:isolate!important;
  background:#03131d!important;
}
#dashboard .cards:before{content:none!important;display:none!important}
#dashboard .cards>div{
  position:relative!important;
  z-index:1!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,
      rgba(255,232,154,.42) 0%,
      rgba(232,174,52,.32) 18%,
      rgba(183,112,8,.24) 52%,
      rgba(217,154,32,.29) 76%,
      rgba(244,202,92,.36) 100%)!important;
  -webkit-backdrop-filter:blur(5px) saturate(135%)!important;
  backdrop-filter:blur(5px) saturate(135%)!important;
  border:1px solid rgba(255,211,100,.94)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,205,.62),
    inset 0 -2px 5px rgba(105,62,0,.18),
    0 0 0 1px rgba(255,229,163,.08),
    0 0 12px rgba(229,165,37,.20),
    0 8px 18px rgba(0,0,0,.28)!important;
}
#dashboard .cards>div:before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:4%!important;
  right:4%!important;
  top:2px!important;
  height:42%!important;
  z-index:0!important;
  border-radius:20px 20px 48% 48%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,244,195,.08) 48%,rgba(255,255,255,0))!important;
  filter:none!important;
  opacity:1!important;
  pointer-events:none!important;
}
#dashboard .cards>div:after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  top:0!important;
  height:1px!important;
  bottom:auto!important;
  background:linear-gradient(90deg,transparent,rgba(255,247,213,.98),transparent)!important;
  box-shadow:0 0 8px rgba(255,198,68,.52)!important;
  pointer-events:none!important;
  border-radius:0!important;
}
#dashboard .cards>div>*{position:relative!important;z-index:1!important}


/* ADMIN DASHBOARD — rebuilt directly against approved reference — deployment retry */
#dashboard{max-width:560px!important;margin:18px auto 32px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#dashboard .admin-shell{overflow:visible;border-radius:27px;background:#061a26;box-shadow:0 28px 70px rgba(0,0,0,.30)}
#dashboard .admin-mobile-head{
 display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:100px!important;padding:12px 16px!important;
 border:1px solid rgba(210,224,231,.32)!important;border-bottom-color:rgba(242,181,47,.55)!important;border-radius:27px 27px 0 0!important;
 background:linear-gradient(145deg,rgba(8,28,40,.96),rgba(3,18,28,.98))!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important
}
#dashboard .admin-mobile-head .brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:0}
#dashboard .admin-mobile-head .brand img{width:68px!important;height:68px!important;object-fit:contain!important}
#dashboard .admin-mobile-head .brand strong{font-size:25px!important;line-height:1!important;letter-spacing:.3px!important;color:#fff!important;white-space:nowrap}
#dashboard .admin-mobile-head .brand strong em{font-style:normal!important;color:#efb12a!important}
#dashboard .admin-mobile-head .brand small{display:block!important;margin-top:9px!important;font-size:7.8px!important;font-weight:800!important;letter-spacing:2px!important;color:#fff!important;white-space:nowrap}
#dashboard .admin-head-actions{display:flex!important;align-items:center!important;gap:9px!important;position:relative!important}
#dashboard .admin-logout{height:44px!important;padding:0 14px!important;border-radius:12px!important;border:1px solid rgba(233,170,29,.75)!important;background:rgba(3,18,28,.75)!important;color:#fff!important;font-size:11px!important;font-weight:800!important}
#dashboard .admin-menu{width:56px!important;height:56px!important;border-radius:15px!important;border:1px solid rgba(255,255,255,.15)!important;background:linear-gradient(145deg,#102c3d,#071c29)!important;font-size:0!important;position:relative!important}
#dashboard .admin-menu:before{content:""!important;position:absolute!important;left:17px!important;right:17px!important;top:17px!important;height:3px!important;border-radius:4px!important;background:#fff!important;box-shadow:0 8px 0 #fff,0 16px 0 #fff!important}
#dashboard .admin-menu:after{display:none!important}
#dashboard .admin-menu-panel{position:absolute;right:0;top:64px;z-index:60;width:180px;padding:8px;border:1px solid rgba(255,199,76,.5);border-radius:15px;background:rgba(4,22,33,.97);box-shadow:0 18px 40px rgba(0,0,0,.5);backdrop-filter:blur(14px)}
#dashboard .admin-menu-panel[hidden]{display:none!important}
#dashboard .admin-menu-panel button{display:block;width:100%;padding:12px;border:0;border-radius:9px;background:transparent;color:#fff;text-align:left;font-weight:800}
#dashboard .admin-menu-panel button:hover{background:rgba(239,177,42,.13);color:#ffd267}
#dashboard .admin-hero{height:260px!important;padding:42px 36px!important;border:0!important;border-radius:0!important;background:linear-gradient(90deg,rgba(2,13,20,.76) 0%,rgba(2,13,20,.24) 45%,rgba(2,13,20,0) 70%),url('./admin-hero.png') center/cover no-repeat!important}
#dashboard .admin-hero h1{margin:0 0 11px!important;font-size:31px!important;line-height:1.02!important;font-weight:800!important;color:#fff!important;text-shadow:0 2px 7px rgba(0,0,0,.5)}
#dashboard .admin-hero h1 b{color:#fff!important}
#dashboard .admin-hero p{margin:0!important;font-size:15px!important;line-height:1.45!important;color:#fff!important}
#dashboard .cards{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:9px!important;padding:0 20px 18px!important;margin:0!important;background:#061a26!important}
#dashboard .cards>div{min-width:0!important;min-height:174px!important;padding:27px 5px 18px!important;border-radius:19px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;background:linear-gradient(180deg,rgba(255,235,167,.42),rgba(183,122,12,.24) 35%,rgba(91,67,16,.31) 100%)!important;backdrop-filter:blur(7px) saturate(140%)!important;border:1px solid rgba(255,207,82,.95)!important;box-shadow:inset 0 1px rgba(255,250,222,.72),inset 0 -10px 22px rgba(66,40,0,.13),0 0 14px rgba(232,169,37,.18)!important}
#dashboard .cards>div:before{content:""!important;position:absolute!important;inset:1px 3px auto!important;height:42%!important;border-radius:17px 17px 50% 50%!important;background:linear-gradient(180deg,rgba(255,255,255,.29),transparent)!important;pointer-events:none!important}
#dashboard .cards>div:after{content:""!important;position:absolute!important;left:10%!important;right:10%!important;top:1px!important;height:1px!important;background:linear-gradient(90deg,transparent,#fff4c9,transparent)!important;box-shadow:0 0 7px rgba(255,206,91,.5)!important}
#dashboard .cards .stat-icon{width:40px!important;height:40px!important;margin:0 0 11px!important}
#dashboard .cards .stat-icon svg{width:34px!important;height:34px!important}
#dashboard .cards>div b{font-size:27px!important;line-height:1!important;margin:0 0 11px!important;color:#fff!important}
#dashboard .cards>div span{font-size:12px!important;line-height:1!important;color:#fff!important;white-space:nowrap!important}
#dashboard .quick-actions{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;padding:0 20px 18px!important;background:#061a26!important}
#dashboard .quick-actions button{min-height:58px!important;padding:0 14px!important;border-radius:14px!important;border:1px solid rgba(197,215,224,.28)!important;background:linear-gradient(145deg,rgba(12,39,54,.9),rgba(5,25,36,.95))!important;color:#fff!important;font-size:14px!important;font-weight:800!important;box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.16)!important}
#dashboard .quick-actions #newJob{grid-column:1/-1!important;grid-row:2!important;background:linear-gradient(180deg,#ffe08a 0%,#f2bd43 30%,#e3a323 72%,#f2bc3c 100%)!important;border-color:#f5ce65!important;color:#071018!important;box-shadow:inset 0 1px rgba(255,255,255,.72),0 5px 14px rgba(219,151,18,.2)!important}
#dashboard .admin-jobs{margin:0 15px 18px!important;padding:14px 13px 12px!important;border-radius:20px!important;border:1px solid rgba(197,215,224,.25)!important;background:linear-gradient(145deg,rgba(8,31,44,.96),rgba(3,20,30,.98))!important;box-shadow:inset 0 1px rgba(255,255,255,.04),0 15px 30px rgba(0,0,0,.16)!important}
#dashboard .admin-jobs .panelhead{display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;align-items:center!important}
#dashboard .admin-jobs .panelhead h2{margin:0!important;font-size:21px!important;color:#fff!important}
#dashboard .admin-jobs .view-all{font-size:12px!important;color:#a9e7ff!important}
#dashboard .admin-jobs #jobSearch{grid-column:1/-1!important;width:100%!important;height:46px!important;margin:4px 0 6px!important;padding:0 12px!important;border-radius:12px!important;border:1px solid rgba(197,215,224,.22)!important;background:rgba(7,29,42,.78)!important;color:#fff!important}
#dashboard .admin-jobs #jobList{border-top:1px solid rgba(197,215,224,.18)!important;padding-top:7px!important}
#dashboard .admin-jobs .job{display:grid!important;grid-template-columns:165px 1fr auto!important;align-items:center!important;gap:10px!important;min-height:82px!important;margin:7px 0!important;padding:9px 11px!important;border-radius:14px!important;border:1px solid rgba(197,215,224,.17)!important;background:linear-gradient(145deg,rgba(11,38,52,.88),rgba(5,25,36,.92))!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
#dashboard .admin-jobs .job:before{content:""!important;width:3px!important;align-self:stretch!important;margin:-1px 0 -1px -11px!important;border-radius:5px!important;background:#f2b52e!important;position:absolute!important}
#dashboard .admin-jobs .job-ref-line{display:flex!important;align-items:center!important;gap:9px!important}
#dashboard .admin-jobs .make-badge{display:flex!important;align-items:center!important;justify-content:center!important;width:52px!important;height:52px!important;min-width:52px!important;border-radius:50%!important;border:1px solid #e8ad28!important;background:radial-gradient(circle,#102c3a,#071823)!important;color:#e8ad28!important;font-size:8px!important;font-weight:900!important;text-align:center!important;padding:4px!important}
#dashboard .admin-jobs .ref{font-size:14px!important;font-weight:900!important;color:#fff!important}
#dashboard .admin-jobs .job strong{font-size:13px!important;color:#fff!important}
#dashboard .admin-jobs .job small{display:block!important;margin-top:4px!important;font-size:10.5px!important;line-height:1.35!important;color:#b7c7cf!important}
#dashboard .admin-jobs .status{display:inline-block!important;white-space:nowrap!important;padding:7px 11px!important;border-radius:18px!important;font-size:10px!important;font-weight:900!important}
@media(max-width:600px){
 #dashboard{margin:0 auto!important}
 #dashboard .admin-shell{border-radius:0!important}
 #dashboard .admin-mobile-head{border-radius:0!important;padding:10px 12px!important}
 #dashboard .admin-mobile-head .brand img{width:58px!important;height:58px!important}
 #dashboard .admin-mobile-head .brand strong{font-size:20px!important}
 #dashboard .admin-mobile-head .brand small{font-size:6.5px!important;letter-spacing:1.4px!important}
 #dashboard .admin-logout{padding:0 9px!important}
 #dashboard .admin-menu{width:50px!important;height:50px!important}
 #dashboard .admin-hero{height:245px!important;padding:38px 21px!important}
 #dashboard .cards{gap:8px!important;padding:0 10px 16px!important}
 #dashboard .cards>div{min-height:154px!important;border-radius:18px!important}
 #dashboard .cards>div b{font-size:25px!important}
 #dashboard .quick-actions{gap:8px!important;padding:0 10px 16px!important}
 #dashboard .quick-actions button{padding:0 7px!important;font-size:12px!important}
 #dashboard .admin-jobs{margin:0 8px 14px!important}
 #dashboard .admin-jobs .job{grid-template-columns:1fr auto!important}
 #dashboard .admin-jobs .job>div:nth-child(2){grid-column:1/-1!important}
}


/* NEW JOB FORM — admin blue with deep metallic-gold field labels */
#modal.modal{
  background:rgba(1,10,16,.78)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  backdrop-filter:blur(8px)!important;
}
#modal .modalbox{
  background:#061a26!important;
  border:1px solid rgba(218,158,31,.72)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:#fff!important;
}
#modal .modalbox h2{color:#fff!important}
#modal .modalbox .muted{color:#aebfc8!important}
#modal .modalbox label{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid rgba(232,174,43,.88)!important;
  border-radius:12px!important;
  background:
    linear-gradient(180deg,#8d6510 0%,#6d4a06 18%,#3f2a03 54%,#76500a 82%,#a57817 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,226,137,.62),
    inset 0 -1px 0 rgba(70,40,0,.65),
    0 0 10px rgba(213,151,26,.13)!important;
  color:#fff1be!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.45px!important;
  text-transform:uppercase!important;
  padding:9px 10px 0!important;
}
#modal .modalbox label input,
#modal .modalbox label select,
#modal .modalbox label textarea{
  width:calc(100% + 20px)!important;
  max-width:none!important;
  margin:8px -10px 0!important;
  border:0!important;
  border-top:1px solid rgba(232,174,43,.58)!important;
  border-radius:0!important;
  background:#092333!important;
  color:#fff!important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.2)!important;
}
#modal .modalbox label input,
#modal .modalbox label select{min-height:44px!important;padding:0 12px!important}
#modal .modalbox label textarea{min-height:78px!important;padding:11px 12px!important;resize:vertical!important}
#modal .modalbox input::placeholder,
#modal .modalbox textarea::placeholder{color:#8096a2!important}
#modal .modalbox .close{
  border:1px solid rgba(232,174,43,.75)!important;
  background:#092333!important;
  color:#f1b52e!important;
}
#modal #createJob{
  background:linear-gradient(180deg,#f6cf68 0%,#e9ad2d 36%,#c8870d 72%,#e8ad2b 100%)!important;
  border:1px solid #f2c554!important;
  color:#071018!important;
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 8px 18px rgba(197,132,8,.2)!important;
}


/* Centre manufacturer artwork inside Recent Jobs circular badge */
#dashboard .admin-jobs .make-badge.make-badge-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px!important;
  overflow:hidden!important;
}
#dashboard .admin-jobs .make-badge.make-badge-logo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:38px!important;
  max-height:38px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}


/* Admin controls — match dark logout-button finish with metallic gold borders */
#dashboard .quick-actions button:not(#newJob),
#dashboard .admin-jobs,
#dashboard .admin-jobs #jobSearch,
#dashboard .admin-jobs .job{
  background:#061a26!important;
  border:1px solid #c89200!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 10px rgba(200,146,0,.08)!important;
}


/* DRIVER PAGE — approved reference, stage 1: shell + hero only */
#driver{
  max-width:560px!important;
  margin:0 auto!important;
}
body:has(#driver.active){
  background:#061722!important;
}
body:has(#driver.active)>header{
  max-width:560px!important;
  margin:0 auto!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-bottom-color:rgba(217,167,46,.18)!important;
  border-radius:26px 26px 0 0!important;
  background:linear-gradient(145deg,#0d202d,#06131d)!important;
  padding:10px 14px!important;
}
body:has(#driver.active)>header .brand img{
  width:68px!important;height:68px!important;
}
body:has(#driver.active)>header .brand strong{
  font-size:24px!important;
}
body:has(#driver.active)>header .brand small{
  display:block!important;
  color:#fff!important;
  font-size:8px!important;
  letter-spacing:1.8px!important;
}
body:has(#driver.active)>main{
  max-width:560px!important;
  padding:0 8px 30px!important;
}
#driver .driver-hero{
  min-height:325px!important;
  height:325px!important;
  margin:0!important;
  padding:42px 22px 76px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
  background:
    linear-gradient(90deg,rgba(3,14,22,.72) 0%,rgba(3,14,22,.30) 46%,rgba(3,14,22,.08) 100%),
    url("login-background.png") center 63%/cover no-repeat!important;
}
#driver .driver-hero:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;height:auto!important;
  background:linear-gradient(180deg,rgba(2,11,18,.08),rgba(2,11,18,.10) 62%,rgba(2,11,18,.64))!important;
  transform:none!important;
  pointer-events:none!important;
}
#driver .driver-hero:before{content:none!important}
#driver .driver-hero>div:first-child{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
}
#driver .screen-kicker{display:none!important}
#driver .driver-hero h1{
  margin:0 0 10px!important;
  color:#fff!important;
  font-size:40px!important;
  line-height:1!important;
  text-shadow:0 2px 10px #000!important;
}
#driver .driver-hero h1 b{color:#efb53a!important}
#driver .driver-hero p{
  margin:0!important;
  max-width:285px!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.45!important;
  text-shadow:0 2px 8px #000!important;
}
#driver .script-tag{
  position:absolute!important;
  top:-22px!important;
  right:0!important;
  margin:0!important;
  color:#fff!important;
  font:italic 25px/1.05 cursive!important;
  text-align:center!important;
  transform:rotate(-5deg)!important;
  text-shadow:0 2px 8px #000!important;
}
#driver .script-tag:after{
  content:"";
  display:block;
  width:145px;
  height:4px;
  margin:12px auto 0;
  background:#eab12d;
  transform:rotate(-8deg);
  box-shadow:0 2px 4px #000;
}
#driver .driver-road-art{display:none!important}
#driver .driver-picker{
  z-index:4!important;
}
@media(max-width:520px){
  body:has(#driver.active)>header{border-radius:0 0 18px 18px!important}
  body:has(#driver.active)>header .brand img{width:58px!important;height:58px!important}
  body:has(#driver.active)>header .brand strong{font-size:20px!important}
  #driver .driver-hero{height:300px!important;min-height:300px!important;padding:38px 16px 72px!important}
  #driver .driver-hero h1{font-size:36px!important}
  #driver .driver-hero p{font-size:16px!important;max-width:245px!important}
  #driver .script-tag{font-size:21px!important;right:2px!important}
}


/* DRIVER VEHICLE DETAILS — hero image fills the full details card */
#driver .driver-job-hero{position:relative!important;overflow:hidden!important;background:linear-gradient(90deg,rgba(4,18,29,.96) 0%,rgba(4,18,29,.88) 48%,rgba(4,18,29,.52) 100%),url("admin-hero.png") center/cover no-repeat!important}
#driver .driver-job-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,19,30,.08),rgba(5,19,30,.30));pointer-events:none}
#driver .driver-job-hero>*{position:relative;z-index:1}
#driver .driver-job-side{min-height:0!important}
#driver .driver-job-side .vehicle-visual{display:none!important}


/* DRIVER HEADER — match approved admin header and admin logout finish */
body:has(#driver.active)>.legacy-header{
  min-height:88px!important;
  padding:10px 12px!important;
  border-radius:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(145deg,rgba(8,28,40,.96),rgba(3,18,28,.98))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
}
body:has(#driver.active)>.legacy-header .brand{
  display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;
}
body:has(#driver.active)>.legacy-header .brand img{
  content:url("login-logo.png")!important;
  width:58px!important;height:58px!important;
  object-fit:contain!important;object-position:center!important;
  border-radius:0!important;
  flex:0 0 58px!important;
  filter:drop-shadow(0 0 7px rgba(224,165,35,.22))!important;
}
body:has(#driver.active)>.legacy-header .brand strong{
  font-size:20px!important;line-height:1!important;letter-spacing:.3px!important;
  color:#fff!important;white-space:nowrap!important;
}
body:has(#driver.active)>.legacy-header .brand small{
  display:block!important;margin-top:8px!important;
  font-size:6.5px!important;font-weight:800!important;letter-spacing:1.4px!important;
  text-transform:uppercase!important;color:#fff!important;white-space:nowrap!important;
}
body:has(#driver.active)>.legacy-header nav{
  display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;
}
body:has(#driver.active)>.legacy-header nav button{
  height:44px!important;padding:0 12px!important;border-radius:12px!important;
  border:1px solid rgba(233,170,29,.75)!important;
  background:rgba(3,18,28,.75)!important;
  color:#fff!important;font-size:11px!important;font-weight:800!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.20)!important;
}
body:has(#driver.active)>.legacy-header nav button[data-view="dashboard"],
body:has(#driver.active)>.legacy-header nav button[data-view="archive"]{display:none!important}
@media(max-width:430px){
 body:has(#driver.active)>.legacy-header{padding:9px 9px!important}
 body:has(#driver.active)>.legacy-header .brand{gap:8px!important}
 body:has(#driver.active)>.legacy-header .brand img{width:52px!important;height:52px!important;flex-basis:52px!important}
 body:has(#driver.active)>.legacy-header .brand strong{font-size:17px!important}
 body:has(#driver.active)>.legacy-header .brand small{font-size:5.5px!important;letter-spacing:1px!important}
 body:has(#driver.active)>.legacy-header nav{gap:5px!important}
 body:has(#driver.active)>.legacy-header nav button{height:40px!important;padding:0 8px!important;font-size:10px!important}
}


/* DRIVER OWN HEADER — mirrors approved admin header without changing shared auth header */
body:has(#driver.active)>.legacy-header{display:none!important}
#driver .driver-mobile-head{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:78px!important;padding:10px 12px!important;background:linear-gradient(145deg,rgba(8,28,40,.96),rgba(3,18,28,.98))!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:0!important;color:#fff!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important}
#driver .driver-mobile-head .brand{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
#driver .driver-mobile-head .brand img{width:58px!important;height:58px!important;object-fit:contain!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
#driver .driver-mobile-head .brand strong{font-size:20px!important;line-height:1!important;letter-spacing:.3px!important;color:#fff!important;white-space:nowrap!important}
#driver .driver-mobile-head .brand strong em{font-style:normal!important;background:linear-gradient(180deg,#fff0a6 0%,#efc04c 22%,#b87408 53%,#d99d20 74%,#f5cf68 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
#driver .driver-mobile-head .brand small{display:block!important;margin-top:8px!important;font-size:6.5px!important;font-weight:800!important;letter-spacing:1.4px!important;color:#fff!important;white-space:nowrap!important}
#driver .driver-head-actions{display:flex!important;align-items:center!important;gap:8px!important;position:relative!important}
#driver .driver-logout{height:44px!important;padding:0 9px!important;border-radius:12px!important;border:1px solid rgba(233,170,29,.75)!important;background:rgba(3,18,28,.75)!important;color:#fff!important;font-size:11px!important;font-weight:800!important}
#driver .driver-menu{width:50px!important;height:50px!important;padding:0!important;border-radius:15px!important;border:1px solid rgba(255,255,255,.15)!important;background:linear-gradient(145deg,#102c3d,#071c29)!important;font-size:0!important;position:relative!important}
#driver .driver-menu:before{content:""!important;position:absolute!important;left:15px!important;right:15px!important;top:14px!important;height:3px!important;border-radius:4px!important;background:#fff!important;box-shadow:0 8px 0 #fff,0 16px 0 #fff!important}
#driver .driver-menu-panel{position:absolute!important;right:0!important;top:58px!important;z-index:30!important;min-width:150px!important;padding:7px!important;border:1px solid rgba(233,170,29,.65)!important;border-radius:13px!important;background:#061a26!important;box-shadow:0 12px 28px rgba(0,0,0,.38)!important}
#driver .driver-menu-panel[hidden]{display:none!important}
#driver .driver-menu-panel button{width:100%!important;height:40px!important;border:0!important;background:transparent!important;color:#fff!important;font-weight:800!important;text-align:left!important;padding:0 10px!important}
#driver .driver-hero h1 #driverGreeting{color:#fff!important}


/* DRIVER GREETING — exact admin hero type scale */
#driver .driver-hero h1{font-size:31px!important;line-height:1.02!important}
#driver .driver-hero h1 #driverGreeting{font-size:inherit!important;line-height:inherit!important;font-weight:700!important}
#driver .driver-hero h1 b{font-size:inherit!important;line-height:inherit!important}


/* DRIVER GREETING — match admin hierarchy: greeting smaller than Driver */
#driver .driver-hero h1{font-size:31px!important;line-height:1.02!important}
#driver .driver-hero h1 #driverGreeting{font-size:24px!important;line-height:1.08!important;font-weight:700!important}
#driver .driver-hero h1 b{font-size:31px!important;line-height:1.02!important}


/* DRIVER COLLECTION / DELIVERY FORMS — match approved New Job navy + metallic gold style */
#driver .driver-card{background:#061a26!important;border:1px solid rgba(218,158,31,.72)!important;box-shadow:0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)!important;color:#fff!important}
#driver .driver-card .driver-header{background:transparent!important;border-bottom:1px solid rgba(218,158,31,.45)!important}
#driver .driver-card .step-title,#driver .driver-card h2,#driver .driver-card h3,#driver .driver-card>label{color:#fff!important}
#driver .inspection-row{border:1px solid rgba(232,174,43,.72)!important;background:#061a26!important;box-shadow:0 7px 18px rgba(0,0,0,.18)!important}
#driver .driver-card .check{background:linear-gradient(180deg,#8d6510 0%,#6d4a06 18%,#3f2a03 54%,#76500a 82%,#a57817 100%)!important;color:#fff1be!important;border:0!important;border-bottom:1px solid rgba(232,174,43,.58)!important;border-radius:0!important;font-weight:900!important;box-shadow:inset 0 1px 0 rgba(255,226,137,.48)!important}
#driver .driver-card .check-photo{background:#092333!important;color:#fff!important;border:0!important;border-radius:0!important}
#driver .driver-card .photo-count{color:#d5e0e6!important}
#driver .driver-card .camera-btn{background:#061a26!important;color:#fff!important;border:1px solid rgba(232,174,43,.88)!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important}
#driver .driver-card .gallery-btn{background:#092333!important;color:#fff!important;border:1px solid rgba(232,174,43,.58)!important}
#driver .walkaround{background:#092333!important;border:1px solid rgba(232,174,43,.72)!important;color:#fff!important}
#driver .walkaround h3{color:#fff1be!important}
#driver .driver-card input,#driver .driver-card textarea,#driver .driver-card select{background:#092333!important;color:#fff!important;border:1px solid rgba(232,174,43,.72)!important;border-radius:10px!important;box-shadow:inset 0 1px 5px rgba(0,0,0,.22)!important}
#driver .driver-card input::placeholder,#driver .driver-card textarea::placeholder{color:#aebfc8!important}
#driver .driver-card .signature{background:#092333!important;border:1px solid rgba(232,174,43,.72)!important}
#driver .driver-card .muted,#driver .driver-card p{color:#aebfc8!important}
#driver .driver-card>button.primary,#driver .driver-card .primary{border:1px solid #efc456!important;background:linear-gradient(180deg,#f5ca5d 0%,#e7ad2e 20%,#d79b1e 48%,#b97808 70%,#e0a62a 88%,#f0c453 100%)!important;color:#071521!important;font-weight:900!important;box-shadow:inset 0 2px 1px rgba(255,247,203,.70),inset 0 -3px 5px rgba(100,57,0,.30),0 6px 16px rgba(0,0,0,.25)!important}


/* DRIVER HEADER — round top corners to match admin */
#driver .driver-mobile-head{border-radius:22px 22px 0 0!important}
@media(max-width:750px){#driver .driver-mobile-head{border-radius:18px 18px 0 0!important}}