:root {
  --cl-purple: #6f42c1;
  --cl-red: #dc3545;
  --cl-green: #198754;
  --cl-blue: #0d6efd;
  --cl-yellow: #ffc107;
}

body { background: #f3f5f8; min-height: 100vh; }
.app-container { max-width: 900px; }
.auth-bg { background: linear-gradient(145deg, #e8f0ff, #f7f9fc); }
.kidqgo-navbar-brand { display: flex; align-items: center; margin: 0; padding: .2rem 0; }
.kidqgo-navbar-brand img { display: block; width: auto; height: 42px; max-width: 130px; object-fit: contain; }
.auth-logo { margin: 0 0 .75rem; }
.auth-logo img { display: block; width: min(100%, 300px); height: auto; margin: auto; }
.room-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.room-button { min-height: 58px; border: 3px solid transparent; font-weight: 700; padding: .35rem; color: #fff; }
.room-button[data-light="1"] { color: #212529; }
.room-button.selected { border-color: #212529; box-shadow: 0 0 0 2px #fff inset; }
.number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 390px; margin: 0 auto; }
.keypad-display { grid-column: 1 / -1; display: flex; align-items: center; min-height: 64px; padding: .4rem .5rem .4rem 1rem; border: 2px solid #adb5bd; border-radius: .75rem; background: #fff; }
#keypad-value { flex: 1; text-align: center; font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: .12em; }
.keypad-backspace { min-width: 58px; min-height: 48px; font-size: 1.4rem; }
.number-grid .keypad-key { min-height: 64px; font-size: 1.45rem; font-weight: 700; border-width: 2px; border-radius: .75rem; }
.keypad-submit { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.keypad-submit .key-symbol { font-size: 1.45rem; font-weight: 800; }
.keypad-submit small { margin-top: .25rem; font-size: .68rem; font-weight: 700; }
.vehicle-card { border: 2px solid #cbd3dc; border-radius: .75rem; background: #fff; margin: .65rem 0; overflow: hidden; }
.student-row { display: flex; align-items: center; gap: .75rem; padding: .7rem; }
.student-row + .student-row { border-top: 1px solid #e4e8ed; }
.tag-chip { border-left: 7px solid var(--tag-color); min-width: 4.5rem; font-weight: 800; }
.student-name { font-size: 1.05rem; font-weight: 600; }
.ready-button { min-width: 88px; }
.group-staged .accordion-button { background: #d1e7dd; color: #0f5132; }
.sticky-entry { position: sticky; bottom: .5rem; z-index: 10; }
.pulse { animation: pulse .7s ease-in-out 2; }

@keyframes pulse {
  50% { transform: scale(1.01); box-shadow: 0 0 0 .35rem rgba(13, 110, 253, .18); }
}

@media (max-width: 500px) {
  .app-container { padding-left: .65rem; padding-right: .65rem; }
  .navbar-brand { font-size: 1rem; }
  .room-grid { grid-template-columns: repeat(3, 1fr); }
  .number-grid { gap: .4rem; }
  .number-grid .keypad-key { min-height: 58px; }
  .student-row { padding: .6rem; }
  .ready-button { min-width: 74px; }
}