:root{
  --bg:#1a261f;
  --panel:#2d3e33;
  --panel2:#233229;
  --accent:#ff8a00;
  --accent-hover:#e67c00;
  --accent2:#7cb342;
  --text:#ffffff;
  --muted:rgba(255,255,255,.7);
  --border:rgba(255,255,255,.12);
  --radius:16px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top right, rgba(255,138,0,.12), transparent), radial-gradient(circle at bottom left, rgba(124,179,66,.12), transparent), #0e150f;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  padding:24px;
}

.phone{
  width:390px;
  max-width:100%;
  min-height:700px;
  background:var(--bg);
  border-radius:28px;
  border:10px solid #0e150f;
  box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.progressbar{
  display:flex;
  justify-content:space-between;
  padding:20px 18px 14px;
  flex-shrink:0;
}
.progressbar .step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1;
  position:relative;
}
.progressbar .step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:6px;
  left:calc(50% + 10px);
  width:calc(100% - 20px);
  height:2px;
  background:var(--border);
}
.progressbar .step.done:not(:last-child)::after{ background:var(--accent2); }
.progressbar .dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--border);border:2px solid var(--border);z-index:1;
}
.progressbar .step.active .dot{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,106,61,.25);
}
.progressbar .step.done .dot{ background:var(--accent2); border-color:var(--accent2); }
.progressbar label{ font-size:9px; color:var(--muted); text-align:center; }
.progressbar .step.active label{color:var(--text);font-weight:600;}
.progressbar .step.done label{color:var(--accent2);}

.screen{
  flex:1;
  overflow-y:auto;
  padding:6px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

h1{font-size:20px;margin:0 0 2px;}
p.subtitle{color:var(--muted);font-size:13px;margin:0 0 6px;}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.badge{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  width:fit-content;
}
.badge.orange{background:rgba(255,138,0,.15);color:var(--accent);border:1px solid rgba(255,138,0,.3);}
.badge.green{background:rgba(124,179,66,.15);color:var(--accent2);border:1px solid rgba(124,179,66,.3);}
.badge.gray{background:rgba(154,160,172,.18);color:var(--muted);}
.badge.red{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);}

.courier{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#ffc266);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.courier-info{flex:1;}
.courier-info .name{font-weight:700;font-size:15px;}
.courier-info .meta{font-size:12px;color:var(--muted);}

#map{
  width:100%; height:200px; border-radius:12px; background:#0e1a12;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:12px;
}

.eta-box{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); }
.eta-box strong{color:var(--text);}

.receipt-line{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--border); }
.receipt-line:last-child{border-bottom:none;}

.center{text-align:center;}
.muted{color:var(--muted);font-size:12px;}
.big-icon{font-size:48px;}

.landing{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:20px;
}

.spinner{
  width:32px;height:32px; border:4px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; margin:16px auto; animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.pulse-dot{
  width:10px;height:10px;border-radius:50%;background:var(--accent2);
  display:inline-block; margin-right:6px; animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}