:root{
  --asphalt-900:#14171C;
  --asphalt-800:#1B1F26;
  --asphalt-700:#22262F;
  --asphalt-600:#2C313B;
  --line:#33394480;
  --concrete:#EDEAE0;
  --concrete-dim:#9CA0A8;
  --concrete-mute:#6B7178;
  --hwy-yellow:#FFC53D;
  --hwy-yellow-dim:#3A331A;
  --signal-green:#4FBE7E;
  --signal-green-dim:#1B3327;
  --transit-blue:#5B9BEF;
  --transit-blue-dim:#1B2A42;
  --danger:#E4685A;
  --danger-dim:#3A1F1D;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--asphalt-900);
  color:var(--concrete);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  padding:40px 20px 80px;
}
.wrap{max-width:860px;margin:0 auto;}

.hairline-road{
  height:6px;
  background:repeating-linear-gradient(90deg, var(--hwy-yellow) 0 28px, transparent 28px 48px);
  border-radius:3px;
  opacity:.85;
  margin-bottom:28px;
}

header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:24px;}
h1{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:42px;
  letter-spacing:0.01em;
  line-height:1;
  text-transform:uppercase;
}
.subtitle{color:var(--concrete-dim);font-size:14px;margin-top:6px;}

button.primary{
  background:var(--hwy-yellow);
  color:#2A2205;
  border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:6px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
button.primary:hover{background:#FFD05C;}
button.primary:active{transform:scale(0.97);}

button.mode-toggle{
  background:transparent;
  border:1px solid var(--line);
  color:var(--concrete-dim);
  font-size:13px;
  padding:9px 14px;
  border-radius:6px;
  cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
button.mode-toggle:hover{border-color:var(--concrete-mute);color:var(--concrete);}

button.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--concrete-dim);
  font-size:14px;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
}
button.ghost:hover{border-color:var(--concrete-mute);color:var(--concrete);}
button.small-danger{
  background:transparent;border:none;color:var(--concrete-mute);
  font-size:12px;cursor:pointer;padding:4px 8px;
}
button.small-danger:hover{color:var(--danger);} 

.search-panel{
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 26px;
  text-align:center;
}
.search-panel h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:600;text-transform:uppercase;
  margin-bottom:6px;letter-spacing:0.01em;
}
.search-panel p{color:var(--concrete-dim);font-size:14px;margin-bottom:20px;}
.search-bar{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.search-bar input{
  flex:1;background:var(--asphalt-700);border:1px solid var(--line);
  color:var(--concrete);font-family:'JetBrains Mono',monospace;font-size:14px;
  padding:12px 14px;border-radius:6px;outline:none;letter-spacing:0.03em;
  text-transform:uppercase;
}
.search-bar input:focus{border-color:var(--hwy-yellow);}
.search-bar button{white-space:nowrap;}
.search-msg{font-size:13px;color:var(--danger);margin-top:14px;display:none;}

.result-card{
  margin-top:24px;
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px;
  display:none;
}
.result-card.open{display:block;}

.code{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--concrete-dim);
  letter-spacing:0.02em;
}
.route{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:20px;
  margin-top:4px;
  text-transform:uppercase;
}
.route .arrow{color:var(--hwy-yellow);margin:0 8px;}
.status-pill{
  font-size:12px;
  font-weight:500;
  padding:5px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.status-pill.transit{background:var(--transit-blue-dim);color:var(--transit-blue);}
.status-pill.delivered{background:var(--signal-green-dim);color:var(--signal-green);}
.status-pill.held{background:var(--danger-dim);color:var(--danger);} 

.held-banner{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--danger-dim);border:1px solid #5A2A26;
  border-radius:8px;padding:12px 14px;margin-top:14px;
  font-size:13px;color:#F0B4AC;line-height:1.5;
}
.held-banner .ic{font-size:16px;flex-shrink:0;}

.stop-marker.blocked{background:var(--danger);border-color:var(--danger);}

button.release{
  background:var(--danger-dim);border:1px solid #5A2A26;color:var(--danger);
  font-size:13px;font-weight:500;padding:9px 16px;border-radius:6px;cursor:pointer;
}
button.release:hover{background:#4A2622;}

.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}

