:root{
  --bg:#f8fafc;--card:#fff;--line:#e2e8f0;--text:#0f172a;--muted:#64748b;
  --accent:#1d4ed8;--accent-soft:#eff6ff;--success:#16a34a;--warning:#f59e0b;--danger:#dc2626;
  --shadow:0 8px 20px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:linear-gradient(180deg,#f8fafc,#eef2ff);color:var(--text)}
.app-shell{max-width:460px;margin:0 auto;min-height:100vh;padding-bottom:170px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(248,250,252,.96);backdrop-filter:blur(10px);padding:16px;border-bottom:1px solid var(--line)}
.topbar h1{margin:0 0 6px;font-size:18px}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.toolbar{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.content{padding:16px;display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px}
.hero{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:20px;padding:16px}
.section-title{font-size:16px;font-weight:bold;margin:0 0 10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:22px;font-weight:bold;margin-top:4px}
.kpi-delta{font-size:12px;margin-top:6px;color:var(--accent)}
.list{display:grid;gap:10px}
.list-item{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;margin-bottom:8px}
.badge.good{background:rgba(22,163,74,.12);color:var(--success)}
.badge.pending{background:#fff7ed;color:#c2410c}
.badge.preparing{background:#eef2ff;color:#1d4ed8}
.badge.ready{background:#ecfdf5;color:#16a34a}
.badge.picked{background:#f1f5f9;color:#334155}
.badge.sec{background:#eef2ff;color:#1d4ed8}
.badge.warn{background:#fff7ed;color:#c2410c}
.input,.textarea,.select{width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;font:inherit}
.compact{padding:10px}
.textarea{min-height:90px;resize:vertical}
.form-grid{display:grid;gap:10px}
.btn{border:1px solid var(--line);border-radius:16px;padding:10px;font-weight:bold;background:#fff;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.soft{background:var(--accent-soft)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:460px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--line);max-height:170px;overflow:auto}
.nav-btn{border:0;background:transparent;padding:12px 4px;font-size:10px;color:var(--muted)}
.nav-btn.active{color:var(--accent);font-weight:bold}
.muted,.small,.note{color:var(--muted);font-size:12px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-btn{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px;text-align:right}
html[dir="ltr"] .menu-btn{text-align:left}
.cart-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #f1f5f9}
.table-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.table-card{border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;background:#fff}
.table-card.occupied{background:#eff6ff;border-color:#bfdbfe}
.btn-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link-btn{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}
.preview-image{width:100%;max-height:180px;object-fit:contain;border:1px solid #e2e8f0;border-radius:14px;padding:6px;background:#fff}