:root {
  --ys-red: #d61f26; --ys-black: #111214; --ys-dark: #1a1b1e; --ys-white: #ffffff;
  --ys-border: rgba(255, 255, 255, 0.15);
  --font: system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ys-black); color: var(--ys-white); font-family: var(--font); height: 100vh; overflow: hidden; font-size: 16px; }
.hidden { display: none !important; }

/* Loader */
#initLoader { position: fixed; inset: 0; background: var(--ys-black); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spinner { width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.1); border-left-color: var(--ys-red); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* UI Components */
.kiosk-shell { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.card { background: var(--ys-dark); border: 1px solid var(--ys-border); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.btn { border: 0; background: var(--ys-red); color: white; padding: 15px; border-radius: 12px; font-weight: 800; font-size: 18px; cursor: pointer; width: 100%; min-height: 55px; display: flex; align-items: center; justify-content: center; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; filter: grayscale(1); }
.btn.secondary { background: transparent; border: 1px solid var(--ys-border); }
.field { width: 100%; padding: 15px; border-radius: 12px; border: 1px solid var(--ys-border); background: #0f1012; color: white; font-size: 16px; outline: none; margin-bottom: 10px; }
.field:focus { border-color: var(--ys-red); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal { width: min(500px, 94vw); padding: 24px; }

/* Pin Pad */
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
.pin-key { background: var(--ys-dark); border: 1px solid var(--ys-border); color: white; font-size: 24px; font-weight: 900; padding: 20px 0; border-radius: 12px; }
.pin-key:active { background: #333; }
.pin-screen { font-size: 32px; letter-spacing: 8px; text-align: center; margin-bottom: 15px; font-family: monospace; border: 1px solid var(--ys-border); padding: 15px; border-radius: 12px; background: #000; min-height: 70px; }

/* Staff/Menu Specifics */
.menu-layout { height: 100vh; display: grid; grid-template-columns: 240px 1fr 320px; gap: 15px; padding: 15px; }
.sidebar, .main-panel, .cart-panel { background: var(--ys-dark); border: 1px solid var(--ys-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.item-grid { padding: 15px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; align-content: start; }
.item-card { padding: 15px; border: 1px solid var(--ys-border); border-radius: 12px; background: #141518; }
.status-msg { padding: 15px; border-radius: 8px; text-align: center; font-weight: bold; margin-top: 10px; }
.status-msg.err { background: rgba(231, 76, 60, 0.2); color: #ff6b6b; }
.status-msg.ok { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }

@media (max-width: 1024px) { .menu-layout { grid-template-columns: 180px 1fr 280px; gap: 10px; padding: 10px; } }
@media (max-width: 768px) { .menu-layout { display: flex; flex-direction: column; } .sidebar { display: none; } }