:root{
	--bg-1: #f6fbfd;
	--bg-2: #ffffff;
	--aqua: #00c6d8;
	--aqua-2: #2adfe6;
	--teal: #028f95;
	--muted: #6b7885;
	--card-shadow: 0 12px 40px rgba(2, 28, 36, 0.08);
	--glass: rgba(255,255,255,0.7);
	--radius: 14px;
	--focus: 0 6px 24px rgba(0, 198, 216, 0.12);
	--max-width: 1100px;

	/* additional semantic colors */
	--success: #0a7a27;
	--danger: #b00020;
	--warning: #ff8f1f;
	--notice-bg: #fff8e6;
	--notice-border: rgba(255,145,0,0.12);
	--shadow-strong: 0 18px 60px rgba(2,28,36,0.12);
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	background: linear-gradient(135deg, var(--bg-1) 0%, #f0fbff 50%, var(--bg-2) 100%);
	color: #07323a;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	line-height:1.45;
}

/* Header */
.site-header{
	background: #ffffff;
	border-bottom: 1px solid rgba(6,22,28,0.04);
	padding: 14px 20px;
	position:sticky;
	top:0;
	z-index:20;
}
.header-inner{
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.brand{
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:12px;
}
.brand-logo{
	font-weight:800;
	font-size:20px;
	letter-spacing:0.2px;
	background: linear-gradient(90deg, var(--aqua), #59e6ef);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.header-nav{opacity:0; height:0; pointer-events:none}

/* Page layout */
.page-main{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:28px 16px;
}
.auth-wrap{
	width:100%;
	max-width:var(--max-width);
	display:grid;
	grid-template-columns: 1fr;
	gap:20px;
	align-items:center;
	justify-items:center;
	padding: 12px;
}

/* Larger screens: two-column layout (form + illustration) */
@media only screen and (min-width:980px){
	.auth-wrap{
		grid-template-columns: 1fr 420px;
		align-items:start;
		justify-items:stretch;
		gap:28px;
	}
}

/* Card */
.auth-card{
	width:100%;
	max-width:560px;
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.995));
	border-radius: var(--radius);
	padding:22px;
	box-shadow: var(--card-shadow);
	border: 1px solid rgba(2,28,36,0.03);
	display:flex;
	flex-direction:column;
	gap:10px;
	transition: transform .12s ease, box-shadow .12s ease;
}
.auth-card:hover{
	transform: translateY(-3px);
	box-shadow: var(--shadow-strong);
}

/* Title area */
.auth-title{
	font-size:20px;
	font-weight:700;
	color:#01363c;
	margin-bottom:2px;
}

.auth-sub{
	color:var(--muted);
	font-size:13px;
	margin-bottom:8px;
}

/* Form layout */
.login-form{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:4px;
}

.field{
	display:block;
}

.field-label{
	display:block;
	font-size:13px;
	color:#065a5f;
	font-weight:600;
	margin-bottom:8px;
}

.field input, .field textarea, .field select{
	width:100%;
	padding:12px 14px;
	font-size:15px;
	border-radius:10px;
	border:1px solid rgba(3,47,52,0.06);
	background: linear-gradient(180deg, #ffffff, #fbfdfe);
	transition: box-shadow .16s ease, border-color .12s ease, transform .06s ease;
	outline:none;
	box-shadow: 0 2px 10px rgba(2,28,36,0.03);
	color: #03363a;
}
.field input::placeholder{ color:#aab6bd; font-weight:500; }

.field input:focus, .field textarea:focus, .field select:focus{
	border-color: var(--aqua);
	box-shadow: var(--focus);
	transform: translateY(-1px);
}

/* field error display (inline under input) */
.field-error, .oauth2-field-error{
	margin-top:8px;
	color: var(--danger);
	font-size: 0.92em;
	font-weight:700;
}

/* Actions (replaces previous inline styles) */
.form-actions{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:8px;
}
.form-actions .primary-btn{
	flex: 1 1 auto;
}
.form-actions .tertiary-btn{
	white-space:nowrap;
}

.signup-link a{
	color: var(--teal);
	text-decoration:none;
	font-weight:700;
}

/* Reset panel */
.reset-panel, #passwordResetPanel{
	margin-top:12px;
	padding:14px;
	border-radius:10px;
	background: linear-gradient(180deg, #f8fdff, #ffffff);
	border: 1px solid rgba(226,238,251,0.9);
}
.reset-title{
	font-size:16px;
	margin-bottom:6px;
	color:#02373a;
	font-weight:700;
}
.reset-sub{
	font-size:14px;
	color:var(--muted);
	margin-bottom:12px;
}
.small-note{ font-size:0.95rem; color:var(--muted); margin-top:6px; }

/* Rows inside panels */
.row{ margin-bottom:10px; }

/* Reset actions (replaces inline styles) */
.reset-actions{
	display:flex;
	align-items:center;
	gap:10px;
	margin-top:8px;
}

/* Buttons (primary / secondary / tertiary) */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:0;
	padding:11px 14px;
	border-radius:10px;
	font-weight:700;
	cursor:pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .08s;
}
.btn:active{ transform: translateY(1px); }

/* Primary */
.primary-btn{
	background: linear-gradient(90deg, var(--aqua), var(--aqua-2));
	color:#003238;
	box-shadow: 0 10px 30px rgba(3,47,52,0.08);
	font-size:15px;
	width:100%;
}
.primary-btn:hover{
	filter:brightness(.98);
	transform: translateY(-2px);
}

.primary-btn:disabled{
	opacity:0.6;
	cursor:not-allowed;
	transform:none;
	box-shadow:none;
}

/* Secondary & tertiary */
.secondary-btn{
	background: #f3f6f7;
	color:#214c4f;
	border: 1px solid rgba(2,28,36,0.04);
	padding:10px 12px;
}
.tertiary-btn{
	background: transparent;
	color:#0b5254;
	border: 1px solid rgba(3,47,52,0.06);
	padding:10px 12px;
	border-radius:10px;
}
.btn:focus{ outline: none; box-shadow: var(--focus); }

/* specific buttons used by JS */
#sendResetCodeBtn, #resendCodeBtn, #confirmResetBtn {
	display: inline-block;
}

/* Helper classes for statuses */
.muted{
	color:var(--muted);
	font-size:0.95rem;
}

.error-text{
	color: var(--danger);
	font-weight:700;
	margin-top:8px;
}

.success-text{
	color: var(--success);
	font-weight:700;
	margin-top:8px;
}

.hidden{
	display:none !important;
}

/* Reset backend friendly message (single well-styled block) */
#resetBackendMessage{
	/* default styling (overridden by JS for severity) */
	margin-top:12px;
	padding:12px 14px;
	border-radius:10px;
	background: var(--notice-bg);
	border: 1px solid var(--notice-border);
	font-size:0.98em;
	color: #083235;
	box-shadow: 0 8px 30px rgba(2,28,36,0.05);
	display:block;
}

/* small status text inside message (JS places into sub) */
#resetBackendMessage .rbm-sub{
	font-size:0.88em;
	color: rgba(2,28,36,0.6);
	margin-top:6px;
}

