:root{
  --bg: #12181A;
  --panel: #1B2427;
  --panel-2: #212C30;
  --line: #2E3B3F;
  --gold: #D4A537;
  --gold-dim: #8A6E24;
  --neon: #E8607A;
  --text: #F2EEE6;
  --text-dim: #9AA6A6;
  --paper: #FFFDF6;
  --paper-ink: #1B1B1B;
  --paper-line: #C9C2AE;
  --radius: 10px;
  --receipt-width: 80mm;
  font-size: 16px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height:100vh;
}
.app{max-width:1200px;margin:0 auto;padding:20px 16px 60px;}
header.top{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap; gap:10px;
}
.brand{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:700; letter-spacing:0.06em; font-size:1.5rem;
  color: var(--gold);
  text-transform:uppercase;
}
.brand small{
  display:block; font-family:-apple-system,sans-serif; letter-spacing:0.15em;
  font-size:0.62rem; color:var(--text-dim); text-transform:uppercase; margin-top:2px;
}
nav.tabs{display:flex; gap:6px; flex-wrap:wrap;}
nav.tabs button{
  background:transparent; border:1px solid var(--line); color:var(--text-dim);
  padding:8px 14px; border-radius:999px; cursor:pointer; font-size:0.85rem;
  transition: all .15s ease;
}
nav.tabs button.active{ background:var(--gold); border-color:var(--gold); color:#1B1408; font-weight:600;}
nav.tabs button:hover:not(.active){ border-color:var(--gold-dim); color:var(--text); }

.view{display:none;}
.view.active{display:block;}

.grid-order{display:grid; grid-template-columns: 1.5fr 1fr; gap:18px;}
@media (max-width:880px){ .grid-order{grid-template-columns:1fr;} }

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.panel + .panel{margin-top:16px;}
.panel h2{margin:0 0 12px; font-size:1rem; color:var(--gold); letter-spacing:0.03em;}
.panel h3{margin:0 0 10px; font-size:0.85rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em;}

input[type=text], input[type=number], select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:9px 10px; border-radius:6px; font-size:0.92rem; font-family:inherit;
}
input:focus, select:focus, textarea:focus{ outline:1px solid var(--gold); border-color:var(--gold); }
label{ display:block; font-size:0.75rem; color:var(--text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.05em;}
.field{margin-bottom:12px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

.btn{
  background:var(--gold); color:#1B1408; border:none; padding:10px 16px; border-radius:6px;
  font-weight:600; cursor:pointer; font-size:0.9rem;
}
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn.secondary{ background:transparent; border:1px solid var(--line); color:var(--text); }
.btn.secondary:hover{ border-color:var(--gold); }
.btn.danger{ background:transparent; border:1px solid var(--neon); color:var(--neon); }
.btn.small{ padding:6px 10px; font-size:0.78rem; }

.search-row{display:flex; gap:8px; margin-bottom:12px;}
.cat-chip{
  display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  color:var(--text-dim); font-size:0.78rem; cursor:pointer; margin:0 6px 6px 0;
}
.cat-chip.active{ background:var(--gold-dim); border-color:var(--gold); color:var(--text); }

.menu-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.menu-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; gap:6px;
}
.menu-item .name{ font-weight:600; font-size:0.9rem; }
.menu-item .price{ color:var(--gold); font-size:0.85rem; }
.qty-row{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.qty-row button{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); cursor:pointer; font-size:0.9rem;
}
.qty-row span{ min-width:18px; text-align:center; font-size:0.85rem; }

.cart-line{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); font-size:0.88rem; gap:8px;}
.cart-line .l-name{ flex:1; }
.cart-line .l-sub{ color:var(--text-dim); font-size:0.75rem; }
.cart-line .l-remove{ background:none; border:none; color:var(--neon); cursor:pointer; font-size:0.9rem; }
.totals-row{ display:flex; justify-content:space-between; font-size:0.88rem; padding:4px 0; color:var(--text-dim); }
.totals-row.grand{ color:var(--gold); font-size:1.05rem; font-weight:700; border-top:1px solid var(--line); margin-top:8px; padding-top:10px; }

table.plain{ width:100%; border-collapse:collapse; font-size:0.85rem; }
table.plain th{ text-align:left; color:var(--text-dim); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; padding:6px 8px; border-bottom:1px solid var(--line);}
table.plain td{ padding:8px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.plain tr:hover td{ background:var(--panel-2); }

.empty{ color:var(--text-dim); font-size:0.85rem; padding:20px 0; text-align:center; }
.hint{ color:var(--text-dim); font-size:0.78rem; margin-top:10px; }

/* Receipt */
.receipt-wrap{ display:flex; justify-content:center; }
.receipt{
  background:var(--paper); color:var(--paper-ink); width:var(--receipt-width); padding:18px 16px;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace; font-size:12.5px; line-height:1.5;
  border-radius:2px; box-shadow:0 6px 24px rgba(0,0,0,0.4);
}
.receipt .center{ text-align:center; }
.receipt .rname{ font-weight:700; font-size:14px; letter-spacing:0.04em; }
.receipt .rline{ border-top:1px dashed var(--paper-line); margin:8px 0; }
.receipt .ritem{ display:flex; justify-content:space-between; gap:6px; }
.receipt .ritem .qn{ flex:1; }
.receipt .rtot{ display:flex; justify-content:space-between; font-weight:700; }
.receipt-actions{ display:flex; gap:8px; justify-content:center; margin-top:14px; }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#1B1408; padding:10px 18px; border-radius:8px; font-size:0.85rem;
  font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50;
}
.toast.show{ opacity:1; }

.modal-bg{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; z-index:40; padding:20px;
}
.modal-bg.show{ display:flex; }
.modal-bg .modal-inner{ max-height:90vh; overflow:auto; }

@media print{
  @page{ size: var(--receipt-width) auto; margin:0; }
  html, body{ height:auto !important; margin:0 !important; }
  body *{ visibility:hidden; }
  .modal-bg{ position:static !important; inset:auto !important; height:auto !important; min-height:0 !important; background:none !important; display:block !important; padding:0 !important; }
  .modal-bg .modal-inner{ max-height:none !important; overflow:visible !important; }
  .receipt, .receipt *{ visibility:visible; }
  .receipt{ position:absolute; left:0; top:0; box-shadow:none; }
  .receipt-actions{ display:none; }
}