@layer theme,base,components,animations,utilities;
@layer base {
	*,
	*:before,
	*:after {
		box-sizing: border-box;
		-webkit-tap-highlight-color: transparent;
	}
	* {
		margin: 0;
	}
	html {
		tab-size: 4;
	}
	body,
	dialog,
	[popover] {
		font-family: var(--font-sans);
		font-size: var(--text-regular);
		line-height: var(--leading-normal);
		color: var(--foreground);
	}
	body {
		background-color: var(--background);
		color: var(--foreground);
		-webkit-font-smoothing: antialiased;
	}
	main {
		padding-block-start: var(--space-8);
	}
	img,
	picture,
	video,
	canvas,
	svg {
		max-width: 100%;
	}
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: var(--font-semibold);
		line-height: 1.25;
		&:first-child {
			margin-block-start: 0;
		}
	}
	h1 {
		font-size: var(--text-1);
		margin: var(--space-10) 0 var(--space-6);
	}
	h2 {
		font-size: var(--text-2);
		margin: var(--space-8) 0 var(--space-5);
	}
	h3 {
		font-size: var(--text-3);
		margin: var(--space-6) 0 var(--space-4);
	}
	h4 {
		font-size: var(--text-4);
		margin: var(--space-5) 0 var(--space-3);
	}
	h5 {
		font-size: var(--text-5);
		margin: var(--space-4) 0 var(--space-2);
	}
	h6 {
		font-size: var(--text-regular);
		margin: var(--space-4) 0 var(--space-2);
	}
	p {
		margin-block-end: var(--space-4);
		&:last-child {
			margin-block-end: 0;
		}
	}
	a {
		color: var(--primary);
		text-decoration: underline;
		text-underline-offset: 2px;
		transition: color var(--transition-fast);
		&:hover {
			color: rgb(from var(--primary) r g b / 0.8);
		}
	}
	strong,
	b {
		font-weight: var(--font-semibold);
	}
	em,
	i {
		font-style: italic;
	}
	small {
		font-size: var(--text-7);
	}
	code {
		font-family: var(--font-mono);
		font-size: 0.875em;
		padding: calc(var(--space-1) / 2) var(--space-1);
		background-color: var(--faint);
		border-radius: var(--radius-small);
	}
	pre {
		font-family: var(--font-mono);
		padding: var(--space-4);
		background-color: var(--faint);
		border-radius: var(--radius-medium);
		overflow-x: auto;
		margin-block-end: var(--space-4);
		code {
			padding: 0;
			background: none;
			border-radius: 0;
		}
	}
	blockquote {
		border-inline-start: 4px solid var(--border);
		padding-inline-start: var(--space-4);
		margin: var(--space-4) 0;
		color: var(--muted-foreground);
		font-style: italic;
	}
	hr {
		border: none;
		border-top: 1px solid var(--border);
		margin: var(--space-2) 0;
	}
	ul,
	ol {
		padding-inline-start: var(--space-6);
		margin-block-end: var(--space-4);
	}
	ul {
		list-style-type: disc;
	}
	ol {
		list-style-type: decimal;
	}
	li {
		margin-block-end: var(--space-1);
	}
	mark {
		background-color: rgb(from var(--warning) r g b / 0.3);
		padding: calc(var(--space-1) / 2) var(--space-1);
		border-radius: var(--radius-small);
	}
	[hidden] {
		display: none;
	}
	:focus-visible {
		outline: 2px solid var(--ring);
		outline-offset: 2px;
	}
	:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}
