:root{--bg:#0d0510;--card:#1a0f20;--line:rgba(255,255,255,.1);--pink:#D81E5B;--purple:#5E0F80;--orange:#F39200;
  --green:#22c55e;--amber:#eab308;--red:#ef4444;--sub:rgba(255,255,255,.6)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{background:var(--bg);color:#fff;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:env(safe-area-inset-bottom)}

.o-top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));background:rgba(13,5,16,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.o-brand{display:flex;align-items:center;gap:9px;font-family:Montserrat;font-size:19px;font-weight:900}
.o-live{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s infinite}
.o-live.off{background:var(--red);box-shadow:0 0 10px var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.o-stats{flex:1;text-align:right;font-size:13px;color:var(--sub);font-weight:600}
.o-stats b{color:#fff}
.o-sound{background:none;border:none;font-size:22px;cursor:pointer;padding:2px 4px}
.o-sound.off{opacity:.4}

.o-filters{position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:9;display:flex;gap:8px;padding:12px 16px;
  overflow-x:auto;background:rgba(13,5,16,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);scrollbar-width:none}
.o-filters::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.fchip.on{background:var(--pink);border-color:transparent}

.o-list{padding:14px 14px 30px;display:flex;flex-direction:column;gap:12px}
.o-empty{text-align:center;color:var(--sub);padding:18vh 0;font-size:17px}

/* ── order card: soft gradient surface, tinted ring per status, no heavy edge ── */
.ocard{background:linear-gradient(165deg,#1f1228,#150b1c 75%);border:1px solid rgba(255,255,255,.07);
  border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);
  animation:slidein .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ocard.st-new{border-color:rgba(216,30,91,.45);box-shadow:0 10px 28px rgba(216,30,91,.13)}
.ocard.st-preparing{border-color:rgba(234,179,8,.35);box-shadow:0 10px 28px rgba(234,179,8,.09)}
.ocard.st-ready{border-color:rgba(34,197,94,.4);box-shadow:0 10px 28px rgba(34,197,94,.11)}
.ocard.st-await{opacity:.85}
.ocard.st-pickedup{opacity:.62}

.oc-head{display:flex;align-items:center;gap:8px;padding:14px 16px 6px}
.oc-num{font-family:Montserrat;font-weight:900;font-size:19px;letter-spacing:.01em}
.oc-where{font-weight:700;font-size:12.5px;color:var(--sub);padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.oc-time{margin-left:auto;font-size:12px;color:var(--sub);font-weight:600;text-align:right;line-height:1.45}
.oc-status{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px}
.st-new .oc-status{background:rgba(216,30,91,.18);color:#ff6b93}
.st-preparing .oc-status{background:rgba(234,179,8,.16);color:#fbbf24}
.st-ready .oc-status{background:rgba(34,197,94,.16);color:#4ade80}
.st-await .oc-status{background:rgba(255,255,255,.08);color:var(--sub)}
.st-pickedup .oc-status{background:rgba(255,255,255,.06);color:var(--sub)}

.oc-name{padding:2px 16px 0;font-size:13.5px;color:var(--sub);font-weight:600}
.oc-paid{font-size:10px;font-weight:900;letter-spacing:.05em;padding:3px 9px;border-radius:999px}
.oc-paid.paid{background:rgba(34,197,94,.14);color:#4ade80}
.oc-paid.unpaid{background:rgba(239,68,68,.13);color:#f87171}
.oc-items{padding:10px 16px 12px;display:flex;flex-direction:column;gap:6px}
.oc-item{font-size:15px;font-weight:600;line-height:1.35}
.oc-item .q{color:var(--orange);font-weight:900;margin-right:7px;font-variant-numeric:tabular-nums}
.oc-mods{font-size:12px;color:var(--sub);padding-left:22px;font-weight:500}
.oc-note{margin:2px 16px 10px;padding:8px 11px;background:rgba(243,146,0,.1);border:1px solid rgba(243,146,0,.2);
  border-radius:10px;font-size:13px;color:#fbbf24}
.oc-total{margin:2px 16px 0;padding:10px 0 14px;border-top:1px dashed rgba(255,255,255,.09);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.oc-total b{font-size:25px;font-weight:800;color:var(--green);letter-spacing:.01em;font-variant-numeric:tabular-nums}

.o-install{position:fixed;left:12px;right:12px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:20;   /* clears the bottom tab bar */
  display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--purple);border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:13px;font-weight:600}
.o-install span{flex:1}
.o-install button{border:none;background:#fff;color:var(--purple);font-weight:800;padding:9px 16px;border-radius:10px;cursor:pointer}
.o-install .x{background:transparent;color:#fff;padding:9px 6px;font-size:16px}

/* date separators between business days (Today omitted at the top) */
.o-day{display:flex;align-items:center;gap:12px;margin:20px 2px 10px;color:var(--sub,#8a7a85);
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.o-day::before,.o-day::after{content:"";flex:1;height:1px;background:var(--line)}

/* after the first paint, list refreshes must not replay the entrance animation */
.o-list.settled .ocard{animation:none}

/* register order caught mid-ring: bouncing dots instead of an empty $0 card */
/* 🛒 live cart peek — a table still composing; dashed frame + soft pulse = not real yet */
.ocard.st-cart{border-style:dashed;border-color:rgba(243,146,0,.5);animation:cartpulse 2.4s ease-in-out infinite}
@keyframes cartpulse{0%,100%{box-shadow:0 0 0 0 rgba(243,146,0,0)}50%{box-shadow:0 0 0 5px rgba(243,146,0,.09)}}
.oc-ringing{padding:6px 16px 16px;font-size:13.5px;color:var(--sub);font-weight:600;display:flex;align-items:center;gap:5px}
.oc-ringing i{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:ringdot 1.1s ease-in-out infinite}
.oc-ringing i:nth-child(2){animation-delay:.18s}
.oc-ringing i:nth-child(3){animation-delay:.36s;margin-right:6px}
@keyframes ringdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* 🎨 tenant brand — auto-appended; change it in ⚙️ Settings → Brand */
:root{--purple:#5E0F80;--purple-deep:#400a57;--pink:#D81E5B;--orange:#F39200;--turq:#009FA8;--teal:#009FA8;--lime:#7CB518;--brand-primary:#5E0F80;--brand-secondary:#D81E5B;--brand-accent:#F39200;--brand-turquoise:#009FA8;--brand-lime:#7CB518}