.progress-track{
  position:relative;height:5px;background:var(--asphalt-600);
  border-radius:3px;margin-top:16px;
}
.progress-fill{
  position:absolute;left:0;top:0;height:100%;
  background:var(--hwy-yellow);border-radius:3px;
  transition:width .4s ease;
}
.progress-fill.done{background:var(--signal-green);}
.progress-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--concrete-mute);margin-top:8px;flex-wrap:wrap;gap:4px;}

.stop{display:flex;gap:12px;padding:10px 0;}
.stop-marker{
  width:10px;height:10px;border-radius:50%;
  margin-top:4px;flex-shrink:0;
  background:var(--asphalt-600);
  border:2px solid var(--concrete-mute);
}
.stop-marker.done{background:var(--hwy-yellow);border-color:var(--hwy-yellow);}
.stop-marker.current{background:var(--signal-green);border-color:var(--signal-green);}
.stop-text{flex:1;}
.stop-label{font-size:14px;font-weight:500;}
.stop-label.pending{color:var(--concrete-mute);}
.stop-place{font-size:13px;color:var(--concrete-dim);margin-top:2px;}
.stop-date{font-size:12px;color:var(--concrete-mute);white-space:nowrap;font-family:'JetBrains Mono',monospace;}
.timeline-title{font-size:12px;color:var(--concrete-mute);text-transform:uppercase;letter-spacing:0.04em;margin-top:18px;margin-bottom:4px;padding-top:16px;border-top:1px solid var(--line);}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.stat{
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;line-height:1;}
.stat-label{font-size:12px;color:var(--concrete-dim);margin-top:4px;text-transform:uppercase;letter-spacing:0.03em;}
.stat.transit .stat-num{color:var(--transit-blue);}
.stat.delivered .stat-num{color:var(--signal-green);}

.admin-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px;}
.admin-label{
  font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:600;
  text-transform:uppercase;color:var(--hwy-yellow);
}

.panel{
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 24px;
  margin-bottom:24px;
}
.panel h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:16px;
  color:var(--hwy-yellow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
label{font-size:12px;color:var(--concrete-dim);text-transform:uppercase;letter-spacing:0.04em;}
input, select, textarea{
  background:var(--asphalt-700);
  border:1px solid var(--line);
  color:var(--concrete);
  font-family:'Inter',sans-serif;
  font-size:14px;
  padding:10px 12px;
  border-radius:6px;
  outline:none;
  width:100%;
}
textarea{resize:vertical;min-height:60px;}
input:focus, select:focus, textarea:focus{border-color:var(--hwy-yellow);} 
.form-actions{display:flex;gap:10px;margin-top:18px;}
.pin-error{font-size:13px;color:var(--danger);margin-top:10px;display:none;}

#list{display:flex;flex-direction:column;gap:14px;}
.card{
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.card:hover{border-color:#3D4552;}
.detail{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:none;}
.detail.open{display:block;}

.info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;
  background:var(--asphalt-700);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:16px;
}
.info-item .k{font-size:11px;color:var(--concrete-mute);text-transform:uppercase;letter-spacing:0.03em;}
.info-item .v{font-size:13px;color:var(--concrete);margin-top:2px;}
.info-item.full{grid-column:1/-1;}

.empty{
  text-align:center;padding:40px 20px;color:var(--concrete-mute);
  font-size:14px;
}
.empty .big{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;color:var(--concrete-dim);
  text-transform:uppercase;margin-bottom:8px;
}

.overlay{
  position:fixed;inset:0;background:rgba(10,12,15,0.7);
  display:none;align-items:center;justify-content:center;z-index:50;
  padding:20px;
}
.overlay.open{display:flex;}
.pin-box{
  background:var(--asphalt-800);border:1px solid var(--line);
  border-radius:10px;padding:26px 28px;max-width:340px;width:100%;
}
.pin-box h3{
  font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;
  text-transform:uppercase;color:var(--hwy-yellow);margin-bottom:8px;
}
.pin-box p{font-size:13px;color:var(--concrete-dim);margin-bottom:16px;line-height:1.5;}
.pin-box input{text-align:center;letter-spacing:0.3em;font-size:18px;font-family:'JetBrains Mono',monospace;}
.pin-actions{display:flex;gap:10px;margin-top:16px;}

.hero{
  text-align:center;
  padding:8px 10px 32px;
}
.hero .badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--hwy-yellow-dim);color:var(--hwy-yellow);
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;
  padding:6px 14px;border-radius:20px;margin-bottom:16px;
}
.hero h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:34px;text-transform:uppercase;line-height:1.05;letter-spacing:0.01em;
  margin-bottom:10px;
}
.hero h2 span{color:var(--hwy-yellow);} 
.hero p{color:var(--concrete-dim);font-size:15px;max-width:480px;margin:0 auto;}

