:root {
	--fallback-primary: hsl(15, 80%, 45%);
	--fallback-background: hsl(15, 20%, 95%);
	--fallback-surface: hsl(0, 0%, 100%);
	--fallback-text: hsl(250, 20%, 15%);
	--fallback-static-white: hsl(0, 0%, 100%);
	--fallback-static-black: hsl(250, 20%, 15%);
	--fallback-text-inverted: hsl(0, 0%, 100%);
	--fallback-success: hsl(140, 50%, 45%);
	--fallback-danger: hsl(25, 80%, 50%);
	--fallback-warning: hsl(50, 90%, 65%);
	--fallback-border: hsla(250, 20%, 15%, 0.2);
	--fallback-border-light: hsla(250, 20%, 15%, 0.1);
	--fallback-primary-transparent: hsla(15, 80%, 45%, 0.1);
	--fallback-overlay: rgba(0, 0, 0, 0.6);

	--lightness-primary: 0.35;
	--chroma-primary: 0.15;
	--hue-primary: 15;

	--lightness-background: 0.95;
	--chroma-background: 0.01;
	--hue-background: var(--hue-primary);
	
	--lightness-surface: 1;
	--chroma-surface: 0;
	--hue-surface: 0;
	
	--lightness-text: 0.15;
	--chroma-text: 0.05;
	--hue-text: 250;

	--lightness-static-white: 1;
	--chroma-static-white: 0;
	--hue-static-white: 0;

	--lightness-static-black: 0.15;
	--chroma-static-black: 0.05;
	--hue-static-black: 250;
	
	--lightness-text-inverted: 1;
	--chroma-text-inverted: 0;
	--hue-text-inverted: 0;
	
	--lightness-success: 0.60;
	--chroma-success: 0.18;
	--hue-success: 140;
	
	--lightness-danger: 0.50;
	--chroma-danger: 0.22;
	--hue-danger: 25;
	
	--lightness-warning: 0.85;
	--chroma-warning: 0.15;
	--hue-warning: 80;
	
	--dimension-multiplier: 1;
	--spacing-scale-base: 0.25rem;
	--spacing-small: calc(var(--spacing-scale-base) * 2 * var(--dimension-multiplier));
	--spacing-medium: calc(var(--spacing-scale-base) * 4 * var(--dimension-multiplier));
	--spacing-large: calc(var(--spacing-scale-base) * 6 * var(--dimension-multiplier));
	
	--border-radius-small: calc(0.5rem * var(--dimension-multiplier));
	--border-radius-large: calc(1.25rem * var(--dimension-multiplier));
	--border-radius-pill: calc(999rem * var(--dimension-multiplier));
}

