/* Base theme — variables, reset, ambient background, shared form inputs */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
	color-scheme: dark;
	--bg: #0a0a0f;
	--green: #00ff64;
	--text: #e8e8e8;
	--text-dim: rgba(255, 255, 255, 0.35);
	--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
	--sans: 'Inter', -apple-system, sans-serif;
}

[data-theme="light"] {
	color-scheme: light;
	--bg: #f0f2f5;
	--green: #00a843;
	--text: #1a1a2e;
	--text-dim: rgba(0, 0, 0, 0.55);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
	font-family: var(--sans);
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

.hidden { display: none; }

/* Ambient background */
.bg-orb {
	position: fixed;
	border-radius: 50%;
	filter: blur(100px);
	z-index: 0;
	pointer-events: none;
}
.bg-orb-1 {
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(0,255,100,0.12), transparent 70%);
	top: -15%; right: -10%;
	animation: orbFloat1 12s ease-in-out infinite;
}
.bg-orb-2 {
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(0,212,255,0.08), transparent 70%);
	bottom: -15%; left: -10%;
	animation: orbFloat2 15s ease-in-out infinite;
}
@keyframes orbFloat1 {
	0%, 100% { transform: translate(0,0) scale(1); }
	33% { transform: translate(-30px,40px) scale(1.1); }
	66% { transform: translate(20px,-20px) scale(0.95); }
}
@keyframes orbFloat2 {
	0%, 100% { transform: translate(0,0) scale(1); }
	33% { transform: translate(40px,-30px) scale(1.05); }
	66% { transform: translate(-20px,30px) scale(0.9); }
}

.bg-grid {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		linear-gradient(rgba(0,255,100,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,255,100,0.025) 1px, transparent 1px);
	background-size: 60px 60px;
	animation: gridMove 25s linear infinite;
	z-index: 0;
	pointer-events: none;
}
@keyframes gridMove {
	0% { transform: translate(0,0); }
	100% { transform: translate(60px,60px); }
}

.scanlines {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
	z-index: 0;
	pointer-events: none;
}

#particles {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Shared form inputs */
.input-wrap { position: relative; }
.input-icon {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	color: rgba(0,255,100,0.25);
	pointer-events: none;
	transition: color 0.3s;
}
.input-wrap:focus-within .input-icon { color: rgba(0,255,100,0.6); }

.form-group { margin-bottom: 18px; }
.form-group label {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	color: rgba(0,255,100,0.45);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 8px;
	padding-left: 2px;
}
.form-group input {
	width: 100%;
	padding: 14px 16px 14px 44px;
	background: rgba(0,0,0,0.3);
	border: 1px solid rgba(0,255,100,0.1);
	border-radius: 10px;
	color: #e8e8e8;
	font-family: var(--mono);
	font-size: 14px;
	outline: none;
	transition: all 0.3s ease;
}
.form-group input:not(.has-icon) { padding-left: 16px; }
.form-group input:focus {
	border-color: rgba(0,255,100,0.35);
	background: rgba(0,0,0,0.4);
	box-shadow: 0 0 0 3px rgba(0,255,100,0.06), 0 0 20px rgba(0,255,100,0.05);
}
.form-group input::placeholder { color: rgba(255,255,255,0.15); }

[data-theme="light"] .input-icon { color: rgba(0, 168, 67, 0.35); }
[data-theme="light"] .input-wrap:focus-within .input-icon { color: rgba(0, 168, 67, 0.7); }
[data-theme="light"] .form-group label { color: rgba(0, 120, 60, 0.55); }
[data-theme="light"] .form-group input {
	background: rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 80, 40, 0.12);
	color: #1a1a2e;
}
[data-theme="light"] .form-group input:focus {
	border-color: rgba(0, 168, 67, 0.4);
	background: rgba(0, 0, 0, 0.04);
	box-shadow: 0 0 0 3px rgba(0, 168, 67, 0.06);
}
[data-theme="light"] .form-group input::placeholder { color: rgba(0, 0, 0, 0.3); }

/* Footer meta */
.footer-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px 24px 22px;
	font-family: var(--mono);
	font-size: 10px;
	color: rgba(255,255,255,0.15);
	letter-spacing: 1px;
}
.footer-sep {
	width: 3px; height: 3px;
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
}

/* Shared keyframes used by login.css */
@keyframes statusPulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0,255,100,0.6); }
	50% { opacity: 0.5; box-shadow: 0 0 4px rgba(0,255,100,0.3); }
}
@keyframes fadeSlideIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Light theme — ambient layers */
[data-theme="light"] .bg-orb-1 { background: radial-gradient(circle, rgba(0,168,67,0.1), transparent 70%); }
[data-theme="light"] .bg-orb-2 { background: radial-gradient(circle, rgba(0,150,200,0.06), transparent 70%); }
[data-theme="light"] .bg-grid {
	background:
		linear-gradient(rgba(0,80,40,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,80,40,0.04) 1px, transparent 1px);
	background-size: 60px 60px;
}
[data-theme="light"] .scanlines {
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.01) 2px, rgba(0,0,0,0.01) 4px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bg-orb,
	.bg-grid,
	.scanlines { animation: none !important; }
}