:root{--bg:#0b1220;--panel:#121a2b;--panel2:#0f1728;--text:#e6eefc;--muted:#a9b6d3;--accent:#4da3ff;--danger:#ff5c5c;--ok:#38d996;--border:#23304a;--btn:#1a2540}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:linear-gradient(180deg,#071022,#0b1220)}
button,input,select{font:inherit}

.app{display:grid;grid-template-columns:33% 67%;height:100vh;gap:12px;padding:12px}
.panel{background:rgba(18,26,43,.92);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.panelHeader{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panelTitle{font-weight:650}
.panelBody{padding:12px 14px;overflow:auto;min-height:0}
.muted{color:var(--muted)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.btn{background:var(--btn);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;touch-action:manipulation}
.btn:active{transform:translateY(1px)}
.btnPrimary{background:linear-gradient(180deg,#1a6dff,#1352c9);border-color:#1b60e6}
.btnDanger{background:linear-gradient(180deg,#ff3e3e,#c91c1c);border-color:#ff6a6a}
.btnGhost{background:transparent}
.btnSmall{padding:8px 10px;border-radius:10px}

.input{background:rgba(9,14,24,.8);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 12px;min-width:140px}
.select{background:rgba(9,14,24,.8);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 12px}

.cartList{display:flex;flex-direction:column;gap:10px}
.cartLine{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:rgba(15,23,40,.8);border:1px solid var(--border);border-radius:12px;padding:10px 10px}
.cartName{font-weight:600}
.cartSub{font-size:12px;color:var(--muted)}
.qtyControls{display:flex;align-items:center;gap:8px}
.qtyPill{min-width:46px;text-align:center;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(9,14,24,.65)}

.totalBox{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(9,14,24,.65)}
.totalRow{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.totalBig{font-size:22px;font-weight:750}

.catBar{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(9,14,24,.55);cursor:pointer}
.chipActive{border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,163,255,.15) inset}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.itemBtn{background:rgba(15,23,40,.8);border:1px solid var(--border);border-radius:14px;padding:0;cursor:pointer;touch-action:manipulation;position:relative;overflow:hidden;min-height:160px;aspect-ratio:1/1}
.itemBtn:active{transform:translateY(1px)}

/* POS item tiles: image fills the whole button, with bottom overlay for name + price */
.itemMedia{position:absolute;inset:0;background:rgba(9,14,24,.55)}
.itemMedia img{width:100%;height:100%;object-fit:contain;display:block}
.itemMediaNoImg{display:flex;align-items:center;justify-content:center}
.itemNoImg{color:var(--muted);font-weight:650;font-size:12px;letter-spacing:.3px;text-transform:uppercase}

/* Two band style like your mock: centered price band + bottom name band */
.itemBar{position:absolute;left:0;right:0;background:rgba(0,0,0,.45);color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;padding:10px}
.itemBar{padding:4px}
.itemBarPrice{top:68%;transform:translateY(-50%);font-size:clamp(14px, 2.2vw, 18px);font-weight:800;line-height:1}
.itemBarName{bottom:0;font-size:clamp(14px, 2.2vw, 18px);font-weight:800;line-height:1.1;padding-bottom:9px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modalInner{width:min(520px,100%);background:rgba(18,26,43,.96);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.modalBody{padding:14px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.keyBtn{padding:16px 0;border-radius:14px}

.notice{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(9,14,24,.65)}
.noticeOk{border-color:rgba(56,217,150,.35)}
.noticeErr{border-color:rgba(255,92,92,.45)}

/* Admin ordering UI */
.menuOrderGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.menuTile{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(9,14,24,.55);position:relative;min-height:120px;aspect-ratio:1/1;user-select:none}
.menuTile:active{transform:translateY(1px)}
.menuTileImg{position:absolute;inset:0;background:rgba(9,14,24,.55)}
.menuTileImg img{width:100%;height:100%;object-fit:contain;display:block}
.menuTileLabel{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);padding:6px 8px;border-top:1px solid rgba(35,48,74,.65)}
.menuTileName{font-weight:750;line-height:1.1;font-size:13px}
.menuTilePrice{font-weight:700;color:#d8e7ff;font-size:12px;margin-top:2px}
.menuMove{position:absolute;top:8px;left:8px;display:flex;gap:6px}
.menuMoveBtn{padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.35)}
.menuMoveBtn[disabled]{opacity:.35;cursor:not-allowed}
.dndPlaceholder{outline:2px dashed rgba(77,163,255,.55);border-radius:14px;background:rgba(77,163,255,.08)}
.dndPlaceholder{box-shadow:0 0 0 2px rgba(77,163,255,.18) inset}

.sortList{display:flex;flex-direction:column;gap:8px}
.sortRow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(9,14,24,.55);touch-action:none;user-select:none}
.dragHandle{opacity:.75;font-weight:800}
.sortRowInactive{opacity:.55}
.dragGhost{opacity:.65}

@media (max-width: 980px){
  .app{grid-template-columns:40% 60%}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 720px){
  .app{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;min-height:100vh}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}