:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1e1735;
  background: #f8f6ff;
  font-synthesis: none;
  --purple: #6d4aff;
  --purple-2: #8a6aff;
  --ink: #1f1838;
  --muted: #79728e;
  --line: #e9e3f3;
  --soft: #f2edff;
  --card: rgba(255,255,255,.96);
  --success: #18885f;
  --warning: #bd720d;
  --danger: #c33c55;
  --shadow: 0 14px 40px rgba(66,45,113,.12);
}
* { box-sizing: border-box; }
html { background: #f8f6ff; }
body { margin: 0; min-width: 320px; min-height: 100vh; background:
  radial-gradient(circle at 6% 2%, rgba(109,74,255,.14), transparent 28%),
  radial-gradient(circle at 98% 14%, rgba(195,177,255,.18), transparent 26%),
  linear-gradient(180deg,#fbfaff 0%,#f7f4ff 100%); }
button,input,textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.boot-card,.fatal-card { width:min(92vw,520px); margin: 16vh auto 0; padding: 28px; background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); text-align:center; }
.brand-mark { width:58px;height:58px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;font-weight:900;color:white;background:linear-gradient(135deg,var(--purple),#966bff);box-shadow:0 10px 24px rgba(109,74,255,.28); }
.boot-card h1,.fatal-card h1 { margin:0 0 8px;font-size:24px; }
.boot-card p,.fatal-card p { color:var(--muted);margin:0 0 18px;line-height:1.5; }
.loader { width:30px;height:30px;margin:14px auto 0;border-radius:50%;border:3px solid #ece5ff;border-top-color:var(--purple);animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.topbar { position:sticky;top:0;z-index:20;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:rgba(248,246,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(223,216,238,.72); }
.topbar-row { max-width:760px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.outlet-block { min-width:0; }
.eyebrow { font-size:11px;letter-spacing:.12em;font-weight:900;color:var(--purple);text-transform:uppercase; }
.outlet-name { margin:3px 0 0;font-size:22px;line-height:1.05;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.table-pill { flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:16px;background:white;border:1px solid var(--line);font-size:13px;font-weight:800;box-shadow:0 6px 18px rgba(66,45,113,.06); }
.table-pill::before { content:"";width:8px;height:8px;border-radius:50%;background:#28a474;box-shadow:0 0 0 4px #e5f7ef; }
.status-banner { max-width:760px;margin:12px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:17px;background:#eaf8f1;color:#176c4d;font-size:12px;font-weight:750; }
.status-banner.warn { background:#fff5df;color:#94600e; }
.status-banner.bad { background:#ffecef;color:#a52e47; }
.status-banner .dot { width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;margin-right:6px; }
.main { max-width:760px;margin:0 auto;padding:14px 14px 0; }
.hero { display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end;padding:18px 17px;margin-bottom:13px;border-radius:24px;color:white;background:linear-gradient(135deg,#3e2d83,#6d4aff 60%,#9d70ff);box-shadow:0 16px 36px rgba(81,57,164,.24);overflow:hidden;position:relative; }
.hero::after { content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-45px;top:-70px;background:rgba(255,255,255,.1); }
.hero h2 { margin:4px 0 6px;font-size:23px;position:relative;z-index:1; }
.hero p { margin:0;color:#eee8ff;font-size:13px;line-height:1.45;position:relative;z-index:1; }
.hero-badge { position:relative;z-index:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:9px 11px;border-radius:15px;font-size:12px;font-weight:800;white-space:nowrap; }
.tabs { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;background:#eee9f8;border-radius:17px;margin-bottom:13px; }
.tab { border:0;background:transparent;color:#777087;font-weight:850;padding:10px 12px;border-radius:13px;cursor:pointer; }
.tab.active { color:var(--ink);background:white;box-shadow:0 4px 14px rgba(66,45,113,.08); }
.category-strip { display:flex;gap:8px;overflow:auto;padding:1px 0 10px;scrollbar-width:none;position:sticky;top:104px;z-index:10;background:linear-gradient(180deg,#f8f6ff 75%,rgba(248,246,255,0)); }
.category-strip::-webkit-scrollbar { display:none; }
.cat-btn { border:1px solid var(--line);background:white;color:#6f6782;padding:9px 13px;border-radius:999px;white-space:nowrap;font-size:12px;font-weight:800;cursor:pointer; }
.cat-btn.active { background:#21183f;color:white;border-color:#21183f; }
.search-box { width:100%;border:1px solid var(--line);background:white;border-radius:16px;padding:12px 14px;color:var(--ink);outline:none;margin-bottom:12px;box-shadow:0 5px 16px rgba(66,45,113,.045); }
.search-box:focus { border-color:#ab98ff;box-shadow:0 0 0 3px #eeeaff; }
.product-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
.product-card { background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 7px 20px rgba(66,45,113,.055);display:flex;flex-direction:column;min-width:0; }
.product-image { aspect-ratio:1.26/1;background:linear-gradient(135deg,#f0ebff,#faf8ff);display:grid;place-items:center;overflow:hidden;position:relative; }
.product-image img { width:100%;height:100%;object-fit:cover; }
.product-fallback { font-size:34px;font-weight:950;color:#9d8be5; }
.product-body { padding:12px;display:grid;gap:8px;flex:1; }
.product-name { font-size:14px;font-weight:900;line-height:1.28; }
.product-desc { font-size:11px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px; }
.product-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto; }
.price { font-size:13px;font-weight:950;color:#33265f; }
.add-btn { width:34px;height:34px;border-radius:12px;border:0;background:var(--purple);color:white;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 7px 17px rgba(109,74,255,.25); }
.empty-card { grid-column:1/-1;padding:28px 16px;text-align:center;border:1px dashed #d9cfee;border-radius:20px;color:var(--muted);background:rgba(255,255,255,.7); }
.floating-cart { position:fixed;z-index:30;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,690px);border:0;border-radius:19px;padding:13px 15px;background:#21183f;color:white;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 18px 45px rgba(31,24,63,.34);cursor:pointer; }
.floating-cart[hidden] { display:none; }
.cart-count { width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#6d4aff;font-weight:900; }
.cart-copy { flex:1;text-align:left; }
.cart-copy strong { display:block;font-size:13px; }
.cart-copy small { color:#cfc6e9;font-size:10px; }
.cart-total { font-size:13px;font-weight:950; }
.overlay { position:fixed;inset:0;z-index:50;background:rgba(24,18,44,.48);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center; }
.sheet { width:min(100%,760px);max-height:92vh;overflow:auto;background:#fbfaff;border-radius:28px 28px 0 0;padding:12px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 55px rgba(24,18,44,.2); }
.sheet-handle { width:48px;height:5px;border-radius:999px;background:#d7d0e5;margin:0 auto 14px; }
.sheet-head { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px; }
.sheet-head h3 { margin:0;font-size:20px; }
.sheet-head p { margin:3px 0 0;color:var(--muted);font-size:12px; }
.icon-btn { border:0;background:#eee9f7;width:38px;height:38px;border-radius:13px;font-size:20px;color:#5f5774;cursor:pointer; }
.option-section { background:white;border:1px solid var(--line);border-radius:18px;padding:13px;margin-bottom:10px; }
.option-title { display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;font-size:13px;font-weight:900; }
.required-chip { padding:4px 7px;border-radius:999px;background:#fff0e1;color:#a25b08;font-size:9px;font-weight:900; }
.choice { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #f0edf5;font-size:12px; }
.choice:first-of-type { border-top:0; }
.choice label { display:flex;align-items:center;gap:9px;flex:1; }
.choice input { accent-color:var(--purple);width:18px;height:18px; }
.muted { color:var(--muted); }
.note-input,.customer-input { width:100%;border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:white;outline:none; }
.note-input { min-height:74px;resize:vertical; }
.qty-row { display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0; }
.qty-control { display:flex;align-items:center;gap:12px;background:#eee9f7;border-radius:15px;padding:5px; }
.qty-control button { border:0;background:white;width:34px;height:34px;border-radius:11px;font-size:20px;color:var(--purple);font-weight:900; }
.qty-control strong { min-width:20px;text-align:center; }
.primary-btn { width:100%;border:0;background:linear-gradient(135deg,var(--purple),#835cff);color:white;border-radius:16px;padding:13px 16px;font-weight:900;cursor:pointer;box-shadow:0 9px 22px rgba(109,74,255,.22); }
.primary-btn:disabled { opacity:.5;cursor:not-allowed;box-shadow:none; }
.secondary-btn { width:100%;border:1px solid var(--line);background:white;color:var(--ink);border-radius:16px;padding:12px 15px;font-weight:850;cursor:pointer; }
.cart-list { display:grid;gap:10px;margin-bottom:13px; }
.cart-item { display:grid;grid-template-columns:1fr auto;gap:8px;background:white;border:1px solid var(--line);border-radius:18px;padding:12px; }
.cart-item h4 { margin:0 0 3px;font-size:13px; }
.cart-item p { margin:2px 0;color:var(--muted);font-size:10px;line-height:1.4; }
.cart-actions { display:flex;align-items:center;gap:7px;margin-top:8px; }
.mini-btn { border:1px solid var(--line);background:#faf9fd;color:#574d6d;border-radius:9px;padding:5px 9px;font-size:11px;font-weight:800; }
.remove-btn { border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:850; }
.summary-card { background:#21183f;color:white;border-radius:19px;padding:14px;margin:12px 0;display:grid;gap:8px; }
.summary-row { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px; }
.summary-row.total { padding-top:8px;border-top:1px solid rgba(255,255,255,.15);font-size:15px;font-weight:950; }
.form-grid { display:grid;gap:9px;margin:13px 0; }
.progress-card { background:white;border:1px solid var(--line);border-radius:22px;padding:15px;margin-bottom:12px;box-shadow:0 8px 24px rgba(66,45,113,.055); }
.progress-head { display:flex;justify-content:space-between;gap:12px;align-items:start; }
.progress-head h3 { margin:0;font-size:17px; }
.progress-head p { margin:4px 0 0;color:var(--muted);font-size:11px; }
.progress-chip { padding:7px 9px;border-radius:999px;background:#fff3d8;color:#9a610b;font-size:10px;font-weight:900;white-space:nowrap; }
.progress-chip.good { background:#e6f7ef;color:#16734e; }
.progress-chip.bad { background:#ffe9ed;color:#a72e47; }
.timeline { display:grid;gap:0;margin-top:16px; }
.step { display:grid;grid-template-columns:28px 1fr;gap:10px;min-height:52px;position:relative; }
.step:not(:last-child)::before { content:"";position:absolute;left:13px;top:27px;bottom:-2px;width:2px;background:#e5dff0; }
.step.done:not(:last-child)::before { background:#64c59d; }
.step-dot { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#efeaf8;color:#9187a7;font-size:12px;font-weight:900;z-index:1; }
.step.done .step-dot { background:#dff5ea;color:#16734e; }
.step.current .step-dot { background:#6d4aff;color:white;box-shadow:0 0 0 5px #eeeaff; }
.step-body strong { display:block;font-size:12px; }
.step-body span { color:var(--muted);font-size:10px; }
.request-card { border-top:1px solid #f0edf5;padding-top:12px;margin-top:12px; }
.request-title { display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:900; }
.request-item { display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-top:7px;color:#544c66; }
.link-btn { border:0;background:transparent;color:var(--purple);font-weight:900;padding:8px 0;cursor:pointer; }
#toast-root { position:fixed;z-index:100;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,520px);pointer-events:none; }
.toast { background:#21183f;color:white;padding:12px 14px;border-radius:15px;box-shadow:0 12px 30px rgba(31,24,63,.3);font-size:12px;text-align:center;animation:toast-in .2s ease-out; }
.toast.bad { background:#a9324b; }
@keyframes toast-in { from { opacity:0;transform:translateY(8px); } }
@media (min-width:700px) { .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .main{padding-top:18px}.sheet{margin-bottom:14px;border-radius:28px;max-height:88vh}.overlay{align-items:center;padding:16px} }

/* 15.0D.3 — per-item cashier decision + customer status notifications */
.request-item-block { padding:9px 0;border-bottom:1px solid #f1edf7; }
.request-item-block:last-of-type { border-bottom:0; }
.item-subcopy { font-size:10px;margin-top:3px; }
.item-decision-row { display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px; }
.item-reason { color:#a72e47;font-size:10px;font-weight:800; }
.reorder-btn { margin-left:auto;border:0;border-radius:999px;background:#efe9ff;color:#5b35d5;padding:7px 10px;font-size:10px;font-weight:900;cursor:pointer; }
.reorder-btn:active { transform:scale(.98); }
.request-total-row { margin-top:10px; }
.request-note { margin-top:10px;font-size:10px; }


/* 15.0E — live customer order tracking */
.realtime-indicator { display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.72);font-size:9px;font-weight:950;letter-spacing:.08em; }
.realtime-indicator.live { background:#dff7eb;color:#15724e; }
.realtime-indicator.live::before { content:"";width:6px;height:6px;border-radius:50%;background:#26a56f;box-shadow:0 0 0 0 rgba(38,165,111,.45);animation:live-ping 1.8s infinite; }
.realtime-indicator.connecting::before { content:"";width:6px;height:6px;border-radius:50%;background:#d9921e; }
@keyframes live-ping { 0%{box-shadow:0 0 0 0 rgba(38,165,111,.4)} 70%{box-shadow:0 0 0 7px rgba(38,165,111,0)} 100%{box-shadow:0 0 0 0 rgba(38,165,111,0)} }
.live-progress-card { overflow:hidden;position:relative; }
.live-progress-card::before { content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#6d4aff,#9a7cff,#62c9a2); }
.live-kicker { display:flex;align-items:center;gap:6px;margin-bottom:5px;color:#5b35d5;font-size:9px;font-weight:950;letter-spacing:.09em; }
.live-pulse { width:7px;height:7px;border-radius:50%;background:#26a56f;box-shadow:0 0 0 4px #e5f8ef; }
.live-timeline { margin-bottom:6px; }
.progress-inline-banner { margin:8px 0 12px;max-width:none; }
.delivery-summary { margin:12px 0 4px;padding:12px;border-radius:17px;background:#f7f4ff;border:1px solid #ebe4ff; }
.delivery-summary.done { background:#ecfaf3;border-color:#d7f2e5; }
.delivery-summary > div:first-child { display:flex;align-items:baseline;justify-content:space-between;gap:12px; }
.delivery-summary strong { font-size:16px;color:#3f2c80; }
.delivery-summary.done strong { color:#16734e; }
.delivery-summary span { color:var(--muted);font-size:10px; }
.delivery-meter { height:7px;margin-top:9px;border-radius:999px;background:#e7e1f3;overflow:hidden; }
.delivery-meter span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6d4aff,#7d5eff,#62c9a2);transition:width .35s ease; }
.live-item { margin:8px -3px 0;padding:11px;border:1px solid #efebf5;border-radius:15px;background:#fff; }
.live-item.active { border-color:#ddd2ff;background:#faf8ff; }
.live-item.good,.live-item.done { border-color:#d9efe4;background:#fbfffd; }
.live-item.warn { border-color:#f4e2b8;background:#fffdf7; }
.live-item.bad { border-color:#f4d8df;background:#fffafb; }
.live-item-status { display:flex;align-items:center;gap:9px;margin-top:9px; }
.live-item-icon { width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#f0ebff;font-size:14px;flex:0 0 auto; }
.live-item.good .live-item-icon,.live-item.done .live-item-icon { background:#e4f6ed;color:#16734e; }
.live-item.bad .live-item-icon { background:#ffe9ed;color:#a72e47; }
.live-item-status > span:nth-child(2) { display:grid;gap:2px;min-width:0; }
.live-item-status strong { font-size:11px; }
.live-item-status small { color:var(--muted);font-size:9px;line-height:1.35; }