gradient-forge 1.0.0

package/app/globals.css

@@ -0,0 +1,1155 @@
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&family=Space+Grotesk:wght@400..700&display=swap")
+  layer(base);
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  html {
+    font-family: "Instrument Sans", system-ui, sans-serif;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    min-height: 100vh;
+    position: relative;
+    isolation: isolate;
+    background-color: hsl(var(--background) / 0.9);
+    background-image: var(--app-gradient);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: hsl(var(--foreground));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-family: "Space Grotesk", system-ui, sans-serif;
+  }
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .animate-float-slow {
+    animation: float 9s ease-in-out infinite;
+  }
+
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: -2;
+    background-image: var(--app-gradient);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+
+  .dark body::after {
+    content: "";
+    position: fixed;
+    inset: -18%;
+    pointer-events: none;
+    z-index: -1;
+    background-image:
+      radial-gradient(48% 40% at 8% 8%, hsl(var(--primary) / 0.5), transparent 65%),
+      radial-gradient(45% 45% at 92% 12%, hsl(var(--accent) / 0.4), transparent 64%),
+      radial-gradient(55% 50% at 50% 110%, hsl(251 92% 62% / 0.28), transparent 68%);
+    filter: blur(14px) saturate(1.18);
+  }
+
+  .light body::after {
+    content: "";
+    position: fixed;
+    inset: -20%;
+    pointer-events: none;
+    z-index: -1;
+    background-image:
+      radial-gradient(48% 40% at 8% 8%, hsl(var(--primary) / 0.25), transparent 65%),
+      radial-gradient(45% 45% at 92% 12%, hsl(var(--accent) / 0.2), transparent 64%);
+    filter: blur(18px) saturate(1.05);
+  }
+
+  .bg-background,
+  .bg-card,
+  .bg-popover,
+  .bg-sidebar {
+    background-color: hsl(var(--background) / 0.34);
+    background-image: linear-gradient(var(--app-surface-tint), var(--app-surface-tint));
+    backdrop-filter: blur(16px);
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.9rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 225 18% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 225 18% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 225 18% 12%;
+    --secondary: 220 26% 94%;
+    --secondary-foreground: 225 18% 16%;
+    --muted: 220 26% 94%;
+    --muted-foreground: 224 14% 40%;
+    --accent-foreground: 225 18% 12%;
+    --border: 220 22% 88%;
+    --input: 220 22% 88%;
+    --sidebar-background: 0 0% 99%;
+    --sidebar-foreground: 225 18% 14%;
+    --sidebar-accent: 220 25% 95%;
+    --sidebar-accent-foreground: 225 18% 14%;
+    --sidebar-border: 220 20% 88%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --app-gradient:
+      radial-gradient(1100px 560px at -10% -20%, hsl(250 90% 66% / 0.28), transparent 60%),
+      radial-gradient(980px 560px at 112% 0%, hsl(205 92% 63% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(232 30% 12%) 0%, hsl(228 27% 11%) 52%, hsl(222 24% 9%) 100%);
+    --app-surface-tint: hsl(250 85% 65% / 0.08);
+  }
+
+  .theme-nitro-mint-apple {
+    --background: 153 22% 12%;
+    --card: 153 19% 14%;
+    --popover: 153 19% 14%;
+    --sidebar-background: 153 20% 13%;
+    --primary: 151 52% 63%;
+    --accent: 95 58% 66%;
+    --ring: 151 52% 63%;
+    --app-gradient:
+      radial-gradient(1100px 560px at -8% -20%, hsl(156 58% 60% / 0.3), transparent 60%),
+      radial-gradient(940px 520px at 114% 0%, hsl(96 64% 62% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(156 27% 13%) 0%, hsl(149 23% 13%) 50%, hsl(136 21% 10%) 100%);
+    --app-surface-tint: hsl(151 52% 63% / 0.09);
+  }
+
+  .theme-nitro-citrus-sherbert {
+    --background: 35 26% 12%;
+    --card: 35 22% 14%;
+    --popover: 35 22% 14%;
+    --sidebar-background: 35 23% 13%;
+    --primary: 33 95% 66%;
+    --accent: 49 96% 70%;
+    --ring: 33 95% 66%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -20%, hsl(28 97% 66% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 4%, hsl(53 95% 68% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(34 29% 12%) 0%, hsl(32 24% 13%) 50%, hsl(27 21% 10%) 100%);
+    --app-surface-tint: hsl(34 95% 66% / 0.09);
+  }
+
+  .theme-nitro-retro-raincloud {
+    --background: 216 18% 12%;
+    --card: 216 16% 14%;
+    --popover: 216 16% 14%;
+    --sidebar-background: 216 16% 13%;
+    --primary: 214 34% 68%;
+    --accent: 208 28% 63%;
+    --ring: 214 34% 68%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -8% -20%, hsl(215 36% 66% / 0.28), transparent 60%),
+      radial-gradient(940px 520px at 114% 2%, hsl(206 30% 64% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(217 21% 13%) 0%, hsl(214 18% 13%) 52%, hsl(211 16% 10%) 100%);
+    --app-surface-tint: hsl(214 34% 68% / 0.08);
+  }
+
+  .theme-nitro-hanami {
+    --background: 322 23% 12%;
+    --card: 322 21% 14%;
+    --popover: 322 21% 14%;
+    --sidebar-background: 322 21% 13%;
+    --primary: 327 62% 72%;
+    --accent: 338 56% 76%;
+    --ring: 327 62% 72%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(319 65% 69% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(339 58% 75% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(323 27% 12%) 0%, hsl(315 23% 13%) 50%, hsl(304 19% 10%) 100%);
+    --app-surface-tint: hsl(327 62% 72% / 0.09);
+  }
+
+  .theme-nitro-sunrise {
+    --background: 12 27% 12%;
+    --card: 12 24% 14%;
+    --popover: 12 24% 14%;
+    --sidebar-background: 12 24% 13%;
+    --primary: 12 90% 66%;
+    --accent: 36 96% 69%;
+    --ring: 12 90% 66%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -12% -20%, hsl(2 88% 66% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 114% 4%, hsl(35 96% 67% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(9 30% 12%) 0%, hsl(13 26% 13%) 50%, hsl(21 21% 10%) 100%);
+    --app-surface-tint: hsl(12 90% 66% / 0.09);
+  }
+
+  .theme-nitro-cotton-candy {
+    --background: 252 24% 12%;
+    --card: 252 21% 14%;
+    --popover: 252 21% 14%;
+    --sidebar-background: 252 21% 13%;
+    --primary: 263 86% 74%;
+    --accent: 332 82% 74%;
+    --ring: 263 86% 74%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(208 95% 74% / 0.28), transparent 58%),
+      radial-gradient(940px 520px at 112% 4%, hsl(328 87% 73% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(247 30% 12%) 0%, hsl(258 26% 13%) 48%, hsl(286 20% 10%) 100%);
+    --app-surface-tint: hsl(263 86% 74% / 0.09);
+  }
+
+  .theme-nitro-lofi-vibes {
+    --background: 236 22% 12%;
+    --card: 236 19% 14%;
+    --popover: 236 19% 14%;
+    --sidebar-background: 236 19% 13%;
+    --primary: 229 37% 67%;
+    --accent: 264 36% 66%;
+    --ring: 229 37% 67%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -20%, hsl(228 44% 63% / 0.26), transparent 60%),
+      radial-gradient(940px 520px at 112% 2%, hsl(267 38% 64% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(236 26% 13%) 0%, hsl(232 22% 13%) 50%, hsl(258 16% 10%) 100%);
+    --app-surface-tint: hsl(229 37% 67% / 0.08);
+  }
+
+  .theme-nitro-desert-khaki {
+    --background: 36 21% 12%;
+    --card: 36 19% 14%;
+    --popover: 36 19% 14%;
+    --sidebar-background: 36 19% 13%;
+    --primary: 37 45% 64%;
+    --accent: 45 34% 66%;
+    --ring: 37 45% 64%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -18%, hsl(34 44% 58% / 0.26), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(48 33% 63% / 0.18), transparent 58%),
+      linear-gradient(160deg, hsl(37 23% 13%) 0%, hsl(34 20% 13%) 52%, hsl(30 16% 10%) 100%);
+    --app-surface-tint: hsl(37 45% 64% / 0.08);
+  }
+
+  .theme-nitro-sunset {
+    --background: 308 25% 12%;
+    --card: 308 22% 14%;
+    --popover: 308 22% 14%;
+    --sidebar-background: 308 22% 13%;
+    --primary: 19 96% 67%;
+    --accent: 337 84% 65%;
+    --ring: 19 96% 67%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -12% -20%, hsl(325 84% 62% / 0.31), transparent 58%),
+      radial-gradient(900px 520px at 112% 6%, hsl(24 97% 66% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(304 29% 12%) 0%, hsl(298 24% 13%) 50%, hsl(287 22% 10%) 100%);
+    --app-surface-tint: hsl(19 96% 67% / 0.09);
+  }
+
+  .theme-nitro-chroma-glow {
+    --background: 246 33% 11%;
+    --card: 246 28% 13%;
+    --popover: 246 28% 13%;
+    --sidebar-background: 246 28% 12%;
+    --primary: 286 94% 67%;
+    --accent: 195 100% 61%;
+    --ring: 286 94% 67%;
+    --app-gradient:
+      radial-gradient(1020px 560px at -12% -18%, hsl(226 95% 63% / 0.32), transparent 58%),
+      radial-gradient(940px 520px at 112% 2%, hsl(194 100% 62% / 0.28), transparent 58%),
+      linear-gradient(160deg, hsl(246 36% 12%) 0%, hsl(272 30% 12%) 50%, hsl(305 24% 10%) 100%);
+    --app-surface-tint: hsl(286 94% 67% / 0.1);
+  }
+
+  .theme-nitro-forest {
+    --background: 148 27% 11%;
+    --card: 148 23% 13%;
+    --popover: 148 23% 13%;
+    --sidebar-background: 148 23% 12%;
+    --primary: 145 58% 57%;
+    --accent: 166 52% 57%;
+    --ring: 145 58% 57%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -10% -20%, hsl(145 62% 53% / 0.3), transparent 60%),
+      radial-gradient(920px 520px at 112% 2%, hsl(170 48% 53% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(149 30% 12%) 0%, hsl(146 26% 12%) 52%, hsl(160 21% 10%) 100%);
+    --app-surface-tint: hsl(145 58% 57% / 0.09);
+  }
+
+  .theme-nitro-crimson {
+    --background: 350 34% 10%;
+    --card: 350 29% 12%;
+    --popover: 350 29% 12%;
+    --sidebar-background: 350 29% 11%;
+    --primary: 350 82% 62%;
+    --accent: 8 82% 61%;
+    --ring: 350 82% 62%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -12% -18%, hsl(352 85% 59% / 0.34), transparent 58%),
+      radial-gradient(900px 520px at 112% 4%, hsl(9 84% 58% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(349 37% 11%) 0%, hsl(342 31% 12%) 50%, hsl(326 24% 10%) 100%);
+    --app-surface-tint: hsl(350 82% 62% / 0.1);
+  }
+
+  .theme-nitro-midnight-blurple {
+    --background: 234 34% 11%;
+    --card: 234 29% 13%;
+    --popover: 234 29% 13%;
+    --sidebar-background: 234 29% 12%;
+    --primary: 247 90% 67%;
+    --accent: 214 92% 66%;
+    --ring: 247 90% 67%;
+    --app-gradient:
+      radial-gradient(1100px 560px at -8% -20%, hsl(248 93% 69% / 0.3), transparent 60%),
+      radial-gradient(980px 560px at 112% 0%, hsl(210 92% 64% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(234 35% 12%) 0%, hsl(228 29% 11%) 52%, hsl(222 25% 9%) 100%);
+    --app-surface-tint: hsl(247 90% 67% / 0.09);
+  }
+
+  .theme-nitro-mars {
+    --background: 14 33% 11%;
+    --card: 14 28% 13%;
+    --popover: 14 28% 13%;
+    --sidebar-background: 14 28% 12%;
+    --primary: 15 74% 58%;
+    --accent: 29 64% 56%;
+    --ring: 15 74% 58%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -12% -20%, hsl(11 72% 55% / 0.31), transparent 58%),
+      radial-gradient(940px 520px at 112% 4%, hsl(30 66% 52% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(14 35% 12%) 0%, hsl(16 30% 13%) 50%, hsl(24 23% 10%) 100%);
+    --app-surface-tint: hsl(15 74% 58% / 0.09);
+  }
+
+  .theme-nitro-dusk {
+    --background: 259 27% 11%;
+    --card: 259 23% 13%;
+    --popover: 259 23% 13%;
+    --sidebar-background: 259 23% 12%;
+    --primary: 266 58% 66%;
+    --accent: 223 42% 65%;
+    --ring: 266 58% 66%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -8% -20%, hsl(271 62% 64% / 0.3), transparent 58%),
+      radial-gradient(940px 520px at 112% 4%, hsl(226 43% 63% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(261 30% 12%) 0%, hsl(252 24% 13%) 50%, hsl(235 20% 10%) 100%);
+    --app-surface-tint: hsl(266 58% 66% / 0.09);
+  }
+
+  .theme-nitro-under-the-sea {
+    --background: 197 35% 10%;
+    --card: 197 30% 12%;
+    --popover: 197 30% 12%;
+    --sidebar-background: 197 30% 11%;
+    --primary: 189 70% 58%;
+    --accent: 168 58% 54%;
+    --ring: 189 70% 58%;
+    --app-gradient:
+      radial-gradient(1100px 560px at -8% -20%, hsl(202 80% 56% / 0.3), transparent 60%),
+      radial-gradient(940px 520px at 114% 2%, hsl(168 58% 51% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(200 36% 11%) 0%, hsl(194 32% 12%) 50%, hsl(185 27% 10%) 100%);
+    --app-surface-tint: hsl(189 70% 58% / 0.09);
+  }
+
+  .theme-nitro-retro-storm {
+    --background: 214 21% 11%;
+    --card: 214 18% 13%;
+    --popover: 214 18% 13%;
+    --sidebar-background: 214 18% 12%;
+    --primary: 213 30% 65%;
+    --accent: 201 25% 63%;
+    --ring: 213 30% 65%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -8% -20%, hsl(212 30% 62% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(198 24% 60% / 0.18), transparent 58%),
+      linear-gradient(160deg, hsl(214 24% 12%) 0%, hsl(212 20% 13%) 52%, hsl(208 18% 10%) 100%);
+    --app-surface-tint: hsl(213 30% 65% / 0.08);
+  }
+
+  .theme-nitro-neon-nights {
+    --background: 245 36% 10%;
+    --card: 245 31% 12%;
+    --popover: 245 31% 12%;
+    --sidebar-background: 245 31% 11%;
+    --primary: 287 100% 67%;
+    --accent: 191 100% 60%;
+    --ring: 287 100% 67%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -12% -20%, hsl(288 100% 65% / 0.32), transparent 58%),
+      radial-gradient(900px 520px at 112% 2%, hsl(192 100% 58% / 0.28), transparent 58%),
+      linear-gradient(160deg, hsl(243 38% 11%) 0%, hsl(252 32% 12%) 50%, hsl(224 28% 9%) 100%);
+    --app-surface-tint: hsl(287 100% 67% / 0.1);
+  }
+
+  .theme-nitro-strawberry-lemonade {
+    --background: 339 30% 11%;
+    --card: 339 25% 13%;
+    --popover: 339 25% 13%;
+    --sidebar-background: 339 25% 12%;
+    --primary: 341 84% 64%;
+    --accent: 48 93% 63%;
+    --ring: 341 84% 64%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(338 88% 63% / 0.31), transparent 58%),
+      radial-gradient(940px 520px at 112% 6%, hsl(49 95% 61% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(339 33% 12%) 0%, hsl(332 28% 12%) 50%, hsl(20 20% 10%) 100%);
+    --app-surface-tint: hsl(341 84% 64% / 0.09);
+  }
+
+  .theme-nitro-aurora {
+    --background: 175 30% 11%;
+    --card: 175 26% 13%;
+    --popover: 175 26% 13%;
+    --sidebar-background: 175 26% 12%;
+    --primary: 168 67% 58%;
+    --accent: 123 56% 63%;
+    --ring: 168 67% 58%;
+    --app-gradient:
+      radial-gradient(1100px 560px at -8% -20%, hsl(178 72% 56% / 0.3), transparent 60%),
+      radial-gradient(960px 540px at 114% 2%, hsl(124 56% 61% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(182 33% 11%) 0%, hsl(167 30% 12%) 50%, hsl(145 24% 10%) 100%);
+    --app-surface-tint: hsl(168 67% 58% / 0.09);
+  }
+
+  .theme-nitro-sepia {
+    --background: 29 24% 11%;
+    --card: 29 21% 13%;
+    --popover: 29 21% 13%;
+    --sidebar-background: 29 21% 12%;
+    --primary: 30 39% 58%;
+    --accent: 22 33% 54%;
+    --ring: 30 39% 58%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(33 42% 52% / 0.24), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(20 34% 49% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(29 28% 12%) 0%, hsl(26 23% 13%) 50%, hsl(22 19% 10%) 100%);
+    --app-surface-tint: hsl(30 39% 58% / 0.08);
+  }
+
+  .theme-nitro-memory-lane {
+    --background: 264 24% 11%;
+    --card: 264 21% 13%;
+    --popover: 264 21% 13%;
+    --sidebar-background: 264 21% 12%;
+    --primary: 277 62% 71%;
+    --accent: 196 56% 63%;
+    --ring: 277 62% 71%;
+    --app-gradient:
+      radial-gradient(1020px 560px at -10% -20%, hsl(283 62% 70% / 0.31), transparent 58%),
+      radial-gradient(920px 520px at 112% 0%, hsl(197 59% 63% / 0.23), transparent 58%),
+      linear-gradient(160deg, hsl(269 30% 12%) 0%, hsl(257 25% 13%) 48%, hsl(203 22% 10%) 100%);
+    --app-surface-tint: hsl(277 62% 71% / 0.09);
+  }
+
+  .light[class*="theme-nitro-"] {
+    --background: 0 0% 100%;
+    --foreground: 225 22% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 225 22% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 225 22% 12%;
+    --secondary: 220 28% 94%;
+    --secondary-foreground: 225 18% 16%;
+    --muted: 220 28% 95%;
+    --muted-foreground: 224 14% 40%;
+    --border: 220 24% 88%;
+    --input: 220 24% 88%;
+    --sidebar-background: 0 0% 99%;
+    --sidebar-foreground: 225 18% 16%;
+    --sidebar-accent: 220 28% 95%;
+    --sidebar-accent-foreground: 225 18% 16%;
+    --sidebar-border: 220 24% 88%;
+    --app-gradient:
+      radial-gradient(1100px 580px at -10% -15%, hsl(var(--primary) / 0.27), transparent 58%),
+      radial-gradient(980px 560px at 112% 0%, hsl(var(--accent) / 0.22), transparent 58%),
+      linear-gradient(165deg, hsl(0 0% 100%) 0%, hsl(220 32% 97%) 52%, hsl(220 36% 94%) 100%);
+    --app-surface-tint: hsl(var(--primary) / 0.05);
+  }
+}
+
+@layer utilities {
+  html[data-theme] body {
+    background-image: var(--app-gradient) !important;
+    background-color: hsl(var(--background) / 0.82) !important;
+  }
+
+  html[data-theme] .group\/sidebar-wrapper,
+  html[data-theme] [data-sidebar="sidebar"] {
+    background-image:
+      radial-gradient(130% 100% at 0% 0%, hsl(var(--primary) / 0.45), transparent 54%),
+      radial-gradient(120% 100% at 100% 0%, hsl(var(--accent) / 0.34), transparent 55%),
+      linear-gradient(170deg, hsl(var(--background) / 0.94), hsl(var(--background) / 0.7)) !important;
+    background-color: transparent !important;
+    background-size: cover;
+    backdrop-filter: blur(20px) saturate(1.08);
+  }
+
+  html[data-theme] .bg-background,
+  html[data-theme] .bg-card,
+  html[data-theme] .bg-popover,
+  html[data-theme] .bg-sidebar {
+    background-image:
+      linear-gradient(var(--app-surface-tint), var(--app-surface-tint)),
+      radial-gradient(120% 100% at 0% 0%, hsl(var(--primary) / 0.24), transparent 55%),
+      radial-gradient(120% 100% at 100% 0%, hsl(var(--accent) / 0.2), transparent 55%) !important;
+    background-color: hsl(var(--background) / 0.22) !important;
+    backdrop-filter: blur(18px) saturate(1.06);
+  }
+
+  html[data-theme] .bg-muted,
+  html[data-theme] .bg-secondary {
+    background-image:
+      radial-gradient(100% 100% at 0% 0%, hsl(var(--primary) / 0.14), transparent 58%),
+      radial-gradient(100% 100% at 100% 0%, hsl(var(--accent) / 0.12), transparent 58%) !important;
+    background-color: hsl(var(--background) / 0.34) !important;
+  }
+}
+
+/* gradient-forge theme start */
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  html {
+    font-family: "Instrument Sans", system-ui, sans-serif;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    min-height: 100vh;
+    position: relative;
+    isolation: isolate;
+    background-color: hsl(var(--background) / 0.9);
+    background-image: var(--app-gradient);
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: hsl(var(--foreground));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-family: "Space Grotesk", system-ui, sans-serif;
+  }
+
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: -2;
+    background-image: var(--app-gradient);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+
+  .dark body::after {
+    content: "";
+    position: fixed;
+    inset: -18%;
+    pointer-events: none;
+    z-index: -1;
+    background-image:
+      radial-gradient(48% 40% at 8% 8%, hsl(var(--primary) / 0.5), transparent 65%),
+      radial-gradient(45% 45% at 92% 12%, hsl(var(--accent) / 0.4), transparent 64%),
+      radial-gradient(55% 50% at 50% 110%, hsl(251 92% 62% / 0.28), transparent 68%);
+    filter: blur(14px) saturate(1.18);
+  }
+
+  .light body::after {
+    content: "";
+    position: fixed;
+    inset: -20%;
+    pointer-events: none;
+    z-index: -1;
+    background-image:
+      radial-gradient(48% 40% at 8% 8%, hsl(var(--primary) / 0.25), transparent 65%),
+      radial-gradient(45% 45% at 92% 12%, hsl(var(--accent) / 0.2), transparent 64%);
+    filter: blur(18px) saturate(1.05);
+  }
+
+  .bg-background,
+  .bg-card,
+  .bg-popover,
+  .bg-sidebar {
+    background-color: hsl(var(--background) / 0.34);
+    background-image: linear-gradient(var(--app-surface-tint), var(--app-surface-tint));
+    backdrop-filter: blur(16px);
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.9rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 225 18% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 225 18% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 225 18% 12%;
+    --secondary: 220 26% 94%;
+    --secondary-foreground: 225 18% 16%;
+    --muted: 220 26% 94%;
+    --muted-foreground: 224 14% 40%;
+    --accent-foreground: 225 18% 12%;
+    --border: 220 22% 88%;
+    --input: 220 22% 88%;
+    --sidebar-background: 0 0% 99%;
+    --sidebar-foreground: 225 18% 14%;
+    --sidebar-accent: 220 25% 95%;
+    --sidebar-accent-foreground: 225 18% 14%;
+    --sidebar-border: 220 20% 88%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --app-gradient:
+      radial-gradient(1100px 560px at -10% -20%, hsl(250 90% 66% / 0.28), transparent 60%),
+      radial-gradient(980px 560px at 112% 0%, hsl(205 92% 63% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(232 30% 12%) 0%, hsl(228 27% 11%) 52%, hsl(222 24% 9%) 100%);
+    --app-surface-tint: hsl(250 85% 65% / 0.08);
+  }
+
+  .theme-nitro-mint-apple {
+    --background: 153 22% 12%;
+    --card: 153 19% 14%;
+    --popover: 153 19% 14%;
+    --sidebar-background: 153 20% 13%;
+    --primary: 151 52% 63%;
+    --accent: 95 58% 66%;
+    --ring: 151 52% 63%;
+    --app-gradient:
+      radial-gradient(1100px 560px at -8% -20%, hsl(156 58% 60% / 0.3), transparent 60%),
+      radial-gradient(940px 520px at 114% 0%, hsl(96 64% 62% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(156 27% 13%) 0%, hsl(149 23% 13%) 50%, hsl(136 21% 10%) 100%);
+    --app-surface-tint: hsl(151 52% 63% / 0.09);
+  }
+
+  .theme-nitro-citrus-sherbert {
+    --background: 35 26% 12%;
+    --card: 35 22% 14%;
+    --popover: 35 22% 14%;
+    --sidebar-background: 35 23% 13%;
+    --primary: 33 95% 66%;
+    --accent: 49 96% 70%;
+    --ring: 33 95% 66%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -20%, hsl(28 97% 66% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 4%, hsl(53 95% 68% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(34 29% 12%) 0%, hsl(32 24% 13%) 50%, hsl(27 21% 10%) 100%);
+    --app-surface-tint: hsl(34 95% 66% / 0.09);
+  }
+
+  .theme-nitro-retro-raincloud {
+    --background: 216 18% 12%;
+    --card: 216 16% 14%;
+    --popover: 216 16% 14%;
+    --sidebar-background: 216 16% 13%;
+    --primary: 214 34% 68%;
+    --accent: 208 28% 63%;
+    --ring: 214 34% 68%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -8% -20%, hsl(215 36% 66% / 0.28), transparent 60%),
+      radial-gradient(940px 520px at 114% 2%, hsl(206 30% 64% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(217 21% 13%) 0%, hsl(214 18% 13%) 52%, hsl(211 16% 10%) 100%);
+    --app-surface-tint: hsl(214 34% 68% / 0.08);
+  }
+
+  .theme-nitro-hanami {
+    --background: 322 23% 12%;
+    --card: 322 21% 14%;
+    --popover: 322 21% 14%;
+    --sidebar-background: 322 21% 13%;
+    --primary: 327 62% 72%;
+    --accent: 338 56% 76%;
+    --ring: 327 62% 72%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(319 65% 69% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(339 58% 75% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(323 27% 12%) 0%, hsl(315 23% 13%) 50%, hsl(304 19% 10%) 100%);
+    --app-surface-tint: hsl(327 62% 72% / 0.09);
+  }
+
+  .theme-nitro-sunrise {
+    --background: 12 27% 12%;
+    --card: 12 24% 14%;
+    --popover: 12 24% 14%;
+    --sidebar-background: 12 24% 13%;
+    --primary: 12 90% 66%;
+    --accent: 36 96% 69%;
+    --ring: 12 90% 66%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -12% -20%, hsl(2 88% 66% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 114% 4%, hsl(35 96% 67% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(9 30% 12%) 0%, hsl(13 26% 13%) 50%, hsl(21 21% 10%) 100%);
+    --app-surface-tint: hsl(12 90% 66% / 0.09);
+  }
+
+  .theme-nitro-cotton-candy {
+    --background: 252 24% 12%;
+    --card: 252 21% 14%;
+    --popover: 252 21% 14%;
+    --sidebar-background: 252 21% 13%;
+    --primary: 263 86% 74%;
+    --accent: 332 82% 74%;
+    --ring: 263 86% 74%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(208 95% 74% / 0.28), transparent 58%),
+      radial-gradient(940px 520px at 112% 4%, hsl(328 87% 73% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(247 30% 12%) 0%, hsl(258 26% 13%) 48%, hsl(286 20% 10%) 100%);
+    --app-surface-tint: hsl(263 86% 74% / 0.09);
+  }
+
+  .theme-nitro-lofi-vibes {
+    --background: 236 22% 12%;
+    --card: 236 19% 14%;
+    --popover: 236 19% 14%;
+    --sidebar-background: 236 19% 13%;
+    --primary: 229 37% 67%;
+    --accent: 264 36% 66%;
+    --ring: 229 37% 67%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -20%, hsl(228 44% 63% / 0.26), transparent 60%),
+      radial-gradient(940px 520px at 112% 2%, hsl(267 38% 64% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(236 26% 13%) 0%, hsl(232 22% 13%) 50%, hsl(258 16% 10%) 100%);
+    --app-surface-tint: hsl(229 37% 67% / 0.08);
+  }
+
+  .theme-nitro-desert-khaki {
+    --background: 36 21% 12%;
+    --card: 36 19% 14%;
+    --popover: 36 19% 14%;
+    --sidebar-background: 36 19% 13%;
+    --primary: 37 45% 64%;
+    --accent: 45 34% 66%;
+    --ring: 37 45% 64%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -18%, hsl(34 44% 58% / 0.26), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(48 33% 63% / 0.18), transparent 58%),
+      linear-gradient(160deg, hsl(37 23% 13%) 0%, hsl(34 20% 13%) 52%, hsl(30 16% 10%) 100%);
+    --app-surface-tint: hsl(37 45% 64% / 0.08);
+  }
+
+  .theme-nitro-sunset {
+    --background: 308 25% 12%;
+    --card: 308 22% 14%;
+    --popover: 308 22% 14%;
+    --sidebar-background: 308 22% 13%;
+    --primary: 19 96% 67%;
+    --accent: 337 84% 65%;
+    --ring: 19 96% 67%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -12% -20%, hsl(325 84% 62% / 0.31), transparent 58%),
+      radial-gradient(900px 520px at 112% 6%, hsl(24 97% 66% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(304 29% 12%) 0%, hsl(298 24% 13%) 50%, hsl(287 22% 10%) 100%);
+    --app-surface-tint: hsl(19 96% 67% / 0.09);
+  }
+
+  .theme-nitro-chroma-glow {
+    --background: 246 33% 11%;
+    --card: 246 28% 13%;
+    --popover: 246 28% 13%;
+    --sidebar-background: 246 28% 12%;
+    --primary: 286 94% 67%;
+    --accent: 195 100% 61%;
+    --ring: 286 94% 67%;
+    --app-gradient:
+      radial-gradient(1020px 560px at -12% -18%, hsl(226 95% 63% / 0.32), transparent 58%),
+      radial-gradient(940px 520px at 112% 2%, hsl(194 100% 62% / 0.28), transparent 58%),
+      linear-gradient(160deg, hsl(246 36% 12%) 0%, hsl(272 30% 12%) 50%, hsl(305 24% 10%) 100%);
+    --app-surface-tint: hsl(286 94% 67% / 0.1);
+  }
+
+  .theme-nitro-forest {
+    --background: 148 27% 11%;
+    --card: 148 23% 13%;
+    --popover: 148 23% 13%;
+    --sidebar-background: 148 23% 12%;
+    --primary: 145 58% 57%;
+    --accent: 166 52% 57%;
+    --ring: 145 58% 57%;
+    --app-gradient:
+      radial-gradient(1080px 560px at -10% -20%, hsl(145 62% 53% / 0.3), transparent 60%),
+      radial-gradient(920px 520px at 112% 2%, hsl(170 48% 53% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(149 30% 12%) 0%, hsl(146 26% 12%) 52%, hsl(160 21% 10%) 100%);
+    --app-surface-tint: hsl(145 58% 57% / 0.09);
+  }
+
+  .theme-nitro-crimson {
+    --background: 350 34% 10%;
+    --card: 350 29% 12%;
+    --popover: 350 29% 12%;
+    --sidebar-background: 350 29% 11%;
+    --primary: 350 82% 62%;
+    --accent: 8 82% 61%;
+    --ring: 350 82% 62%;
+    --app-gradient:
+      radial-gradient(1060px 560px at -10% -22%, hsl(352 88% 60% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(12 82% 58% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(349 30% 11%) 0%, hsl(346 25% 11%) 52%, hsl(343 21% 9%) 100%);
+    --app-surface-tint: hsl(350 82% 62% / 0.1);
+  }
+
+  .theme-nitro-midnight-blurple {
+    --background: 235 26% 11%;
+    --card: 235 22% 12%;
+    --popover: 235 22% 12%;
+    --sidebar-background: 235 22% 11%;
+    --primary: 241 92% 70%;
+    --accent: 210 92% 65%;
+    --ring: 241 92% 70%;
+    --app-gradient:
+      radial-gradient(1050px 560px at -10% -20%, hsl(246 92% 66% / 0.3), transparent 60%),
+      radial-gradient(920px 520px at 112% 2%, hsl(201 92% 63% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(232 29% 12%) 0%, hsl(231 24% 12%) 50%, hsl(228 22% 10%) 100%);
+    --app-surface-tint: hsl(241 92% 70% / 0.1);
+  }
+
+  .theme-nitro-mars {
+    --background: 12 30% 10%;
+    --card: 12 25% 12%;
+    --popover: 12 25% 12%;
+    --sidebar-background: 12 26% 11%;
+    --primary: 14 74% 61%;
+    --accent: 22 78% 62%;
+    --ring: 14 74% 61%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(12 78% 62% / 0.3), transparent 60%),
+      radial-gradient(920px 520px at 112% 2%, hsl(22 78% 60% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(13 29% 11%) 0%, hsl(11 25% 11%) 52%, hsl(8 21% 9%) 100%);
+    --app-surface-tint: hsl(14 74% 61% / 0.1);
+  }
+
+  .theme-nitro-dusk {
+    --background: 256 23% 11%;
+    --card: 256 20% 13%;
+    --popover: 256 20% 13%;
+    --sidebar-background: 256 21% 12%;
+    --primary: 263 53% 67%;
+    --accent: 299 44% 64%;
+    --ring: 263 53% 67%;
+    --app-gradient:
+      radial-gradient(1020px 560px at -10% -20%, hsl(262 60% 62% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(298 48% 60% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(256 26% 12%) 0%, hsl(256 23% 12%) 50%, hsl(258 20% 10%) 100%);
+    --app-surface-tint: hsl(263 53% 67% / 0.09);
+  }
+
+  .theme-nitro-under-the-sea {
+    --background: 205 33% 10%;
+    --card: 205 28% 12%;
+    --popover: 205 28% 12%;
+    --sidebar-background: 205 28% 11%;
+    --primary: 186 70% 58%;
+    --accent: 197 74% 55%;
+    --ring: 186 70% 58%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(186 75% 58% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(197 76% 55% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(204 30% 11%) 0%, hsl(205 26% 11%) 50%, hsl(206 22% 9%) 100%);
+    --app-surface-tint: hsl(186 70% 58% / 0.1);
+  }
+
+  .theme-nitro-retro-storm {
+    --background: 216 20% 11%;
+    --card: 216 18% 13%;
+    --popover: 216 18% 13%;
+    --sidebar-background: 216 18% 12%;
+    --primary: 213 33% 66%;
+    --accent: 214 26% 62%;
+    --ring: 213 33% 66%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(213 35% 64% / 0.26), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(214 27% 62% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(216 24% 11%) 0%, hsl(215 20% 11%) 50%, hsl(214 18% 9%) 100%);
+    --app-surface-tint: hsl(213 33% 66% / 0.08);
+  }
+
+  .theme-nitro-neon-nights {
+    --background: 233 43% 8%;
+    --card: 233 38% 10%;
+    --popover: 233 38% 10%;
+    --sidebar-background: 233 38% 9%;
+    --primary: 292 96% 66%;
+    --accent: 190 94% 56%;
+    --ring: 292 96% 66%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(280 92% 62% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(191 94% 56% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(233 36% 10%) 0%, hsl(229 32% 9%) 50%, hsl(227 28% 8%) 100%);
+    --app-surface-tint: hsl(292 96% 66% / 0.1);
+  }
+
+  .theme-nitro-strawberry-lemonade {
+    --background: 334 31% 10%;
+    --card: 334 27% 12%;
+    --popover: 334 27% 12%;
+    --sidebar-background: 334 27% 11%;
+    --primary: 342 83% 67%;
+    --accent: 46 89% 63%;
+    --ring: 342 83% 67%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(342 86% 64% / 0.3), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(46 90% 62% / 0.24), transparent 58%),
+      linear-gradient(160deg, hsl(334 30% 11%) 0%, hsl(333 26% 11%) 50%, hsl(331 22% 9%) 100%);
+    --app-surface-tint: hsl(342 83% 67% / 0.1);
+  }
+
+  .theme-nitro-aurora {
+    --background: 174 25% 10%;
+    --card: 174 22% 12%;
+    --popover: 174 22% 12%;
+    --sidebar-background: 174 22% 11%;
+    --primary: 164 63% 57%;
+    --accent: 145 62% 58%;
+    --ring: 164 63% 57%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(164 66% 56% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(145 64% 56% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(176 28% 11%) 0%, hsl(172 24% 11%) 50%, hsl(169 20% 9%) 100%);
+    --app-surface-tint: hsl(164 63% 57% / 0.09);
+  }
+
+  .theme-nitro-sepia {
+    --background: 27 24% 11%;
+    --card: 27 21% 13%;
+    --popover: 27 21% 13%;
+    --sidebar-background: 27 21% 12%;
+    --primary: 28 44% 62%;
+    --accent: 36 39% 62%;
+    --ring: 28 44% 62%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(28 45% 60% / 0.26), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(36 40% 60% / 0.2), transparent 58%),
+      linear-gradient(160deg, hsl(27 25% 12%) 0%, hsl(26 22% 12%) 50%, hsl(24 19% 10%) 100%);
+    --app-surface-tint: hsl(28 44% 62% / 0.08);
+  }
+
+  .theme-nitro-memory-lane {
+    --background: 280 20% 11%;
+    --card: 280 18% 13%;
+    --popover: 280 18% 13%;
+    --sidebar-background: 280 18% 12%;
+    --primary: 277 54% 68%;
+    --accent: 195 48% 64%;
+    --ring: 277 54% 68%;
+    --app-gradient:
+      radial-gradient(1040px 560px at -10% -20%, hsl(284 58% 64% / 0.28), transparent 58%),
+      radial-gradient(920px 520px at 112% 2%, hsl(198 50% 62% / 0.22), transparent 58%),
+      linear-gradient(160deg, hsl(280 24% 12%) 0%, hsl(275 21% 12%) 50%, hsl(270 18% 10%) 100%);
+    --app-surface-tint: hsl(277 54% 68% / 0.09);
+  }
+}
+
+/* gradient-forge theme end */