:root {
  --background: 210 35% 96%;
  --foreground: 222 45% 12%;
  --primary: 222 86% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 70% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 216 24% 88%;
  --muted-foreground: 218 14% 42%;
  --destructive: 356 79% 57%;
  --destructive-foreground: 0 0% 100%;
  --border: 216 22% 84%;
  --card: 0 0% 100%;
  --free: 151 70% 42%;
  --reserved: 214 92% 57%;
  --occupied: 355 78% 56%;
  --warning: 38 92% 52%;
  --shadow-sm: 0 8px 20px hsl(222 45% 12% / 0.08);
  --shadow-md: 0 18px 45px hsl(222 45% 12% / 0.12);
  --shadow-lg: 0 28px 80px hsl(222 45% 12% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
.dark {
  --background: 224 38% 9%;
  --foreground: 210 34% 96%;
  --primary: 218 92% 64%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 72% 45%;
  --secondary-foreground: 0 0% 100%;
  --muted: 224 28% 18%;
  --muted-foreground: 216 16% 70%;
  --destructive: 356 78% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 24% 24%;
  --card: 224 32% 13%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, hsl(var(--primary) / .16), transparent 34%), radial-gradient(circle at 80% 0%, hsl(var(--secondary) / .16), transparent 30%), hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }
.safe-bottom { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.glass-card {
  background: hsl(var(--card) / .88);
  border: 1px solid hsl(var(--border) / .78);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
.bus-shell {
  position: relative;
  overflow: hidden;
  border-radius: 64px 64px 40px 40px;
  background: radial-gradient(circle at 50% 0%, hsl(204 96% 31% / .55), transparent 26%), linear-gradient(90deg, hsl(217 44% 9%), hsl(222 55% 15%) 12%, hsl(222 48% 9%) 50%, hsl(222 55% 15%) 88%, hsl(217 44% 9%));
  border: 2px solid hsl(218 24% 34%);
  box-shadow: inset 0 3px 0 hsl(0 0% 100% / .14), inset 0 -22px 44px hsl(0 0% 0% / .42), inset 0 0 34px hsl(203 95% 72% / .08), 0 34px 90px hsl(222 45% 12% / .38);
}
.bus-shell:before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 52px 52px 32px 32px;
  border: 2px solid hsl(210 30% 96% / .12);
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / .35);
  pointer-events: none;
}
.bus-shell:after {
  content: "";
  position: absolute;
  top: 122px;
  bottom: 28px;
  left: 12px;
  right: 12px;
  border-left: 8px solid hsl(199 90% 68% / .26);
  border-right: 8px solid hsl(199 90% 68% / .26);
  border-radius: 28px;
  pointer-events: none;
}
.windshield {
  background: linear-gradient(135deg, hsl(211 100% 18% / .94), hsl(190 90% 24% / .75));
  border: 1px solid hsl(190 90% 70% / .24);
  box-shadow: inset 0 18px 35px hsl(0 0% 100% / .12), 0 12px 34px hsl(0 0% 0% / .28);
}
.steering-column { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(145deg, hsl(221 39% 8% / .45), hsl(210 40% 96% / .07)); border: 1px solid hsl(0 0% 100% / .10); }
.steering-wheel { position: relative; width: 34px; height: 34px; border: 4px solid hsl(0 0% 96% / .72); border-radius: 50%; box-shadow: 0 8px 18px hsl(0 0% 0% / .32), inset 0 0 0 2px hsl(0 0% 0% / .3); }
.steering-wheel:before, .steering-wheel:after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 15px; border-radius: 999px; background: hsl(0 0% 96% / .7); transform-origin: top center; }
.steering-wheel:before { transform: translate(-50%, -1px) rotate(48deg); }
.steering-wheel:after { transform: translate(-50%, -1px) rotate(-48deg); }
.steering-wheel span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: hsl(0 0% 96% / .78); transform: translate(-50%, -50%); }
.driver-seat { background: linear-gradient(145deg, #64748b, #111827 70%); border: 1px solid hsl(0 0% 100% / .35); box-shadow: inset 0 4px 0 hsl(0 0% 100% / .2), inset 0 -12px 18px hsl(0 0% 0% / .35), 0 14px 24px hsl(0 0% 0% / .32); }
.driver-seat:before { content: ""; position: absolute; top: 7px; left: 10px; right: 10px; height: 7px; border-radius: 999px; background: hsl(0 0% 100% / .22); }
.bus-cabin { background: linear-gradient(180deg, hsl(222 47% 8% / .9), hsl(222 47% 11% / .98)); box-shadow: inset 0 0 28px hsl(0 0% 0% / .38); }
.seat {
  min-width: 48px;
  min-height: 56px;
  border-radius: 19px 19px 16px 16px;
  border: 1px solid hsl(0 0% 100% / .52);
  box-shadow: inset 0 3px 0 hsl(0 0% 100% / .38), inset 0 -13px 18px hsl(0 0% 0% / .30), 0 14px 24px hsl(0 0% 0% / .36);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), filter var(--transition-fast);
  transform: perspective(220px) rotateX(8deg);
  touch-action: manipulation;
}
.real-seat { overflow: hidden; isolation: isolate; }
.seat-back { position: absolute; top: 5px; left: 7px; right: 7px; height: 24px; border-radius: 15px 15px 9px 9px; background: linear-gradient(180deg, hsl(0 0% 100% / .30), hsl(0 0% 100% / .08)); box-shadow: inset 0 2px 0 hsl(0 0% 100% / .28), 0 5px 8px hsl(0 0% 0% / .12); }
.seat-cushion { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 20px; border-radius: 9px 9px 15px 15px; background: linear-gradient(180deg, hsl(0 0% 100% / .13), hsl(0 0% 0% / .16)); box-shadow: inset 0 2px 0 hsl(0 0% 100% / .14); }
.seat-arm { position: absolute; top: 20px; bottom: 8px; width: 6px; border-radius: 999px; background: hsl(0 0% 0% / .24); box-shadow: inset 1px 0 0 hsl(0 0% 100% / .12); }
.seat-arm-left { left: 4px; }
.seat-arm-right { right: 4px; }
.seat-number { position: relative; z-index: 2; margin-top: 8px; font-size: 15px; text-shadow: 0 2px 5px hsl(0 0% 0% / .45); }
.seat:hover { transform: perspective(220px) rotateX(8deg) translateY(-4px) scale(1.045); filter: saturate(1.12) brightness(1.06); box-shadow: inset 0 3px 0 hsl(0 0% 100% / .42), inset 0 -13px 18px hsl(0 0% 0% / .28), 0 18px 30px hsl(0 0% 0% / .44), 0 0 0 4px hsl(0 0% 100% / .06); }
.seat:active { transform: perspective(220px) rotateX(12deg) translateY(1px) scale(.96); }
.seat-selected { outline: 3px solid hsl(var(--warning)); outline-offset: 3px; animation: pulseSeat 1.1s ease-in-out infinite; }
@keyframes pulseSeat { 0%,100% { box-shadow: 0 12px 22px hsl(0 0% 0% / .32), 0 0 0 0 hsl(var(--warning) / .35); } 50% { box-shadow: 0 12px 22px hsl(0 0% 0% / .32), 0 0 0 8px hsl(var(--warning) / 0); } }
.aisle {
  min-width: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, hsl(210 20% 92% / .10) 30%, hsl(210 20% 92% / .19) 50%, hsl(210 20% 92% / .10) 70%, transparent);
  position: relative;
  box-shadow: inset 0 0 14px hsl(0 0% 0% / .22);
}
.aisle:after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, hsl(0 0% 100% / .25), hsl(0 0% 100% / .25) 12px, transparent 12px, transparent 24px);
}
.modal-backdrop { background: hsl(222 45% 8% / .58); backdrop-filter: blur(8px); }
.bottom-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
@media print {
  .no-print { display: none !important; }
  body { background: white; }
  .glass-card { box-shadow: none; border: 1px solid #ddd; }
}
@media (max-width: 420px) {
  .bus-shell { border-radius: 38px 38px 28px 28px; padding-left: 12px !important; padding-right: 12px !important; }
  .seat-row { gap: 6px; grid-template-columns: 1fr 1fr 24px 1fr 1fr; }
  .seat { min-width: 39px; min-height: 50px; border-radius: 16px 16px 13px 13px; }
  .seat-number { font-size: 13px; }
  .safe-bottom { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}