@media (prefers-color-scheme: dark) {
	:root {
		--fallback-primary: hsl(15, 80%, 60%);
		--fallback-background: hsl(250, 15%, 15%);
		--fallback-surface: hsl(250, 15%, 20%);
		--fallback-text: hsl(250, 20%, 90%);
		--fallback-text-inverted: hsl(0, 0%, 0%);
		--fallback-border: hsla(250, 20%, 90%, 0.2);
		--fallback-border-light: hsla(250, 20%, 90%, 0.1);
		--fallback-primary-transparent: hsla(15, 80%, 60%, 0.1);

		--lightness-primary: 0.65;
		--chroma-primary: 0.20;

		--lightness-background: 0.15;
		--chroma-background: 0.02;
		
		--lightness-surface: 0.20;
		--chroma-surface: 0.02;
		
		--lightness-text: 0.90;
		--chroma-text: 0.02;

		--lightness-text-inverted: 0;
		--chroma-text-inverted: 0;
		--hue-text-inverted: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}

body {
	background-color: var(--fallback-background);
	background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
	color: var(--fallback-text);
	color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
	font-family: system-ui, -apple-system, sans-serif;
	font-size: calc(1rem * var(--dimension-multiplier));
	line-height: 1.6;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.brand-link {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: opacity 0.2s ease;
}

.brand-link:hover {
	opacity: 0.8;
}

.application-header {
	background-color: var(--fallback-primary);
	background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
	color: var(--fallback-text-inverted);
	color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
	padding: var(--spacing-medium) var(--spacing-large);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
}

.brand-container {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.brand-logo {
	width: calc(2rem * var(--dimension-multiplier));
	height: calc(2rem * var(--dimension-multiplier));
	color: currentColor;
}

.application-title {
	margin: 0;
	font-size: calc(1.25rem * var(--dimension-multiplier));
	font-weight: 800;
	letter-spacing: -0.02em;
}

.application-content {
	flex: 1;
	padding: var(--spacing-large);
	width: 100%;
	max-width: calc(48rem * var(--dimension-multiplier));
	margin: 0 auto;
	box-sizing: border-box;
}

.content-card {
	background-color: var(--fallback-surface);
	background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
	padding: var(--spacing-large);
	border-radius: var(--border-radius-large);
	margin-bottom: var(--spacing-large);
	transition: background-color 0.3s ease;
}

.section-title {
	margin-top: 0;
	margin-bottom: var(--spacing-medium);
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.card-subtitle {
	margin-top: 0;
	margin-bottom: var(--spacing-small);
	opacity: 0.7;
	text-transform: uppercase;
	font-size: calc(0.875rem * var(--dimension-multiplier));
	letter-spacing: 0.05em;
}

.input-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-medium);
}

.inline-form {
	display: inline-block;
}

.flexible_form_container {
	display: flex;
	gap: calc(0.5rem * var(--dimension-multiplier));
	align-items: center;
	flex-wrap: wrap;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: calc(0.25rem * var(--dimension-multiplier));
}

.input-label {
	font-weight: bold;
	font-size: calc(0.875rem * var(--dimension-multiplier));
}

.text-input {
	padding: var(--spacing-medium);
	border: 2px solid var(--fallback-border);
	border: 2px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.2);
	border-radius: var(--border-radius-small);
	background-color: var(--fallback-background);
	background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
	color: inherit;
	font-size: inherit;
	transition: border-color 0.2s ease, background-color 0.3s ease;
}

.text-input:focus {
	outline: none;
	border-color: var(--fallback-primary);
	border-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}

.small-input {
	width: calc(12rem * var(--dimension-multiplier));
	padding: var(--spacing-small);
}

.time-input {
	width: calc(13rem * var(--dimension-multiplier));
}

.action-button {
	padding: var(--spacing-medium) var(--spacing-large);
	border: none;
	border-radius: var(--border-radius-pill);
	font-size: inherit;
	font-weight: bold;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-small);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--fallback-text-inverted);
	color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
}

.action-button:hover, .action-button:focus {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.icon-button {
	padding: calc(0.5rem * var(--dimension-multiplier));
	border-radius: var(--border-radius-small);
}

.primary-button {
	background-color: var(--fallback-primary);
	background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}

.success-button {
	background-color: var(--fallback-success);
	background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
}

.danger-button {
	background-color: var(--fallback-danger);
	background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
}

.warning-button {
	background-color: var(--fallback-warning);
	background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
	color: var(--fallback-static-black);
	color: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}

.secondary-button {
	background-color: transparent;
	color: var(--fallback-text);
	color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
	border: 2px solid var(--fallback-border);
	border: 2px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.2);
}

.large-button {
	padding: var(--spacing-large) calc(2.5rem * var(--dimension-multiplier));
	font-size: calc(1.125rem * var(--dimension-multiplier));
	width: 100%;
}

.small-button {
	padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.75rem * var(--dimension-multiplier));
	font-size: calc(0.875rem * var(--dimension-multiplier));
}

.tab-container {
	display: flex;
	background-color: var(--fallback-surface);
	background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
	border-radius: var(--border-radius-pill);
	padding: calc(0.375rem * var(--dimension-multiplier));
	gap: calc(0.25rem * var(--dimension-multiplier));
	margin-bottom: var(--spacing-large);
	overflow-x: auto;
}

.tab-button {
	flex: 1;
	border-radius: var(--border-radius-pill);
	padding: calc(0.625rem * var(--dimension-multiplier)) var(--spacing-medium);
	border: none;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(0.5rem * var(--dimension-multiplier));
	white-space: nowrap;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.active-tab {
	background-color: var(--fallback-primary);
	background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
	color: var(--fallback-text-inverted);
	color: oklch(var(--lightness-text-inverted) var(--chroma-text-inverted) var(--hue-text-inverted));
}

.tab-content {
	display: none;
}

.active-content {
	display: block;
	animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
	from { opacity: 0; transform: translateY(calc(0.25rem * var(--dimension-multiplier))); }
	to { opacity: 1; transform: translateY(0); }
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: calc(0.375rem * var(--dimension-multiplier));
	padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.875rem * var(--dimension-multiplier));
	border-radius: var(--border-radius-pill);
	font-size: calc(0.875rem * var(--dimension-multiplier));
	font-weight: bold;
	color: var(--fallback-static-white);
	color: oklch(var(--lightness-static-white) var(--chroma-static-white) var(--hue-static-white));
	margin-left: var(--spacing-small);
}

.warning-pill {
	background-color: var(--fallback-warning);
	background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
	color: var(--fallback-static-black);
	color: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}