/* Illustration / decorative panel */
.auth-illustration{ display:none; }
@media only screen and (min-width:980px){
	.auth-illustration{ display:block; align-self:stretch; }
	.illustration-card{
		height:100%;
		border-radius: var(--radius);
		padding:28px;
		background: linear-gradient(180deg, rgba(0,198,216,0.06), rgba(89,230,239,0.03));
		border: 1px solid rgba(2,28,36,0.03);
		box-shadow: 0 10px 40px rgba(2,28,36,0.04);
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
		gap:12px;
	}
	.illustration-card h3{
		font-size:20px;
		color:#04383a;
		margin-bottom:4px;
	}
	.illustration-card p{
		color:var(--muted);
		font-size:14px;
		line-height:1.4;
	}
	/* images/icons inside illustration */
	.illustration-card img{
		max-width:100%;
		height:auto;
		display:block;
		border-radius:8px;
	}
}
.oauth-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.08);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(0,0,0,0.01);
	color: #202124;
	font-size: 14px;
	line-height: 1;
	transition: box-shadow .12s ease, transform .06s ease, background-color .12s ease;
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
}

/* Icon sizing and layout */
.oauth-btn .google-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	line-height: 0;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
}

.oauth-btn .google-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Label styling */
.oauth-btn .oauth-label {
	display: inline-block;
	font-weight: 500;
	letter-spacing: .1px;
}

/* Hover / focus / active states */
.oauth-btn:hover {
	box-shadow: 0 2px 6px rgba(60,64,67,0.08);
	transform: translateY(-1px);
}

.oauth-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(60,64,67,0.06);
}

.oauth-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(66,133,244,0.15);
}

/* Keyboard accessibility */
.oauth-btn:focus-visible {
	outline: 2px solid rgba(66,133,244,0.25);
	outline-offset: 2px;
}

/* Small / compact variant example */
.oauth-btn.small {
	padding: 6px 10px;
	gap: 8px;
	font-size: 13px;
}

