:root {
  --ys-red: #d61f26; --ys-black: #111214; --ys-dark-gray: #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; }

#initLoader { position: fixed; inset: 0; background: var(--ys-black); z-index: 10000; 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); } }

.admin-shell { height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.kiosk-shell { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.card { background: var(--ys-dark-gray); 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: 10px 20px; border-radius: 12px; font-weight: 800; font-size: 16px; cursor: pointer; min-height: 44px; 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); }
.btn.ghost { background: transparent; border: 1px dashed var(--ys-border); }
.field { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--ys-border); background: #0f1012; color: #fff; font-size: 16px; outline: none; }
.field:focus { border-color: var(--ys-red); }

.badge { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--ys-border); font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.05); }
.status-message { padding: 15px; border-radius: 8px; font-weight: bold; text-align: center; margin-top: 10px; }
.status-message.error { background: rgba(231, 76, 60, 0.2); color: #ff6b6b; border: 1px solid #c0392b; }
.status-message.success { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid #27ae60; }

.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 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }
.pin-key { background: #1a1b1e; 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: 10px; border-radius: 8px; background: #000; min-height: 60px; }