@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; background-color: #131313; max-width: 100%; overflow-x: hidden; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }
.material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; overflow: hidden; flex-shrink: 0; }

.glass-nav { background: rgba(19,19,19,0.01); backdrop-filter: blur(0px); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); border-bottom: 1px solid rgba(255,255,255,0); }
.glass-nav.scrolled { background: rgba(19,19,19,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.mobile-overlay.active { opacity: 1; pointer-events: auto; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Booking flow */
.app-shell { max-width: 440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; }

.progress-track { background: rgba(255,255,255,0.08); }
.progress-fill { background: linear-gradient(90deg,#c5c0ff,#ffb1c4); transition: width .3s ease; }

.option-card { transition: all .2s ease; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); text-align: left; cursor: pointer; }
.option-card:active { transform: scale(0.99); }
.option-card.selected { border-color: #c5c0ff; box-shadow: 0 0 0 1px #c5c0ff, 0 0 30px rgba(197,192,255,.2); background: rgba(197,192,255,0.06); }
.option-card.vip { border-color: rgba(240,190,109,0.5); }
.option-card.vip.selected { border-color: #f0be6d; box-shadow: 0 0 0 1px #f0be6d, 0 0 30px rgba(240,190,109,.3); background: rgba(240,190,109,0.06); }

.cta-gradient { background: linear-gradient(90deg,#8c84eb,#ff8bab); color: #1c1030; }
.cta-gradient:disabled { opacity: .35; pointer-events: none; }
.cta-gradient:not(:disabled):active { transform: scale(0.98); }

.table-slot { transition: all .15s ease; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); cursor: pointer; }
.table-slot.selected { background: linear-gradient(135deg,#c5c0ff,#ffb1c4); color: #1c1030; border-color: transparent; }
.table-slot.taken { opacity: .3; pointer-events: none; text-decoration: line-through; }
.table-slot.vip-locked { opacity: .5; pointer-events: none; border-color: rgba(240,190,109,0.6); color: #f0be6d; }
.table-slot.vip-available { border-color: rgba(240,190,109,0.5); }

.field-input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); transition: all .2s ease; }
.field-input:focus { outline: none; border-color: #c5c0ff; box-shadow: 0 0 0 3px rgba(197,192,255,0.15); }

.dropzone { border: 1.5px dashed rgba(255,255,255,0.2); transition: all .2s ease; cursor: pointer; }
.dropzone.dragover, .dropzone.has-file { border-color: #c5c0ff; background: rgba(197,192,255,0.06); }

.glass-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); }

.ticket-notch { width: 24px; height: 24px; background: #131313; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); }

.qr-locked { filter: blur(10px) grayscale(1); opacity: .5; }