:root{
  --sky-top:#DCEFFB; --sky-mid:#A9D8F2; --sky-blue:#4E93C4; --sky-deep:#2C6089;
  --navy:#1C3245; --ink:#2A3F52; --cloud:#FFFFFF; --mist:#F4FAFD;
  --sand:#F4A97B; --sand-dark:#C97847; --line:#DCE7EF;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; background:var(--mist); color:var(--ink); min-height:100vh;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* Header — same look as the main site nav */
.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:0;}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:78px;}
.top .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.top .brand img{height:44px; width:auto; display:block;}
.top a.logout{color:var(--sky-deep); font-size:13.5px; font-weight:600; text-decoration:none; padding:8px 16px; border-radius:10px; border:1.5px solid var(--line); transition:background-color .2s;}
.top a.logout:hover{background:var(--mist);}

.card{background:#fff; border-radius:16px; border:1px solid var(--line); padding:28px; margin:28px auto; max-width:520px; box-shadow:0 10px 30px rgba(20,50,100,0.06);}
h1{font-size:24px; letter-spacing:-0.02em; margin-bottom:8px; color:var(--navy);}
p.sub{color:#5A6B7A; font-size:14.5px; margin-bottom:20px; line-height:1.5;}
label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;}
input, select{width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; margin-bottom:16px; background:var(--mist);}
input:focus, select:focus{outline:none; border-color:var(--sky-blue); background:#fff;}
button, .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:12px; font-weight:600; font-size:14.5px; border:none; cursor:pointer; text-decoration:none; font-family:inherit; transition:transform .2s ease, box-shadow .2s ease;}
button:active, .btn:active{transform:scale(.97);}
.btn-primary{background:var(--sand); color:#5A2C10; width:100%;}
.btn-primary:hover{box-shadow:0 8px 18px rgba(196,120,71,0.3);}
.btn-ghost{background:var(--mist); color:var(--sky-deep); border:1.5px solid var(--line);}
.error{background:#FDEEEC; color:#C0392B; padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;}
.success{background:#EAF6EE; color:#1E7D3C; padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:#5A6B7A; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.03em; padding:10px 12px; border-bottom:1.5px solid var(--line);}
td{padding:12px; border-bottom:1px solid #EDF3F7; vertical-align:middle;}
.badge{display:inline-flex; padding:5px 11px; border-radius:100px; font-size:12px; font-weight:600;}
.badge-confirmed{background:#EDF3F7; color:#5A6B7A;}
.badge-picked_up{background:#FDF3E7; color:#B77521;}
.badge-on_the_way{background:#E7F1FB; color:var(--sky-deep);}
.badge-delivered{background:#EAF6EE; color:#1E7D3C;}
.copy-field{display:flex; gap:8px; margin-bottom:4px;}
.copy-field input{margin-bottom:0; font-size:12.5px;}
.copy-field button{padding:10px 14px; font-size:12.5px; background:#EDF3F7; color:var(--ink);}

#map{width:100%; height:340px; border-radius:14px; margin-bottom:20px; background:#EDF3F7;}
.status-track{display:flex; justify-content:space-between; margin:24px 0 8px; position:relative;}
.status-track::before{content:''; position:absolute; top:13px; left:6%; right:6%; height:2px; background:var(--line);}
.status-step{position:relative; z-index:1; text-align:center; flex:1;}
.status-step .dot{width:26px; height:26px; border-radius:50%; background:var(--line); margin:0 auto 8px; display:flex; align-items:center; justify-content:center;}
.status-step.done .dot{background:var(--sky-blue);}
.status-step span{font-size:11.5px; font-weight:600; color:#5A6B7A;}
.status-step.done span{color:var(--sky-deep);}
.updated-note{font-size:12.5px; color:#8FA3B0; text-align:center; margin-top:16px;}

.driver-status-buttons{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.driver-status-buttons button{background:#EDF3F7; color:var(--ink); text-align:left; padding:14px 16px;}
.driver-status-buttons button.active{background:var(--sky-deep); color:#fff;}
.gps-indicator{display:flex; align-items:center; gap:8px; font-size:13px; color:#5A6B7A; margin-bottom:16px;}
.gps-dot{width:9px; height:9px; border-radius:50%; background:#C0392B;}
.gps-dot.live{background:#1E7D3C; box-shadow:0 0 0 4px rgba(30,125,60,0.15);}