@layer theme {
	:root {
		color-scheme: light dark;
		--background: light-dark(#fff, #09090b);
		--foreground: light-dark(#09090b, #fafafa);
		--card: light-dark(#fff, #18181b);
		--card-foreground: light-dark(#09090b, #fafafa);
		--primary: light-dark(#574747, #fafafa);
		--primary-foreground: light-dark(#fafafa, #18181b);
		--secondary: light-dark(#f4f4f5, #27272a);
		--secondary-foreground: light-dark(#574747, #fafafa);
		--muted: light-dark(#f4f4f5, #27272a);
		--muted-foreground: light-dark(#71717a, #a1a1aa);
		--faint: light-dark(#fafafa, #1e1e21);
		--faint-foreground: light-dark(#a1a1aa, #71717a);
		--accent: light-dark(#f4f4f5, #27272a);
		--danger: light-dark(#d32f2f, #f4807b);
		--danger-foreground: light-dark(#fafafa, #18181b);
		--success: light-dark(#008032, #6cc070);
		--success-foreground: light-dark(#fafafa, #18181b);
		--warning: light-dark(#a65b00, #f0a030);
		--warning-foreground: #09090b;
		--border: light-dark(#d4d4d8, #52525b);
		--input: light-dark(#d4d4d8, #52525b);
		--ring: light-dark(#574747, #d4d4d8);
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.25rem;
		--space-6: 1.5rem;
		--space-8: 2rem;
		--space-10: 2.5rem;
		--space-12: 3rem;
		--space-14: 3.5rem;
		--space-16: 4rem;
		--space-18: 4.5rem;
		--radius-small: 0.125rem;
		--radius-medium: 0.375rem;
		--radius-large: 0.75rem;
		--radius-full: 9999px;
		--bar-height: 0.5rem;
		--font-sans: system-ui, sans-serif;
		--font-mono: ui-monospace, Consolas, monospace;
		--text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
		--text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
		--text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
		--text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
		--text-5: 1.125rem;
		--text-6: 1rem;
		--text-7: 0.875rem;
		--text-8: 0.75rem;
		--text-regular: var(--text-6);
		--leading-normal: 1.5;
		--font-normal: 400;
		--font-medium: 500;
		--font-semibold: 600;
		--font-bold: 600;
		--shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow-medium:
			0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
		--shadow-large:
			0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
		--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		--z-dropdown: 50;
		--z-modal: 200;
	}
}
@layer animations {
	.animate-pop-in {
		opacity: 1;
		transform: perspective(1000px) rotateX(0) translateZ(0);
		transition:
			opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
			overlay 0.15s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete,
			display 0.15s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
		@starting-style {
			opacity: 0;
			transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
		}
		&[data-state="closing"] {
			opacity: 0;
			transform: perspective(1000px) rotateX(-15deg) translateZ(-80px);
		}
		&[data-state="closing"]::backdrop {
			opacity: 0;
		}
	}
	dialog::backdrop {
		opacity: 1;
		transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
		@starting-style {
			opacity: 0;
		}
	}
	.animate-slide-in {
		opacity: 1;
		transform: translate(0);
		transition:
			opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
		@starting-style {
			opacity: 0;
			transform: translate(100%);
		}
		&[data-state="closing"] {
			opacity: 0;
			transform: translate(100%);
		}
	}
}
@layer base {
	:is(button, [type="submit"], [type="reset"], [type="button"], a.button),
	::file-selector-button {
		--_hov: color-mix(in srgb, var(--primary), white 25%);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		font-size: var(--text-7);
		font-weight: var(--font-medium);
		line-height: var(--leading-normal);
		white-space: nowrap;
		text-decoration: none;
		background-color: var(--primary);
		color: var(--primary-foreground);
		border-radius: var(--radius-medium);
		border: 1px solid;
		border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2)
			rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
		transition:
			background-color var(--transition-fast),
			opacity var(--transition-fast),
			transform var(--transition-fast);
		&:not(:disabled) {
			cursor: pointer;
		}
		&:hover:not(:disabled) {
			background-color: var(--_hov);
		}
		&:active:not(:disabled) {
			transform: translate(1px, 1px);
		}
		&[data-variant="secondary"] {
			--_hov: color-mix(in srgb, var(--secondary), black 10%);
			background-color: var(--secondary);
			color: var(--secondary-foreground);
			border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1)
				rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
		}
		&[data-variant="danger"] {
			--_hov: color-mix(in srgb, var(--danger), black 15%);
			background-color: var(--danger);
			color: var(--danger-foreground);
		}
		&:is(.outline, .ghost) {
			--_hov: var(--accent);
			background-color: transparent;
			color: var(--foreground);
			&[data-variant="danger"] {
				--_hov: color-mix(in srgb, var(--danger), transparent 90%);
				color: var(--danger);
			}
			&[data-variant="secondary"] {
				--_hov: color-mix(in srgb, var(--secondary), transparent 80%);
				color: var(--secondary-foreground);
			}
		}
		&.outline {
			border-color: var(--border);
			&[data-variant="danger"] {
				border-color: var(--danger);
			}
			&[data-variant="secondary"] {
				border-color: var(--secondary);
			}
		}
		&.ghost {
			border-color: transparent;
		}
		&.small {
			padding: var(--space-1) var(--space-3);
			font-size: var(--text-8);
		}
		&.large {
			height: 3rem;
			padding: 0 var(--space-6);
			font-size: var(--text-regular);
		}
		&.icon {
			width: 2.5rem;
			padding: 0;
			&.small {
				width: 2rem;
			}
			&.large {
				width: 3rem;
			}
		}
	}
	::file-selector-button {
		background-color: transparent;
		color: var(--foreground);
		border: 1px solid var(--border);
	}
	::file-selector-button:hover {
		background-color: var(--accent);
	}
}
@layer components {
	menu.buttons {
		list-style-type: none;
		padding-inline-start: 0;
		display: inline-flex;
		> li {
			&:first-child > * {
				border-start-start-radius: var(--radius-medium);
				border-end-start-radius: var(--radius-medium);
			}
			&:last-child > * {
				border-start-end-radius: var(--radius-medium);
				border-end-end-radius: var(--radius-medium);
			}
			> * {
				border-radius: 0;
			}
			&:not(:last-child) > * {
				border-inline-end: 1px solid
					rgb(from var(--primary-foreground) r g b / 0.2);
			}
		}
	}
}
@layer base {
	label {
		display: block;
		font-size: var(--text-7);
		font-weight: var(--font-medium);
		&:has(input:where([type="checkbox"], [type="radio"])) {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			font-weight: var(--font-normal);
		}
	}
	:where(
		input:not(
			[type="checkbox"],
			[type="radio"],
			[type="range"],
			[type="file"],
			[type="color"]
		),
		textarea,
		select
	) {
		width: 100%;
		margin-block-start: var(--space-1);
		padding: var(--space-2) var(--space-3);
		font-size: var(--text-7);
		line-height: var(--leading-normal);
		background-color: var(--background);
		color: var(--foreground);
		border: 1px solid var(--input);
		border-radius: var(--radius-medium);
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);
		&::placeholder {
			color: var(--muted-foreground);
		}
		&:focus {
			outline: none;
			border-color: var(--ring);
			box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);
			z-index: 1;
		}
		&:disabled {
			background-color: var(--muted);
		}
		&:is([aria-invalid="true"], :user-invalid) {
			border-color: var(--danger);
			&:focus {
				box-shadow: 0 0 0 2px rgb(from var(--danger) r g b / 0.2);
			}
		}
	}
	textarea {
		height: auto;
		min-height: 5rem;
		padding: var(--space-3);
		resize: vertical;
	}
	select {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--space-2) center;
		padding-inline-end: var(--space-6);
	}
	input:where([type="checkbox"], [type="radio"]) {
		appearance: none;
		width: 1rem;
		height: 1rem;
		margin: 0;
		position: relative;
		background-color: var(--background);
		border: 1px solid var(--input);
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
		&:checked {
			background-color: var(--primary);
			border-color: var(--primary);
			&:after {
				content: "";
				position: absolute;
				inset: 0;
				background-color: var(--primary-foreground);
				mask-position: center;
				mask-repeat: no-repeat;
				mask-size: 100%;
			}
		}
	}
	input[type="checkbox"] {
		border-radius: var(--radius-small);
		&:checked:after {
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
		}
		&[role="switch"] {
			--switch-height: calc(var(--bar-height) * 3);
			--switch-inset: 2px;
			--switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);
			width: calc(var(--switch-height) * 2);
			height: var(--switch-height);
			border-radius: var(--radius-full);
			background-color: var(--input);
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: var(--switch-inset);
				transform: translateY(-50%);
				width: var(--switch-thumb);
				height: var(--switch-thumb);
				background-color: var(--background);
				border-radius: var(--radius-full);
				transition: transform var(--transition);
				box-shadow: var(--shadow-small);
			}
			&:checked {
				background-color: var(--primary);
				&:after {
					content: none;
				}
				&:before {
					transform: translateY(-50%) translate(var(--switch-height));
				}
			}
		}
	}
	input[type="radio"] {
		border-radius: var(--radius-full);
		&:checked:after {
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
		}
	}
	:where(
		input:where([type="checkbox"], [type="radio"], [type="range"]),
		select
	):not(:disabled),
	label:has(input:where([type="checkbox"], [type="radio"]):not(:disabled)) {
		cursor: pointer;
	}
	input[type="range"] {
		width: 100%;
		height: var(--bar-height);
		appearance: none;
		background: var(--muted);
		border-radius: var(--radius-full);
		&::-webkit-slider-thumb {
			appearance: none;
			width: 1.25rem;
			height: 1.25rem;
			background: var(--primary);
			border-radius: var(--radius-full);
			transition: transform var(--transition-fast);
			&:hover {
				transform: scale(1.1);
			}
		}
		&::-moz-range-thumb {
			width: 1.25rem;
			height: 1.25rem;
			background: var(--primary);
			border: none;
			border-radius: var(--radius-full);
		}
	}
	fieldset {
		border: 1px solid var(--border);
		border-radius: var(--radius-medium);
		padding: var(--space-4);
		margin-block-end: var(--space-4);
	}
	legend {
		font-size: var(--text-7);
		font-weight: var(--font-medium);
		padding: 0 var(--space-2);
	}
}
@layer components {
	fieldset.group {
		display: flex;
		align-items: stretch;
		border: none;
		padding: 0;
		margin: 0;
		> :is(input, textarea, select) {
			flex: 1;
			margin-block-start: 0;
			&:not(:focus):not(:last-child) {
				border-inline-end-color: transparent;
			}
		}
		> :is(input, textarea, select, button) {
			border-radius: 0;
			&:first-child {
				border-radius: var(--radius-medium) 0 0 var(--radius-medium);
			}
			&:last-child {
				border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
			}
		}
		> legend {
			float: inline-start;
			display: inline-flex;
			align-items: center;
			padding: 0 var(--space-3);
			line-height: var(--leading-normal);
			font-weight: var(--font-normal);
			color: var(--muted-foreground);
			background-color: var(--muted);
			border: 1px solid var(--input);
			border-inline-end: none;
			border-radius: var(--radius-medium) 0 0 var(--radius-medium);
		}
	}
	[data-field] {
		margin-block-end: var(--space-4);
		[data-hint],
		.error {
			font-size: var(--text-8);
			font-weight: var(--font-normal);
			color: var(--muted-foreground);
			margin-block-start: var(--space-1);
		}
		.error {
			display: none;
		}
		&[data-field="error"] .error {
			display: block;
			color: var(--danger);
		}
	}
}
@layer base {
	.table {
		min-width: 320px;
		width: 100%;
		overflow-x: auto;
	}
	table {
		border-collapse: collapse;
		width: 100%;
		font-size: var(--text-7);
	}
	thead {
		border-bottom: 1px solid var(--border);
	}
	th,
	td {
		overflow-wrap: break-word;
	}
	th {
		padding: var(--space-3) var(--space-2);
		text-align: start;
		font-weight: var(--font-medium);
		color: var(--muted-foreground);
	}
	td {
		padding: var(--space-3) var(--space-2);
	}
	tbody tr {
		border-bottom: 1px solid var(--border);
		transition: background-color var(--transition-fast);
		&:last-child {
			border-bottom: none;
		}
		&:hover {
			background-color: rgb(from var(--muted) r g b / 0.5);
		}
	}
}
@layer base {
	progress {
		appearance: none;
		width: 100%;
		height: var(--bar-height);
		border: none;
		border-radius: var(--radius-full);
		overflow: hidden;
		background-color: var(--muted);
		&::-webkit-progress-bar {
			background-color: var(--muted);
			border-radius: var(--radius-full);
		}
		&::-webkit-progress-value {
			background-color: var(--primary);
			border-radius: var(--radius-full);
			transition: width var(--transition);
		}
		&::-moz-progress-bar {
			background-color: var(--primary);
			border-radius: var(--radius-full);
		}
	}
	meter {
		appearance: none;
		width: 100%;
		height: var(--bar-height);
		border: none;
		border-radius: var(--radius-full);
		overflow: hidden;
		background: var(--muted);
		&::-webkit-meter-bar {
			background: var(--muted);
			border: none;
			border-radius: var(--radius-full);
			height: var(--bar-height);
		}
		&::-webkit-meter-optimum-value,
		&::-webkit-meter-suboptimum-value,
		&::-webkit-meter-even-less-good-value {
			border-radius: var(--radius-full);
		}
		&::-webkit-meter-optimum-value {
			background: var(--success);
		}
		&::-webkit-meter-suboptimum-value {
			background: var(--warning);
		}
		&::-webkit-meter-even-less-good-value {
			background: var(--danger);
		}
		&::-moz-meter-bar {
			background: var(--success);
			border-radius: var(--radius-full);
		}
		&:-moz-meter-sub-optimum::-moz-meter-bar {
			background: var(--warning);
		}
		&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
			background: var(--danger);
		}
	}
}
@layer components {
	[aria-busy="true"] {
		&:before {
			content: "";
			display: inline-block;
			inset: 0;
			margin: auto;
			width: 1.5rem;
			height: 1.5rem;
			border: 2px solid var(--muted);
			border-top-color: var(--primary);
			border-radius: var(--radius-full);
			animation: spin 1s linear infinite;
			text-align: center;
		}
		&[data-spinner~="small"]:before {
			width: 1rem;
			height: 1rem;
		}
		&[data-spinner~="large"]:before {
			width: 2rem;
			height: 2rem;
			border-width: 3px;
		}
		&[data-spinner~="overlay"] {
			position: relative;
			> * {
				opacity: 0.3;
				pointer-events: none;
			}
			&:before {
				position: absolute;
				inset: 0;
				margin: auto;
				z-index: 1;
			}
		}
	}
	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
}
@layer components {
	:root {
		--grid-cols: 12;
		--grid-gap: 1.5rem;
		--container-max: 1280px;
		--container-pad: 1rem;
	}
	.container {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}
	.row {
		display: grid;
		grid-template-columns: repeat(var(--grid-cols), 1fr);
		gap: var(--grid-gap);
		width: 100%;
	}
	.col,
	[class*="col-"] {
		grid-column-end: span var(--span, var(--grid-cols));
	}
	.col-1 {
		--span: 1;
	}
	.col-2 {
		--span: 2;
	}
	.col-3 {
		--span: 3;
	}
	.col-4 {
		--span: 4;
	}
	.col-5 {
		--span: 5;
	}
	.col-6 {
		--span: 6;
	}
	.col-7 {
		--span: 7;
	}
	.col-8 {
		--span: 8;
	}
	.col-9 {
		--span: 9;
	}
	.col-10 {
		--span: 10;
	}
	.col-11 {
		--span: 11;
	}
	.col-12 {
		--span: 12;
	}
	.offset-1 {
		grid-column-start: 2;
	}
	.offset-2 {
		grid-column-start: 3;
	}
	.offset-3 {
		grid-column-start: 4;
	}
	.offset-4 {
		grid-column-start: 5;
	}
	.offset-5 {
		grid-column-start: 6;
	}
	.offset-6 {
		grid-column-start: 7;
	}
	.col-end {
		grid-column-start: span var(--span, 1);
		grid-column-end: -1;
	}
	@media (max-width: 768px) {
		.row {
			--grid-cols: 4;
			--grid-gap: 1rem;
		}
		.col,
		[class*="col-"] {
			--span: 4;
		}
		[class*="offset-"] {
			grid-column-start: auto;
		}
	}
}
@layer components {
	.card {
		background-color: var(--card);
		color: var(--card-foreground);
		border: 1px solid var(--border);
		border-radius: var(--radius-medium);
		box-shadow: var(--shadow-small);
		padding: var(--space-6);
		overflow: hidden;
	}
}
@layer components {
	[role="alert"] {
		position: relative;
		display: flex;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-6);
		background-color: var(--background);
		border: 1px solid var(--border);
		border-radius: var(--radius-medium);
		font-size: var(--text-7);
		&[data-variant] {
			border: none;
		}
		&[data-variant="error"],
		&[data-variant="danger"] {
			color: var(--danger);
			background-color: light-dark(
				color-mix(in srgb, var(--danger) 8%, transparent),
				color-mix(in srgb, var(--danger) 20%, transparent)
			);
			& a {
				color: var(--danger);
			}
		}
		&[data-variant="success"] {
			color: var(--success);
			background-color: light-dark(
				color-mix(in srgb, var(--success) 8%, transparent),
				color-mix(in srgb, var(--success) 20%, transparent)
			);
			& a {
				color: var(--success);
			}
		}
		&[data-variant="warning"] {
			color: var(--warning);
			background-color: light-dark(
				color-mix(in srgb, var(--warning) 8%, transparent),
				color-mix(in srgb, var(--warning) 20%, transparent)
			);
			& a {
				color: var(--warning);
			}
		}
	}
}
@layer components {
	.badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-1) var(--space-4);
		font-size: var(--text-8);
		font-weight: var(--font-medium);
		line-height: var(--leading-normal);
		background-color: var(--primary);
		color: var(--primary-foreground);
		border-radius: var(--radius-full);
		&.secondary {
			background-color: var(--secondary);
			color: var(--secondary-foreground);
		}
		&.outline {
			background-color: transparent;
			color: var(--foreground);
			border: 1px solid var(--border);
		}
		&.success {
			color: var(--success);
			background-color: light-dark(
				color-mix(in srgb, var(--success) 10%, transparent),
				color-mix(in srgb, var(--success) 30%, transparent)
			);
		}
		&.warning {
			color: var(--warning);
			background-color: light-dark(
				color-mix(in srgb, var(--warning) 10%, transparent),
				color-mix(in srgb, var(--warning) 30%, transparent)
			);
		}
		&.danger {
			color: var(--danger);
			background-color: light-dark(
				color-mix(in srgb, var(--danger) 10%, transparent),
				color-mix(in srgb, var(--danger) 30%, transparent)
			);
		}
	}
}
@layer components {
	details {
		border: 1px solid var(--border);
		border-radius: var(--radius-medium);
		overflow: hidden;
		+ details {
			margin-top: -1px;
			border-start-start-radius: 0;
			border-start-end-radius: 0;
		}
		&:has(+ details) {
			border-end-start-radius: 0;
			border-end-end-radius: 0;
		}
		&[open] summary {
			border-bottom: 1px solid var(--border);
		}
	}
	summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		padding: var(--space-4);
		font-weight: var(--font-medium);
		cursor: pointer;
		user-select: none;
		transition: background-color var(--transition-fast);
		&:hover {
			background-color: var(--muted);
		}
		&::-webkit-details-marker,
		&::marker {
			display: none;
		}
		&:after {
			content: "";
			width: 1em;
			height: 1em;
			flex-shrink: 0;
			background-color: currentColor;
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
			mask-size: contain;
			mask-repeat: no-repeat;
			transition: transform var(--transition-fast);
		}
		details[open] &:after {
			transform: rotate(180deg);
		}
	}
	details > *:not(summary) {
		margin: var(--space-4);
	}
}
@layer components {
	[role="tablist"] {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-1);
		background-color: var(--muted);
		border-radius: var(--radius-medium);
	}
	[role="tab"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-2) var(--space-3);
		font-size: var(--text-7);
		font-weight: var(--font-medium);
		white-space: nowrap;
		background-color: transparent;
		color: var(--foreground);
		border: none;
		border-radius: calc(var(--radius-medium) - 2px);
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			color var(--transition-fast);
		&:hover {
			color: var(--muted-foreground);
		}
		&[aria-selected="true"] {
			background-color: var(--background);
			box-shadow: var(--shadow-small);
		}
	}
	[role="tabpanel"] {
		padding: var(--space-4) 0;
		&:focus-visible {
			outline: none;
		}
	}
}
@layer components {
	dialog {
		position: fixed;
		inset: 0;
		z-index: var(--z-modal);
		width: min(100% - 2rem, 32rem);
		max-height: 85vh;
		margin: auto;
		padding: 0;
		background-color: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-large);
		box-shadow: var(--shadow-large);
		overflow: hidden;
		opacity: 0;
		transform: scale(0.95);
		transition:
			opacity 0.15s ease,
			transform 0.15s ease,
			overlay 0.15s ease allow-discrete,
			display 0.15s ease allow-discrete;
		&[open] {
			opacity: 1;
			transform: scale(1);
		}
		@starting-style {
			&[open] {
				opacity: 0;
				transform: scale(0.95);
			}
		}
		&::backdrop {
			background-color: #0000;
			transition:
				background-color 0.15s ease,
				overlay 0.15s ease allow-discrete,
				display 0.15s ease allow-discrete;
		}
		&[open]::backdrop {
			background-color: #00000080;
		}
		@starting-style {
			&[open]::backdrop {
				background-color: #0000;
			}
		}
		> header,
		> form > header {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			padding: var(--space-6);
			padding-block-end: 0;
			> h1,
			> h2,
			> h3,
			> h4,
			> h5,
			> h6 {
				margin-block-end: 0;
			}
			> p {
				font-size: var(--text-7);
				color: var(--muted-foreground);
				margin-block-end: 0;
			}
		}
		> p,
		> div,
		> section,
		> form > p,
		> form > div,
		> form > section {
			padding: var(--space-6);
			overflow-y: auto;
		}
		> footer,
		> form > footer {
			display: flex;
			justify-content: flex-end;
			gap: var(--space-2);
			padding: var(--space-6);
			padding-block-start: 0;
		}
	}
}
@layer components {
	ot-dropdown {
		[popover] {
			position: fixed;
			margin: 0;
			min-width: 12rem;
			background-color: var(--background);
			border: 1px solid var(--border);
			border-radius: var(--radius-medium);
			box-shadow: var(--shadow-medium);
			opacity: 0;
			transform: translateY(-4px);
			transition:
				opacity 0.15s ease-out,
				transform 0.15s ease-out,
				display 0.15s allow-discrete,
				overlay 0.15s allow-discrete;
			&:popover-open {
				opacity: 1;
				transform: translateY(0);
			}
			@starting-style {
				&:popover-open {
					opacity: 0;
					transform: translateY(-4px);
				}
			}
		}
		[role="menuitem"] {
			display: flex;
			align-items: center;
			justify-content: start;
			gap: var(--space-2);
			width: 100%;
			padding: var(--space-2) var(--space-3);
			font-size: var(--text-7);
			text-align: start;
			color: var(--foreground);
			background: none;
			border: none;
			border-radius: var(--radius-small);
			cursor: pointer;
			&:hover,
			&:focus {
				background-color: var(--accent);
				outline: none;
			}
		}
	}
}
@layer components {
	.toast-container {
		position: fixed;
		display: flex;
		flex-direction: column;
		pointer-events: none;
		margin: 0;
		padding: 0;
		border: none;
		background: transparent;
		overflow: visible;
		&::backdrop {
			display: none;
		}
		&[data-placement="top-left"] {
			inset: var(--space-4) auto auto var(--space-4);
		}
		&[data-placement="top-center"] {
			inset: var(--space-4) auto auto 50%;
			transform: translate(-50%);
		}
		&[data-placement="top-right"] {
			inset: var(--space-4) var(--space-4) auto auto;
		}
		&[data-placement="bottom-left"] {
			inset: auto auto var(--space-4) var(--space-4);
			flex-direction: column-reverse;
		}
		&[data-placement="bottom-center"] {
			inset: auto auto var(--space-4) 50%;
			transform: translate(-50%);
			flex-direction: column-reverse;
		}
		&[data-placement="bottom-right"] {
			inset: auto var(--space-4) var(--space-4) auto;
			flex-direction: column-reverse;
		}
	}
	.toast {
		--transition: 0.3s;
		--transition-in: calc(var(--transition) - 50ms);
		padding: var(--space-5) var(--space-4);
		max-width: 28rem;
		min-width: 20rem;
		pointer-events: auto;
		background-color: var(--card);
		border: 1px solid var(--border);
		border-inline-start-width: var(--space-1);
		border-inline-start-style: solid;
		border-radius: var(--radius-medium);
		box-shadow: var(--shadow-small);
		transition:
			opacity var(--transition-in),
			transform var(--transition-in),
			margin var(--transition-in);
		line-height: 1;
		.toast-title {
			font-weight: 600;
			margin: 0 0 var(--space-3) 0;
		}
		.toast-message {
			color: var(--muted-foreground);
		}
		&[data-variant="success"] {
			border-inline-start-color: var(--success);
			.toast-title {
				color: var(--success);
			}
		}
		&[data-variant="danger"] {
			border-inline-start-color: var(--danger);
			.toast-title {
				color: var(--danger);
			}
		}
		&[data-variant="warning"] {
			border-inline-start-color: var(--warning);
			.toast-title {
				color: var(--warning);
			}
		}
		> [data-close] {
			margin-inline-start: auto;
			background: none;
			border: none;
			padding: 0;
			cursor: pointer;
			opacity: 0.5;
			&:hover {
				opacity: 1;
			}
		}
		margin: var(--space-2) 0;
		&[data-entering] {
			opacity: 0;
			transform: translateY(-1rem);
		}
		&[data-exiting] {
			opacity: 0;
			margin: 0;
			padding-block: 0;
			max-height: 0;
			overflow: hidden;
			transition:
				opacity var(--transition),
				margin var(--transition),
				padding var(--transition),
				max-height var(--transition);
		}
	}
}
@layer components {
	[data-sidebar-layout] {
		--topnav-offset: 0px;
		display: grid;
		grid-template-columns: 14rem 1fr;
		min-height: 100dvh;
		gap: var(--space-4);
		> main {
			min-width: 0;
		}
		&:has(nav[data-topnav]) {
			--topnav-offset: var(--space-12);
			> main [id] {
				scroll-margin-block-start: calc(var(--space-12) + var(--space-6));
			}
		}
		> aside[data-sidebar] {
			position: sticky;
			top: var(--topnav-offset);
			z-index: 1;
			height: calc(100dvh - var(--topnav-offset));
			align-self: start;
			background-color: var(--background);
			border-inline-end: 1px solid var(--border);
			box-shadow: var(--shadow-medium);
			display: flex;
			flex-direction: column;
			> :is(header, footer) {
				flex-shrink: 0;
				padding: var(--space-3);
			}
			> footer {
				margin-block-start: auto;
			}
			> nav {
				flex: 1;
				min-height: 0;
				overflow-y: auto;
				padding: var(--space-3) var(--space-2);
				font-size: var(--text-7);
				ul {
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					flex-direction: column;
					gap: var(--space-1);
					li {
						margin: 0;
					}
				}
				a {
					display: flex;
					gap: var(--space-2);
					padding: var(--space-1) var(--space-3);
					color: var(--foreground);
					text-decoration: none;
					border-radius: var(--radius-small);
					transition: background-color var(--transition-fast);
					&:is(:hover, [aria-current]) {
						background-color: var(--accent);
					}
				}
				details {
					border: none;
					overflow: visible;
					+ details {
						margin-top: 0;
					}
					&[open] summary {
						border-bottom: none;
					}
					> ul {
						margin-inline-start: var(--space-4);
						padding: var(--space-1) 0;
					}
				}
				summary {
					justify-content: flex-start;
					padding: var(--space-2) var(--space-3);
					border-radius: var(--radius-small);
					&:after {
						width: 0.75rem;
						height: 0.75rem;
						margin-inline-start: auto;
					}
				}
			}
		}
	}
	nav[data-topnav] {
		position: fixed;
		inset: 0 0 auto;
		z-index: 5;
		min-height: var(--space-12);
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-4);
		background-color: var(--background);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-small);
		a {
			text-decoration: none;
		}
	}
	nav[data-topnav] ~ main {
		margin-block-start: var(--space-12);
	}
	:is([data-sidebar-toggle], [data-sidebar-header]) {
		display: none;
	}
	[data-sidebar-toggle] {
		padding: 0 var(--space-1);
		background: none;
		border: 1px solid var(--border);
		border-radius: var(--radius-small);
	}
	@media (min-width: 769px) {
		[data-sidebar-layout="always"] {
			transition: grid-template-columns var(--transition);
			[data-sidebar-toggle] {
				display: inline-block;
			}
			> aside[data-sidebar] {
				transform: translate(0);
				opacity: 1;
				transition:
					transform var(--transition),
					opacity var(--transition),
					visibility var(--transition);
			}
			&[data-sidebar-open] {
				grid-template-columns: 0px 1fr;
				gap: 0;
				> aside[data-sidebar] {
					overflow: hidden;
					min-width: 0;
					transform: translate(-100%);
					opacity: 0;
					visibility: hidden;
					border-inline-end: none;
				}
			}
		}
	}
	@media (max-width: 768px) {
		[data-sidebar-layout] {
			grid-template-columns: 1fr;
			> aside[data-sidebar] {
				position: fixed;
				left: 0;
				width: 16rem;
				transform: translate(-100%);
				transition: transform var(--transition);
				box-shadow: var(--shadow-large);
			}
			&[data-sidebar-open] > aside[data-sidebar] {
				transform: translate(0);
			}
		}
		[data-sidebar-toggle] {
			display: inline-block;
		}
		[data-sidebar-header] {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			padding: var(--space-3) var(--space-4);
			border-bottom: 1px solid var(--border);
		}
	}
}
@layer components {
	[role="status"].skeleton {
		--_c: light-dark(
			color-mix(in srgb, var(--muted) 30%, white),
			color-mix(in srgb, var(--muted) 90%, var(--foreground))
		);
		margin-block-end: var(--space-3);
		background: var(--muted);
		border-radius: var(--radius-medium);
		animation: anim 2s infinite;
		background-size: 200% 100%;
		background-image: linear-gradient(
			90deg,
			var(--muted) 0%,
			var(--_c) 50%,
			var(--muted) 100%
		);
		&.box {
			width: 4rem;
			height: 4rem;
		}
		&.line {
			height: 1rem;
			width: 100%;
		}
	}
	[role="status"].skeleton:last-child {
		margin-block-end: 0;
	}
	@keyframes anim {
		0% {
			background-position: 200% 0;
		}
		to {
			background-position: -200% 0;
		}
	}
}
@layer components {
	[data-tooltip] {
		position: relative;
	}
	[data-tooltip]:before,
	[data-tooltip]:after {
		position: absolute;
		inset-inline-start: 50%;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-fast),
			transform var(--transition-fast),
			visibility var(--transition-fast);
		pointer-events: none;
		z-index: 1000;
	}
	[data-tooltip]:after {
		content: attr(data-tooltip);
		inset-block-end: calc(100% + 10px);
		transform: translate(-50%) translateY(4px);
		padding: var(--space-2) var(--space-3);
		font-size: var(--text-7);
		line-height: 1;
		white-space: nowrap;
		background: var(--foreground);
		color: var(--background);
		border-radius: var(--radius-medium);
	}
	[data-tooltip]:before {
		content: "";
		inset-block-end: calc(100% - 5px);
		transform: translate(-50%) translateY(4px);
		border: 8px solid transparent;
		border-top-color: var(--foreground);
	}
	[data-tooltip]:is(:hover, :focus-visible):before,
	[data-tooltip]:is(:hover, :focus-visible):after {
		opacity: 1;
		visibility: visible;
		transition-delay: 0.7s;
		transform: translate(-50%) translateY(0);
	}
}
@layer utilities {
	.align-left {
		text-align: start;
	}
	.align-center {
		text-align: center;
	}
	.align-right {
		text-align: end;
	}
	.text-light {
		color: var(--muted-foreground);
	}
	.text-lighter {
		color: var(--faint-foreground);
	}
	.flex {
		display: flex;
	}
	.flex-col {
		flex-direction: column;
	}
	.items-center {
		align-items: center;
	}
	.justify-center {
		justify-content: center;
	}
	.justify-between {
		justify-content: space-between;
	}
	.justify-end {
		justify-content: flex-end;
	}
	.hstack {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		flex-wrap: wrap;
		align-content: flex-start;
		height: auto;
		* {
			margin: 0;
		}
	}
	.vstack {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
	.gap-1 {
		gap: var(--space-1);
	}
	.gap-2 {
		gap: var(--space-2);
	}
	.gap-4 {
		gap: var(--space-4);
	}
	.mt-2 {
		margin-block-start: var(--space-2);
	}
	.mt-4 {
		margin-block-start: var(--space-4);
	}
	.mt-6 {
		margin-block-start: var(--space-6);
	}
	.mb-2 {
		margin-block-end: var(--space-2);
	}
	.mb-4 {
		margin-block-end: var(--space-4);
	}
	.mb-6 {
		margin-block-end: var(--space-6);
	}
	.p-4 {
		padding: var(--space-4);
	}
	.w-100 {
		width: 100%;
	}
	:is(ul, ol, a).unstyled {
		list-style: none;
		text-decoration: none;
		padding: 0;
	}
}