:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(91, 108, 255, 0.10), transparent 28rem),
    linear-gradient(180deg, #faf8ff 0%, #f4f5fa 44%, #f4f5fa 100%);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.icon-fill {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bg-gradient-primary {
  background-image: linear-gradient(135deg, #5b6cff 0%, #8a4dff 100%);
}

.text-gradient-primary {
  background: linear-gradient(135deg, #5b6cff, #8a4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.soft-shadow {
  box-shadow: 0 8px 24px rgba(22, 24, 31, 0.06);
}

.glow-shadow-primary {
  box-shadow: 0 10px 20px rgba(91, 108, 255, 0.30);
}

.safe-pad-bottom {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.tab .tab-pill {
  position: absolute;
  top: 0;
  width: 2rem;
  height: 0.25rem;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #5b6cff, #8a4dff);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tab.tab-active .tab-pill {
  opacity: 1;
  transform: translateY(0);
}

.tab.tab-active .material-symbols-outlined {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.module-image {
  background: linear-gradient(135deg, rgba(91, 108, 255, 0.12), rgba(255, 197, 49, 0.12));
}

.module-image img {
  transition: transform 0.7s ease;
}

.module-card:active .module-image img,
.module-card:hover .module-image img {
  transform: scale(1.04);
}

.option-card {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.option-card:active {
  transform: scale(0.985);
}

.option-card.selected {
  border-color: transparent;
  background:
    linear-gradient(#f3f3fd, #f3f3fd) padding-box,
    linear-gradient(135deg, #5b6cff, #8a4dff) border-box;
}

.option-card.selected .option-indicator {
  border-color: transparent;
  background: linear-gradient(135deg, #5b6cff, #8a4dff);
  color: #ffffff;
}

.option-card.selected .option-text {
  color: #3748dd;
  font-weight: 700;
}

#view.vin > * {
  animation: viewEnter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anim-card {
  animation: cardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anim-pop {
  animation: pop 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  0% { opacity: 0; transform: scale(0.72); }
  70% { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.skel {
  height: 104px;
  border-radius: 1rem;
  margin-bottom: 16px;
  background: linear-gradient(100deg, #ffffff 30%, rgba(140, 150, 180, 0.14) 50%, #ffffff 70%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

#xpfill {
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}