* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
body { background: linear-gradient(135deg, #fff7ed, #fef2f2); min-height: 100vh; }

.topbar {
  background: linear-gradient(90deg, #dc2626, #ea580c);
  color: white; padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 50; flex-wrap: wrap; gap: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; background: white; }
.brand h1 { font-size: 18px; font-weight: 700; }
.nav-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn { background: rgba(255,255,255,0.2); color: white; border: none; padding: 8px 14px; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 13px; }
.nav-btn.active { background: white; color: #dc2626; }

.screen { display: flex; gap: 16px; padding: 16px; min-height: calc(100vh - 64px); flex-wrap: wrap; }
#historyScreen, #settingsScreen, #manageScreen { display: block; }

.menu-panel { flex: 1; min-width: 280px; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-btn { padding: 8px 16px; border-radius: 10px; border: none; background: white; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); white-space: nowrap; }
.cat-btn.active { background: #dc2626; color: white; }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.menu-card { background: white; border-radius: 16px; padding: 12px; cursor: pointer; border: 1px solid #fed7aa; transition: 0.15s; text-align: left; }
.menu-card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform: translateY(-2px); }
.menu-card .emoji { font-size: 28px; }
.menu-card .name { font-weight: 600; font-size: 14px; color: #1f2937; margin-top: 4px; }
.menu-card .price { color: #ea580c; font-weight: 700; font-size: 14px; margin-top: 4px; }

.cart-panel { width: 360px; background: white; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; max-height: calc(100vh - 100px); }
.cart-header { background: #111827; color: white; padding: 12px 16px; border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; font-weight: 600; }
.link-btn { background: none; border: none; color: #d1d5db; cursor: pointer; font-size: 12px; }
.cart-items { flex: 1; overflow-y: auto; padding: 10px 14px; min-height: 100px; }
.cart-line { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3f4f6; gap: 8px; }
.cart-line .info { flex: 1; min-width: 0; }
.cart-line .info .nm { font-size: 13px; font-weight: 600; color: #1f2937; }
.cart-line .info .pr { font-size: 11px; color: #9ca3af; }
.qty-ctrl { display: flex; align-items: center; gap: 6px; }
.qty-ctrl button { width: 22px; height: 22px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; }
.cart-footer { padding: 12px 14px; border-top: 1px solid #fed7aa; background: #fff7ed; border-radius: 0 0 16px 16px; }
.discount-btn { width: 100%; background: #ffedd5; color: #c2410c; border: none; padding: 8px; border-radius: 8px; font-weight: 600; cursor: pointer; margin-bottom: 8px; }
.totals .row { display: flex; justify-content: space-between; font-size: 13px; color: #4b5563; padding: 2px 0; }
.totals .total-row { font-weight: 700; font-size: 16px; color: #111827; border-top: 1px solid #fed7aa; padding-top: 6px; margin-top: 4px; }
.discount-row { color: #16a34a; }
.checkout-btn { width: 100%; background: linear-gradient(90deg, #dc2626, #ea580c); color: white; font-weight: 700; padding: 12px; border-radius: 12px; border: none; cursor: pointer; margin-top: 10px; font-size: 15px; }
.checkout-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-box { background: white; border-radius: 16px; padding: 20px; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; }

.settings-form { background: white; max-width: 420px; margin: 20px auto; padding: 20px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.settings-form label { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; color: #4b5563; }
.settings-form input { width: 100%; padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 4px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #111827; color: white; padding: 10px 18px; border-radius: 20px; font-size: 13px; z-index: 200; }

.history-card { background: white; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.history-summary { background: white; padding: 16px; border-radius: 12px; margin-bottom: 16px; display: flex; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.menu-card .desc { font-size: 11px; color: #6b7280; margin-top: 3px; line-height: 1.3; }
.cart-line .cart-desc { font-size: 11px; color: #6b7280; line-height: 1.3; }
.pending-items .pending-desc { font-size: 12px; color: #6b7280; margin: 1px 0 4px 10px; }

/* ===== Waiter / tables / kitchen ===== */
.table-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 14px; background:#fff7ed; border-bottom:1px solid #fed7aa; }
.table-bar .tb-label { font-size:12px; color:#9a3412; } .table-bar .tb-warn { font-size:13px; color:#9a3412; font-weight:600; }
.order-note { width:calc(100% - 28px); margin:8px 14px 0; padding:9px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; }
.tb-btn { background:#e5e7eb; border:none; padding:8px 12px; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; }
.tb-btn.primary { background:#dc2626; color:#fff; }
.table-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.table-grid.big { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.table-card { border:2px solid #d1d5db; background:#fff; border-radius:14px; padding:14px 8px; cursor:pointer; text-align:center; min-height:84px; }
.table-card .tn { font-weight:800; font-size:17px; } .table-card .ts { font-size:12px; margin-top:4px; color:#6b7280; } .table-card .tt { font-weight:700; margin-top:4px; }
.table-card.free { border-color:#86efac; } .table-card.busy { border-color:#fb923c; background:#fff7ed; }
.table-card.ready { border-color:#16a34a; background:#dcfce7; animation:pulseReady 1.2s infinite; }
@keyframes pulseReady { 50% { box-shadow:0 0 0 6px rgba(22,163,74,.25); } }
.chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:#e5e7eb; color:#374151; }
.chip.new { background:#fee2e2; color:#991b1b; } .chip.preparing { background:#fef3c7; color:#92400e; } .chip.ready { background:#dcfce7; color:#166534; } .chip.served { background:#e0e7ff; color:#3730a3; }
.pending-card.st-ready { border-left:5px solid #16a34a; } .pending-card.st-new { border-left:5px solid #dc2626; } .pending-card.st-preparing { border-left:5px solid #f59e0b; }
.new-item { background:#fef2f2; border-radius:6px; padding:2px 4px; }
.note-box { background:#fffbeb; border:1px dashed #f59e0b; border-radius:8px; padding:6px 8px; font-size:13px; margin:6px 0; }
.muted-sm { font-size:12px; color:#6b7280; font-weight:400; }
.btn-prep { background:#f59e0b; color:#fff; } .btn-add { background:#2563eb; color:#fff; }
.auto-print { font-size:13px; background:#fff; padding:8px 12px; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.w-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.w-sheet { background:#fff; width:100%; max-width:520px; max-height:92vh; overflow:auto; border-radius:20px 20px 0 0; padding:20px; position:relative; }
.w-close { position:absolute; right:14px; top:12px; border:none; background:none; font-size:18px; cursor:pointer; }
.f-in { width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:8px; font-size:14px; } .f-lbl { display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
.bill-box { background:#fff7ed; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; }
.kvr { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; } .kvr.tot { font-weight:800; border-top:1px solid #fed7aa; margin-top:4px; padding-top:6px; }
.chip-del { display:inline-flex; align-items:center; gap:4px; background:#f3f4f6; padding:5px 10px; border-radius:999px; font-size:13px; font-weight:600; }
.chip-del button { border:none; background:none; color:#9ca3af; cursor:pointer; }
.mobile-cart-bar { display:none; }
@media (max-width: 720px) {
  .main-content .screen { padding:10px; }
  .menu-panel { min-width:100%; } .cart-panel { width:100%; max-width:100%; }
  .menu-grid { grid-template-columns:repeat(2,1fr) !important; }
  .cat-btn, .tb-btn, .pending-actions button { min-height:44px; }
  .main-content { padding-bottom:70px; }
  .mobile-cart-bar { position:fixed; left:10px; right:10px; bottom:10px; z-index:150; background:#dc2626; color:#fff; border-radius:14px; padding:14px 16px; align-items:center; justify-content:space-between; font-size:14px; box-shadow:0 4px 14px rgba(0,0,0,.3); display:flex; }
  .w-sheet { max-height:94vh; }
}