:root{
  --bg:#0b0f14; --surface:#141a22; --surface2:#1c242e; --border:#26303c;
  --text:#eef3f8; --muted:#93a1b0; --accent:#0ea5a0; --accent2:#22d3c5;
  --gold:#d8b25a; --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);overscroll-behavior:none}
body{min-height:100svh;padding-bottom:84px}
a{color:inherit;text-decoration:none}
.wrap{max-width:880px;margin:0 auto;padding:16px}
.top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,var(--bg) 70%,transparent);padding:14px 16px 10px}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;box-shadow:0 6px 18px -6px var(--accent)}
.brand b{font-size:18px;letter-spacing:.2px}
.brand span{color:var(--muted);font-size:12px;display:block;margin-top:-2px}
.hint{color:var(--muted);font-size:12.5px;margin:4px 2px 0}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin:22px 4px 10px}
/* menu */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:transform .1s,border-color .12s}
.card:active{transform:scale(.97)}
.card:hover{border-color:var(--gold)}
.card .n{font-weight:700;font-size:15px;line-height:1.2}
.card .d{color:var(--muted);font-size:12.5px;line-height:1.3;flex:1}
.card .p{font-weight:800;color:var(--gold)}
/* cart */
.cart{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface2);border-top:1px solid var(--border);padding:12px 16px calc(86px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -10px #000}
.cart .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.btn{border:none;border-radius:999px;padding:14px 20px;font-weight:800;font-size:15px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -8px var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:none}
.btn.green{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 10px 24px -8px #16a34a}
.btn.gold{background:linear-gradient(135deg,#b8902f,var(--gold));box-shadow:0 10px 24px -8px #b8902f;color:#1a1205}
.cart-items{max-height:34vh;overflow:auto;margin-bottom:10px}
.ci{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.ci .q{display:flex;align-items:center;gap:8px}
.qbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:18px;font-weight:800;cursor:pointer}
.ci .nm{flex:1;font-size:14px}
.muted{color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:40px 10px}
.tablebar{display:flex;gap:8px;align-items:center;margin:0 2px 4px}
.tablebar select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;font-size:14px}
/* dock */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60;display:flex;gap:4px;background:rgba(20,26,34,.92);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:999px;padding:6px;box-shadow:0 12px 30px -8px #000}
.dock a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;border-radius:999px;font-size:11px;color:var(--muted);font-weight:600}
.dock a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.dock a svg{width:20px;height:20px}
/* KDS */
.kds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ticket{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--amber);border-radius:14px;padding:12px}
.ticket.warn{border-left-color:var(--accent)}
.ticket.ready{border-left-color:var(--green);opacity:.7}
.ticket h3{margin:0 0 2px;font-size:15px;display:flex;justify-content:space-between}
.ticket .t{color:var(--muted);font-size:12px;margin-bottom:8px}
.ticket ul{margin:0 0 10px;padding-left:18px}
.ticket li{font-size:14px;margin:3px 0}
.badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--surface2);color:var(--gold)}
/* caisse / ticket print */
.encart{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.line{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.line.tot{font-size:20px;font-weight:800;border-top:1px solid var(--border);margin-top:6px;padding-top:10px}
.tips{display:flex;gap:8px;margin:10px 0}
.tip{flex:1;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:10px;padding:10px;font-weight:700;cursor:pointer}
.tip.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.olist{display:flex;flex-direction:column;gap:8px}
.orow{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer}
.orow.sel{border-color:var(--gold)}
.pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.pill.cuisine{background:#3a2a0a;color:var(--amber)}
.pill.pret{background:#0c2e18;color:var(--green)}
.pill.paye{background:#1c242e;color:var(--muted)}
@media print{ body *{visibility:hidden} #printable,#printable *{visibility:visible} #printable{position:absolute;left:0;top:0;width:100%;color:#000;background:#fff} .noprint{display:none} }
/* ---- magasin ---- */
.stock{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.stock.ok{background:#0c2e1c;color:var(--green)}
.stock.low{background:#3a2a0a;color:var(--amber)}
.stock.out{background:#3a1414;color:var(--red)}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card.soldout{opacity:.5}
.prow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px}
.prow .nm{flex:1}.prow .nm b{display:block}.prow .nm span{color:var(--muted);font-size:12px}
.prow .stk{display:flex;align-items:center;gap:6px}
.scanwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#000;margin-bottom:12px}
.scanwrap video{width:100%;display:block;max-height:38vh;object-fit:cover}
.scanline{position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--accent2);box-shadow:0 0 14px var(--accent2);animation:scan 1.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:30%}50%{top:70%}}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.kpi .k{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.kpi .k b{display:block;font-size:20px;color:var(--gold)}
.kpi .k span{font-size:11px;color:var(--muted)}