*{box-sizing:border-box}
:root{--ink:#282824;--muted:#66665f;--line:#eee9e2;--accent:#d7893b;--accent-dark:#a8601f;--done:#3f7a4a}
body{margin:0;background:#f7f7f5;color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;display:grid;place-items:start center;padding:32px 24px}
.track-card{width:min(100%,600px);background:#fff;border:1px solid var(--line);border-radius:20px;padding:36px 40px;box-shadow:0 18px 70px #31200b09}
.track-header{text-align:center}
.track-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-6px 0 24px;font-size:14px;font-weight:600}
.track-navigation a{color:var(--accent-dark);text-decoration:none;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.track-navigation a:hover{text-decoration:underline}
.track-header img{margin:0 auto;object-fit:contain}
.eyebrow{color:#916738;font-size:11px;letter-spacing:.16em;font-weight:700;margin:22px 0 0}
h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:34px;line-height:1.15;letter-spacing:-.01em;margin:12px 0 10px;text-wrap:balance}
h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:22px;margin:0 0 6px}
p{margin:0}
.message{line-height:1.6;color:var(--muted);font-size:15.5px;text-wrap:pretty}
.message.alert{color:#9a3b1c}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 8px;padding:0;counter-reset:step}
.steps li{position:relative;text-align:center;font-size:14px;color:#8a8a83;font-weight:600}
.steps li:before{content:'';position:absolute;top:11px;left:calc(-50% + 14px);right:calc(50% + 14px);height:3px;border-radius:2px;background:#e8e4dd}
.steps li:first-child:before{display:none}.steps li[data-step=picked_up]{display:none}
.dot{display:grid;place-items:center;width:24px;height:24px;margin:0 auto 10px;border-radius:50%;border:3px solid #e2ddd4;background:#fff;position:relative;z-index:1}
.steps li.done,.steps li.current{color:var(--ink)}
.steps li.done .dot{background:var(--done);border-color:var(--done)}
.steps li.done .dot:after{content:'✓';color:#fff;font-size:12px;font-weight:700;line-height:1}
.steps li.done:before,.steps li.current:before{background:var(--done)}
.steps li.current .dot{border-color:var(--accent);box-shadow:0 0 0 5px #d7893b26}
.steps li.current .dot:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.steps li.current.final .dot{background:var(--done);border-color:var(--done);box-shadow:0 0 0 5px #3f7a4a26}
.steps li.current.final .dot:after{content:'✓';width:auto;height:auto;background:none;color:#fff;font-size:12px;font-weight:700}

.pickup{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fffaf3}
.label{font-size:11px;letter-spacing:.14em;font-weight:700;color:#916738;text-transform:uppercase}
.pickup-time{font-size:19px;font-weight:700;margin-top:4px}
.pickup-place{font-size:14px;color:var(--muted);margin-top:2px}
.directions{flex-shrink:0;font-size:14px;font-weight:600;color:var(--accent-dark);text-decoration:none;border:1px solid #ecd3b7;border-radius:999px;padding:9px 14px;background:#fff}
.directions:hover{background:#fff3e6}

.summary{margin-top:28px}
#items{list-style:none;margin:8px 0 0;padding:0}
#items li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
#items small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
#items strong,.totals dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.totals{margin:12px 0 0}
.totals>div{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}
.totals dt{color:var(--muted)}
.totals dd{margin:0}
.totals .grand{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700}
.totals .grand dt{color:var(--ink)}

.keep-link{margin-top:26px;padding:16px 18px;border-radius:14px;background:#f4f2ee;font-size:14px;line-height:1.55;color:#44443e}
button,.back-link{display:block;width:100%;border:0;border-radius:10px;padding:14px;font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;text-align:center}
#copy-link{background:#fff;color:var(--ink);border:1px solid #dcd7cf;margin-top:12px}
#copy-link:hover{background:#faf8f5}
.back-link{background:#f4f2ee;color:#34342d;text-decoration:none;margin-top:14px}.back-link.plain{background:none;margin-top:4px;color:#66665f}
.test-note{font-size:13px;background:#fff5e7;color:#78562c;border-radius:10px;padding:14px;line-height:1.5;margin:24px 0 0;text-align:center}
.contact{font-size:13.5px;color:#73736e;margin:22px 0 0;text-align:center}
.contact a{color:inherit}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:480px){body{padding:16px}.track-card{padding:26px 20px}h1{font-size:28px}.steps li{font-size:12.5px}.pickup{flex-direction:column;align-items:flex-start}.directions{align-self:stretch;text-align:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* My orders */
.track-card.wide{width:min(100%,680px)}
.orders-status{text-align:center;color:var(--muted);font-size:15px;margin:22px 0 0}
.orders-status.alert{color:#9a3b1c}
.orders-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.order-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.order-card h2{font-size:22px;margin:0}
.meta{font-size:13.5px;color:var(--muted);margin-top:2px}
.badge{flex-shrink:0;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 11px;white-space:nowrap}
.badge.pending{background:#f1efea;color:#5e5d57}
.badge.received{background:#fff1df;color:#8a4f12}
.badge.preparing{background:#ffe7cc;color:#8a3f00}
.badge.ready{background:#e3f1e5;color:#2f6a3a}
.badge.closed{background:#f1efea;color:#74736c}
.badge.cancelled{background:#fbe7e3;color:#9a3b1c}
.items-line{margin-top:12px;font-size:15px;line-height:1.5}
.pickup-line{margin-top:4px;font-size:14px;color:var(--muted)}
.order-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.total{font-size:17px;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;padding:10px 18px;border-radius:999px;border:1px solid #dcd7cf;background:#fff;color:var(--ink);font:600 14.5px 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:#faf8f5}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#c97a2e}
.forget{display:inline;width:auto;background:none;border:0;padding:0;margin:12px 0 0;font:500 13px 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--muted);text-decoration:underline;cursor:pointer}
.empty-orders{text-align:center;margin:28px 0 0;padding:26px 20px;border:1px dashed #e2ddd4;border-radius:14px}
.empty-orders p{color:var(--muted);font-size:15px;line-height:1.6;margin-top:6px}
@media(max-width:480px){.order-card{padding:16px}.order-bottom{flex-direction:column;align-items:stretch}.actions .btn{flex:1}}

/* ---------- Dark appearance (Settings → Dark) ---------- */
:root[data-theme=dark]{--ink:#efe9e2;--muted:#ada59c;--line:#34302c;--accent-dark:#f2a565;--done:#5fa36d;color-scheme:dark}
[data-theme=dark] body{background:#121110}
[data-theme=dark] .track-card,[data-theme=dark] .order-card{background:#1d1b19;border-color:#34302c;box-shadow:none}
[data-theme=dark] .track-header img{background:#fff;border-radius:10px;padding:3px}
[data-theme=dark] .eyebrow,[data-theme=dark] .label{color:#e0a274}
[data-theme=dark] .message.alert,[data-theme=dark] .orders-status.alert{color:#ff9a7f}
[data-theme=dark] .steps li{color:#8f887f}
[data-theme=dark] .steps li:before{background:#34302c}
[data-theme=dark] .dot{background:#1d1b19;border-color:#3d3833}
[data-theme=dark] .pickup{background:#25201a;border-color:#3d342b}
[data-theme=dark] .directions{background:#1d1b19;border-color:#5a3f28}
[data-theme=dark] .directions:hover{background:#2a2016}
[data-theme=dark] .keep-link,[data-theme=dark] .back-link{background:#262320;color:#ddd5cc}
[data-theme=dark] .back-link.plain{background:none;color:#ada59c}
[data-theme=dark] #copy-link,[data-theme=dark] .btn{background:#262320;border-color:#3d3833;color:var(--ink)}
[data-theme=dark] #copy-link:hover,[data-theme=dark] .btn:hover{background:#2e2a26}
[data-theme=dark] .btn.primary{background:var(--accent);border-color:var(--accent);color:#1b1208}
[data-theme=dark] .btn.primary:hover{background:#e49a52}
[data-theme=dark] .test-note{background:#2a2016;color:#e2bf96}
[data-theme=dark] .contact{color:#a39b92}
[data-theme=dark] .badge.pending,[data-theme=dark] .badge.closed{background:#2b2825;color:#bdb5ac}
[data-theme=dark] .badge.received{background:#3a2a16;color:#f2c38c}
[data-theme=dark] .badge.preparing{background:#44290f;color:#ffb87a}
[data-theme=dark] .badge.ready{background:#1d3523;color:#8fd19c}
[data-theme=dark] .badge.cancelled{background:#3d1f19;color:#ff9a7f}
[data-theme=dark] .empty-orders{border-color:#3d3833}