.route-strip{
  position:relative;
  background:var(--asphalt-800);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 24px 26px;
  margin-bottom:24px;
  overflow:hidden;
}
.route-strip .cities{display:flex;justify-content:space-between;font-size:13px;color:var(--concrete-dim);margin-bottom:14px;}
.route-strip .cities b{color:var(--concrete);font-weight:500;}
.road-track{
  position:relative;height:4px;
  background:repeating-linear-gradient(90deg, var(--asphalt-600) 0 14px, transparent 14px 22px);
  border-radius:2px;
}
.road-track::before, .road-track::after{
  content:'';position:absolute;top:50%;width:10px;height:10px;border-radius:50%;
  background:var(--hwy-yellow);transform:translateY(-50%);
}
.road-track::before{left:0;}
.road-track::after{right:0;background:var(--signal-green);}
.truck-marker{
  position:absolute;top:-9px;left:0;font-size:20px;
  animation:drive 5s ease-in-out infinite;
}
@keyframes drive{
  0%{left:2%;}
  50%{left:88%;}
  100%{left:2%;}
}
@media (prefers-reduced-motion: reduce){
  .truck-marker{animation:none;left:45%;}
}

.trust-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:28px;
}
.trust-item{
  background:var(--asphalt-800);border:1px solid var(--line);border-radius:10px;
  padding:16px 14px;text-align:center;
}
.trust-item .ic{font-size:22px;margin-bottom:8px;}
.trust-item .t{font-size:13px;font-weight:500;color:var(--concrete);}
.trust-item .d{font-size:12px;color:var(--concrete-mute);margin-top:4px;line-height:1.4;}

.steps-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-top:32px;
}
.step{position:relative;padding-left:2px;}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--hwy-yellow-dim);color:var(--hwy-yellow);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  margin-bottom:10px;
}
.step .t{font-size:14px;font-weight:500;color:var(--concrete);}
.step .d{font-size:12px;color:var(--concrete-dim);margin-top:4px;line-height:1.5;}

.section-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:20px;
  text-transform:uppercase;letter-spacing:0.01em;margin:36px 0 14px;
  color:var(--concrete);
}

.faq-item{
  background:var(--asphalt-800);border:1px solid var(--line);border-radius:8px;
  margin-bottom:10px;overflow:hidden;
}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--concrete);
}
.faq-q .chev{color:var(--hwy-yellow);font-size:12px;transition:transform .2s ease;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
  font-size:13px;color:var(--concrete-dim);line-height:1.6;
}
.faq-a-inner{padding:0 16px 16px;}
.faq-item.open .faq-a{max-height:200px;}

.support-strip{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:14px;margin-bottom:8px;
}
.support-card{
  background:var(--asphalt-800);border:1px solid var(--line);border-radius:10px;
  padding:16px;
}
.support-card .t{font-size:13px;font-weight:500;color:var(--concrete);display:flex;align-items:center;gap:8px;}
.support-card .d{font-size:12px;color:var(--concrete-mute);margin-top:6px;line-height:1.5;}

.testimonials{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.testimonial{
  background:var(--asphalt-800);border:1px solid var(--line);border-radius:10px;
  padding:16px;font-size:13px;color:var(--concrete-dim);line-height:1.6;
}
.testimonial .stars{color:var(--hwy-yellow);font-size:13px;margin-bottom:8px;}
.testimonial .author{margin-top:10px;font-size:12px;color:var(--concrete-mute);font-weight:500;}

.hidden{display:none !important;}

@media (max-width:560px){
  .trust-row, .steps-row, .support-strip, .testimonials{grid-template-columns:1fr;}
  .hero h2{font-size:26px;}
  .form-grid, .info-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr;}
  h1{font-size:32px;}
  .search-bar{flex-direction:column;}
}