/* Platform theme overrides loaded after Tailwind CDN. */
:root {
	color-scheme: dark;
}

body {
	background: #020617;
}

::selection {
	background: rgba(16, 185, 129, 0.35);
	color: #ecfdf5;
}

.noise {
	position: absolute;
	inset: 0;
	opacity: 0.08;
	background-image: radial-gradient(rgba(255, 255, 255, 0.4) 0.6px, transparent 0.6px);
	background-size: 4px 4px;
}

.grid-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(16, 185, 129, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(16, 185, 129, 0.08) 1px, transparent 1px);
	background-size: 52px 52px;
	opacity: 0.35;
	mask-image: radial-gradient(circle at center, black 38%, transparent 95%);
}

/* Corner bracket frame — four terminal-style targeting corners */
.corner-frame {
	position: fixed;
	inset: 1.5rem;
	pointer-events: none;
}

.corner-frame .c {
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	border-color: rgba(52, 211, 153, 0.55);
	border-style: solid;
}

.corner-frame .c-tl { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.corner-frame .c-tr { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.corner-frame .c-bl { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.corner-frame .c-br { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

/* Hairline glow across the top of the viewport */
.top-edge-glow {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(52, 211, 153, 0.55) 30%, rgba(16, 185, 129, 0.9) 50%, rgba(52, 211, 153, 0.55) 70%, transparent 100%);
}

.lab-panel {
	border: 1px solid rgba(52, 211, 153, 0.28);
	background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.9));
	box-shadow: 0 20px 50px rgba(4, 120, 87, 0.28);
	backdrop-filter: blur(10px);
	border-radius: 1rem;
}

.panel-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(100, 116, 139, 0.45);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a7f3d0;
	background: rgba(15, 23, 42, 0.75);
}

.panel-dots {
	display: flex;
	gap: 0.3rem;
}

.panel-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 9999px;
	background: rgba(148, 163, 184, 0.55);
}

.panel-dot:nth-child(1) {
	background: rgba(248, 113, 113, 0.9);
}

.panel-dot:nth-child(2) {
	background: rgba(250, 204, 21, 0.9);
}

.panel-dot:nth-child(3) {
	background: rgba(74, 222, 128, 0.9);
}

/* Button variants */
.btn-accent {
	border-color: rgba(52, 211, 153, 0.4);
	background: rgba(16, 185, 129, 0.15);
	color: #a7f3d0;
	transition: all 0.18s ease;
}
.btn-accent:hover {
	background: rgba(16, 185, 129, 0.28);
	border-color: rgba(52, 211, 153, 0.75);
	color: #d1fae5;
	box-shadow: 0 0 18px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
	transform: translateY(-1.5px);
}
.btn-accent:active {
	transform: translateY(0);
	box-shadow: none;
}
.btn-accent:disabled,
.btn-accent[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.btn-default {
	border-color: rgba(100, 116, 139, 0.55);
	background: rgba(15, 23, 42, 0.85);
	color: #e2e8f0;
	transition: all 0.18s ease;
}
.btn-default:hover {
	border-color: rgba(52, 211, 153, 0.55);
	color: #a7f3d0;
	box-shadow: 0 0 14px rgba(16, 185, 129, 0.18), 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: translateY(-1.5px);
}
.btn-default:active {
	transform: translateY(0);
	box-shadow: none;
}
.btn-default:disabled,
.btn-default[disabled] {
	opacity: 0.4;
	pointer-events: none;
}



input,
select,
textarea {
	background-color: rgba(15, 23, 42, 0.9);
	border-color: rgba(100, 116, 139, 0.7);
	color: #f8fafc;
}

input::placeholder,
textarea::placeholder {
	color: #94a3b8;
}