/**
 * BlockNinja Orchestrator - Main Stylesheet
 *
 * Theme files are symlinked from web/src/themes/
 * - themes/base.css: Core light/dark themes
 * - themes/colors/: Simple color-only themes
 * - themes/design-systems/: Full themes with visual effects
 */

/* CSS imports must precede @tailwind directives */

/* Base themes (light/dark) */

/**
 * Base Theme - BlockNinja Light & Dark
 * Core theme variables used as the foundation
 */

/* Color-only themes */

/**
 * Lavender Theme
 * Soft purple tint with violet accents
 */

/**
 * Mint Theme
 * Fresh spearmint with emerald pop
 */

/**
 * Peach Theme
 * Warm peachy tint with coral accents
 */

/**
 * Sky Theme
 * Open sky blue with cloud accents
 */

/**
 * Cream Theme
 * Warm ivory with earthy accents
 */

/**
 * Nord Light Theme
 * Arctic frost with aurora accents
 */

/**
 * Sunset Theme
 * Purple and orange warmth (dark)
 */

/**
 * Ocean Theme
 * Deep sea blues and teals (dark)
 */

/**
 * Forest Theme
 * Earthy greens and browns (dark)
 */

/**
 * Rose Theme
 * Soft pinks and warm grays (dark)
 */

/**
 * Midnight Theme
 * Deep blues with electric accents (dark)
 */

/**
 * Tears in Rain Theme
 * Cyberpunk noir with neon accents (dark)
 * Inspired by Blade Runner: rainy LA nights, neon signs, and dystopian aesthetics
 */

/**
 * Template Theme
 * Adopts active template's preset colors
 * Variables are populated from presets.json by the theme provider
 */

/* Design system themes (with visual effects) */

/**
 * Vector Theme
 * 80s retro-futuristic sci-fi HUD
 * Classic arcade wireframe aesthetic with glowing borders, scanlines, grid overlay
 */

/* Vector HUD Effects */

.vector {
	/* Scanlines overlay on body */
	&::before {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9999;
		background: repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			hsl(var(--hud-glow-color) / var(--hud-scanline-strength)) 2px,
			hsl(var(--hud-glow-color) / var(--hud-scanline-strength)) 4px
		);
	}

	/* Micro-grid pattern */
	&::after {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9998;
		background-image:
			linear-gradient(hsl(var(--hud-glow-color) / var(--hud-grid-strength)) 1px, transparent 1px),
			linear-gradient(90deg, hsl(var(--hud-glow-color) / var(--hud-grid-strength)) 1px, transparent 1px);
		background-size: 24px 24px;
	}
}

/* Vector card/panel styling with corner cuts and glow */

.vector [data-slot="card"],
.vector .card,
.vector [role="dialog"] > div,
.vector .popover-content {
	background: hsl(var(--card) / var(--hud-panel-opacity));
	border: var(--hud-border-thickness) solid hsl(var(--border));
	clip-path: polygon(var(--hud-corner-cut) 0, 100% 0, 100% calc(100% - var(--hud-corner-cut)), calc(100% - var(--hud-corner-cut)) 100%, 0 100%, 0 var(--hud-corner-cut));
	box-shadow:
		0 0 8px hsl(var(--hud-glow-color) / 0.15),
		inset 0 0 12px hsl(var(--hud-glow-color) / 0.05);
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.vector [data-slot="card"]:hover,
.vector .card:hover {
	border-color: hsl(var(--hud-glow-color) / 0.8);
	box-shadow:
		0 0 16px hsl(var(--hud-glow-color) / 0.3),
		0 0 32px hsl(var(--hud-glow-color) / 0.1),
		inset 0 0 12px hsl(var(--hud-glow-color) / 0.08);
}

/* Vector button glow on hover */

.vector button:not(:disabled):hover {
	box-shadow: 0 0 12px hsl(var(--hud-glow-color) / 0.4);
}

/* Vector input focus - cyan ring glow */

.vector input:focus,
.vector textarea:focus,
.vector select:focus,
.vector [role="combobox"]:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow:
		0 0 0 2px hsl(var(--ring) / 0.2),
		0 0 12px hsl(var(--ring) / 0.3);
}

/* Vector sidebar/nav panel styling */

.vector aside,
.vector nav {
	border-color: hsl(var(--border));
}

/* Vector table styling */

.vector table {
	border: var(--hud-border-thickness) solid hsl(var(--border));
}

.vector th {
	background: hsl(var(--secondary) / 0.8);
	border-bottom: var(--hud-border-thickness) solid hsl(var(--hud-glow-color) / 0.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
}

.vector tr:hover td {
	background: hsl(var(--hud-glow-color) / 0.05);
}

/* Vector badge/tag styling */

.vector [data-slot="badge"],
.vector .badge {
	border: 1px solid hsl(var(--hud-glow-color) / 0.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.65rem;
}

/**
 * Doom Theme
 * id Software/metal inspired hellfire aesthetic
 * Charred darkness, hellfire reds, demonic energy
 */

/* Doom vignette and noise overlay */

.doom {
	/* Vignette effect */
	&::before {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9998;
		background: radial-gradient(ellipse at center, transparent 40%, hsl(0 0% 0% / var(--doom-vignette-strength)) 100%);
	}

	/* Noise/grain texture */
	&::after {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9997;
		opacity: var(--doom-noise-strength);
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	}
}

/* Doom card/panel styling with ember glow */

.doom [data-slot="card"],
.doom .card,
.doom [role="dialog"] > div,
.doom .popover-content {
	background: hsl(var(--card) / var(--doom-panel-opacity));
	border: 1px solid hsl(var(--border));
	box-shadow:
		0 0 20px hsl(var(--doom-glow-color) / 0.1),
		inset 0 1px 0 hsl(var(--doom-ember-color) / 0.1);
	transition:
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.doom [data-slot="card"]:hover,
.doom .card:hover {
	border-color: hsl(var(--doom-glow-color) / 0.6);
	box-shadow:
		0 0 30px hsl(var(--doom-glow-color) / 0.2),
		0 0 60px hsl(var(--doom-glow-color) / 0.1),
		inset 0 1px 0 hsl(var(--doom-ember-color) / 0.15);
}

/* Doom button hellfire glow */

.doom button:not(:disabled):hover {
	box-shadow:
		0 0 15px hsl(var(--doom-glow-color) / 0.4),
		0 0 30px hsl(var(--doom-ember-color) / 0.2);
}

/* Doom primary button special styling */

.doom button.bg-primary,
.doom .btn-primary {
	text-shadow: 0 0 10px hsl(var(--doom-glow-color) / 0.5);
}

/* Doom input focus - fire ring */

.doom input:focus,
.doom textarea:focus,
.doom select:focus,
.doom [role="combobox"]:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow:
		0 0 0 2px hsl(var(--ring) / 0.3),
		0 0 20px hsl(var(--doom-glow-color) / 0.3);
}

/* Doom table styling */

.doom table {
	border: 1px solid hsl(var(--border));
}

.doom th {
	background: hsl(var(--secondary) / 0.9);
	border-bottom: 2px solid hsl(var(--doom-glow-color) / 0.4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.7rem;
}

.doom tr:hover td {
	background: hsl(var(--doom-glow-color) / 0.05);
}

/* Doom headings - metal feel */

.doom h1,
.doom h2,
.doom h3 {
	text-shadow: 0 2px 4px hsl(0 0% 0% / 0.5);
}

/* Doom scrollbar styling */

.doom ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.doom ::-webkit-scrollbar-track {
	background: hsl(var(--muted));
}

.doom ::-webkit-scrollbar-thumb {
	background: hsl(var(--doom-glow-color) / 0.4);
	border-radius: 4px;
}

.doom ::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--doom-glow-color) / 0.6);
}

/**
 * Material Theme
 * Google's Material Design 3 - Elevation, rounded corners, color surfaces
 */

/* Material card surfaces with elevation */

.material [data-slot="card"],
.material .card {
	box-shadow: var(--material-shadow-2);
	border: none;
	border-radius: 12px;
	transition:
		box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.1s;
}

.material [data-slot="card"]:hover,
.material .card:hover {
	box-shadow: var(--material-shadow-3);
}

/* Material FAB-style primary buttons */

.material button.bg-primary {
	border-radius: 20px;
	box-shadow: var(--material-shadow-2);
	transition:
		box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		background 0.2s;
}

.material button.bg-primary:hover {
	box-shadow: var(--material-shadow-3);
}

.material button.bg-primary:active {
	box-shadow: var(--material-shadow-4);
}

/* Material secondary/outline buttons - pill shape */

.material button.border-input,
.material button.bg-secondary {
	border-radius: 20px;
}

/* Material ripple hint on all buttons */

.material button:not(:disabled) {
	position: relative;
	overflow: hidden;
}

.material button:not(:disabled)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.2s;
}

.material button:not(:disabled):hover::after {
	opacity: var(--material-hover-opacity);
}

.material button:not(:disabled):active::after {
	opacity: var(--material-pressed-opacity);
}

/* Material inputs - outlined style */

.material input,
.material textarea,
.material select {
	border-radius: 4px;
	border: 1px solid hsl(var(--border));
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.material input:focus,
.material textarea:focus,
.material select:focus {
	border-color: hsl(var(--primary));
	border-width: 2px;
	outline: none;
	box-shadow: none;
}

/* Material dialog - centered elevated surface */

.material [role="dialog"] > div {
	border-radius: 28px;
	box-shadow: var(--material-shadow-4);
	border: none;
}

/* Material chips/badges */

.material [data-slot="badge"],
.material .badge {
	border-radius: 8px;
	font-weight: 500;
}

/* Material dividers - subtle */

.material hr {
	border-color: hsl(var(--border) / 0.5);
}

/* Material navigation rail indicator */

.material nav a[data-active="true"],
.material nav button[data-active="true"] {
	background: hsl(var(--primary) / 0.12);
	border-radius: 16px;
}

/* Material table - no borders, subtle row dividers */

.material table {
	border: none;
}

.material th {
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.025em;
	color: hsl(var(--muted-foreground));
	border-bottom: 1px solid hsl(var(--border));
}

.material td {
	border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.material tr:hover td {
	background: hsl(var(--primary) / var(--material-hover-opacity));
}

/* Material tabs - underline indicator */

.material [role="tablist"] button[data-state="active"] {
	border-bottom: 2px solid hsl(var(--primary));
	border-radius: 0;
}

/**
 * Fluent Theme
 * Microsoft's Fluent Design - Acrylic, reveal, depth
 */

/* Fluent acrylic blur background for nav/sidebars */

.fluent aside,
.fluent [data-sidebar] {
	background: hsl(var(--background) / 0.7);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* Fluent card surfaces */

.fluent [data-slot="card"],
.fluent .card {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.6);
	border-radius: 4px;
	box-shadow: var(--fluent-shadow-4);
	transition:
		box-shadow 0.1s,
		border-color 0.1s;
}

.fluent [data-slot="card"]:hover,
.fluent .card:hover {
	border-color: hsl(var(--border));
	box-shadow: var(--fluent-shadow-8);
}

/* Fluent reveal highlight effect on interactive elements */

.fluent button:not(:disabled),
.fluent a,
.fluent [role="button"] {
	position: relative;
}

.fluent button:not(:disabled)::before,
.fluent [data-slot="card"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--fluent-reveal-color), transparent 40%);
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}

.fluent button:not(:disabled):hover::before,
.fluent [data-slot="card"]:hover::before {
	opacity: 1;
}

/* Fluent primary button - accent colored */

.fluent button.bg-primary {
	border-radius: 4px;
	border: none;
	transition:
		background 0.1s,
		box-shadow 0.1s;
}

.fluent button.bg-primary:hover {
	filter: brightness(1.1);
}

.fluent button.bg-primary:active {
	filter: brightness(0.95);
}

/* Fluent secondary buttons - subtle border */

.fluent button.border-input,
.fluent button.bg-secondary {
	border: 1px solid hsl(var(--border) / 0.8);
	border-radius: 4px;
	background: hsl(var(--background) / 0.5);
}

.fluent button.border-input:hover,
.fluent button.bg-secondary:hover {
	background: hsl(var(--secondary));
	border-color: hsl(var(--border));
}

/* Fluent inputs - bottom border accent style */

.fluent input,
.fluent textarea,
.fluent select {
	border-radius: 4px 4px 0 0;
	border: 1px solid hsl(var(--border));
	border-bottom: 2px solid hsl(var(--border));
	transition: border-color 0.15s;
}

.fluent input:focus,
.fluent textarea:focus,
.fluent select:focus {
	outline: none;
	border-bottom-color: hsl(var(--primary));
}

/* Fluent dialog - elevated flyout */

.fluent [role="dialog"] > div {
	border-radius: 8px;
	box-shadow: var(--fluent-shadow-64);
	border: 1px solid hsl(var(--border) / 0.5);
	background: hsl(var(--card) / 0.95);
	backdrop-filter: blur(20px);
}

/* Fluent table - compact with subtle headers */

.fluent table {
	border: none;
}

.fluent th {
	font-weight: 600;
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	background: transparent;
	border-bottom: 1px solid hsl(var(--border));
}

.fluent tr:hover td {
	background: hsl(var(--secondary) / 0.5);
}

/* Fluent navigation - pill selection */

.fluent nav a[data-active="true"],
.fluent nav button[data-active="true"] {
	background: hsl(var(--secondary));
	border-radius: 4px;
}

