:root {
	--uc-color-000: #000;
	--uc-color-0000: #0000;
	--uc-color-000000: #000000;
	--uc-color-0a002b: #0a002b;
	--uc-color-0c0d18: #0C0D18;
	--uc-color-111827: #111827;
	--uc-color-121325: #121325;
	--uc-color-15803d: #15803d;
	--uc-color-16a34a: #16a34a;
	--uc-color-1b3c53: #1B3C53;
	--uc-color-1c1f2c: #1C1F2C;
	--uc-color-1d4ed8: #1d4ed8;
	--uc-color-1e7e34: #1e7e34;
	--uc-color-1f2937: #1F2937;
	--uc-color-234c6a: #234C6A;
	--uc-color-2563eb: #2563EB;
	--uc-color-28a745: #28a745;
	--uc-color-2bd1d3: #2bd1d3;
	--uc-color-2e004a: #2e004a;
	--uc-color-3a237d: #3A237D;
	--uc-color-3b3b5b: #3b3b5b;
	--uc-color-3c3c47: #3C3C47;
	--uc-color-3cdfbd: #3CDFBD;
	--uc-color-456882: #456882;
	--uc-color-54a3e8: #54a3e8;
	--uc-color-6037ba: #6037BA;
	--uc-color-606077: #606077;
	--uc-color-635050: #635050;
	--uc-color-695cb5: #695cb5;
	--uc-color-8b8ea5: #8B8EA5;
	--uc-color-b6b7bb: #B6B7BB;
	--uc-color-b91c1c: #b91c1c;
	--uc-color-bbf7d0: #bbf7d0;
	--uc-color-c0c2d4: #C0C2D4;
	--uc-color-cea8a8: #cea8a8;
	--uc-color-e14329: #e14329;
	--uc-color-e3e3e3: #E3E3E3;
	--uc-color-e5e7eb: #e5e7eb;
	--uc-color-e5e7f0: #E5E7F0;
	--uc-color-ea4700: #EA4700;
	--uc-color-eab308: #eab308;
	--uc-color-f9f9fb: #F9F9FB;
	--uc-color-f9fafb: #f9fafb;
	--uc-color-fecaca: #fecaca;
	--uc-color-fff0: #fff0;
	--uc-color-7fffd4: #7fffd4;
	/* aquamarine */
}

html {
	font-size: 16px;
	/* Or any desired base size in pixels */
}



html,
body {
	height: 100%;
}

body {
	overflow: hidden;
	/* main content scrolls in <main>, prevents page scroll */
}

/*
	Mobile viewport stability:
	- 100vh is often unstable on iOS/Android due to dynamic browser UI.
	- Prefer 100dvh when available, and fall back to a JS-updated --uc-vh.
*/
:root {
	--uc-vh: 1vh;
}

.uc-screen {
	height: 100vh;
	height: 100dvh;
	height: calc(var(--uc-vh, 1vh) * 100);
}

/* Core styles */
[v-cloak] {
	display: none
}

:root,
:host {
	--fa-style-family-classic: "Font Awesome 6 Pro";
	--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
}

@font-face {
	font-family: "Font Awesome 6 Pro";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("/static/assets/fonts/fa-regular-400.woff2") format("woff2"),
		url("/static/assets/fonts/fa-regular-400.woff") format("woff"),
		url("/static/assets/fonts/fa-regular-400.ttf") format("truetype");
}

body {
	font-family: 'Roboto', system-ui, sans-serif, "Font Awesome 6 Pro";
	font-size: medium;
}

/* Glass morphism */
.glass {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 0 10px var(--uc-color-3b3b5b)1c;
}

html.dark .glass {
	background: rgba(15, 23, 42, 0.96);

}

html.dark .glass,
html.dark .panel {
	background: var(--uc-color-1c1f2c);
}

nav>div>button {
	width: 38px;
}

nav.glass {
	background: initial !important;
	box-shadow: initial !important;
	border: initial !important;
}

/* Panel helper */
.panel {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(15, 23, 42, 0.06);
}

.popup {
	background-color: rgba(52, 56, 74, 0.73);
}

html.dark .panel {
	background: var(--uc-color-1c1f2c);
}

