:root {
	color-scheme: light;
	--page-background: radial-gradient(circle at 14% 8%, rgba(74, 144, 226, 0.2), transparent 32%), radial-gradient(circle at 88% 90%, rgba(165, 110, 255, 0.13), transparent 34%), linear-gradient(145deg, #eef5ff 0%, #f8fbff 52%, #f4efff 100%);
	--container-background: rgba(255, 255, 255, 0.74);
	--container-border: rgba(108, 143, 185, 0.3);
	--container-shadow: 0 30px 80px rgba(45, 83, 126, 0.18), 0 8px 24px rgba(45, 83, 126, 0.1);
	--top-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
	--surface-background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.82));
	--header-background: linear-gradient(135deg, rgba(250, 253, 255, 0.98), rgba(235, 244, 255, 0.92));
	--surface-border: rgba(100, 139, 184, 0.24);
	--surface-shadow: 0 14px 34px rgba(63, 99, 142, 0.12);
	--surface-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--icon-shadow: 0 8px 22px rgba(55, 118, 190, 0.24);
	--heading-color: #172b46;
	--section-heading: #235b98;
	--text-primary: #1c2d42;
	--text-secondary: #52677e;
	--text-muted: #6b7d91;
	--accent: #347fc4;
	--control-background: rgba(255, 255, 255, 0.84);
	--control-hover: #ffffff;
	--control-border: rgba(75, 123, 175, 0.3);
	--control-shadow: inset 0 1px 0 #ffffff, 0 5px 14px rgba(50, 97, 150, 0.1);
	--control-hover-shadow: 0 8px 18px rgba(50, 97, 150, 0.16);
	--button-text: #ffffff;
	--button-background: linear-gradient(135deg, #347fc4, #5f75d9 56%, #8a65d2);
	--button-border: rgba(54, 100, 176, 0.32);
	--button-shadow: 0 10px 22px rgba(62, 101, 181, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	--button-hover-shadow: 0 14px 28px rgba(62, 101, 181, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.34);
	--input-background: rgba(248, 251, 255, 0.92);
	--input-border: rgba(89, 126, 169, 0.3);
	--input-shadow: inset 0 2px 5px rgba(56, 91, 130, 0.08);
	--input-focus-shadow: 0 0 0 4px rgba(52, 127, 196, 0.13), inset 0 2px 5px rgba(56, 91, 130, 0.06);
	--placeholder-color: #7e8fa2;
	--preview-shadow: 0 16px 34px rgba(44, 78, 119, 0.2);
	--note-background: rgba(225, 240, 255, 0.72);
	--note-border: rgba(72, 132, 190, 0.22);
	--note-text: #2e5f8f;
	--error-color: #b4233f;
	--focus-ring: rgba(52, 127, 196, 0.72);
}

:root[data-theme="dark"],
body.dark {
	color-scheme: dark;
	--page-background: radial-gradient(circle at 12% 8%, rgba(42, 117, 190, 0.22), transparent 31%), radial-gradient(circle at 88% 86%, rgba(139, 85, 190, 0.16), transparent 34%), linear-gradient(145deg, #080d15 0%, #0b111b 48%, #0d101b 100%);
	--container-background: rgba(12, 18, 29, 0.82);
	--container-border: rgba(125, 158, 195, 0.2);
	--container-shadow: 0 34px 90px rgba(0, 0, 0, 0.54), 0 12px 34px rgba(0, 0, 0, 0.35), 0 0 46px rgba(55, 122, 185, 0.08);
	--top-highlight: linear-gradient(90deg, transparent, rgba(144, 202, 249, 0.42), rgba(206, 147, 216, 0.28), transparent);
	--surface-background: linear-gradient(145deg, rgba(25, 35, 50, 0.96), rgba(15, 23, 36, 0.96));
	--header-background: linear-gradient(135deg, rgba(28, 40, 58, 0.98), rgba(16, 25, 39, 0.98));
	--surface-border: rgba(121, 157, 194, 0.2);
	--surface-shadow: 0 18px 38px rgba(0, 0, 0, 0.32), 0 5px 14px rgba(0, 0, 0, 0.24);
	--surface-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
	--icon-shadow: 0 9px 24px rgba(36, 119, 192, 0.28), 0 0 0 1px rgba(144, 202, 249, 0.12);
	--heading-color: #edf6ff;
	--section-heading: #90caf9;
	--text-primary: #e8f0f8;
	--text-secondary: #a9b8c9;
	--text-muted: #8294a8;
	--accent: #90caf9;
	--control-background: linear-gradient(145deg, rgba(30, 43, 61, 0.98), rgba(21, 31, 46, 0.98));
	--control-hover: linear-gradient(145deg, rgba(38, 54, 75, 0.98), rgba(24, 37, 55, 0.98));
	--control-border: rgba(133, 170, 207, 0.24);
	--control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 7px 16px rgba(0, 0, 0, 0.24);
	--control-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), 0 0 16px rgba(144, 202, 249, 0.08);
	--button-text: #f7fbff;
	--button-background: linear-gradient(135deg, #2269a7, #536cce 56%, #8054aa);
	--button-border: rgba(144, 202, 249, 0.22);
	--button-shadow: 0 12px 26px rgba(0, 0, 0, 0.34), 0 4px 16px rgba(70, 118, 206, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	--button-hover-shadow: 0 16px 32px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(82, 129, 219, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	--input-background: rgba(8, 14, 23, 0.82);
	--input-border: rgba(118, 150, 184, 0.24);
	--input-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.035);
	--input-focus-shadow: 0 0 0 4px rgba(144, 202, 249, 0.11), 0 0 20px rgba(97, 146, 212, 0.1), inset 0 3px 9px rgba(0, 0, 0, 0.28);
	--placeholder-color: #718397;
	--preview-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(144, 202, 249, 0.1);
	--note-background: linear-gradient(135deg, rgba(24, 54, 78, 0.54), rgba(45, 35, 72, 0.42));
	--note-border: rgba(126, 176, 219, 0.2);
	--note-text: #b8d8f4;
	--error-color: #ff9aaa;
	--focus-ring: rgba(144, 202, 249, 0.82);
}

html {
	background: #eef5ff;
	scrollbar-gutter: stable;
}

html[data-theme="dark"] {
	background: #080d15;
}

::selection {
	color: #ffffff;
	background: rgba(84, 127, 207, 0.62);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--accent) rgba(17, 23, 34, 0.72);
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
	background: rgba(17, 23, 34, 0.72);
}

*::-webkit-scrollbar-thumb {
	min-width: 36px;
	min-height: 36px;
	border: 2px solid rgba(17, 23, 34, 0.72);
	border-radius: 999px;
	background: linear-gradient(180deg, #90caf9, #ce93d8);
	background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}