/**
 * Login — selaras portal landing (app/index.php)
 */
@import url('design-tokens.css');

body {
	font-family: 'Fira Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--kf-text, #1A2B3C);
	background: linear-gradient(165deg, #fff 0%, var(--kf-primary-light, #E8F1FB) 55%, var(--kf-bg, #F4F7FB) 100%);
	min-height: 100vh;
}

.account-page {
	padding: 48px 0 32px;
}

.account-box {
	margin: 0 auto;
	width: min(420px, 100%);
	border: 1px solid var(--kf-border, #D8E2EF);
	border-radius: var(--radius-md, 12px);
	background: var(--kf-surface, #fff);
	box-shadow: var(--shadow-card);
}

.account-wrapper {
	padding: 32px 28px;
}

.account-wrapper h3 {
	font-size: 1.25rem !important;
	font-weight: 600;
	color: var(--kf-text, #1A2B3C);
}

.account-box .form-control {
	border: 1px solid var(--kf-border, #D8E2EF);
	border-radius: var(--radius-sm, 8px);
	height: 48px;
}

.account-box .form-control:focus {
	border-color: var(--kf-primary, #003DA5);
	box-shadow: 0 0 0 3px rgba(0, 61, 165, 0.12);
}

.account-box label,
.account-box .focus-label {
	color: var(--kf-muted, #5A6B7D);
}

.account-box a:hover {
	color: var(--kf-primary, #003DA5);
}

.account-page .btn-primary {
	background-color: var(--kf-primary, #003DA5) !important;
	border-color: var(--kf-primary, #003DA5) !important;
	border-radius: var(--radius-sm, 8px) !important;
	font-weight: 600;
	padding: 12px 20px;
}

.account-page .btn-primary:hover,
.account-page .btn-primary:focus {
	background-color: var(--kf-primary-dark, #002B75) !important;
	border-color: var(--kf-primary-dark, #002B75) !important;
	box-shadow: var(--shadow-hover);
}

.account-page .text-muted {
	color: var(--kf-muted, #5A6B7D) !important;
}

.main-wrapper > .text-muted.text-center {
	color: var(--kf-muted, #5A6B7D) !important;
	font-size: 13px;
}