.success-pill {
	background-color: var(--fallback-success);
	background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
}

.danger-pill {
	background-color: var(--fallback-danger);
	background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
}

.notice-card {
	border-left: calc(0.375rem * var(--dimension-multiplier)) solid var(--fallback-primary);
	border-left: calc(0.375rem * var(--dimension-multiplier)) solid oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}

.danger-card {
	border-left-color: var(--fallback-danger);
	border-left-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
}

.success-card {
	border-left-color: var(--fallback-success);
	border-left-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
}

.warning-card {
	border-left-color: var(--fallback-warning);
	border-left-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
}

.target-name {
	font-size: calc(2.5rem * var(--dimension-multiplier));
	text-align: center;
	margin: var(--spacing-large) 0;
	color: var(--fallback-primary);
	color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
	font-weight: 800;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
}

.data-table th, .data-table td {
	padding: var(--spacing-medium);
	border-bottom: 1px solid var(--fallback-border-light);
	border-bottom: 1px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.1);
	text-align: left;
}

.data-table th {
	font-weight: 800;
	text-transform: uppercase;
	font-size: calc(0.75rem * var(--dimension-multiplier));
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.highlighted-row {
	background-color: var(--fallback-primary-transparent);
	background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.1);
}

.highlighted-row td {
	font-weight: bold;
}

.unregistered-row {
	opacity: 0.6;
}

.markdown-container h1, .markdown-container h2, .markdown-container h3 {
	color: var(--fallback-primary);
	color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}

.markdown-container ul {
	padding-left: var(--spacing-large);
}

.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--fallback-overlay);
	background-color: oklch(0 0 0 / 0.6);
	backdrop-filter: blur(4px);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.active-modal {
	display: flex;
}

.modal-dialog {
	background-color: var(--fallback-surface);
	background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
	padding: var(--spacing-large);
	border-radius: var(--border-radius-large);
	max-width: calc(32rem * var(--dimension-multiplier));
	width: 90%;
}

.modal-title {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

.modal-actions {
	display: flex;
	gap: var(--spacing-medium);
	justify-content: flex-end;
	margin-top: var(--spacing-large);
}

.qr-code-container {
	background-color: var(--fallback-static-white);
	background-color: oklch(var(--lightness-static-white) var(--chroma-static-white) var(--hue-static-white));
	padding: var(--spacing-medium);
	border-radius: var(--border-radius-large);
	display: inline-block;
	margin-bottom: var(--spacing-medium);
}

.qr-code-container svg {
	display: block;
	width: calc(14rem * var(--dimension-multiplier));
	height: calc(14rem * var(--dimension-multiplier));
}

.qr-code-container svg path {
	fill: var(--fallback-static-black);
	fill: oklch(var(--lightness-static-black) var(--chroma-static-black) var(--hue-static-black));
}

.monospace-identifier {
	font-family: monospace;
}

.toast-container {
	position: fixed;
	top: var(--spacing-large);
	right: var(--spacing-large);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	z-index: 9999;
	pointer-events: none;
}

.toast-message {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	padding: var(--spacing-medium) var(--spacing-large);
	border-radius: var(--border-radius-large);
	background-color: var(--fallback-surface);
	background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
	color: var(--fallback-text);
	color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
	animation: toast-slide-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	pointer-events: auto;
	border-left: calc(0.375rem * var(--dimension-multiplier)) solid transparent;
}

.error-toast {
	border-left-color: var(--fallback-danger);
	border-left-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
}

.success-toast {
	border-left-color: var(--fallback-success);
	border-left-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
}

.info-toast {
	border-left-color: var(--fallback-primary);
	border-left-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
}

.toast-fade-out {
	animation: toast-fade-out 0.3s ease forwards;
}

@keyframes toast-slide-in {
	from {
		opacity: 0;
		transform: translateX(calc(100% + var(--spacing-large)));
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes toast-fade-out {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(calc(100% + var(--spacing-large)));
	}
}

@media (max-width: 48rem) {
	.toast-container {
		top: auto;
		bottom: var(--spacing-large);
		right: var(--spacing-medium);
		left: var(--spacing-medium);
		align-items: center;
	}
	.toast-message {
		width: 100%;
		box-sizing: border-box;
	}
	@keyframes toast-slide-in {
		from {
			opacity: 0;
			transform: translateY(calc(100% + var(--spacing-large)));
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes toast-fade-out {
		from {
			opacity: 1;
			transform: translateY(0);
		}
		to {
			opacity: 0;
			transform: translateY(calc(100% + var(--spacing-large)));
		}
	}
}