:root {
	--bg-start: #0f172a;
	--bg-end: #1e293b;
	--accent: #0ea5e9;
	--accent-hover: #0284c7;
	--card-bg: rgba(255, 255, 255, 0.94);
	--text-main: #0f172a;
	--text-soft: #64748b;
	--input-border: #cbd5e1;
	--input-focus: rgba(14, 165, 233, 0.25);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color: var(--text-main);
	/*background:
	radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.25), transparent 32%),
	radial-gradient(circle at 85% 80%, rgba(34, 197, 94, 0.2), transparent 30%),
	linear-gradient(140deg, var(--bg-start) 0%, var(--bg-end) 100%);*/
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.login-card {
	width: 100%;
	max-width: 440px;
	background: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(2, 6, 23, 0.32);
	backdrop-filter: blur(10px);
	overflow: hidden;
}

.login-header {
	padding: 28px 28px 14px;
	text-align: center;
}

.brand {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	margin: 0 auto 14px;
	background: linear-gradient(135deg, #38bdf8 0%, #22c55e 100%);
	display: grid;
	place-items: center;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: 0.03em;
}

.login-header h1 {
	font-size: 1.35rem;
	margin-bottom: 4px;
	font-weight: 700;
}

.login-header p {
	margin: 0;
	color: var(--text-soft);
	font-size: 0.95rem;
}

.login-body {
	padding: 18px 28px 28px;
}

.form-label {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
}

.input-group-text,
.form-control {
	border-color: var(--input-border);
	min-height: 46px;
}

.input-group-text {
	background: #f8fafc;
	color: #475569;
}

.form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem var(--input-focus);
}

.password-toggle {
	border-color: var(--input-border);
}

.password-toggle:hover {
	background: #f8fafc;
}

.forgot-link {
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--accent);
	font-weight: 600;
}

.forgot-link:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.btn-login {
	min-height: 46px;
	border: none;
	background: linear-gradient(135deg, var(--accent) 0%, #22c55e 100%);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.btn-login:hover {
	opacity: 0.95;
}

.footer-note {
	text-align: center;
	margin-top: 14px;
	font-size: 0.84rem;
	color: #64748b;
}