:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1c2230; --muted:#6b7280; --line:#e5e7eb;
  --brand:#d4002a; --brand-ink:#fff; --ok:#0a7d33; --warn:#b45309;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--card);
  padding:12px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.brand{font-weight:700;font-size:18px;color:var(--ink)}
.topbar nav a{margin-left:18px;color:var(--ink);font-weight:500}
.topbar nav a.cta{background:var(--brand);color:var(--brand-ink);padding:7px 14px;border-radius:8px}
.topbar nav a.cta:hover{text-decoration:none;opacity:.92}
.topbar nav a.muted{color:var(--muted);font-weight:400}

.wrap{max-width:980px;margin:28px auto;padding:0 20px}
h1{font-size:24px;margin:.2em 0 .4em}
h2{font-size:18px;margin:1.6em 0 .6em}
h3{font-size:15px;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:13px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:18px}

.grid-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center}
.stat .num{display:block;font-size:26px;font-weight:700}
.stat .lbl{color:var(--muted);font-size:13px}

table.data{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.data th{background:#fafbfc;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.data tr:last-child td{border-bottom:0}
table.data tr.best td{background:#f0fbf3}
.tag{background:var(--ok);color:#fff;font-size:11px;padding:1px 7px;border-radius:99px;margin-left:6px}

.pill{font-size:12px;padding:2px 9px;border-radius:99px;background:#eef;color:#334;text-transform:capitalize}
.pill-pending{background:#fff4e0;color:var(--warn)}
.pill-not_booked{background:#e7f0ff;color:#1d4ed8}
.pill-delivered{background:#e8f7ec;color:var(--ok)}
.pill-deleted{background:#fde8e8;color:#b91c1c}

label{display:block;margin:0 0 12px;font-size:13px;color:var(--muted)}
input,select{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:15px;color:var(--ink);background:#fff}
input:focus,select:focus{outline:2px solid var(--brand);border-color:var(--brand)}
label.check{display:flex;align-items:center;gap:8px;color:var(--ink)}
label.check input{width:auto;margin:0}
button{background:var(--brand);color:#fff;border:0;padding:10px 18px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
button:hover{opacity:.92}
button.danger{background:#fff;color:#b91c1c;border:1px solid #f0caca}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:9px 16px;border-radius:8px;font-weight:600}
.btn:hover{text-decoration:none;opacity:.92}

.form-inline{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.form-inline label{margin:0}
.dims{display:flex;gap:6px}
.dims input{width:70px;text-align:center}
.form-grid fieldset{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 16px}
.form-grid legend{font-weight:600;padding:0 6px}
.addr-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:8px}
.actions{display:flex;align-items:center;gap:14px}

.alert{background:#fde8e8;border:1px solid #f5c2c2;color:#9b1c1c;padding:10px 14px;border-radius:8px}
.alert ul{margin:6px 0 0;padding-left:18px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.head-row{display:flex;align-items:center;gap:12px}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
dl dt{color:var(--muted)}
.big-price{font-size:30px;font-weight:700;margin:.1em 0}

.login{max-width:340px;margin:8vh auto;text-align:center}
.login form{text-align:left;margin-top:16px}
.login button{width:100%}

.foot{text-align:center;color:var(--muted);font-size:13px;padding:24px}
.foot .env{margin-left:8px;background:#eee;padding:1px 8px;border-radius:99px;font-size:11px}

/* status strip */
.status-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}

/* horizontal bar charts */
table.bars{width:100%;border-collapse:collapse}
table.bars td{padding:4px 8px;vertical-align:middle}
table.bars .bl{white-space:nowrap;color:var(--ink)}
table.bars .bc{width:60%}
table.bars .br{text-align:right;white-space:nowrap;color:var(--muted)}
table.bars .bar{display:inline-block;height:12px;border-radius:6px;background:var(--brand);min-width:2px}

/* pickup-point search */
.pudo-results{border:1px solid var(--line);border-radius:8px;margin:2px 0 6px;max-height:230px;overflow:auto;display:flex;flex-direction:column}
.pudo-results:empty{display:none}
.pudo-opt{text-align:left;background:#fff;color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:9px 12px;font-weight:400;border-radius:0;cursor:pointer}
.pudo-opt:hover{background:#f6f7f9}
.pudo-opt:last-child{border-bottom:0}
.pad{padding:9px 12px}
.or{text-align:center;margin:10px 0}

/* live estimate */
.estimate-box{background:#f0fbf3;border:1px solid #cdeccf;border-radius:8px;padding:12px 16px;margin:0 0 16px}
.estimate-box strong{font-size:18px}

/* tracking pills by stage */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pill-track-created{background:#eef;color:#334}
.pill-track-transit{background:#e7f0ff;color:#1d4ed8}
.pill-track-out{background:#fff4e0;color:var(--warn)}
.pill-track-pickup{background:#ede9fe;color:#6d28d9}
.pill-track-delivered{background:#e8f7ec;color:var(--ok)}
.pill-track-returned,.pill-track-problem{background:#fde8e8;color:#b91c1c}

/* tracking timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 16px 26px}
.timeline li:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:#9ca3af;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl-text{font-weight:500}
.tl-created .tl-dot{background:#6b7280}
.tl-transit .tl-dot{background:#1d4ed8}
.tl-out .tl-dot{background:var(--warn)}
.tl-pickup .tl-dot{background:#6d28d9}
.tl-delivered .tl-dot{background:var(--ok)}
.tl-returned .tl-dot,.tl-problem .tl-dot{background:#b91c1c}

@media(max-width:720px){.cols,.grid-stats,.addr-fields{grid-template-columns:1fr}}