:root {
  --background: oklch(0.13 0.02 280);
  --foreground: oklch(0.95 0.02 280);
  --card: oklch(0.17 0.025 280);
  --card-foreground: oklch(0.95 0.02 280);
  --popover: oklch(0.17 0.025 280);
  --popover-foreground: oklch(0.95 0.02 280);
  --primary: oklch(0.7 0.2 290);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.22 0.03 280);
  --secondary-foreground: oklch(0.9 0.02 280);
  --muted: oklch(0.22 0.03 280);
  --muted-foreground: oklch(0.65 0.03 280);
  --muted-secondary: oklch(0.65 0.01 280);
  --accent: oklch(0.65 0.18 320);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.28 0.04 280);
  --input: oklch(0.22 0.03 280);
  --ring: oklch(0.7 0.2 290);
  --radius: 0.75rem;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

[data-template-component="true"] {
  opacity: 0;
  transition: opacity 160ms ease;
}

[data-template-component="true"][data-initialized="true"] {
  opacity: 1;
}

.bg-background {
  background-color: var(--background);
}
.bg-card {
  background-color: var(--card);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-muted {
  background-color: var(--muted);
}
.text-foreground {
  color: var(--foreground);
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--muted-secondary);
}
.text-accent {
  color: var(--accent);
}
.text-destructive {
  color: var(--destructive);
}
.border-border {
  border-color: var(--border);
}
.ring-ring {
  --tw-ring-color: var(--ring);
}
.pill {
  background-color: color-mix(in oklab, var(--card) 65%, transparent);
}
.pill-primary {
  background-color: color-mix(in oklab, var(--primary) 20%, transparent);
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  color: var(--primary);
}
.pill-secondary {
  background-color: color-mix(in oklab, var(--secondary) 35%, transparent);
  border-color: color-mix(in oklab, var(--muted-secondary) 60%, transparent);
  color: var(--foreground);
}
.pill-accent {
  background-color: color-mix(in oklab, var(--accent) 20%, transparent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  color: var(--accent);
}
.pill-bar {
  background-color: color-mix(in oklab, var(--card) 80%, transparent);
  backdrop-filter: blur(12px);
}
.settings-area-selector .sidebar-checkbox-header {
  height: 0;
  margin: 0;
  padding: 0;
}

.settings-area-selector .sidebar-checkbox-label {
  display: none;
}

.settings-area-selector .sidebar-checkbox-actions {
  position: absolute;
  right: 1rem;
  top: -1.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--card);
  border-radius: 0.75rem;
}

.step-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.floating-search {
  left: 2rem;
}

@media (min-width: 1024px) {
  .floating-search {
    left: calc(50% - 640px + 2rem);
  }
}

.range-single {
  width: 100%;
  height: 1.75rem;
  background: transparent;
  appearance: none;
}

.range-single::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--muted);
}

.range-single::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  border-radius: 999px;
  background: var(--foreground);
  border: 2px solid var(--primary);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.range-single::-moz-range-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--muted);
}

.range-single::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--foreground);
  border: 2px solid var(--primary);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.dual-range {
  position: relative;
  --thumb-size: 16px;
  height: 1.5rem;
  display: flex;
  align-items: center;
}

.range-bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  color: var(--foreground);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px color-mix(in oklab, var(--primary) 25%, transparent);
}

.range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--muted) 0%,
    var(--muted) var(--range-start, 0%),
    var(--primary) var(--range-start, 0%),
    var(--primary) var(--range-end, 100%),
    var(--muted) var(--range-end, 100%),
    var(--muted) 100%
  );
}

.range-input {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: -0.5rem;
  height: 2rem;
  background: transparent;
  pointer-events: none;
  appearance: none;
}

.range-input::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--foreground);
  border: 2px solid var(--primary);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--foreground);
  border: 2px solid var(--primary);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
}

.range-input::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: transparent;
}

.range-input::-moz-range-track {
  height: 0.5rem;
  background: transparent;
}