/* ------------------------------
   Auth Pages - Shared Styles
   Depends on variables from styles.css
------------------------------ */
:root {
	/* Fallbacks if styles.css is not loaded for some reason */
	--bg-start: #1f3b5b;
	--bg-end: #2c2e73;
	--text: #eaf2ff;
	--muted: #c9d7ee;
	--accent: #ff7a59;
	--accent-2: #ff9068;
	--surface: rgba(255, 255, 255, 0.08);
	--surface-strong: rgba(255, 255, 255, 0.14);
	--outline: rgba(255, 255, 255, 0.16);
}

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
	color: var(--text);
	background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
		linear-gradient(135deg, var(--bg-start), var(--bg-end));
}

.auth-wrap {
	min-height: 100%;
	display: grid;
	place-items: center;
	padding: 32px 16px;
}

.auth-card {
	width: min(680px, 94%);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	background:
		linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) padding-box,
		linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0) 30%, rgba(255,255,255,.25) 70%, rgba(255,255,255,0)) border-box;
	border: 1px solid transparent;
	border-radius: 18px;
	box-shadow: 0 18px 36px rgba(0,0,0,.35);
	overflow: hidden;
	backdrop-filter: blur(6px);
}

.auth-side {
	padding: 28px 26px;
}

.auth-side.primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #0f172a;
	display: grid;
	align-content: center;
	gap: 8px;
}

.auth-side.primary h2 {
	margin: 0 0 6px 0;
	font-size: clamp(22px, 3.4vw, 28px);
	font-weight: 800;
}

.auth-side.primary p {
	margin: 0;
	font-weight: 600;
}

.auth-title {
	margin: 0 0 2px 0;
	font-size: clamp(22px, 3.6vw, 28px);
	font-weight: 800;
}

.auth-subtitle {
	margin: 0 0 12px 0;
	color: var(--muted);
}

.auth-form {
	display: grid;
	gap: 12px;
}

.field {
	display: grid;
	gap: 6px;
}

.label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

label {
	font-weight: 700;
	color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--outline);
	background: rgba(255,255,255,.06);
	color: var(--text);
	outline: none;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

input::placeholder {
	color: #d7e3ffb3;
}

input:focus {
	border-color: rgba(255,255,255,.45);
	box-shadow: 0 0 0 3px rgba(255,255,255,.12);
	background: rgba(255,255,255,.1);
}

.row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-weight: 800;
	color: white;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 10px 24px rgba(0,0,0,.35);
	cursor: pointer;
	transition: transform .12s ease, filter .2s ease;
}

.btn:hover {
	transform: translateY(-1px);
	filter: drop-shadow(0 6px 22px rgba(255, 144, 104, .25));
}

.muted-link {
	color: var(--muted);
	text-decoration: none;
}

.muted-link:hover {
	text-decoration: underline;
}

.small {
	font-size: 13px;
	color: var(--muted);
}

.vis-toggle {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	user-select: none;
	opacity: .9;
}

.input-wrap {
	position: relative;
}

.error {
	color: #ffd3d3;
	font-weight: 600;
	display: none;
}

/* Responsive */
@media (max-width: 760px) {
	.auth-card {
		grid-template-columns: 1fr;
	}
	.auth-side.primary {
		order: -1;
	}
}