:root{
  --red:#E2231A; --red-dark:#B71C13; --yellow:#FFC72C; --ink:#1c1c1e;
  --bg:#f6f4ef; --card:#ffffff; --muted:#8a8a8e; --line:#ececec;
  --green:#28a745; --blue:#2d7ef7; --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.07);
  font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); padding-bottom:84px;
}
.hidden{display:none!important}

/* header */
header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff; padding:16px 18px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow);
}
header .logo{font-weight:800; font-size:20px; letter-spacing:.3px}
header .logo b{color:var(--yellow)}
header .who{margin-left:auto; font-size:13px; opacity:.9}

/* tabs (bottom nav) */
nav.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  display:flex; background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
nav.tabs button{
  flex:1; border:0; background:none; padding:10px 4px 12px; cursor:pointer;
  color:var(--muted); font-size:11px; font-weight:600; display:flex;
  flex-direction:column; align-items:center; gap:3px;
}
nav.tabs button .ic{font-size:20px}
nav.tabs button.active{color:var(--red)}

main{padding:16px; max-width:760px; margin:0 auto}
.section-title{font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:6px 2px 12px}

/* cards */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px}
.order .top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.order .oid{font-weight:800; font-size:17px}
.order .when{color:var(--muted); font-size:12px; margin-left:auto}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.b-new{background:#fff3cd; color:#8a6d00}
.b-cooking{background:#ffe0b2; color:#a85b00}
.b-delivering{background:#d6e9ff; color:#1559b3}
.b-done{background:#d7f5dd; color:#1b7a32}
.b-canceled{background:#f0f0f0; color:#888}
.b-paid{background:#d7f5dd;color:#1b7a32}
.b-pending{background:#f0f0f0;color:#888}
.items{margin:8px 0; font-size:14px; line-height:1.6}
.meta{font-size:13px; color:#444; line-height:1.7}
.meta a{color:var(--blue); text-decoration:none}
.total{font-weight:800; font-size:16px; margin-top:6px}
.row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.btn{border:0; border-radius:12px; padding:10px 14px; font-weight:700; font-size:13px; cursor:pointer; background:#f1f1f3; color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red); color:#fff}
.btn.warn{background:#fff; color:var(--red); border:1.5px solid var(--red)}
.btn.go{background:var(--green); color:#fff}
.btn.ghost{background:#f1f1f3}
.btn.sm{padding:7px 11px; font-size:12px}
select,input{font:inherit; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; background:#fff; width:100%}

/* stats */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.stat .v{font-size:24px; font-weight:800; color:var(--red)}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px}
.seg{display:flex; gap:6px; margin-bottom:14px}
.seg button{flex:1; padding:9px; border:0; border-radius:10px; background:#ececec; font-weight:700; color:#555; cursor:pointer}
.seg button.active{background:var(--red); color:#fff}

/* menu items */
.mitem{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.mitem:last-child{border-bottom:0}
.mitem .nm{font-weight:600}
.mitem .pr{color:var(--muted); font-size:13px}
.mitem .right{margin-left:auto; display:flex; gap:6px; align-items:center}
.cat-h{font-weight:800; margin:18px 2px 6px; color:var(--red)}
.stopped{opacity:.45}

/* login */
.login{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center}
.login .brand{font-size:34px; font-weight:800}
.login .brand b{color:var(--red)} .login .brand i{color:var(--yellow); font-style:normal}
.login .sub{color:var(--muted); margin-top:-8px}
.login .box{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px}

.empty{text-align:center; color:var(--muted); padding:40px 10px}
.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:#1c1c1e; color:#fff; padding:11px 18px; border-radius:12px; font-size:14px; z-index:50; box-shadow:var(--shadow); opacity:0; transition:opacity .2s; pointer-events:none}
.toast.show{opacity:1}
.assign{display:flex; gap:6px; width:100%; margin-top:8px}
.assign select{flex:1}