/* Simplified Auth Theme */
:root {
	--bg:#f8f9fa; --surface:#fff; --border:#e1e5e9; --text:#1a1d23; --text-soft:#6c757d;
	--primary:#007bff; --primary-hover:#0056b3; --danger:#dc3545;
	--shadow:0 4px 12px rgba(0,0,0,.1); --radius:8px; --ease:300ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
	--bg:#0d1117; --surface:#161b22; --border:#30363d; --text:#f0f6fc; --text-soft:#8b949e;
	--primary:#58a6ff; --primary-hover:#1f6feb; --shadow:0 4px 12px rgba(0,0,0,.3);
}

* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { 
	font:16px system-ui,sans-serif; background:var(--bg); color:var(--text);
	display:flex; align-items:center; justify-content:center; 
	padding:clamp(1rem,3vw,2rem); transition:all var(--ease);
}

.container { width:100%; max-width:min(90vw,480px); }
.auth-panel { 
	background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
	padding:clamp(2rem,5vw,3rem); box-shadow:var(--shadow); transition:all var(--ease);
}

.theme-toggle { text-align:right; margin-bottom:1.5rem; }
.theme-toggle button { 
	background:none; border:1px solid var(--border); border-radius:var(--radius);
	padding:.75rem; cursor:pointer; font-size:1.4rem; transition:all var(--ease);
}
.theme-toggle button:hover { background:var(--bg); transform:scale(1.1); }

.auth-title { margin:0 0 2rem; font-size:clamp(1.5rem,4vw,2rem); font-weight:600; text-align:center; }
.auth-form { display:flex; flex-direction:column; gap:1.5rem; }

.field { display:flex; flex-direction:column; gap:.5rem; }
.field label { font-size:1rem; font-weight:500; color:var(--text-soft); }
.field input { 
	padding:1rem; border:1px solid var(--border); border-radius:var(--radius);
	background:var(--surface); color:var(--text); font:inherit; font-size:1rem;
	transition:all var(--ease);
}
.field input:focus { 
	outline:none; border-color:var(--primary); 
	box-shadow:0 0 0 3px rgba(0,123,255,.2); transform:translateY(-2px);
}
.field input:invalid { border-color:var(--danger); }

.password-wrapper { position:relative; }
.password-wrapper input { padding-right:3.5rem; width:100%; }
.password-toggle { 
	position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
	background:none; border:none; cursor:pointer; padding:.5rem; 
	border-radius:var(--radius); font-size:1.2rem; transition:all var(--ease);
	display:flex; align-items:center; justify-content:center;
}
.password-toggle svg {
	color:var(--text-soft); transition:color var(--ease);
}
.password-toggle:hover svg {
	color:var(--text);
}
.password-toggle:hover { background:var(--bg); transform:translateY(-50%) scale(1.1); }

.checkbox-field { flex-direction:row; align-items:center; gap:.75rem; }
.checkbox-label { display:flex; align-items:center; gap:.75rem; cursor:pointer; font-size:1rem; }
.checkbox-label input[type="checkbox"] { position:absolute; opacity:0; }
.checkmark { 
	width:1.25rem; height:1.25rem; border:2px solid var(--border); 
	border-radius:3px; position:relative; transition:all var(--ease);
}
.checkbox-label input:checked + .checkmark { 
	background:var(--primary); border-color:var(--primary); transform:scale(1.1);
}
.checkbox-label input:checked + .checkmark::after { 
	content:'✓'; position:absolute; top:50%; left:50%; 
	transform:translate(-50%,-50%); color:white; font-size:.9rem; font-weight:bold;
}

.error-msg { display:none; font-size:.9rem; color:var(--danger); margin-top:.5rem; }

.btn { 
	cursor:pointer; font:inherit; border:none; padding:1rem 2rem; 
	border-radius:var(--radius); font-weight:600; font-size:1rem; transition:all var(--ease);
}
.btn.primary { background:var(--primary); color:white; }
.btn.primary:hover { 
	background:var(--primary-hover); transform:translateY(-3px); 
	box-shadow:0 8px 20px rgba(0,123,255,.3);
}
.btn.primary:active { transform:translateY(-1px); }

/* Responsive Design */
@media (max-width:768px) {
	body { padding:1rem; }
	.auth-panel { padding:2rem 1.5rem; }
	.auth-title { font-size:1.75rem; }
}

@media (max-width:480px) {
	body { padding:.75rem; }
	.auth-panel { padding:1.5rem 1rem; }
	.field input, .btn { padding:.875rem; }
	.theme-toggle button { padding:.625rem; font-size:1.2rem; }
}

@media (max-width:320px) {
	.container { max-width:100%; }
	.auth-panel { padding:1.25rem .75rem; }
	.field input, .btn { padding:.75rem; font-size:.9rem; }
}