:root{
  --primary:#006A6A; --on-primary:#fff;
  --primary-container:#9CF1F0; --on-primary-container:#00201F;
  --surface:#F4FBFA; --surface-1:#EAF3F2; --surface-2:#E1ECEB;
  --on-surface:#161D1D; --on-surface-var:#3F4948; --outline:#96A0A0;
  --ready:#186B3A; --ready-bg:#A6F4C5;
  --warn:#8A5000; --warn-bg:#FFDCA8;
  --danger:#8C1D18; --danger-bg:#F9DEDC;
  --progress:#3A4A63; --progress-bg:#D6E3FF;
  --shadow:0 1px 2px rgba(0,0,0,.10),0 4px 16px rgba(0,0,0,.10);
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --primary:#4CDADA; --on-primary:#003737;
    --primary-container:#004F4F; --on-primary-container:#9CF1F0;
    --surface:#0E1514; --surface-1:#161D1D; --surface-2:#1D2726;
    --on-surface:#DDE4E3; --on-surface-var:#BEC9C8; --outline:#889392;
    --ready:#6FDB94; --ready-bg:#0B4A24;
    --warn:#FFB865; --warn-bg:#4A3000;
    --danger:#F2B8B5; --danger-bg:#601410;
    --progress:#AAC7FF; --progress-bg:#22304A;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--surface); color:var(--on-surface);
  font-size:18px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:112px;
}
.hidden{display:none !important}

/* ---- top app bar ---- */
header.bar{
  position:sticky; top:0; z-index:20;
  background:var(--surface); border-bottom:1px solid color-mix(in srgb,var(--outline) 26%,transparent);
  padding:14px 18px calc(14px + env(safe-area-inset-top)); padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:12px;
}
.bar .logo{width:34px;height:34px;color:var(--primary);flex:none}
.bar .name{font-size:24px;font-weight:800;letter-spacing:-.3px}
.bar .name span{color:var(--primary)}
.bar .count{margin-left:auto;font-size:14px;color:var(--on-surface-var);text-align:right;line-height:1.2}
.bar .count b{display:block;font-size:22px;color:var(--warn);font-weight:800}

main{max-width:640px;margin:0 auto;padding:16px}

/* ---- section heading ---- */
.section-h{display:flex;align-items:center;gap:8px;margin:22px 4px 10px;font-size:15px;
  font-weight:700;color:var(--on-surface-var);text-transform:uppercase;letter-spacing:.6px}
.section-h .n{background:var(--surface-2);color:var(--on-surface-var);border-radius:999px;
  padding:1px 10px;font-size:14px;font-weight:700}

