* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0f0f1a;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    );
}

@keyframes headerStripe {
  0% { background-position: 0 0; }
  100% { background-position: 60px 0; }
}

.racing-stripe {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #e10600 0px,
    #e10600 15px,
    transparent 15px,
    transparent 30px
  );
  animation: headerStripe 1s linear infinite;
}

.racing-stripe-thin {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #e10600 0px,
    #e10600 10px,
    transparent 10px,
    transparent 20px
  );
  animation: headerStripe 1.5s linear infinite;
}

@keyframes checkeredBg {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

.checkered-header {
  background-image:
    repeating-conic-gradient(
      rgba(255,255,255,0.03) 0% 25%,
      transparent 0% 50%
    );
  background-size: 20px 20px;
  animation: checkeredBg 2s linear infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 10px rgba(225, 6, 0, 0.3); }
  50% { box-shadow: 0 0 25px rgba(225, 6, 0, 0.7), 0 0 50px rgba(225, 6, 0, 0.3); }
}

.btn-generate:hover:not(:disabled) {
  animation: pulse-red 1.2s ease-in-out infinite;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

.teleprompter {
  position: relative;
}

.teleprompter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.05) 2px,
    rgba(0,0,0,0.05) 4px
  );
  pointer-events: none;
}

.radio-box {
  border: 2px solid #22c55e;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2), inset 0 0 15px rgba(34, 197, 94, 0.05);
}

.podium-card {
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.light-on {
  background: #e10600;
  box-shadow: 0 0 20px rgba(225, 6, 0, 0.8);
}

.light-off {
  background: #3a0000;
  box-shadow: none;
  transition: all 0.2s ease-out;
}

@keyframes spin-wheel {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin-wheel {
  display: inline-block;
  animation: spin-wheel 2s linear infinite;
}

.glass-card {
  background: rgba(22, 33, 62, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-active {
  background: linear-gradient(135deg, rgba(225, 6, 0, 0.3), rgba(225, 6, 0, 0.1));
  border-bottom: 3px solid #e10600;
  box-shadow: 0 4px 15px rgba(225, 6, 0, 0.2);
}

.tabs-wrap {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tabs-wrap::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0f0f1a;
}

::-webkit-scrollbar-thumb {
  background: #e10600;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff2020;
}

/* Mobile tap sizes */
@media (max-width: 640px) {
  select, input[type="number"] {
    font-size: 16px;
    min-height: 44px;
  }
  button {
    min-height: 40px;
  }
}

/* Prevent iOS zoom */
input[type="number"],
select {
  font-size: max(16px, 1em);
}