:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: 210 40% 98%;
  --foreground: 218 37% 14%;
  --card: 0 0% 100%;
  --card-foreground: 218 37% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 218 37% 14%;
  --primary: 190 78% 33%;
  --primary-foreground: 0 0% 100%;
  --secondary: 174 47% 90%;
  --secondary-foreground: 185 80% 18%;
  --muted: 210 32% 93%;
  --muted-foreground: 215 16% 39%;
  --accent: 37 92% 56%;
  --accent-foreground: 30 85% 13%;
  --destructive: 0 74% 46%;
  --destructive-foreground: 0 0% 100%;
  --success: 150 66% 32%;
  --success-foreground: 0 0% 100%;
  --warning: 39 92% 45%;
  --warning-foreground: 30 85% 13%;
  --info: 214 86% 48%;
  --info-foreground: 0 0% 100%;
  --border: 214 26% 84%;
  --input: 214 26% 84%;
  --ring: 190 78% 33%;
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px hsl(var(--foreground) / 0.05);
  --shadow-md: 0 4px 12px hsl(var(--foreground) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--foreground) / 0.12);
  --shadow-elegant: 0 20px 64px hsl(var(--primary) / 0.22);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 216 42% 8%;
  --foreground: 210 40% 96%;
  --card: 217 34% 13%;
  --card-foreground: 210 40% 96%;
  --popover: 217 34% 13%;
  --popover-foreground: 210 40% 96%;
  --primary: 184 72% 46%;
  --primary-foreground: 218 37% 10%;
  --secondary: 190 40% 18%;
  --secondary-foreground: 184 72% 86%;
  --muted: 217 28% 18%;
  --muted-foreground: 215 20% 73%;
  --accent: 38 91% 58%;
  --accent-foreground: 30 85% 13%;
  --destructive: 0 70% 54%;
  --destructive-foreground: 0 0% 100%;
  --success: 152 66% 42%;
  --success-foreground: 218 37% 10%;
  --warning: 40 92% 56%;
  --warning-foreground: 30 85% 13%;
  --info: 210 90% 62%;
  --info-foreground: 218 37% 10%;
  --border: 217 24% 25%;
  --input: 217 24% 25%;
  --ring: 184 72% 46%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top left, hsl(var(--secondary) / 0.72), transparent 24rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
  color: hsl(var(--foreground));
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }
button { min-height: 44px; }

.app-shell { min-height: 100vh; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 50;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.75rem 1rem;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) + 4px);
  display: grid;
  place-items: center;
  color: hsl(var(--primary-foreground));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  box-shadow: var(--shadow-elegant);
}

.card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-sm);
}

.glass-card {
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--card) / 0.82);
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  outline: none;
}
.btn:focus-visible, .field:focus-visible, .slot-button:focus-visible, .nav-link:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}
.btn-primary {
  border: 1px solid hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-elegant);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--muted)); }
.btn:disabled { cursor: not-allowed; opacity: 0.62; transform: none; box-shadow: none; }

.field {
  width: 100%;
  min-height: 44px;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
textarea.field { min-height: 6rem; resize: vertical; }
.field:focus { border-color: hsl(var(--ring)); }
.field[readonly] { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

.label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.help-text { color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.25rem; }

.hero-orbit {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
}
.tooth-stage {
  position: absolute;
  inset: 2rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, hsl(var(--card)) 0 4rem, transparent 4.25rem),
    conic-gradient(from 160deg, hsl(var(--primary) / 0.24), hsl(var(--accent) / 0.26), hsl(var(--secondary) / 0.86), hsl(var(--primary) / 0.24));
  animation: slowSpin 18s linear infinite;
}
.tooth-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10rem;
  height: 12rem;
  transform: translate(-50%, -50%);
  border-radius: 4rem 4rem 5rem 5rem;
  background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--secondary)));
  box-shadow: inset 0 -18px 42px hsl(var(--primary) / 0.14), var(--shadow-elegant);
  animation: floatTooth 4s ease-in-out infinite;
}
.tooth-core::before, .tooth-core::after {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  width: 3.8rem;
  height: 5.5rem;
  background: linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--card)));
  border-radius: 0 0 3rem 3rem;
}
.tooth-core::before { left: 1.25rem; transform: rotate(8deg); }
.tooth-core::after { right: 1.25rem; transform: rotate(-8deg); }
.sparkle {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: hsl(var(--accent));
  box-shadow: 0 0 24px hsl(var(--accent) / 0.8);
  animation: pulseGlow 2.2s ease-in-out infinite;
}
.sparkle.one { left: 18%; top: 24%; }
.sparkle.two { right: 18%; top: 30%; animation-delay: 0.6s; }
.sparkle.three { left: 25%; bottom: 24%; animation-delay: 1.1s; }

.slot-button {
  min-height: 44px;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.slot-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.slot-button[aria-pressed="true"] {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--popover) / 0.92);
  backdrop-filter: blur(20px);
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
}
.nav-link {
  min-height: 44px;
  border-radius: calc(var(--radius) - 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  outline: none;
}
.nav-link.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.12);
}

.toast-region {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top));
  right: 1rem;
  z-index: 60;
  display: grid;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  animation: slideIn var(--transition-smooth) both;
}
.toast.success { border-color: hsl(var(--success) / 0.42); }
.toast.error { border-color: hsl(var(--destructive) / 0.42); }
.toast.info { border-color: hsl(var(--info) / 0.42); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--muted));
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.65), transparent);
  animation: shimmer 1.8s infinite;
}

@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes floatTooth { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-0.75rem); } }
@keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.45); opacity: 1; } }
@keyframes slideIn { from { transform: translateY(-0.75rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }

@media (min-width: 768px) {
  .app-shell { padding-bottom: 0; }
  .bottom-nav { display: none; }
}

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