/* ---- order card ---- */
.card{background:var(--surface-1);border:1px solid color-mix(in srgb,var(--outline) 20%,transparent);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.card .head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;cursor:pointer}
.card .who{flex:1;min-width:0}
.card .who .cust{font-size:21px;font-weight:800;line-height:1.15}
.card .who .item{color:var(--on-surface-var);font-size:16px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .tag{flex:none;text-align:right}
.card .tag .t{font-size:13px;color:var(--on-surface-var);font-weight:700}
.card .tag .num{font-size:22px;font-weight:800;letter-spacing:.5px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  padding:6px 12px;border-radius:999px}
.chip.ready{background:var(--ready-bg);color:var(--ready)}
.chip.progress{background:var(--progress-bg);color:var(--progress)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.booked{background:var(--primary-container);color:var(--on-primary-container)}
.dot{width:9px;height:9px;border-radius:50%;background:currentColor}

/* expandable explain-everything panel */
.detail{padding:2px 18px 8px;border-top:1px dashed color-mix(in srgb,var(--outline) 30%,transparent);
  margin:6px 0 0}
.detail dl{margin:10px 0 4px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.detail dt{font-weight:700;color:var(--on-surface-var);font-size:14px;text-transform:uppercase;letter-spacing:.4px}
.detail dd{margin:0;font-size:16px}

/* actions */
.actions{display:flex;flex-wrap:wrap;gap:10px;padding:8px 18px 18px}
button{font-family:inherit;font-size:17px;font-weight:700;border:none;border-radius:14px;
  padding:15px 18px;min-height:54px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;flex:1 1 auto}
button:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-ready{background:var(--ready);color:#fff}
.btn-tonal{background:var(--surface-2);color:var(--on-surface)}
.btn-outline{background:transparent;color:var(--primary);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 60%,transparent)}
.btn-text{background:transparent;color:var(--on-surface-var);flex:0 0 auto;min-height:44px;padding:10px 12px}
.btn-danger{background:var(--danger-bg);color:var(--danger)}

/* ---- FAB ---- */
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:30;background:var(--primary);color:var(--on-primary);border-radius:18px;
  min-height:64px;padding:0 28px;font-size:20px;font-weight:800;box-shadow:0 6px 22px rgba(0,0,0,.24);
  display:flex;align-items:center;gap:10px;width:calc(100% - 32px);max-width:608px}
.fab svg{width:26px;height:26px}

/* ---- empty ---- */
.empty{text-align:center;color:var(--on-surface-var);padding:48px 24px}
.empty svg{width:64px;height:64px;color:var(--outline);opacity:.6}
.empty h3{font-size:20px;color:var(--on-surface);margin:14px 0 4px}

/* ---- modal / sheet ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;
  display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:640px;border-radius:28px 28px 0 0;
  max-height:92vh;overflow-y:auto;padding:8px 20px calc(28px + env(safe-area-inset-bottom))}
.sheet .grip{width:44px;height:5px;background:var(--outline);opacity:.5;border-radius:3px;margin:10px auto 6px}
.sheet h2{font-size:24px;font-weight:800;margin:10px 4px 4px}
.sheet .sub{color:var(--on-surface-var);margin:0 4px 16px;font-size:16px}

/* form */
label.field{display:block;margin:0 0 16px}
label.field .lab{font-size:15px;font-weight:700;color:var(--on-surface-var);margin:0 0 6px 4px;display:block}
input,textarea{width:100%;font-family:inherit;font-size:19px;padding:16px;border-radius:14px;
  border:2px solid color-mix(in srgb,var(--outline) 50%,transparent);background:var(--surface-1);
  color:var(--on-surface)}
input:focus,textarea:focus{outline:none;border-color:var(--primary)}
textarea{min-height:84px;resize:vertical}

/* ---- phone mock (customer view) ---- */
.phone{background:#000;border-radius:34px;padding:12px;max-width:340px;margin:6px auto 0;box-shadow:var(--shadow)}
.phone .screen{background:#0b1416;border-radius:24px;padding:16px 14px 22px;color:#e9f1f0;min-height:auto}
.phone .status{display:flex;justify-content:space-between;font-size:12px;color:#9fb0af;margin-bottom:14px;padding:0 6px}
.sms{background:#1c2a2b;border-radius:18px 18px 18px 6px;padding:13px 15px;font-size:16px;line-height:1.45;color:#eaf3f2}
.sms .from{font-size:12px;color:#7fd4d3;font-weight:700;margin-bottom:5px}
.book{margin-top:16px}
.book .bk-h{font-size:14px;color:#9fb0af;margin:0 4px 8px;font-weight:700}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.slot{background:#12403f;color:#7ff0ee;border:1px solid #1c5d5b;border-radius:12px;padding:13px 10px;
  font-size:15px;font-weight:700;text-align:center;cursor:pointer}
.slot.pick{background:#7ff0ee;color:#00201f;border-color:#7ff0ee}
.bk-done{background:#0b3a22;color:#8ff0b6;border-radius:12px;padding:14px;text-align:center;
  font-weight:700;margin-top:14px;font-size:16px}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));
  background:var(--on-surface);color:var(--surface);padding:15px 22px;border-radius:14px;font-weight:700;
  font-size:16px;z-index:60;box-shadow:0 6px 22px rgba(0,0,0,.3);max-width:90%;text-align:center}

.reminders{margin:10px 0 2px;font-size:15px;color:var(--on-surface-var)}
.reminders .r{display:flex;align-items:center;gap:8px;padding:3px 0}
.reminders .r .ok{color:var(--ready);font-weight:800}
.reminders .r .pend{color:var(--outline)}