html.dark body {
	background-color: var(--uc-color-000);
	color: var(--uc-color-f9fafb);
}

/* Loader */
.loader {
	border: 3px solid rgba(0, 0, 0, 0.05);
	border-top: 3px solid var(--uc-color-1d4ed8);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background: rgba(37, 99, 235, 0.4);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(37, 99, 235, 0.7);
}

/* Layout helpers */
.nav-idx {
	z-index: 40;
}

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

.modal-idx {
	z-index: 60;
}

.b-vote {
	width: 50px;
}

.p-2 {
	padding: 0.3rem;
}

.minibar-vertical {
	padding-top: 8px;
}

.minibar-vertical .active {
	border-right: 2px solid #2563eb !important;
	color: #2563eb !important;
}

.bg-shaded {
	background-color: rgba(15, 23, 42, 0.80);
}

html.dark .bg-sidebar {
	background-color: var(--uc-color-1c1f2c);
}

html.dark .bg-blog-header {
	background: radial-gradient(circle at center, var(--uc-color-2e004a), var(--uc-color-0a002b));
}

/* Thread/post styling */
.thread-post {
	border-left: 3px solid rgba(59, 130, 246, 0.3);
	transition: border-color 0.2s;
}

.thread-post:hover {
	border-left-color: rgba(59, 130, 246, 0.6);
}

html.dark .thread-post {
	border-left-color: rgba(129, 140, 248, 0.8);
}

/* User avatar */
.user-avatar {
	background: radial-gradient(circle at 70% 30%, var(--uc-color-28a745), var(--uc-color-1e7e34));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--uc-color-e5e7eb);
	font-weight: 600;
	text-transform: uppercase;
}

/* Messages */
.error-message {
	background: rgba(239, 68, 68, 0.05);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: var(--uc-color-b91c1c);
}

.success-message {
	background: rgba(22, 163, 74, 0.05);
	border: 1px solid rgba(22, 163, 74, 0.3);
	color: var(--uc-color-15803d);
}

html.dark .error-message {
	background: rgba(248, 113, 113, 0.1);
	border-color: rgba(248, 113, 113, 0.7);
	color: var(--uc-color-fecaca);
}

html.dark .success-message {
	background: rgba(22, 163, 74, 0.15);
	border-color: rgba(74, 222, 128, 0.7);
	color: var(--uc-color-bbf7d0);
}

html.dark .bg-logo {
	background-color: var(--uc-color-e14329);
}

pre[class*="language-"] {
	background-color: var(--uc-color-121325);
	padding: 0.5rem;
	border-radius: 6px;
	overflow-x: auto;
	margin: 1rem 0;
	position: relative;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px var(--uc-color-3b3b5b);
	-moz-box-shadow: 0 0 10px var(--uc-color-3b3b5b);
	box-shadow: 0 0 10px var(--uc-color-3b3b5b);
}

.docs-prose {
	min-width: 0;
}

.docs-prose pre,
#docs-content.docs-prose pre {
	display: block;
	max-width: 100%;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	white-space: pre !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
}

.docs-prose pre.uc-scroll-pre,
#docs-content.docs-prose pre.uc-scroll-pre {
	touch-action: pan-x;
}

.docs-prose pre code,
#docs-content.docs-prose pre code {
	display: block;
	width: max-content;
	min-width: 100%;
	max-width: none;
	white-space: pre !important;
	word-break: normal !important;
	word-wrap: normal !important;
	overflow-wrap: normal !important;
}

/* Tab active state */
.tab-active {
	border-bottom: 2px solid var(--uc-color-1d4ed8) !important;
}

/* AI gradient text */
.text-ai-gradient {
	background: linear-gradient(90deg, var(--uc-color-cea8a8), var(--uc-color-695cb5), var(--uc-color-54a3e8));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Dark mode borders */
html.dark *,
html.dark ::after,
html.dark ::before {
	border-color: var(--uc-color-1c1f2c) !important;
}

html.dark .tab-active {
	border-color: var(--uc-color-7fffd4) !important;
}

html.dark .focus\:ring:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--uc-color-635050);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--uc-color-fff0);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
		var(--tw-shadow, 0 0 var(--uc-color-0000));
}

/* Close button */
.close-btn {
	font-size: x-large;
}