:root{
  --bg:#0f172a; --panel:#1e293b; --line:#334155; --accent:#16506e;
  --text:#e2e8f0; --muted:#94a3b8; --ok:#10b981; --warn:#f59e0b;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-tap-highlight-color:transparent;overflow:hidden;
}
#app{height:100%;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:var(--radius);background:var(--line);padding:12px 16px}
button:active{transform:scale(.97)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--accent);color:#fff}
button.go{background:var(--ok);color:#062e22;font-weight:700}
input,select{background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%}
input:focus,select:focus{outline:0;border-color:#38bdf8}
.center{display:grid;place-items:center;height:100%}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}

header{display:flex;gap:6px;align-items:center;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
header .brand{font-weight:600;margin-right:12px;white-space:nowrap}
nav button{background:transparent;padding:9px 16px;font-size:14px;color:var(--muted)}
nav button.on{background:var(--accent);color:#fff}
main{flex:1;min-height:0;display:flex}

/* order screen */
.menu{flex:1;min-width:0;display:flex;flex-direction:column}
.tabs{display:flex;gap:8px;padding:12px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs button{flex:0 0 auto;background:#1e293b;font-size:14px}
.tabs button.on{background:var(--accent);color:#fff}
.grid{flex:1;overflow:auto;display:grid;gap:10px;padding:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start}
.tile{height:92px;background:var(--panel);border-radius:var(--radius);padding:12px;
  display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.tile b{font-size:17px}
.tile small{color:var(--muted)}

.cart{width:360px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.lines{flex:1;overflow:auto;padding:12px}
.line{background:#0b1220;border-radius:10px;padding:10px;margin-bottom:8px}
.qty{display:flex;gap:8px;align-items:center;margin-top:8px}
.qty button{width:38px;height:38px;padding:0;font-size:19px;border-radius:8px;background:var(--line)}
.foot{border-top:1px solid var(--line);padding:12px}
.tot{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}
.grand{display:flex;justify-content:space-between;font-size:26px;font-weight:800;
  border-top:1px solid var(--line);margin-top:8px;padding-top:10px}

/* modal */
.mask{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:18px;z-index:50}
.modal{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:22px}
.big{font-size:44px;font-weight:800;margin:6px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips button{padding:9px 13px;font-size:14px;background:var(--line)}

/* tables + panels */
.page{flex:1;overflow:auto;padding:20px}
.wrap{max-width:940px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.card h3{margin:0 0 12px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:500;padding:8px 4px}
td{padding:9px 4px;border-top:1px solid var(--line)}
.r{text-align:right}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.stat span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat b{display:block;font-size:24px;margin-top:4px}
.bar{height:6px;background:var(--accent);border-radius:3px;min-width:2px}
.err{color:var(--warn);font-size:14px;margin-top:10px}

@media (max-width:820px){
  main{flex-direction:column}
  .cart{width:auto;border-left:0;border-top:1px solid var(--line);max-height:52%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}