/* Base */
:root{
	--bg:#f2f7fb;
	--card:#ffffff;
	--text:#0a2540;
	--muted:#5b6b7a;
	--blue:#0d63c9;
	--blue-600:#0a55ab;
	--border:#d8e2ec;
	--focus:#99c2f7;
	--shadow:0 10px 30px rgba(16,37,63,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	color:var(--text);
	background:var(--bg);
}

/* Header / Brand */
.site-header{
	display:flex;
	align-items:center;
	padding:20px 24px;
}
.site-header--nav{
	justify-content:space-between;
	background:#ffffffd9;
	backdrop-filter:saturate(1.2) blur(8px);
	border-bottom:1px solid var(--border);
}
.brand img{
	height:40px;
	width:auto;
	display:block;
}
.top-nav{display:flex;gap:18px;flex-wrap:wrap}
.top-link{
	color:var(--text);
	text-decoration:none;
	font-size:14px;
	opacity:.85;
}
.top-link:hover{text-decoration:underline}
.top-actions{display:flex;gap:10px}
.icon-btn{
	border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--blue)
}

/* Auth layout */
.auth-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	min-height:calc(100% - 80px);
}
.page-with-hero .auth-wrapper{min-height:auto}
.auth-card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
	box-shadow:var(--shadow);
	padding:28px;
	max-width:520px;
	width:100%;
}
.auth-title{
	text-align:center;
	font-size:32px;
	line-height:1.2;
	margin:8px 0 24px;
	font-weight:700;
}

.error-alert{
	background:#fde8e8;
	color:#7a1212;
	border:1px solid #f4bebe;
	border-radius:8px;
	padding:10px 12px;
	font-size:14px;
	margin:0 0 12px;
}

/* Form */
.auth-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:14px;color:var(--muted)}
.field-input{
	display:flex;
	align-items:center;
	gap:8px;
	border:2px solid var(--border);
	border-radius:8px;
	padding:10px 12px;
	background:#f7fbff;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus-within{
	border-color:var(--blue);
	box-shadow:0 0 0 3px var(--focus);
	background:#fff;
}
.field-input input{
	flex:1;
	border:none;
	outline:none;
	font-size:16px;
	background:transparent;
	color:var(--text);
	padding:4px 0;
}
.field-icon{
	user-select:none;
	font-size:18px;
	background:transparent;
	border:none;
	cursor:pointer;
	color:var(--muted);
}
.btn-eye{padding:0}

/* Captcha mimic */
.captcha{
	border:1px solid var(--border);
	border-radius:8px;
	padding:12px;
	background:#fbfdff;
}
.captcha-box{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	user-select:none;
}
.captcha-box input{display:none}
.checkmark{
	height:22px;width:22px;
	border:2px solid var(--border);
	border-radius:6px;
	background:#fff;
	display:inline-block;
	position:relative;
}
.captcha-box input:checked + .checkmark{
	border-color:#1a9b35;
	background:#e9f8ed;
}
.captcha-box input:checked + .checkmark::after{
	content:"";
	position:absolute;
	left:5px;top:0px;
	width:6px;height:12px;
	border:solid #1a9b35;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.captcha-text{font-size:15px}
.captcha-note{
	text-align:right;
	color:var(--muted);
	font-size:12px;
	margin-top:6px;
}

/* Buttons / Links */
.btn-primary{
	background:var(--blue);
	color:#fff;
	border:none;
	border-radius:8px;
	font-weight:600;
	font-size:18px;
	padding:14px 16px;
	cursor:pointer;
	transition:background .2s ease, transform .02s ease;
}
.btn-primary:hover{background:var(--blue-600)}
.btn-primary:active{transform:translateY(1px)}
.modal-primary{width:100%;margin-top:14px}

.auth-help{
	text-align:center;
	color:var(--muted);
	font-size:14px;
	margin:4px 0 0;
}
.link{
	color:var(--blue);
	text-decoration:none;
}
.link:hover{text-decoration:underline}

/* Hero band and modal */
.hero-band{
	height:140px;
	background:var(--blue);
	margin-top:0;
}
.backdrop{
	position:fixed;inset:0;
	background:rgba(0,0,0,.35);
}
.modal-center{
	position:fixed;inset:0;
	display:flex;align-items:center;justify-content:center;
	padding:20px;
}
.modal-card{
	background:#fff;
	border-radius:8px;
	border:1px solid var(--border);
	box-shadow:var(--shadow);
	max-width:540px;width:100%;
	padding:20px;
}
.modal-title{
	color:var(--blue);
	font-size:24px;
	margin:4px 0 8px;
}
.tab-divider{
	height:2px;background:var(--border);
	box-shadow:inset 0 -2px 0 #ffffff;
	margin:8px 0 12px;
}
.modal-desc{
	color:var(--muted);
	margin:0 0 12px;
}

/* Two-column row for CC form */
.form-row-2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

/* Responsive */
@media (max-width: 640px){
	.site-header{padding:16px}
	.brand img{height:32px}
	.site-header--nav{gap:12px}
	.top-nav{display:none}
	.form-row-2{grid-template-columns:1fr}
	.auth-card{
		padding:20px;
		border-radius:10px;
	}
	.auth-title{font-size:26px;margin-bottom:18px}
	.btn-primary{font-size:16px;padding:12px 14px}
}