/* Optional: invert style for dark backgrounds */
.oauth-btn.inverted {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	color: #fff;
}

/* WebAuthn locked notice */
#webauthnLockedNotice{
	margin-bottom:12px;
	padding:12px;
	border-radius:8px;
	background: #fff4e5;
	color: #6a4b00;
	border: 1px solid #ffd89b;
	font-weight:700;
	font-size:0.98em;
}

/* userNotFound modal */
#userNotFoundModal{
	position: fixed;
	inset: 0;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgba(2,18,20,0.45);
	z-index:9998;
	padding:20px;
}
#userNotFoundModal .modal-panel{
	width:100%;
	max-width:480px;
	border-radius:12px;
	padding:16px;
	background: linear-gradient(180deg, #ffffff, #fbfeff);
	box-shadow: 0 18px 60px rgba(2,28,36,0.18);
	border:1px solid rgba(2,28,36,0.04);
}
#userNotFoundModal .modal-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:12px; }

/* Modal helpers (kept, refined) */
.modal-overlay, .webauthn-modal{
	position: fixed;
	inset: 0;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgba(2,18,20,0.42);
	z-index:9999;
	padding:20px;
}
.modal-panel, .webauthn-modal__panel{
	width:100%;
	max-width:520px;
	border-radius:12px;
	padding:18px;
	background: linear-gradient(180deg, #ffffff, #fbfeff);
	box-shadow: 0 18px 60px rgba(2,28,36,0.25);
	border:1px solid rgba(2,28,36,0.04);
}
.modal-actions{
	display:flex;
	gap:12px;
	justify-content:flex-end;
	margin-top:12px;
}
.modal-actions a{
	color: var(--teal);
	text-decoration:none;
	font-weight:700;
}

/* Footer */
.site-footer{
	padding:14px 18px;
	text-align:center;
	color: #567a7b;
	background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
	border-top: 1px solid rgba(6,22,28,0.02);
}

/* Buttons / links - small utility */
a.button-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:8px;
	background:transparent;
	color:var(--teal);
	font-weight:700;
	text-decoration:none;
	border:1px solid rgba(2,28,36,0.03);
}

/* Small screens and phones (mobile-first, Android & iOS tweaks) */
@media only screen and (max-width:480px){
	.auth-card{
		padding:18px;
		border-radius:12px;
		margin:6px;
	}
	.brand-logo{
		font-size:18px;
	}
	.auth-title{
		font-size:18px;
	}
	.field input{
		padding:12px 12px;
		font-size:15px;
		border-radius:10px;
	}
	.form-actions{
		flex-direction:column;
		gap:10px;
		align-items:stretch;
	}
	.reset-actions{
		flex-direction:column;
	}
	.primary-btn{
		padding:12px;
	}
	.tertiary-btn, .secondary-btn{
		width:100%;
		padding:11px;
	}
	.modal-panel{
		margin:12px;
		width:100%;
	}
	#login-oauth2-message-display{
		font-size:0.95em;
		padding:8px;
		margin-top:10px;
	}
}

/* iOS (retina) specific small adjustments */
@media only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio: 2){
	/* Slightly larger tap targets on high-density displays */
	.primary-btn{
		padding:13px;
		border-radius:12px;
	}
	.tertiary-btn, .secondary-btn{ border-radius:12px; }
}

/* Android - small phones heuristic */
@media only screen and (max-width:420px) and (orientation:portrait){
	.field-label{
		font-size:13px;
	}
	.login-form{
		gap:10px;
	}
	.auth-sub{
		font-size:13px;
	}
}

/* Tablet tweaks */
@media only screen and (min-width:720px) and (max-width:979px){
	.auth-card{
		max-width:640px;
		padding:22px; }
	.form-actions{
		gap:14px;
	}
}

/* utility for visually-disabled form state */
.form-disabled{
	opacity:0.6;
	pointer-events:none;
	transform: none;
}

/* small utilities */
.text-center{ text-align:center; }
.kv-row{
	display:flex;
	gap:8px;
	align-items:center;
}
.small{
	font-size:0.9em;
	color:var(--muted);
}

/* ensure focus outlines are visible for keyboard users */
:focus{
	outline: none;
	box-shadow: var(--focus);
	border-radius:8px;
}

/* ensure the reset "after sent" area is visually distinct */
#resetAfterSent{
	margin-top:10px;
	padding:12px;
	border-radius:10px;
	background: linear-gradient(180deg,#f7fffb,#ffffff);
	border:1px solid rgba(2,28,36,0.03);
}

/* make sure inline error elements inserted by JS are visible */
[data-oauth2-error="true"], .field-error{ display:block; }