/* Fluent tooltip style popovers */

.fluent .popover-content {
	border-radius: 4px;
	box-shadow: var(--fluent-shadow-16);
	backdrop-filter: blur(10px);
}

/**
 * Ringo Glass Theme
 * Apple-inspired liquid glass effect - frosted translucency with inner glow
 */

/* Dark mode adjustments for Ringo Glass */

.dark.ringo-glass,
.ringo-glass.dark {
	--ringo-edge-highlight: rgba(255, 255, 255, 0.15);
	--ringo-edge-glow: rgba(255, 255, 255, 0.08);
	--ringo-inner-shadow: rgba(255, 255, 255, 0.05);
	--ringo-glass-bg: hsl(var(--card) / 0.4);
}

/* Apple-style desktop wallpaper background - Sequoia inspired */

.ringo-glass main {
	background:
    /* Soft noise texture for depth */
		url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
		/* Main gradient - warm sunrise to cool sky */ radial-gradient(ellipse 120% 80% at 80% 100%, hsl(35 90% 75% / 0.4) 0%, hsl(15 85% 70% / 0.3) 20%, transparent 50%),
		radial-gradient(ellipse 100% 100% at 20% 80%, hsl(320 70% 75% / 0.3) 0%, hsl(280 60% 70% / 0.2) 30%, transparent 60%),
		radial-gradient(ellipse 80% 60% at 70% 20%, hsl(200 80% 70% / 0.3) 0%, hsl(220 70% 65% / 0.2) 40%, transparent 70%),
		/* Base gradient */ linear-gradient(160deg, hsl(210 50% 95%) 0%, hsl(220 40% 92%) 30%, hsl(280 30% 90%) 60%, hsl(30 40% 92%) 100%);
	background-attachment: fixed;
}

/* Dark mode wallpaper - macOS Sequoia night */

.dark.ringo-glass main,
.ringo-glass.dark main {
	background:
    /* Soft noise texture */
		url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
		/* Deep space gradient with aurora hints */ radial-gradient(ellipse 100% 80% at 80% 100%, hsl(280 60% 25% / 0.5) 0%, hsl(300 50% 20% / 0.3) 30%, transparent 60%),
		radial-gradient(ellipse 80% 60% at 20% 90%, hsl(200 70% 30% / 0.4) 0%, hsl(220 60% 20% / 0.2) 40%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 60% 10%, hsl(260 50% 25% / 0.3) 0%, transparent 60%),
		/* Base dark gradient */ linear-gradient(160deg, hsl(230 30% 12%) 0%, hsl(250 25% 10%) 40%, hsl(280 20% 8%) 70%, hsl(220 30% 10%) 100%);
	background-attachment: fixed;
}

/* Cupertino vibrancy for nav/sidebars - Ringo Glass effect */

.ringo-glass aside,
.ringo-glass [data-sidebar] {
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px 1px var(--ringo-edge-glow),
		0 0 1px hsl(0 0% 0% / 0.1);
}

/* Cupertino card surfaces - Ringo Glass liquid effect */

.ringo-glass [data-slot="card"],
.ringo-glass .card,
.ringo-glass .bg-card {
	position: relative;
	background: var(--ringo-glass-bg);
	border: 0.5px solid var(--ringo-edge-highlight);
	border-radius: 16px;
	backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	box-shadow:
    /* Outer soft shadow */
		var(--cupertino-shadow-sm),
		/* Inner edge highlight - top left */ inset 1px 1px 0 var(--ringo-edge-highlight),
		/* Inner glow all around */ inset 0 0 4px 1px var(--ringo-edge-glow);
	transition: all 0.3s ease;
	overflow: hidden;
}

/* Inner shine layer */

.ringo-glass [data-slot="card"]::before,
.ringo-glass .card::before,
.ringo-glass .bg-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--ringo-inner-shadow) 0%, transparent 50%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

.ringo-glass [data-slot="card"]:hover,
.ringo-glass .card:hover,
.ringo-glass .bg-card:hover {
	background: var(--ringo-glass-bg-hover);
	box-shadow:
		var(--cupertino-shadow-md),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 6px 1px var(--ringo-edge-glow);
	transform: translateY(-2px);
}

/* Cupertino primary button - Ringo Glass pill */

.ringo-glass button.bg-primary {
	position: relative;
	border-radius: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 0 2px 1px rgba(255, 255, 255, 0.15),
		0 2px 8px hsl(var(--primary) / 0.3);
	transition: all 0.2s ease;
}

.ringo-glass button.bg-primary:hover {
	filter: brightness(1.08);
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 0 3px 1px rgba(255, 255, 255, 0.2),
		0 4px 16px hsl(var(--primary) / 0.4);
	transform: translateY(-1px);
}

.ringo-glass button.bg-primary:active {
	transform: scale(0.98) translateY(0);
	filter: brightness(0.95);
}

/* Cupertino secondary buttons - Ringo Glass ghost */

.ringo-glass button.border-input,
.ringo-glass button.bg-secondary,
.ringo-glass button.hover\:bg-accent {
	border-radius: 10px;
	font-weight: 500;
	background: hsl(var(--secondary) / 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
	transition: all 0.2s ease;
}

.ringo-glass button.border-input:hover,
.ringo-glass button.bg-secondary:hover,
.ringo-glass button.hover\:bg-accent:hover {
	background: hsl(var(--secondary) / 0.5);
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 4px var(--ringo-edge-glow);
}

/* Cupertino inputs - Ringo Glass fields */

.ringo-glass input,
.ringo-glass textarea,
.ringo-glass select {
	border-radius: 10px;
	border: 0.5px solid var(--ringo-edge-highlight);
	background: hsl(var(--background) / 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
	transition: all 0.2s ease;
}

.ringo-glass input:focus,
.ringo-glass textarea:focus,
.ringo-glass select:focus {
	outline: none;
	border-color: hsl(var(--primary) / 0.6);
	background: hsl(var(--background) / 0.7);
	box-shadow:
		0 0 0 3px hsl(var(--primary) / 0.15),
		inset 0 0 4px var(--ringo-edge-glow);
}

/* Cupertino dialog - Ringo Glass sheet */

.ringo-glass [role="dialog"] > div {
	border-radius: 20px;
	box-shadow:
		var(--cupertino-shadow-xl),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 4px var(--ringo-edge-glow);
	border: 0.5px solid var(--ringo-edge-highlight);
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(40px) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(40px) saturate(var(--ringo-saturation));
}

/* Cupertino segmented control - Ringo Glass tabs */

.ringo-glass [role="tablist"] {
	background: hsl(var(--secondary) / 0.3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 3px;
	box-shadow:
		inset 0 0 2px var(--ringo-edge-glow),
		inset 0 1px 0 var(--ringo-edge-highlight);
}

.ringo-glass [role="tablist"] button {
	border-radius: 9px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.ringo-glass [role="tablist"] button[data-state="active"] {
	background: hsl(var(--card) / 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		var(--cupertino-shadow-sm),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

/* Cupertino table - Ringo Glass container */

.ringo-glass table {
	border: none;
	overflow: hidden;
	border-radius: 14px;
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(var(--ringo-blur));
	-webkit-backdrop-filter: blur(var(--ringo-blur));
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

.ringo-glass th {
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
	background: hsl(var(--secondary) / 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ringo-glass td {
	border-bottom: 0.5px solid var(--ringo-edge-highlight);
}

.ringo-glass tr:hover td {
	background: hsl(var(--secondary) / 0.3);
}

/* Cupertino badges - Ringo Glass pills */

.ringo-glass [data-slot="badge"],
.ringo-glass .badge {
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.65rem;
	letter-spacing: 0.01em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
}

/* Cupertino navigation - Ringo Glass active state */

.ringo-glass nav a[data-active="true"],
.ringo-glass nav button[data-active="true"] {
	background: hsl(var(--secondary) / 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 10px;
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

/* Cupertino popover/dropdown - Ringo Glass floating */

.ringo-glass .popover-content {
	border-radius: 14px;
	box-shadow:
		var(--cupertino-shadow-lg),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 3px var(--ringo-edge-glow);
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(30px) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(30px) saturate(var(--ringo-saturation));
	border: 0.5px solid var(--ringo-edge-highlight);
}

/* Cupertino switch/toggle - Ringo Glass style */

.ringo-glass [role="switch"] {
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
}

/**
 * Akibae Theme
 * Dark Ringo Glass - liquid glass with deep space aurora colors
 */

/* Akibae deep space wallpaper - aurora borealis at night */

.akibae main {
	background:
    /* Soft noise texture */
		url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
		/* Aurora green/cyan at top */ radial-gradient(ellipse 80% 40% at 30% 0%, hsl(160 60% 25% / 0.4) 0%, hsl(180 50% 20% / 0.2) 40%, transparent 70%),
		/* Purple/magenta nebula */ radial-gradient(ellipse 100% 80% at 80% 100%, hsl(280 50% 20% / 0.5) 0%, hsl(300 40% 15% / 0.3) 30%, transparent 60%),
		/* Deep blue accent */ radial-gradient(ellipse 60% 50% at 20% 80%, hsl(220 60% 25% / 0.4) 0%, hsl(240 50% 18% / 0.2) 40%, transparent 70%),
		/* Base dark gradient */ linear-gradient(160deg, hsl(230 30% 8%) 0%, hsl(250 25% 7%) 40%, hsl(280 20% 6%) 70%, hsl(220 30% 8%) 100%);
	background-attachment: fixed;
}

/* Akibae vibrancy for nav/sidebars */

.akibae aside,
.akibae [data-sidebar] {
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px 1px var(--ringo-edge-glow),
		0 0 1px hsl(0 0% 0% / 0.3);
}

/* Akibae card surfaces - dark glass */

.akibae [data-slot="card"],
.akibae .card,
.akibae .bg-card {
	position: relative;
	background: var(--ringo-glass-bg);
	border: 0.5px solid var(--ringo-edge-highlight);
	border-radius: 16px;
	backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(var(--ringo-blur)) saturate(var(--ringo-saturation));
	box-shadow:
		var(--cupertino-shadow-sm),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 4px 1px var(--ringo-edge-glow);
	transition: all 0.3s ease;
	overflow: hidden;
}

/* Inner shine layer */

.akibae [data-slot="card"]::before,
.akibae .card::before,
.akibae .bg-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--ringo-inner-shadow) 0%, transparent 50%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

.akibae [data-slot="card"]:hover,
.akibae .card:hover,
.akibae .bg-card:hover {
	background: var(--ringo-glass-bg-hover);
	box-shadow:
		var(--cupertino-shadow-md),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 6px 1px var(--ringo-edge-glow);
	transform: translateY(-2px);
}

/* Akibae primary button */

.akibae button.bg-primary {
	position: relative;
	border-radius: 12px;
	font-weight: 600;
	letter-spacing: -0.01em;
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 0 2px 1px rgba(255, 255, 255, 0.1),
		0 2px 8px hsl(var(--primary) / 0.4);
	transition: all 0.2s ease;
}

.akibae button.bg-primary:hover {
	filter: brightness(1.1);
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 0 3px 1px rgba(255, 255, 255, 0.15),
		0 4px 16px hsl(var(--primary) / 0.5);
	transform: translateY(-1px);
}

.akibae button.bg-primary:active {
	transform: scale(0.98) translateY(0);
	filter: brightness(0.95);
}

/* Akibae secondary buttons */

.akibae button.border-input,
.akibae button.bg-secondary,
.akibae button.hover\:bg-accent {
	border-radius: 10px;
	font-weight: 500;
	background: hsl(var(--secondary) / 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
	transition: all 0.2s ease;
}

.akibae button.border-input:hover,
.akibae button.bg-secondary:hover,
.akibae button.hover\:bg-accent:hover {
	background: hsl(var(--secondary) / 0.6);
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 4px var(--ringo-edge-glow);
}

/* Akibae inputs */

.akibae input,
.akibae textarea,
.akibae select {
	border-radius: 10px;
	border: 0.5px solid var(--ringo-edge-highlight);
	background: hsl(var(--background) / 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
	transition: all 0.2s ease;
}

.akibae input:focus,
.akibae textarea:focus,
.akibae select:focus {
	outline: none;
	border-color: hsl(var(--primary) / 0.6);
	background: hsl(var(--background) / 0.8);
	box-shadow:
		0 0 0 3px hsl(var(--primary) / 0.2),
		inset 0 0 4px var(--ringo-edge-glow);
}

/* Akibae dialog */

.akibae [role="dialog"] > div {
	border-radius: 20px;
	box-shadow:
		var(--cupertino-shadow-xl),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 4px var(--ringo-edge-glow);
	border: 0.5px solid var(--ringo-edge-highlight);
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(40px) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(40px) saturate(var(--ringo-saturation));
}

/* Akibae segmented control */

.akibae [role="tablist"] {
	background: hsl(var(--secondary) / 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 3px;
	box-shadow:
		inset 0 0 2px var(--ringo-edge-glow),
		inset 0 1px 0 var(--ringo-edge-highlight);
}

.akibae [role="tablist"] button {
	border-radius: 9px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.akibae [role="tablist"] button[data-state="active"] {
	background: hsl(var(--card) / 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		var(--cupertino-shadow-sm),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

/* Akibae table */

.akibae table {
	border: none;
	overflow: hidden;
	border-radius: 14px;
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(var(--ringo-blur));
	-webkit-backdrop-filter: blur(var(--ringo-blur));
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

.akibae th {
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
	background: hsl(var(--secondary) / 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.akibae td {
	border-bottom: 0.5px solid var(--ringo-edge-highlight);
}

.akibae tr:hover td {
	background: hsl(var(--secondary) / 0.4);
}

/* Akibae badges */

.akibae [data-slot="badge"],
.akibae .badge {
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.65rem;
	letter-spacing: 0.01em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
}

/* Akibae navigation */

.akibae nav a[data-active="true"],
.akibae nav button[data-active="true"] {
	background: hsl(var(--secondary) / 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 10px;
	box-shadow:
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 2px var(--ringo-edge-glow);
}

/* Akibae popover/dropdown */

.akibae .popover-content {
	border-radius: 14px;
	box-shadow:
		var(--cupertino-shadow-lg),
		inset 1px 1px 0 var(--ringo-edge-highlight),
		inset 0 0 3px var(--ringo-edge-glow);
	background: var(--ringo-glass-bg);
	backdrop-filter: blur(30px) saturate(var(--ringo-saturation));
	-webkit-backdrop-filter: blur(30px) saturate(var(--ringo-saturation));
	border: 0.5px solid var(--ringo-edge-highlight);
}

/* Akibae switch/toggle */

.akibae [role="switch"] {
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: inset 0 0 2px var(--ringo-edge-glow);
}

/**
 * BlockNinja Theme
 * Tactical night-ops control panel - ruthless precision, armed red accents
 */

/* BlockNinja subtle vignette overlay */

.blockninja {
	&::before {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9997;
		background: radial-gradient(ellipse at center, transparent 50%, hsl(0 0% 0% / var(--bn-vignette-strength)) 100%);
	}

	/* Subtle noise texture */
	&::after {
		content: "";
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9996;
		opacity: var(--bn-noise-opacity);
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	}
}

/* BlockNinja card/panel styling - subtle gradient with carbon fiber texture */

.blockninja [data-slot="card"],
.blockninja .card,
.blockninja .bg-card,
.blockninja [role="dialog"] > div,
.blockninja .popover-content {
	position: relative;
	overflow: hidden;
	background:
    /* Carbon fiber pattern - very subtle diagonal weave */
		repeating-linear-gradient(45deg, transparent, transparent 2px, hsl(0 0% 0% / 0.03) 2px, hsl(0 0% 0% / 0.03) 4px),
		repeating-linear-gradient(-45deg, transparent, transparent 2px, hsl(0 0% 0% / 0.03) 2px, hsl(0 0% 0% / 0.03) 4px),
		/* Subtle gradient from top-left to bottom-right */ linear-gradient(135deg, hsl(0 0% 10% / var(--bn-panel-opacity)) 0%, hsl(0 0% 7% / var(--bn-panel-opacity)) 100%);
	border: 1px solid hsl(var(--border));
	transition:
		border-color var(--bn-transition-speed) ease,
		box-shadow var(--bn-transition-speed) ease;
}

/* Subtle red glow around cards - barely visible at rest, glows on hover */

.blockninja [data-slot="card"]::after,
.blockninja .card::after,
.blockninja .bg-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 20px hsl(var(--bn-red-subtle) / 0.02);
	pointer-events: none;
	z-index: 1;
	transition: box-shadow 0.2s ease;
}

.blockninja [data-slot="card"]:hover,
.blockninja .card:hover,
.blockninja .bg-card:hover {
	border-color: hsl(var(--bn-border-strong));
	background:
		repeating-linear-gradient(45deg, transparent, transparent 2px, hsl(0 0% 0% / 0.03) 2px, hsl(0 0% 0% / 0.03) 4px),
		repeating-linear-gradient(-45deg, transparent, transparent 2px, hsl(0 0% 0% / 0.03) 2px, hsl(0 0% 0% / 0.03) 4px),
		linear-gradient(135deg, hsl(0 0% 11% / var(--bn-panel-opacity)) 0%, hsl(0 0% 8% / var(--bn-panel-opacity)) 100%);
}

/* Intensify red glow on card hover */

.blockninja [data-slot="card"]:hover::after,
.blockninja .card:hover::after,
.blockninja .bg-card:hover::after {
	box-shadow: inset 0 0 40px hsl(var(--bn-red-subtle) / 0.15);
}

/* BlockNinja sidebar - tactical command rail */

.blockninja aside,
.blockninja [data-sidebar],
.blockninja [data-slot="sidebar"] {
	background:
    /* Subtle red ambient glow from left edge */
		radial-gradient(ellipse 80px 100% at 0% 50%, hsl(var(--bn-red-subtle) / 0.04) 0%, transparent 100%),
		/* Subtle vertical carbon fiber */ repeating-linear-gradient(90deg, transparent, transparent 1px, hsl(0 0% 0% / 0.04) 1px, hsl(0 0% 0% / 0.04) 2px),
		/* Gradient: darker at edges, slightly lighter center for depth */ linear-gradient(90deg, hsl(0 0% 4%) 0%, hsl(0 0% 7%) 50%, hsl(0 0% 5%) 100%);
	border-right: 1px solid hsl(var(--border));
	/* Red-tinted left edge + inner shadow */
	box-shadow:
		inset 2px 0 0 hsl(var(--bn-red-subtle) / 0.15),
		inset 8px 0 20px hsl(var(--bn-red-subtle) / 0.03),
		inset -20px 0 40px hsl(0 0% 0% / 0.3);
}

/* Red accent line at top of sidebar */

.blockninja aside::before,
.blockninja [data-sidebar]::before,
.blockninja [data-slot="sidebar"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, hsl(var(--bn-red-subtle) / 0.8) 0%, hsl(var(--bn-red-subtle) / 0.3) 100%);
	z-index: 10;
}

/* BlockNinja focus ring - the armed red accent */

.blockninja *:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px hsl(var(--background)),
		0 0 0 4px hsl(var(--ring) / 0.8);
}

/* BlockNinja input focus - red ring with subtle glow */

.blockninja input:focus,
.blockninja textarea:focus,
.blockninja select:focus,
.blockninja [role="combobox"]:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow:
		0 0 0 2px hsl(var(--background)),
		0 0 0 4px hsl(var(--ring) / 0.6),
		0 0 12px hsl(var(--bn-red-glow) / 0.15);
}

/* BlockNinja button styling */

.blockninja button:not(:disabled) {
	transition: all var(--bn-transition-speed) ease;
}

.blockninja button:not(:disabled):hover {
	transform: translateY(-1px);
}

.blockninja button:not(:disabled):active {
	transform: translateY(0) scale(0.98);
}

/* BlockNinja primary button - armed red */

.blockninja button.bg-primary,
.blockninja .btn-primary {
	box-shadow: 0 0 0 0 hsl(var(--bn-red-glow) / 0);
	transition:
		all var(--bn-transition-speed) ease,
		box-shadow var(--bn-transition-speed) ease;
}

.blockninja button.bg-primary:hover,
.blockninja .btn-primary:hover {
	box-shadow: 0 0 16px hsl(var(--bn-red-glow) / 0.25);
}

/* BlockNinja destructive button - dangerous but tasteful */

.blockninja button.bg-destructive,
.blockninja .bg-destructive[role="button"] {
	/* Dark gradient background */
	background: linear-gradient(180deg, hsl(0 20% 18%) 0%, hsl(0 25% 12%) 100%) !important;

	/* Red border */
	border: 1px solid hsl(0 70% 45% / 0.6) !important;

	/* Subtle outer glow + depth */
	box-shadow:
		0 0 8px hsl(0 100% 50% / 0.15),
		inset 0 1px 0 hsl(0 30% 25% / 0.3);

	/* Red text with subtle glow */
	color: hsl(0 90% 70%) !important;
	text-shadow: 0 0 6px hsl(0 100% 50% / 0.4);

	font-weight: 500;
}

.blockninja button.bg-destructive:hover,
.blockninja .bg-destructive[role="button"]:hover {
	/* Slightly brighter on hover */
	background: linear-gradient(180deg, hsl(0 30% 22%) 0%, hsl(0 35% 15%) 100%) !important;

	border-color: hsl(0 80% 50% / 0.8) !important;

	box-shadow:
		0 0 12px hsl(0 100% 50% / 0.25),
		0 0 20px hsl(0 100% 50% / 0.1),
		inset 0 1px 0 hsl(0 30% 30% / 0.3);

	color: hsl(0 100% 78%) !important;
	text-shadow: 0 0 8px hsl(0 100% 50% / 0.5);
}

/* BlockNinja table styling - tactical data display */

.blockninja table {
	border: 1px solid hsl(var(--border));
}

.blockninja th {
	background: hsl(var(--secondary));
	border-bottom: 1px solid hsl(var(--bn-border-strong));
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-size: 0.7rem;
	color: hsl(var(--muted-foreground));
}

.blockninja tr {
	transition: background var(--bn-transition-speed) ease;
}

.blockninja tr:hover td {
	background: hsl(var(--secondary) / 0.5);
}

/* BlockNinja selected row - red left indicator */

.blockninja tr[data-selected="true"] td,
.blockninja tr.selected td {
	background: hsl(var(--accent));
	box-shadow: inset 2px 0 0 hsl(var(--primary));
}

/* BlockNinja navigation - active indicator */

.blockninja nav a[data-active="true"],
.blockninja nav button[data-active="true"],
.blockninja [data-sidebar] a[data-active="true"],
.blockninja [data-sidebar] button[data-active="true"] {
	background: hsl(var(--accent));
	box-shadow: inset 2px 0 0 hsl(var(--primary));
}

.blockninja nav a:hover,
.blockninja nav button:hover,
.blockninja [data-sidebar] a:hover,
.blockninja [data-sidebar] button:hover {
	background: hsl(var(--secondary));
}

/* BlockNinja tabs - red underline for active */

.blockninja [role="tablist"] button[data-state="active"] {
	border-bottom: 2px solid hsl(var(--primary));
	border-radius: 0;
	background: transparent;
}

.blockninja [role="tablist"] button:hover:not([data-state="active"]) {
	background: hsl(var(--secondary) / 0.5);
}

/* BlockNinja badges - tactical styling */

.blockninja [data-slot="badge"],
.blockninja .badge {
	border: 1px solid hsl(var(--border));
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.625rem;
	font-weight: 500;
}

/* BlockNinja headings - crisp and commanding */

.blockninja h1,
.blockninja h2,
.blockninja h3 {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* BlockNinja scrollbar - minimal tactical */

.blockninja ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.blockninja ::-webkit-scrollbar-track {
	background: hsl(var(--muted));
}

.blockninja ::-webkit-scrollbar-thumb {
	background: hsl(var(--border));
	border-radius: 3px;
}

.blockninja ::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--bn-border-strong));
}

/* BlockNinja dialog/modal - tactical overlay */

.blockninja [role="dialog"] > div {
	border-radius: 8px;
	box-shadow:
		0 0 0 1px hsl(var(--border)),
		0 8px 24px hsl(0 0% 0% / 0.4),
		0 0 32px hsl(var(--bn-red-glow) / 0.05);
}

/* BlockNinja context/dropdown menus - consistent focus ring on entire menu */

.blockninja [role="menu"] {
	box-shadow:
		0 0 0 1px hsl(var(--border)),
		0 4px 16px hsl(0 0% 0% / 0.3);
	transition: box-shadow 0.15s ease;
}

/* Menu focus ring when any item is focused/highlighted */

.blockninja [role="menu"]:has([data-highlighted]) {
	box-shadow:
		0 0 0 1px hsl(var(--ring) / 0.5),
		0 0 0 3px hsl(var(--ring) / 0.15),
		0 4px 16px hsl(0 0% 0% / 0.3);
}

/* Remove individual item focus outlines since menu has focus ring */

.blockninja [role="menu"] [role="menuitem"]:focus {
	outline: none;
}

/* BlockNinja form labels - uppercase tactical */

.blockninja label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--muted-foreground));
}

/* BlockNinja alerts/toasts - red left border for errors */

.blockninja [role="alert"][data-type="error"],
.blockninja .toast-error {
	border-left: 3px solid hsl(var(--destructive));
}

.blockninja [role="alert"][data-type="success"],
.blockninja .toast-success {
	border-left: 3px solid hsl(142 40% 35%);
}

.blockninja [role="alert"][data-type="warning"],
.blockninja .toast-warning {
	border-left: 3px solid hsl(38 70% 45%);
}

/* BlockNinja progress bar - red fill */

.blockninja progress,
.blockninja [role="progressbar"] {
	background: hsl(var(--secondary));
}

.blockninja progress::-webkit-progress-value,
.blockninja [role="progressbar"] > div {
	background: hsl(var(--primary));
}

/* BlockNinja checkbox/radio - red when checked */

.blockninja input[type="checkbox"]:checked,
.blockninja input[type="radio"]:checked {
	accent-color: hsl(var(--primary));
}

/* BlockNinja selection highlight */

.blockninja ::-moz-selection {
	background: hsl(var(--primary) / 0.3);
	color: hsl(var(--foreground));
}

.blockninja ::selection {
	background: hsl(var(--primary) / 0.3);
	color: hsl(var(--foreground));
}

/* BlockNinja dividers with red accent option */

.blockninja hr.accent,
.blockninja .divider-accent {
	border-color: transparent;
	border-top: 1px solid hsl(var(--border));
	position: relative;
}

.blockninja hr.accent::before,
.blockninja .divider-accent::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 48px;
	height: 1px;
	background: hsl(var(--primary));
}

/* BlockNinja code blocks */

.blockninja pre,
.blockninja code {
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	font-family: var(--font-mono, ui-monospace, monospace);
}

/* BlockNinja empty states */

.blockninja .empty-state {
	color: hsl(var(--muted-foreground));
}

.blockninja .empty-state svg {
	opacity: 0.5;
}

/* Reduced motion support for BlockNinja */

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

/* Tailwind directives */

*, ::before, ::after {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
		/* Light Theme - BlockNinja Brand Colors */
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;

		/* Primary: Deep Indigo (ninja precision, tech power) */
		--primary: 239 84% 67%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Soft slate for subtle UI elements */
		--secondary: 240 5% 96%;
		--secondary-foreground: 240 6% 10%;

		/* Muted: Neutral backgrounds */
		--muted: 240 5% 96%;
		--muted-foreground: 240 4% 46%;

		/* Accent: Vibrant Cyan (energy, creativity, building blocks) */
		--accent: 189 94% 43%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Red for errors */
		--destructive: 0 84% 60%;
		--destructive-foreground: 0 0% 98%;

		/* Success: Green for success states */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Warning: Amber for warnings */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Info: Blue for informational states */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders and inputs */
		--border: 240 6% 90%;
		--input: 240 6% 90%;
		--ring: 239 84% 67%;

		--radius: 0.5rem;

		/* Chart colors */
		--chart-1: 239 84% 67%;
		--chart-2: 189 94% 43%;
		--chart-3: 270 70% 55%;
		--chart-4: 145 75% 38%;
		--chart-5: 15 80% 55%;
	}

.dark {
		/* Dark Theme - BlockNinja Night Mode (high contrast) */
		--background: 240 10% 3.9%;
		--foreground: 0 0% 98%;
		--card: 240 10% 6%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 6%;
		--popover-foreground: 0 0% 98%;

		/* Primary: Bright Indigo for dark mode */
		--primary: 239 84% 67%;
		--primary-foreground: 240 10% 10%;

		/* Secondary: Dark slate */
		--secondary: 240 4% 16%;
		--secondary-foreground: 0 0% 98%;

		/* Muted: Darker backgrounds */
		--muted: 240 4% 16%;
		--muted-foreground: 240 5% 65%;

		/* Accent: Bright Cyan for dark mode */
		--accent: 189 94% 43%;
		--accent-foreground: 240 10% 10%;

		/* Destructive: Softer red for dark mode */
		--destructive: 0 63% 31%;
		--destructive-foreground: 0 0% 98%;

		/* Success: Softer green for dark mode */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Warning: Softer amber for dark mode */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Info: Softer blue for dark mode */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders and inputs - subtle in dark mode */
		--border: 240 4% 16%;
		--input: 240 4% 16%;
		--ring: 239 84% 67%;

		/* Chart colors for dark mode */
		--chart-1: 239 84% 67%;
		--chart-2: 189 94% 43%;
		--chart-3: 270 70% 55%;
		--chart-4: 145 75% 38%;
		--chart-5: 15 80% 55%;
	}

.lavender {
		--background: 270 35% 94%;
		--foreground: 270 30% 12%;
		--card: 270 40% 97%;
		--card-foreground: 270 30% 12%;
		--popover: 270 40% 97%;
		--popover-foreground: 270 30% 12%;

		/* Primary: Rich violet */
		--primary: 270 70% 55%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Soft lavender */
		--secondary: 270 25% 92%;
		--secondary-foreground: 270 25% 20%;

		/* Muted: Light purple-gray */
		--muted: 270 20% 94%;
		--muted-foreground: 270 15% 45%;

		/* Accent: Orchid pink */
		--accent: 300 60% 55%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Warm red */
		--destructive: 0 75% 55%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - subtle purple tint */
		--border: 270 20% 88%;
		--input: 270 20% 90%;
		--ring: 270 70% 55%;
		--radius: 0.5rem;
		--chart-1: 270 70% 55%;
		--chart-2: 320 60% 60%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 350 70% 60%;
	}

.mint {
		--background: 155 45% 90%;
		--foreground: 160 40% 8%;
		--card: 155 50% 94%;
		--card-foreground: 160 40% 8%;
		--popover: 155 50% 94%;
		--popover-foreground: 160 40% 8%;

		/* Primary: Vibrant teal */
		--primary: 168 80% 38%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Fresh mint */
		--secondary: 155 35% 85%;
		--secondary-foreground: 160 35% 15%;

		/* Muted: Soft green */
		--muted: 155 30% 88%;
		--muted-foreground: 160 25% 38%;

		/* Accent: Emerald pop */
		--accent: 145 75% 38%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Warm coral */
		--destructive: 8 75% 50%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - minty */
		--border: 155 30% 78%;
		--input: 155 35% 82%;
		--ring: 168 80% 38%;
		--radius: 0.5rem;
		--chart-1: 168 80% 38%;
		--chart-2: 190 70% 42%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 0 72% 58%;
	}

.peach {
		--background: 25 45% 93%;
		--foreground: 25 35% 10%;
		--card: 25 50% 96%;
		--card-foreground: 25 35% 10%;
		--popover: 25 50% 96%;
		--popover-foreground: 25 35% 10%;

		/* Primary: Coral orange */
		--primary: 15 80% 55%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Soft peach */
		--secondary: 25 30% 90%;
		--secondary-foreground: 25 30% 18%;

		/* Muted: Light warm gray */
		--muted: 25 20% 92%;
		--muted-foreground: 25 15% 42%;

		/* Accent: Terracotta */
		--accent: 8 65% 50%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Deep red */
		--destructive: 355 70% 50%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - subtle warm tint */
		--border: 25 20% 85%;
		--input: 25 25% 88%;
		--ring: 15 80% 55%;
		--radius: 0.5rem;
		--chart-1: 15 80% 55%;
		--chart-2: 35 85% 58%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 350 72% 62%;
	}

.sky {
		--background: 200 55% 92%;
		--foreground: 210 45% 8%;
		--card: 200 50% 96%;
		--card-foreground: 210 45% 8%;
		--popover: 200 50% 96%;
		--popover-foreground: 210 45% 8%;

		/* Primary: Vivid sky blue */
		--primary: 200 95% 48%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Cloud white-blue */
		--secondary: 200 40% 88%;
		--secondary-foreground: 210 40% 15%;

		/* Muted: Hazy blue */
		--muted: 200 35% 90%;
		--muted-foreground: 210 25% 38%;

		/* Accent: Electric cerulean */
		--accent: 195 90% 42%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Sunset orange-red */
		--destructive: 10 80% 52%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - sky tinted */
		--border: 200 35% 78%;
		--input: 200 40% 84%;
		--ring: 200 95% 48%;
		--radius: 0.5rem;
		--chart-1: 200 95% 48%;
		--chart-2: 185 75% 45%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 0 72% 58%;
	}

.cream {
		--background: 40 35% 93%;
		--foreground: 30 30% 10%;
		--card: 40 40% 96%;
		--card-foreground: 30 30% 10%;
		--popover: 40 40% 96%;
		--popover-foreground: 30 30% 10%;

		/* Primary: Warm brown */
		--primary: 25 60% 45%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Light cream */
		--secondary: 40 25% 90%;
		--secondary-foreground: 30 25% 18%;

		/* Muted: Ivory */
		--muted: 40 20% 93%;
		--muted-foreground: 30 15% 45%;

		/* Accent: Gold */
		--accent: 45 80% 45%;
		--accent-foreground: 30 25% 10%;

		/* Destructive: Burnt sienna */
		--destructive: 10 65% 50%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - warm gray */
		--border: 40 18% 85%;
		--input: 40 20% 88%;
		--ring: 25 60% 45%;
		--radius: 0.5rem;
		--chart-1: 25 60% 45%;
		--chart-2: 45 80% 45%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 10 65% 50%;
	}

.nord-light {
		--background: 218 30% 90%;
		--foreground: 220 25% 10%;
		--card: 218 35% 95%;
		--card-foreground: 220 25% 10%;
		--popover: 218 35% 95%;
		--popover-foreground: 220 25% 10%;

		/* Primary: Frost blue */
		--primary: 193 60% 45%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Snow drift */
		--secondary: 218 25% 85%;
		--secondary-foreground: 220 25% 18%;

		/* Muted: Arctic haze */
		--muted: 218 22% 88%;
		--muted-foreground: 220 20% 42%;

		/* Accent: Aurora green */
		--accent: 95 50% 45%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Aurora red */
		--destructive: 354 55% 52%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - icy */
		--border: 218 25% 78%;
		--input: 218 28% 82%;
		--ring: 193 60% 45%;
		--radius: 0.5rem;
		--chart-1: 193 60% 45%;
		--chart-2: 213 32% 52%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 354 42% 56%;
	}

.sunset {
		--background: 270 20% 14%;
		--foreground: 30 20% 90%;
		--card: 270 20% 17%;
		--card-foreground: 30 20% 90%;
		--popover: 270 20% 17%;
		--popover-foreground: 30 20% 90%;

		/* Primary: Warm purple */
		--primary: 270 60% 65%;
		--primary-foreground: 270 20% 10%;

		/* Secondary: Muted purple */
		--secondary: 270 15% 22%;
		--secondary-foreground: 30 20% 90%;

		/* Muted: Deep purple */
		--muted: 270 15% 20%;
		--muted-foreground: 270 10% 55%;

		/* Accent: Warm orange */
		--accent: 25 80% 55%;
		--accent-foreground: 270 20% 10%;

		/* Destructive: Soft coral */
		--destructive: 0 55% 50%;
		--destructive-foreground: 30 20% 95%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - subtle purple tint */
		--border: 270 15% 25%;
		--input: 270 15% 22%;
		--ring: 270 60% 65%;
		--radius: 0.5rem;
		--chart-1: 270 60% 65%;
		--chart-2: 25 90% 55%;
		--chart-3: 330 75% 60%;
		--chart-4: 142 70% 45%;
		--chart-5: 0 65% 52%;
	}

.ocean {
		--background: 200 25% 12%;
		--foreground: 190 15% 88%;
		--card: 200 25% 15%;
		--card-foreground: 190 15% 88%;
		--popover: 200 25% 15%;
		--popover-foreground: 190 15% 88%;

		/* Primary: Ocean blue */
		--primary: 195 70% 50%;
		--primary-foreground: 200 25% 10%;

		/* Secondary: Deep sea */
		--secondary: 200 20% 20%;
		--secondary-foreground: 190 15% 88%;

		/* Muted: Dark water */
		--muted: 200 20% 18%;
		--muted-foreground: 195 15% 55%;

		/* Accent: Seafoam */
		--accent: 165 50% 45%;
		--accent-foreground: 200 25% 10%;

		/* Destructive: Coral red */
		--destructive: 5 50% 48%;
		--destructive-foreground: 190 15% 95%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - ocean depth */
		--border: 200 20% 22%;
		--input: 200 20% 20%;
		--ring: 195 70% 50%;
		--radius: 0.5rem;
		--chart-1: 195 70% 50%;
		--chart-2: 175 65% 45%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 10 55% 50%;
	}

.forest {
		--background: 150 15% 12%;
		--foreground: 80 10% 88%;
		--card: 150 15% 15%;
		--card-foreground: 80 10% 88%;
		--popover: 150 15% 15%;
		--popover-foreground: 80 10% 88%;

		/* Primary: Forest green */
		--primary: 145 55% 45%;
		--primary-foreground: 150 15% 10%;

		/* Secondary: Dark bark */
		--secondary: 150 10% 20%;
		--secondary-foreground: 80 10% 88%;

		/* Muted: Deep forest */
		--muted: 150 10% 18%;
		--muted-foreground: 140 10% 52%;

		/* Accent: Amber/gold */
		--accent: 40 60% 50%;
		--accent-foreground: 150 15% 10%;

		/* Destructive: Autumn red */
		--destructive: 10 50% 45%;
		--destructive-foreground: 80 10% 95%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - mossy */
		--border: 150 10% 22%;
		--input: 150 10% 20%;
		--ring: 145 55% 45%;
		--radius: 0.5rem;
		--chart-1: 145 55% 45%;
		--chart-2: 40 60% 50%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 10 50% 45%;
	}

.rose {
		--background: 340 12% 14%;
		--foreground: 340 8% 88%;
		--card: 340 12% 17%;
		--card-foreground: 340 8% 88%;
		--popover: 340 12% 17%;
		--popover-foreground: 340 8% 88%;

		/* Primary: Dusty rose */
		--primary: 340 50% 60%;
		--primary-foreground: 340 12% 10%;

		/* Secondary: Mauve */
		--secondary: 340 10% 22%;
		--secondary-foreground: 340 8% 88%;

		/* Muted: Deep rose */
		--muted: 340 10% 20%;
		--muted-foreground: 340 8% 55%;

		/* Accent: Warm peach */
		--accent: 15 55% 55%;
		--accent-foreground: 340 12% 10%;

		/* Destructive: Soft red */
		--destructive: 355 50% 48%;
		--destructive-foreground: 340 8% 95%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - rosy tint */
		--border: 340 10% 24%;
		--input: 340 10% 22%;
		--ring: 340 50% 60%;
		--radius: 0.5rem;
		--chart-1: 340 50% 60%;
		--chart-2: 25 80% 55%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 0 65% 52%;
	}

.midnight {
		--background: 230 25% 11%;
		--foreground: 220 15% 87%;
		--card: 230 25% 14%;
		--card-foreground: 220 15% 87%;
		--popover: 230 25% 14%;
		--popover-foreground: 220 15% 87%;

		/* Primary: Electric blue */
		--primary: 215 80% 58%;
		--primary-foreground: 230 25% 10%;

		/* Secondary: Deep navy */
		--secondary: 230 20% 19%;
		--secondary-foreground: 220 15% 87%;

		/* Muted: Night sky */
		--muted: 230 20% 17%;
		--muted-foreground: 220 12% 52%;

		/* Accent: Violet spark */
		--accent: 260 60% 60%;
		--accent-foreground: 230 25% 10%;

		/* Destructive: Soft crimson */
		--destructive: 350 50% 48%;
		--destructive-foreground: 220 15% 95%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - deep blue */
		--border: 230 20% 21%;
		--input: 230 20% 19%;
		--ring: 215 80% 58%;
		--radius: 0.5rem;
		--chart-1: 215 80% 58%;
		--chart-2: 280 70% 60%;
		--chart-3: 38 90% 55%;
		--chart-4: 142 70% 45%;
		--chart-5: 0 65% 52%;
	}

.tears {
		--background: 230 35% 8%;
		--foreground: 200 15% 90%;
		--card: 230 35% 11%;
		--card-foreground: 200 15% 90%;
		--popover: 230 40% 12%;
		--popover-foreground: 200 15% 90%;

		/* Primary: Hot neon pink/magenta */
		--primary: 330 100% 64%;
		--primary-foreground: 230 35% 8%;

		/* Secondary: Dark steel blue */
		--secondary: 230 30% 16%;
		--secondary-foreground: 200 15% 90%;

		/* Muted: Deep noir blue */
		--muted: 230 30% 14%;
		--muted-foreground: 200 12% 55%;

		/* Accent: Neon cyan */
		--accent: 185 100% 50%;
		--accent-foreground: 230 35% 8%;

		/* Destructive: Warning orange/amber */
		--destructive: 25 95% 53%;
		--destructive-foreground: 230 35% 8%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - subtle neon glow hint */
		--border: 230 35% 20%;
		--input: 230 30% 16%;
		--ring: 330 100% 64%;
		--radius: 0.5rem;
		--chart-1: 330 100% 64%;
		--chart-2: 185 100% 45%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 38 90% 55%;
	}

.\!template {
		--background: var(--template-background, 0 0% 100%) !important;
		--foreground: var(--template-foreground, 240 10% 3.9%) !important;
		--card: var(--template-card, 0 0% 100%) !important;
		--card-foreground: var(--template-card-foreground, 240 10% 3.9%) !important;
		--popover: var(--template-popover, 0 0% 100%) !important;
		--popover-foreground: var(--template-popover-foreground, 240 10% 3.9%) !important;
		--primary: var(--template-primary, 239 84% 67%) !important;
		--primary-foreground: var(--template-primary-foreground, 0 0% 100%) !important;
		--secondary: var(--template-secondary, 240 5% 96%) !important;
		--secondary-foreground: var(--template-secondary-foreground, 240 6% 10%) !important;
		--muted: var(--template-muted, 240 5% 96%) !important;
		--muted-foreground: var(--template-muted-foreground, 240 4% 46%) !important;
		--accent: var(--template-accent, 189 94% 43%) !important;
		--accent-foreground: var(--template-accent-foreground, 0 0% 100%) !important;
		--destructive: var(--template-destructive, 0 84% 60%) !important;
		--destructive-foreground: var(--template-destructive-foreground, 0 0% 98%) !important;

		/* Warning */
		--warning: 38 90% 55% !important;
		--warning-foreground: 0 0% 100% !important;

		/* Success */
		--success: 142 70% 45% !important;
		--success-foreground: 0 0% 100% !important;

		/* Info */
		--info: 217 85% 65% !important;
		--info-foreground: 0 0% 100% !important;

		--border: var(--template-border, 240 6% 90%) !important;
		--input: var(--template-input, 240 6% 90%) !important;
		--ring: var(--template-ring, 239 84% 67%) !important;
		--radius: var(--template-radius, 0.5rem) !important;
		--chart-1: var(--template-chart-1, 239 84% 67%) !important;
		--chart-2: var(--template-chart-2, 189 94% 43%) !important;
		--chart-3: var(--template-chart-3, 270 70% 55%) !important;
		--chart-4: var(--template-chart-4, 145 75% 38%) !important;
		--chart-5: var(--template-chart-5, 15 80% 55%) !important;
	}

.template {
		--background: var(--template-background, 0 0% 100%);
		--foreground: var(--template-foreground, 240 10% 3.9%);
		--card: var(--template-card, 0 0% 100%);
		--card-foreground: var(--template-card-foreground, 240 10% 3.9%);
		--popover: var(--template-popover, 0 0% 100%);
		--popover-foreground: var(--template-popover-foreground, 240 10% 3.9%);
		--primary: var(--template-primary, 239 84% 67%);
		--primary-foreground: var(--template-primary-foreground, 0 0% 100%);
		--secondary: var(--template-secondary, 240 5% 96%);
		--secondary-foreground: var(--template-secondary-foreground, 240 6% 10%);
		--muted: var(--template-muted, 240 5% 96%);
		--muted-foreground: var(--template-muted-foreground, 240 4% 46%);
		--accent: var(--template-accent, 189 94% 43%);
		--accent-foreground: var(--template-accent-foreground, 0 0% 100%);
		--destructive: var(--template-destructive, 0 84% 60%);
		--destructive-foreground: var(--template-destructive-foreground, 0 0% 98%);

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		--border: var(--template-border, 240 6% 90%);
		--input: var(--template-input, 240 6% 90%);
		--ring: var(--template-ring, 239 84% 67%);
		--radius: var(--template-radius, 0.5rem);
		--chart-1: var(--template-chart-1, 239 84% 67%);
		--chart-2: var(--template-chart-2, 189 94% 43%);
		--chart-3: var(--template-chart-3, 270 70% 55%);
		--chart-4: var(--template-chart-4, 145 75% 38%);
		--chart-5: var(--template-chart-5, 15 80% 55%);
	}

.vector {
		--background: 220 40% 4%;
		--foreground: 185 100% 85%;
		--card: 220 40% 6%;
		--card-foreground: 185 100% 85%;
		--popover: 220 45% 8%;
		--popover-foreground: 185 100% 85%;

		/* Primary: Cyan (sci-fi terminal) */
		--primary: 185 100% 50%;
		--primary-foreground: 220 40% 4%;

		/* Secondary: Dark steel with cyan hint */
		--secondary: 220 35% 12%;
		--secondary-foreground: 185 100% 85%;

		/* Muted: Deep space */
		--muted: 220 35% 10%;
		--muted-foreground: 185 40% 50%;

		/* Accent: Magenta (warning/highlight) */
		--accent: 300 100% 60%;
		--accent-foreground: 220 40% 4%;

		/* Destructive: Hot magenta-red */
		--destructive: 330 100% 55%;
		--destructive-foreground: 220 40% 4%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - cyan glow */
		--border: 185 80% 35%;
		--input: 220 35% 12%;
		--ring: 185 100% 50%;
		--radius: 0.5rem;
		--chart-1: 185 100% 50%;
		--chart-2: 300 100% 60%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 330 100% 55%;

		/* HUD-specific variables */
		--hud-glow-color: 185 100% 50%;
		--hud-corner-cut: 6px;
		--hud-border-thickness: 1px;
		--hud-panel-opacity: 0.72;
		--hud-scanline-strength: 0.06;
		--hud-grid-strength: 0.04;
	}

.doom {
		--background: 0 30% 5%;
		--foreground: 30 20% 85%;
		--card: 0 25% 8%;
		--card-foreground: 30 20% 85%;
		--popover: 0 30% 10%;
		--popover-foreground: 30 20% 85%;

		/* Primary: Hellfire red */
		--primary: 0 100% 50%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Charred steel */
		--secondary: 0 15% 15%;
		--secondary-foreground: 30 20% 85%;

		/* Muted: Ash gray */
		--muted: 0 10% 12%;
		--muted-foreground: 30 10% 50%;

		/* Accent: Demonic orange */
		--accent: 25 100% 50%;
		--accent-foreground: 0 30% 5%;

		/* Destructive: Blood red */
		--destructive: 350 100% 45%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - ember glow */
		--border: 0 60% 25%;
		--input: 0 15% 15%;
		--ring: 0 100% 50%;
		--radius: 0.5rem;
		--chart-1: 0 100% 50%;
		--chart-2: 25 100% 50%;
		--chart-3: 45 100% 50%;
		--chart-4: 142 70% 45%;
		--chart-5: 217 85% 65%;

		/* Doom-specific variables */
		--doom-glow-color: 0 100% 50%;
		--doom-ember-color: 25 100% 50%;
		--doom-panel-opacity: 0.85;
		--doom-vignette-strength: 0.4;
		--doom-noise-strength: 0.03;
	}

.material {
		--background: 0 0% 95%;
		--foreground: 0 0% 10%;
		--card: 0 0% 99%;
		--card-foreground: 0 0% 10%;
		--popover: 0 0% 99%;
		--popover-foreground: 0 0% 10%;

		/* Primary: Google Blue (#1A73E8) */
		--primary: 217 89% 51%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Light blue-gray */
		--secondary: 220 15% 94%;
		--secondary-foreground: 220 10% 20%;

		/* Muted: Soft gray */
		--muted: 220 10% 96%;
		--muted-foreground: 220 8% 46%;

		/* Accent: Google Green */
		--accent: 151 83% 40%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Google Red */
		--destructive: 4 90% 58%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - material gray */
		--border: 220 10% 88%;
		--input: 220 12% 91%;
		--ring: 217 89% 51%;
		--chart-1: 217 89% 51%;
		--chart-2: 262 52% 47%;
		--chart-3: 160 84% 39%;
		--chart-4: 142 76% 36%;
		--chart-5: 0 72% 51%;

		/* Material uses 4px default radius */
		--radius: 0.25rem;

		/* Material elevation shadows - dp2, dp4, dp8, dp16 */
		--material-shadow-1: 0 1px 2px hsl(0 0% 0% / 0.1), 0 1px 3px hsl(0 0% 0% / 0.1);
		--material-shadow-2: 0 1px 3px hsl(0 0% 0% / 0.12), 0 2px 6px hsl(0 0% 0% / 0.12);
		--material-shadow-3: 0 2px 4px hsl(0 0% 0% / 0.14), 0 4px 12px hsl(0 0% 0% / 0.14);
		--material-shadow-4: 0 4px 8px hsl(0 0% 0% / 0.16), 0 8px 24px hsl(0 0% 0% / 0.16);

		/* Material state layer for interactions */
		--material-hover-opacity: 0.08;
		--material-pressed-opacity: 0.12;
		--material-focus-opacity: 0.12;
	}

.fluent {
		--background: 210 15% 95%;
		--foreground: 210 30% 8%;
		--card: 0 0% 99%;
		--card-foreground: 210 30% 8%;
		--popover: 0 0% 99%;
		--popover-foreground: 210 30% 8%;

		/* Primary: Microsoft Blue (#0078D4) */
		--primary: 206 100% 42%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Light gray */
		--secondary: 210 15% 93%;
		--secondary-foreground: 210 25% 15%;

		/* Muted: Soft gray */
		--muted: 210 12% 95%;
		--muted-foreground: 210 10% 45%;

		/* Accent: Teal accent */
		--accent: 175 70% 40%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: Red */
		--destructive: 0 80% 50%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - clean gray */
		--border: 210 15% 88%;
		--input: 210 15% 90%;
		--ring: 206 100% 42%;
		--chart-1: 206 100% 42%;
		--chart-2: 175 70% 40%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 0 80% 50%;

		/* Fluent uses 4px default radius */
		--radius: 0.25rem;

		/* Fluent depth shadows */
		--fluent-shadow-2: 0 1px 2px hsl(0 0% 0% / 0.14);
		--fluent-shadow-4: 0 2px 4px hsl(0 0% 0% / 0.14);
		--fluent-shadow-8: 0 4px 8px hsl(0 0% 0% / 0.14);
		--fluent-shadow-16: 0 8px 16px hsl(0 0% 0% / 0.14);
		--fluent-shadow-64: 0 32px 64px hsl(0 0% 0% / 0.24);

		/* Fluent reveal highlight color */
		--fluent-reveal-color: hsl(0 0% 100% / 0.1);
	}

.ringo-glass {
		--background: 220 12% 88%;
		--foreground: 220 25% 8%;
		--card: 220 14% 92%;
		--card-foreground: 220 25% 8%;
		--popover: 220 14% 92%;
		--popover-foreground: 220 25% 8%;

		/* Primary: System Blue */
		--primary: 211 100% 48%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Cool slate */
		--secondary: 220 10% 82%;
		--secondary-foreground: 220 20% 12%;

		/* Muted: Darker gray */
		--muted: 220 8% 85%;
		--muted-foreground: 220 12% 38%;

		/* Accent: System Teal */
		--accent: 189 75% 40%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: System Red */
		--destructive: 0 70% 48%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 92% 50%;
		--warning-foreground: 0 0% 0%;

		/* Success */
		--success: 142 76% 36%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 91% 60%;
		--info-foreground: 0 0% 100%;

		/* Borders - defined slate */
		--border: 220 12% 75%;
		--input: 220 10% 80%;
		--ring: 211 100% 48%;
		--chart-1: 211 100% 48%;
		--chart-2: 189 75% 42%;
		--chart-3: 217 91% 60%;
		--chart-4: 142 76% 36%;
		--chart-5: 0 70% 50%;

		/* Apple uses larger radius */
		--radius: 0.625rem;

		/* Ringo Glass variables */
		--ringo-blur: 20px;
		--ringo-saturation: 180%;
		--ringo-glass-bg: hsl(var(--card) / 0.6);
		--ringo-glass-bg-hover: hsl(var(--card) / 0.7);
		--ringo-edge-highlight: rgba(255, 255, 255, 0.5);
		--ringo-edge-glow: rgba(255, 255, 255, 0.3);
		--ringo-inner-shadow: rgba(255, 255, 255, 0.1);

		/* Cupertino shadows - subtle and diffuse */
		--cupertino-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.08), 0 1px 2px hsl(0 0% 0% / 0.06);
		--cupertino-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.1), 0 2px 4px hsl(0 0% 0% / 0.06);
		--cupertino-shadow-lg: 0 10px 40px hsl(0 0% 0% / 0.15), 0 4px 12px hsl(0 0% 0% / 0.1);
		--cupertino-shadow-xl: 0 25px 80px hsl(0 0% 0% / 0.2);
	}

.akibae {
		--background: 230 25% 10%;
		--foreground: 220 15% 92%;
		--card: 230 25% 14%;
		--card-foreground: 220 15% 92%;
		--popover: 230 25% 14%;
		--popover-foreground: 220 15% 92%;

		/* Primary: System Blue */
		--primary: 211 100% 50%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Deep slate */
		--secondary: 230 20% 18%;
		--secondary-foreground: 220 15% 92%;

		/* Muted: Slightly lighter than background */
		--muted: 230 20% 16%;
		--muted-foreground: 220 12% 55%;

		/* Accent: System Teal */
		--accent: 189 75% 42%;
		--accent-foreground: 0 0% 100%;

		/* Destructive: System Red */
		--destructive: 0 65% 48%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders and inputs - visible but not harsh */
		--border: 230 18% 22%;
		--input: 230 18% 20%;
		--ring: 211 100% 50%;
		--chart-1: 211 100% 50%;
		--chart-2: 189 75% 42%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 0 65% 48%;

		/* Apple uses larger radius */
		--radius: 0.625rem;

		/* Akibae Glass variables - dark mode optimized */
		--ringo-blur: 20px;
		--ringo-saturation: 180%;
		--ringo-glass-bg: hsl(var(--card) / 0.5);
		--ringo-glass-bg-hover: hsl(var(--card) / 0.65);
		--ringo-edge-highlight: rgba(255, 255, 255, 0.12);
		--ringo-edge-glow: rgba(255, 255, 255, 0.06);
		--ringo-inner-shadow: rgba(255, 255, 255, 0.04);

		/* Akibae shadows - subtle and diffuse */
		--cupertino-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.2), 0 1px 2px hsl(0 0% 0% / 0.15);
		--cupertino-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.25), 0 2px 4px hsl(0 0% 0% / 0.15);
		--cupertino-shadow-lg: 0 10px 40px hsl(0 0% 0% / 0.35), 0 4px 12px hsl(0 0% 0% / 0.2);
		--cupertino-shadow-xl: 0 25px 80px hsl(0 0% 0% / 0.4);
	}

.blockninja {
		/* Background tiers - near-black, not pure black */
		--background: 0 0% 6%;
		--foreground: 0 0% 95%;
		--card: 0 0% 9%;
		--card-foreground: 0 0% 95%;
		--popover: 0 0% 11%;
		--popover-foreground: 0 0% 95%;

		/* Primary: Armed red - brand accent, always present but never dominant */
		--primary: 0 72% 51%;
		--primary-foreground: 0 0% 100%;

		/* Secondary: Elevated neutral surfaces */
		--secondary: 0 0% 13%;
		--secondary-foreground: 0 0% 95%;

		/* Muted: Recessed areas, disabled states */
		--muted: 0 0% 11%;
		--muted-foreground: 0 0% 55%;

		/* Accent: Interactive hover (neutral, red reserved for primary) */
		--accent: 0 0% 16%;
		--accent-foreground: 0 0% 95%;

		/* Destructive: Danger red (slightly darker than primary) */
		--destructive: 0 72% 45%;
		--destructive-foreground: 0 0% 100%;

		/* Warning */
		--warning: 38 90% 55%;
		--warning-foreground: 0 0% 100%;

		/* Success */
		--success: 142 70% 45%;
		--success-foreground: 0 0% 100%;

		/* Info */
		--info: 217 85% 65%;
		--info-foreground: 0 0% 100%;

		/* Borders - subtle but visible */
		--border: 0 0% 18%;
		--input: 0 0% 18%;

		/* Ring: Red focus indicator - the armed accent */
		--ring: 0 72% 51%;
		--chart-1: 0 72% 51%;
		--chart-2: 38 90% 55%;
		--chart-3: 217 85% 65%;
		--chart-4: 142 70% 45%;
		--chart-5: 0 72% 45%;

		/* Radius: Tactical, minimal curves */
		--radius: 0.375rem;

		/* BlockNinja-specific variables */
		--bn-red-glow: 0 100% 50%;
		--bn-red-subtle: 0 72% 51%;
		--bn-border-subtle: 0 0% 14%;
		--bn-border-strong: 0 0% 25%;
		--bn-noise-opacity: 0.025;
		--bn-vignette-strength: 0.15;
		--bn-panel-opacity: 0.95;
		--bn-transition-speed: 150ms;
	}

* {
	border-color: hsl(var(--border));
}

body {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
		font-feature-settings:
			"rlig" 1,
			"calt" 1;
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}

@media (min-width: 1400px) {

	.container {
		max-width: 1400px;
	}
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.visible {
	visibility: visible;
}

.collapse {
	visibility: collapse;
}

.static {
	position: static;
}

.fixed {
	position: fixed;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.sticky {
	position: sticky;
}

.inset-0 {
	inset: 0px;
}

.inset-1 {
	inset: 0.25rem;
}

.-right-1 {
	right: -0.25rem;
}

.-top-1 {
	top: -0.25rem;
}

.-top-3 {
	top: -0.75rem;
}

.bottom-0 {
	bottom: 0px;
}

.bottom-4 {
	bottom: 1rem;
}

.left-0 {
	left: 0px;
}

.left-1\/2 {
	left: 50%;
}

.left-2 {
	left: 0.5rem;
}

.left-3 {
	left: 0.75rem;
}

.left-4 {
	left: 1rem;
}

.left-\[50\%\] {
	left: 50%;
}

.right-0 {
	right: 0px;
}

.right-2 {
	right: 0.5rem;
}

.right-3 {
	right: 0.75rem;
}

.right-4 {
	right: 1rem;
}

.top-0 {
	top: 0px;
}

.top-1\/2 {
	top: 50%;
}

.top-2 {
	top: 0.5rem;
}

.top-3 {
	top: 0.75rem;
}

.top-4 {
	top: 1rem;
}

.top-\[50\%\] {
	top: 50%;
}

.z-10 {
	z-index: 10;
}

.z-50 {
	z-index: 50;
}

.-m-1 {
	margin: -0.25rem;
}

.-mx-1 {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
}

.-mx-4 {
	margin-left: -1rem;
	margin-right: -1rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.my-1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.-mr-2 {
	margin-right: -0.5rem;
}

.-mt-8 {
	margin-top: -2rem;
}

.mb-1 {
	margin-bottom: 0.25rem;
}

.mb-12 {
	margin-bottom: 3rem;
}

.mb-2 {
	margin-bottom: 0.5rem;
}

.mb-3 {
	margin-bottom: 0.75rem;
}

.mb-4 {
	margin-bottom: 1rem;
}

.mb-6 {
	margin-bottom: 1.5rem;
}

.mb-8 {
	margin-bottom: 2rem;
}

.ml-2 {
	margin-left: 0.5rem;
}

.ml-3 {
	margin-left: 0.75rem;
}

.ml-auto {
	margin-left: auto;
}

.mr-1 {
	margin-right: 0.25rem;
}

.mr-2 {
	margin-right: 0.5rem;
}

.mt-0\.5 {
	margin-top: 0.125rem;
}

.mt-1 {
	margin-top: 0.25rem;
}

.mt-1\.5 {
	margin-top: 0.375rem;
}

.mt-10 {
	margin-top: 2.5rem;
}

.mt-2 {
	margin-top: 0.5rem;
}

.mt-4 {
	margin-top: 1rem;
}

.mt-6 {
	margin-top: 1.5rem;
}

.mt-8 {
	margin-top: 2rem;
}

.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

.table {
	display: table;
}

.grid {
	display: grid;
}

.hidden {
	display: none;
}

.aspect-\[16\/10\] {
	aspect-ratio: 16/10;
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

.aspect-video {
	aspect-ratio: 16 / 9;
}

.h-0\.5 {
	height: 0.125rem;
}

.h-1 {
	height: 0.25rem;
}

.h-1\.5 {
	height: 0.375rem;
}

.h-10 {
	height: 2.5rem;
}

.h-11 {
	height: 2.75rem;
}

.h-12 {
	height: 3rem;
}

.h-16 {
	height: 4rem;
}

.h-2 {
	height: 0.5rem;
}

.h-20 {
	height: 5rem;
}

.h-24 {
	height: 6rem;
}

.h-3 {
	height: 0.75rem;
}

.h-3\.5 {
	height: 0.875rem;
}

.h-32 {
	height: 8rem;
}

.h-4 {
	height: 1rem;
}

.h-48 {
	height: 12rem;
}

.h-5 {
	height: 1.25rem;
}

.h-6 {
	height: 1.5rem;
}

.h-64 {
	height: 16rem;
}

.h-7 {
	height: 1.75rem;
}

.h-8 {
	height: 2rem;
}

.h-80 {
	height: 20rem;
}

.h-9 {
	height: 2.25rem;
}

.h-96 {
	height: 24rem;
}

.h-\[1px\] {
	height: 1px;
}

.h-\[300px\] {
	height: 300px;
}

.h-\[var\(--radix-select-trigger-height\)\] {
	height: var(--radix-select-trigger-height);
}

.h-full {
	height: 100%;
}

.h-px {
	height: 1px;
}

.h-screen {
	height: 100vh;
}

.max-h-\[--radix-select-content-available-height\] {
	max-height: var(--radix-select-content-available-height);
}

.max-h-\[90vh\] {
	max-height: 90vh;
}

.min-h-48 {
	min-height: 12rem;
}

.min-h-\[80px\] {
	min-height: 80px;
}

.min-h-\[calc\(100vh-4rem\)\] {
	min-height: calc(100vh - 4rem);
}

.min-h-screen {
	min-height: 100vh;
}

.w-1 {
	width: 0.25rem;
}

.w-1\.5 {
	width: 0.375rem;
}

.w-1\/2 {
	width: 50%;
}

.w-1\/3 {
	width: 33.333333%;
}

.w-10 {
	width: 2.5rem;
}

.w-12 {
	width: 3rem;
}

.w-16 {
	width: 4rem;
}

.w-2 {
	width: 0.5rem;
}

.w-2\/3 {
	width: 66.666667%;
}

.w-20 {
	width: 5rem;
}

.w-24 {
	width: 6rem;
}

.w-3 {
	width: 0.75rem;
}

.w-3\.5 {
	width: 0.875rem;
}

.w-3\/4 {
	width: 75%;
}

.w-32 {
	width: 8rem;
}

.w-36 {
	width: 9rem;
}

.w-4 {
	width: 1rem;
}

.w-40 {
	width: 10rem;
}

.w-44 {
	width: 11rem;
}

.w-48 {
	width: 12rem;
}

.w-5 {
	width: 1.25rem;
}

.w-56 {
	width: 14rem;
}

.w-6 {
	width: 1.5rem;
}

.w-64 {
	width: 16rem;
}

.w-7 {
	width: 1.75rem;
}

.w-8 {
	width: 2rem;
}

.w-9 {
	width: 2.25rem;
}

.w-\[120px\] {
	width: 120px;
}

.w-\[160px\] {
	width: 160px;
}

.w-\[1px\] {
	width: 1px;
}

.w-\[200px\] {
	width: 200px;
}

.w-\[300px\] {
	width: 300px;
}

.w-\[50px\] {
	width: 50px;
}

.w-\[80px\] {
	width: 80px;
}

.w-fit {
	width: -moz-fit-content;
	width: fit-content;
}

.w-full {
	width: 100%;
}

.min-w-0 {
	min-width: 0px;
}

.min-w-\[180px\] {
	min-width: 180px;
}

.min-w-\[200px\] {
	min-width: 200px;
}

.min-w-\[8rem\] {
	min-width: 8rem;
}

.min-w-\[var\(--radix-select-trigger-width\)\] {
	min-width: var(--radix-select-trigger-width);
}

.max-w-2xl {
	max-width: 42rem;
}

.max-w-3xl {
	max-width: 48rem;
}

.max-w-6xl {
	max-width: 72rem;
}

.max-w-\[120px\] {
	max-width: 120px;
}

.max-w-lg {
	max-width: 32rem;
}

.max-w-md {
	max-width: 28rem;
}

.max-w-sm {
	max-width: 24rem;
}

.max-w-xs {
	max-width: 20rem;
}

.flex-1 {
	flex: 1 1 0%;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.shrink-0 {
	flex-shrink: 0;
}

.grow {
	flex-grow: 1;
}

.caption-bottom {
	caption-side: bottom;
}

.origin-\[--radix-select-content-transform-origin\] {
	transform-origin: var(--radix-select-content-transform-origin);
}

.origin-\[--radix-tooltip-content-transform-origin\] {
	transform-origin: var(--radix-tooltip-content-transform-origin);
}

.-translate-x-1\/2 {
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-\[-50\%\] {
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[-50\%\] {
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-105 {
	--tw-scale-x: 1.05;
	--tw-scale-y: 1.05;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {

	50% {
		opacity: .5;
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {

	to {
		transform: rotate(360deg);
	}
}

.animate-spin {
	animation: spin 1s linear infinite;
}

.cursor-default {
	cursor: default;
}

.cursor-help {
	cursor: help;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.cursor-pointer {
	cursor: pointer;
}

.select-none {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.list-inside {
	list-style-position: inside;
}

.list-decimal {
	list-style-type: decimal;
}

.list-disc {
	list-style-type: disc;
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

.flex-col-reverse {
	flex-direction: column-reverse;
}

.flex-wrap {
	flex-wrap: wrap;
}

.place-content-center {
	place-content: center;
}

.items-start {
	align-items: flex-start;
}

.items-center {
	align-items: center;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.gap-0 {
	gap: 0px;
}

.gap-1 {
	gap: 0.25rem;
}

.gap-1\.5 {
	gap: 0.375rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-4 {
	gap: 1rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-8 {
	gap: 2rem;
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-x-reverse: 0;
	margin-right: calc(0.75rem * var(--tw-space-x-reverse));
	margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-y-reverse: 0;
	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
	border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-x-auto {
	overflow-x: auto;
}

.overflow-y-auto {
	overflow-y: auto;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.whitespace-nowrap {
	white-space: nowrap;
}

.whitespace-pre-wrap {
	white-space: pre-wrap;
}

.break-all {
	word-break: break-all;
}

.rounded {
	border-radius: 0.25rem;
}

.rounded-full {
	border-radius: 9999px;
}

.rounded-lg {
	border-radius: var(--radius);
}

.rounded-md {
	border-radius: calc(var(--radius) - 2px);
}

.rounded-sm {
	border-radius: calc(var(--radius) - 4px);
}

.rounded-xl {
	border-radius: 0.75rem;
}

.rounded-l-md {
	border-top-left-radius: calc(var(--radius) - 2px);
	border-bottom-left-radius: calc(var(--radius) - 2px);
}

.rounded-l-none {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.rounded-r-md {
	border-top-right-radius: calc(var(--radius) - 2px);
	border-bottom-right-radius: calc(var(--radius) - 2px);
}

.rounded-r-none {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.border {
	border-width: 1px;
}

.border-0 {
	border-width: 0px;
}

.border-2 {
	border-width: 2px;
}

.border-b {
	border-bottom-width: 1px;
}

.border-l {
	border-left-width: 1px;
}

.border-l-0 {
	border-left-width: 0px;
}

.border-l-4 {
	border-left-width: 4px;
}

.border-r {
	border-right-width: 1px;
}

.border-r-0 {
	border-right-width: 0px;
}

.border-t {
	border-top-width: 1px;
}

.border-dashed {
	border-style: dashed;
}

.border-\[hsl\(0_0\%_18\%\)\] {
	--tw-border-opacity: 1;
	border-color: hsl(0 0% 18% / var(--tw-border-opacity, 1));
}

.border-\[hsl\(0_72\%_51\%\)\] {
	--tw-border-opacity: 1;
	border-color: hsl(0 72% 51% / var(--tw-border-opacity, 1));
}

.border-border {
	border-color: hsl(var(--border));
}

.border-destructive {
	border-color: hsl(var(--destructive));
}

.border-destructive\/20 {
	border-color: hsl(var(--destructive) / 0.2);
}

.border-destructive\/30 {
	border-color: hsl(var(--destructive) / 0.3);
}

.border-destructive\/50 {
	border-color: hsl(var(--destructive) / 0.5);
}

.border-input {
	border-color: hsl(var(--input));
}

.border-muted {
	border-color: hsl(var(--muted));
}

.border-primary {
	border-color: hsl(var(--primary));
}

.border-primary\/20 {
	border-color: hsl(var(--primary) / 0.2);
}

.border-primary\/50 {
	border-color: hsl(var(--primary) / 0.5);
}

.border-success {
	border-color: hsl(var(--success));
}

.border-transparent {
	border-color: transparent;
}

.border-white\/60 {
	border-color: rgb(255 255 255 / 0.6);
}

.bg-\[hsl\(0\2c 0\%\2c 98\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 0% 98% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 100% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0\2c 30\%\2c 5\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 30% 5% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0_0\%_18\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 0% 18% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0_0\%_6\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 0% 6% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0_72\%_51\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(0 72% 51% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(0_72\%_51\%\/0\.05\)\] {
	background-color: hsl(0 72% 51%/0.05);
}

.bg-\[hsl\(145\2c 55\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(145 55% 45% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(145\2c 75\%\2c 38\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(145 75% 38% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(15\2c 55\%\2c 55\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(15 55% 55% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(15\2c 80\%\2c 55\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(15 80% 55% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(150\2c 15\%\2c 12\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(150 15% 12% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(151\2c 83\%\2c 40\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(151 83% 40% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(155\2c 45\%\2c 90\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(155 45% 90% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(165\2c 50\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(165 50% 45% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(168\2c 80\%\2c 38\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(168 80% 38% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(175\2c 70\%\2c 40\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(175 70% 40% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(185\2c 100\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(185 100% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(193\2c 60\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(193 60% 45% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(195\2c 70\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(195 70% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(195\2c 90\%\2c 42\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(195 90% 42% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(200\2c 25\%\2c 12\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(200 25% 12% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(200\2c 55\%\2c 92\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(200 55% 92% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(200\2c 95\%\2c 48\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(200 95% 48% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(206\2c 100\%\2c 42\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(206 100% 42% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(210\2c 20\%\2c 98\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(210 20% 98% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(211\2c 100\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(211 100% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(215\2c 80\%\2c 58\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(215 80% 58% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(217\2c 89\%\2c 51\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(217 89% 51% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(218\2c 30\%\2c 90\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(218 30% 90% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(220\2c 40\%\2c 4\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(220 40% 4% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(230\2c 25\%\2c 11\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(230 25% 11% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(230\2c 25\%\2c 14\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(230 25% 14% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(230\2c 35\%\2c 8\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(230 35% 8% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(239\2c 84\%\2c 67\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(239 84% 67% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(240\2c 10\%\2c 3\.9\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(240 10% 3.9% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(25\2c 100\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(25 100% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(25\2c 40\%\2c 96\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(25 40% 96% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(25\2c 60\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(25 60% 45% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(25\2c 80\%\2c 55\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(25 80% 55% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(260\2c 60\%\2c 60\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(260 60% 60% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(270\2c 20\%\2c 14\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(270 20% 14% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(270\2c 30\%\2c 97\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(270 30% 97% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(270\2c 60\%\2c 65\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(270 60% 65% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(270\2c 70\%\2c 55\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(270 70% 55% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(300\2c 100\%\2c 60\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(300 100% 60% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(300\2c 60\%\2c 55\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(300 60% 55% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(330\2c 100\%\2c 64\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(330 100% 64% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(340\2c 12\%\2c 14\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(340 12% 14% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(340\2c 50\%\2c 60\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(340 50% 60% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(40\2c 30\%\2c 96\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(40 30% 96% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(40\2c 60\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(40 60% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(45\2c 80\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(45 80% 45% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(8\2c 65\%\2c 50\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(8 65% 50% / var(--tw-bg-opacity, 1));
}

.bg-\[hsl\(95\2c 50\%\2c 45\%\)\] {
	--tw-bg-opacity: 1;
	background-color: hsl(95 50% 45% / var(--tw-bg-opacity, 1));
}

.bg-accent {
	background-color: hsl(var(--accent));
}

.bg-accent\/10 {
	background-color: hsl(var(--accent) / 0.1);
}

.bg-accent\/15 {
	background-color: hsl(var(--accent) / 0.15);
}

.bg-background {
	background-color: hsl(var(--background));
}

.bg-background\/95 {
	background-color: hsl(var(--background) / 0.95);
}

.bg-black\/0 {
	background-color: rgb(0 0 0 / 0);
}

.bg-black\/80 {
	background-color: rgb(0 0 0 / 0.8);
}

.bg-border {
	background-color: hsl(var(--border));
}

.bg-card {
	background-color: hsl(var(--card));
}

.bg-destructive {
	background-color: hsl(var(--destructive));
}

.bg-destructive\/10 {
	background-color: hsl(var(--destructive) / 0.1);
}

.bg-destructive\/15 {
	background-color: hsl(var(--destructive) / 0.15);
}

.bg-destructive\/5 {
	background-color: hsl(var(--destructive) / 0.05);
}

.bg-muted {
	background-color: hsl(var(--muted));
}

.bg-muted\/30 {
	background-color: hsl(var(--muted) / 0.3);
}

.bg-muted\/50 {
	background-color: hsl(var(--muted) / 0.5);
}

.bg-popover {
	background-color: hsl(var(--popover));
}

.bg-primary {
	background-color: hsl(var(--primary));
}

.bg-primary-foreground {
	background-color: hsl(var(--primary-foreground));
}

.bg-primary\/10 {
	background-color: hsl(var(--primary) / 0.1);
}

.bg-primary\/15 {
	background-color: hsl(var(--primary) / 0.15);
}

.bg-primary\/20 {
	background-color: hsl(var(--primary) / 0.2);
}

.bg-primary\/5 {
	background-color: hsl(var(--primary) / 0.05);
}

.bg-secondary {
	background-color: hsl(var(--secondary));
}

.bg-success {
	background-color: hsl(var(--success));
}

.bg-success\/10 {
	background-color: hsl(var(--success) / 0.1);
}

.bg-success\/15 {
	background-color: hsl(var(--success) / 0.15);
}

.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
	background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
	background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/40 {
	background-color: rgb(255 255 255 / 0.4);
}

.bg-gradient-to-br {
	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
	background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[hsl\(160\2c 60\%\2c 25\%\)\] {
	--tw-gradient-from: hsl(160,60%,25%) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(160 60% 25% / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[hsl\(210\2c 50\%\2c 95\%\)\] {
	--tw-gradient-from: hsl(210,50%,95%) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(210 50% 95% / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
	--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
	--tw-gradient-from: #10b981 var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-400 {
	--tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary {
	--tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/10 {
	--tw-gradient-from: hsl(var(--primary) / 0.1) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5 {
	--tw-gradient-from: hsl(var(--primary) / 0.05) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-500 {
	--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
	--tw-gradient-from: #fff var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[hsl\(230\2c 30\%\2c 8\%\)\] {
	--tw-gradient-to: hsl(230 30% 8% / 0)  var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), hsl(230,30%,8%) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-\[hsl\(280\2c 30\%\2c 90\%\)\] {
	--tw-gradient-to: hsl(280 30% 90% / 0)  var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), hsl(280,30%,90%) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[hsl\(240\2c 10\%\2c 3\.9\%\)\] {
	--tw-gradient-to: hsl(240,10%,3.9%) var(--tw-gradient-to-position);
}

.to-\[hsl\(280\2c 50\%\2c 20\%\)\] {
	--tw-gradient-to: hsl(280,50%,20%) var(--tw-gradient-to-position);
}

.to-\[hsl\(30\2c 40\%\2c 92\%\)\] {
	--tw-gradient-to: hsl(30,40%,92%) var(--tw-gradient-to-position);
}

.to-indigo-600 {
	--tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-pink-600 {
	--tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.to-primary\/10 {
	--tw-gradient-to: hsl(var(--primary) / 0.1) var(--tw-gradient-to-position);
}

.to-primary\/5 {
	--tw-gradient-to: hsl(var(--primary) / 0.05) var(--tw-gradient-to-position);
}

.to-primary\/80 {
	--tw-gradient-to: hsl(var(--primary) / 0.8) var(--tw-gradient-to-position);
}

.to-slate-500 {
	--tw-gradient-to: #64748b var(--tw-gradient-to-position);
}

.to-teal-600 {
	--tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}

.fill-current {
	fill: currentColor;
}

.fill-primary {
	fill: hsl(var(--primary));
}

.fill-success {
	fill: hsl(var(--success));
}

.stroke-muted {
	stroke: hsl(var(--muted));
}

.p-0 {
	padding: 0px;
}

.p-1 {
	padding: 0.25rem;
}

.p-2 {
	padding: 0.5rem;
}

.p-3 {
	padding: 0.75rem;
}

.p-4 {
	padding: 1rem;
}

.p-6 {
	padding: 1.5rem;
}

.p-8 {
	padding: 2rem;
}

.px-1 {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.px-1\.5 {
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.px-2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px-2\.5 {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
}

.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.py-0 {
	padding-top: 0px;
	padding-bottom: 0px;
}

.py-0\.5 {
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
}

.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.py-1\.5 {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}

.py-12 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py-20 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.py-24 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.pb-2 {
	padding-bottom: 0.5rem;
}

.pb-3 {
	padding-bottom: 0.75rem;
}

.pb-4 {
	padding-bottom: 1rem;
}

.pl-10 {
	padding-left: 2.5rem;
}

.pl-2 {
	padding-left: 0.5rem;
}

.pl-8 {
	padding-left: 2rem;
}

.pl-9 {
	padding-left: 2.25rem;
}

.pr-10 {
	padding-right: 2.5rem;
}

.pr-2 {
	padding-right: 0.5rem;
}

.pt-0 {
	padding-top: 0px;
}

.pt-1 {
	padding-top: 0.25rem;
}

.pt-2 {
	padding-top: 0.5rem;
}

.pt-4 {
	padding-top: 1rem;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.align-middle {
	vertical-align: middle;
}

.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

.text-5xl {
	font-size: 3rem;
	line-height: 1;
}

.text-\[10px\] {
	font-size: 10px;
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
}

.font-bold {
	font-weight: 700;
}

.font-medium {
	font-weight: 500;
}

.font-normal {
	font-weight: 400;
}

.font-semibold {
	font-weight: 600;
}

.lowercase {
	text-transform: lowercase;
}

.tabular-nums {
	--tw-numeric-spacing: tabular-nums;
	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
	line-height: 1;
}

.tracking-tight {
	letter-spacing: -0.025em;
}

.tracking-wider {
	letter-spacing: 0.05em;
}

.tracking-widest {
	letter-spacing: 0.1em;
}

.text-accent {
	color: hsl(var(--accent));
}

.text-accent-foreground {
	color: hsl(var(--accent-foreground));
}

.text-card-foreground {
	color: hsl(var(--card-foreground));
}

.text-current {
	color: currentColor;
}

.text-destructive {
	color: hsl(var(--destructive));
}

.text-destructive-foreground {
	color: hsl(var(--destructive-foreground));
}

.text-foreground {
	color: hsl(var(--foreground));
}

.text-green-500 {
	--tw-text-opacity: 1;
	color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-muted-foreground {
	color: hsl(var(--muted-foreground));
}

.text-muted-foreground\/50 {
	color: hsl(var(--muted-foreground) / 0.5);
}

.text-popover-foreground {
	color: hsl(var(--popover-foreground));
}

.text-primary {
	color: hsl(var(--primary));
}

.text-primary-foreground {
	color: hsl(var(--primary-foreground));
}

.text-secondary-foreground {
	color: hsl(var(--secondary-foreground));
}

.text-success {
	color: hsl(var(--success));
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/30 {
	color: rgb(255 255 255 / 0.3);
}

.underline {
	text-decoration-line: underline;
}

.underline-offset-4 {
	text-underline-offset: 4px;
}

.opacity-0 {
	opacity: 0;
}

.opacity-30 {
	opacity: 0.3;
}

.opacity-40 {
	opacity: 0.4;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-60 {
	opacity: 0.6;
}

.opacity-70 {
	opacity: 0.7;
}

.opacity-80 {
	opacity: 0.8;
}

.shadow {
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.outline {
	outline-style: solid;
}

.ring-2 {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-\[hsl\(0_72\%_51\%\/0\.2\)\] {
	--tw-ring-color: hsl(0 72% 51%/0.2);
}

.ring-primary {
	--tw-ring-color: hsl(var(--primary));
}

.ring-primary\/20 {
	--tw-ring-color: hsl(var(--primary) / 0.2);
}

.ring-offset-background {
	--tw-ring-offset-color: hsl(var(--background));
}

.drop-shadow-\[0_0_12px_hsl\(var\(--primary\)\/0\.5\)\] {
	--tw-drop-shadow: drop-shadow(0 0 12px hsl(var(--primary)/0.5));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-\[0_0_8px_hsl\(var\(--primary\)\/0\.6\)\] {
	--tw-drop-shadow: drop-shadow(0 0 8px hsl(var(--primary)/0.6));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
	--tw-backdrop-blur: blur(8px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
	--tw-backdrop-blur: blur(4px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.duration-200 {
	transition-duration: 200ms;
}

.duration-300 {
	transition-duration: 300ms;
}

@keyframes enter {

	from {
		opacity: var(--tw-enter-opacity, 1);
		transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
	}
}

@keyframes exit {

	to {
		opacity: var(--tw-exit-opacity, 1);
		transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
	}
}

.animate-in {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.fade-in-0 {
	--tw-enter-opacity: 0;
}

.zoom-in-95 {
	--tw-enter-scale: .95;
}

.duration-200 {
	animation-duration: 200ms;
}

.duration-300 {
	animation-duration: 300ms;
}

.running {
	animation-play-state: running;
}

.paused {
	animation-play-state: paused;
}

/* Global base styles */

/* Scrollbar styling */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background-color: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	background-color: hsl(var(--muted-foreground) / 0.3);
}

::-webkit-scrollbar-thumb:hover {
	background-color: hsl(var(--muted-foreground) / 0.5);
}

.file\:border-0::file-selector-button {
	border-width: 0px;
}

.file\:bg-transparent::file-selector-button {
	background-color: transparent;
}

.file\:text-sm::file-selector-button {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
	font-weight: 500;
}

.file\:text-foreground::file-selector-button {
	color: hsl(var(--foreground));
}

.placeholder\:text-muted-foreground::-moz-placeholder {
	color: hsl(var(--muted-foreground));
}

.placeholder\:text-muted-foreground::placeholder {
	color: hsl(var(--muted-foreground));
}

.hover\:border-\[hsl\(0_72\%_51\%\/0\.5\)\]:hover {
	border-color: hsl(0 72% 51%/0.5);
}

.hover\:border-primary:hover {
	border-color: hsl(var(--primary));
}

.hover\:border-primary\/50:hover {
	border-color: hsl(var(--primary) / 0.5);
}

.hover\:bg-accent:hover {
	background-color: hsl(var(--accent));
}

.hover\:bg-accent\/50:hover {
	background-color: hsl(var(--accent) / 0.5);
}

.hover\:bg-destructive\/10:hover {
	background-color: hsl(var(--destructive) / 0.1);
}

.hover\:bg-destructive\/80:hover {
	background-color: hsl(var(--destructive) / 0.8);
}

.hover\:bg-destructive\/90:hover {
	background-color: hsl(var(--destructive) / 0.9);
}

.hover\:bg-muted\/50:hover {
	background-color: hsl(var(--muted) / 0.5);
}

.hover\:bg-muted\/80:hover {
	background-color: hsl(var(--muted) / 0.8);
}

.hover\:bg-primary\/80:hover {
	background-color: hsl(var(--primary) / 0.8);
}

.hover\:bg-primary\/90:hover {
	background-color: hsl(var(--primary) / 0.9);
}

.hover\:bg-secondary\/80:hover {
	background-color: hsl(var(--secondary) / 0.8);
}

.hover\:from-primary\/90:hover {
	--tw-gradient-from: hsl(var(--primary) / 0.9) var(--tw-gradient-from-position);
	--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-primary\/70:hover {
	--tw-gradient-to: hsl(var(--primary) / 0.7) var(--tw-gradient-to-position);
}

.hover\:text-accent-foreground:hover {
	color: hsl(var(--accent-foreground));
}

.hover\:text-destructive:hover {
	color: hsl(var(--destructive));
}

.hover\:text-foreground:hover {
	color: hsl(var(--foreground));
}

.hover\:text-primary:hover {
	color: hsl(var(--primary));
}

.hover\:underline:hover {
	text-decoration-line: underline;
}

.hover\:opacity-100:hover {
	opacity: 1;
}

.hover\:shadow-lg:hover {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:bg-accent:focus {
	background-color: hsl(var(--accent));
}

.focus\:text-accent-foreground:focus {
	color: hsl(var(--accent-foreground));
}

.focus\:text-destructive:focus {
	color: hsl(var(--destructive));
}

.focus\:outline-none:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.focus\:ring-2:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-ring:focus {
	--tw-ring-color: hsl(var(--ring));
}

.focus\:ring-offset-2:focus {
	--tw-ring-offset-width: 2px;
}

.focus-visible\:outline-none:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.focus-visible\:ring-1:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible {
	--tw-ring-color: hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible {
	--tw-ring-offset-width: 2px;
}

.disabled\:pointer-events-none:disabled {
	pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
	cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
	opacity: 0.5;
}

.group:hover .group-hover\:bg-black\/40 {
	background-color: rgb(0 0 0 / 0.4);
}

.group:hover .group-hover\:text-primary {
	color: hsl(var(--primary));
}

.group:hover .group-hover\:opacity-100 {
	opacity: 1;
}

.group.toaster .group-\[\.toaster\]\:border-border {
	border-color: hsl(var(--border));
}

.group.toast .group-\[\.toast\]\:bg-muted {
	background-color: hsl(var(--muted));
}

.group.toast .group-\[\.toast\]\:bg-primary {
	background-color: hsl(var(--primary));
}

.group.toaster .group-\[\.toaster\]\:bg-background {
	background-color: hsl(var(--background));
}

.group.toast .group-\[\.toast\]\:text-muted-foreground {
	color: hsl(var(--muted-foreground));
}

.group.toast .group-\[\.toast\]\:text-primary-foreground {
	color: hsl(var(--primary-foreground));
}

.group.toaster .group-\[\.toaster\]\:text-foreground {
	color: hsl(var(--foreground));
}

.group.toaster .group-\[\.toaster\]\:shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
	cursor: not-allowed;
}

.peer:disabled ~ .peer-disabled\:opacity-70 {
	opacity: 0.7;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
	pointer-events: none;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
	--tw-translate-y: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
	--tw-translate-x: -0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
	--tw-translate-x: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
	--tw-translate-y: -0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
	background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
	background-color: hsl(var(--primary));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
	background-color: hsl(var(--accent));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
	background-color: hsl(var(--muted));
}

.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
	color: hsl(var(--muted-foreground));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
	color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
	color: hsl(var(--primary-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
	color: hsl(var(--muted-foreground));
}

.data-\[disabled\]\:opacity-50[data-disabled] {
	opacity: 0.5;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
	--tw-exit-opacity: 0;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
	--tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
	--tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
	--tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
	--tw-enter-translate-y: -0.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
	--tw-enter-translate-x: 0.5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
	--tw-enter-translate-x: -0.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
	--tw-enter-translate-y: 0.5rem;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
	--tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
	--tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
	--tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
	--tw-enter-translate-y: -48%;
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:border-primary {
	border-color: hsl(var(--primary));
}

@supports (backdrop-filter: var(--tw)) {

	.supports-\[backdrop-filter\]\:bg-background\/60 {
		background-color: hsl(var(--background) / 0.6);
	}
}

.dark\:border-destructive:is(.dark *) {
	border-color: hsl(var(--destructive));
}

@media (min-width: 640px) {

	.sm\:mt-0 {
		margin-top: 0px;
	}

	.sm\:max-w-2xl {
		max-width: 42rem;
	}

	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sm\:flex-row {
		flex-direction: row;
	}

	.sm\:justify-end {
		justify-content: flex-end;
	}

	.sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
		--tw-space-x-reverse: 0;
		margin-right: calc(0.5rem * var(--tw-space-x-reverse));
		margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
	}

	.sm\:rounded-lg {
		border-radius: var(--radius);
	}

	.sm\:text-left {
		text-align: left;
	}

	.sm\:text-5xl {
		font-size: 3rem;
		line-height: 1;
	}

	.sm\:text-6xl {
		font-size: 3.75rem;
		line-height: 1;
	}
}

@media (min-width: 768px) {

	.md\:inline {
		display: inline;
	}

	.md\:flex {
		display: flex;
	}

	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.md\:gap-1 {
		gap: 0.25rem;
	}

	.md\:text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

@media (min-width: 1024px) {

	.lg\:col-span-1 {
		grid-column: span 1 / span 1;
	}

	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}

	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lg\:grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.lg\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.\[\&\:has\(\[data-state\=checked\]\)\]\:border-primary:has([data-state=checked]) {
	border-color: hsl(var(--primary));
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
	padding-right: 0px;
}

.\[\&\>span\]\:line-clamp-1>span {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
	--tw-translate-y: -3px;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\>svg\]\:absolute>svg {
	position: absolute;
}

.\[\&\>svg\]\:left-4>svg {
	left: 1rem;
}

.\[\&\>svg\]\:top-4>svg {
	top: 1rem;
}

.\[\&\>svg\]\:text-destructive>svg {
	color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground>svg {
	color: hsl(var(--foreground));
}

.\[\&\>svg\]\:text-success>svg {
	color: hsl(var(--success));
}

.\[\&\>svg\~\*\]\:pl-7>svg~* {
	padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
	border-bottom-width: 0px;
}

.\[\&_p\]\:leading-relaxed p {
	line-height: 1.625;
}

.\[\&_svg\]\:pointer-events-none svg {
	pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
	width: 1rem;
	height: 1rem;
}

.\[\&_svg\]\:shrink-0 svg {
	flex-shrink: 0;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
	border-width: 0px;
}

.\[\&_tr\]\:border-b tr {
	border-bottom-width: 1px;
}