/* ASCENKA — login profesional */
:root {
	--lg-primary: #282b3e;
	--lg-secondary: #022c8d;
	--lg-ink: #1a1d2e;
	--lg-muted: #5c6178;
	--lg-line: #d5d8e4;
	--lg-surface: #f5f6fa;
	--lg-card: #ffffff;
	--lg-font: "Manrope", system-ui, sans-serif;
	--lg-display: "Fraunces", Georgia, serif;
	--lg-radius: 22px;
	--lg-shadow: 0 28px 80px rgba(16, 20, 40, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
}

body.lg-body {
	font-family: var(--lg-font);
	color: var(--lg-ink);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

.lg-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1.25rem;
	position: relative;
	overflow: hidden;
	background-color: var(--lg-primary);
	background-image: linear-gradient(45deg, var(--lg-primary) 0%, var(--lg-secondary) 50%, var(--lg-primary) 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.lg-page.has-photo {
	background: var(--lg-primary) center / cover no-repeat;
}

.lg-page::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 20% 80%, rgba(255,255,255,.06), transparent 35%),
		linear-gradient(180deg, rgba(10,12,24,.18), rgba(10,12,24,.45));
	z-index: 0;
}

.lg-page.has-photo::before {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--lg-primary) 72%, transparent), color-mix(in srgb, var(--lg-secondary) 55%, transparent)),
		linear-gradient(180deg, rgba(8,10,20,.35), rgba(8,10,20,.55));
}

.lg-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: .35;
	pointer-events: none;
	z-index: 0;
	animation: lg-float 12s ease-in-out infinite;
}
.lg-orb-a {
	width: 280px;
	height: 280px;
	background: color-mix(in srgb, var(--lg-secondary) 80%, white);
	top: -60px;
	right: 8%;
}
.lg-orb-b {
	width: 220px;
	height: 220px;
	background: color-mix(in srgb, var(--lg-primary) 70%, white);
	bottom: -40px;
	left: 6%;
	animation-delay: -4s;
}

@keyframes lg-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-18px); }
}

.lg-shell {
	position: relative;
	z-index: 1;
	width: min(100%, 440px);
	animation: lg-rise .7s cubic-bezier(.22,1,.36,1) both;
}

@keyframes lg-rise {
	from { opacity: 0; transform: translateY(22px) scale(.98); }
	to { opacity: 1; transform: none; }
}

.lg-card {
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,.55);
	border-radius: var(--lg-radius);
	box-shadow: var(--lg-shadow);
	padding: 2.35rem 2rem 2rem;
}

.lg-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1.75rem;
	text-decoration: none;
	color: inherit;
}

.lg-brand img {
	display: block;
	width: auto;
	max-width: 200px;
	max-height: 72px;
	object-fit: contain;
	margin-bottom: 0.85rem;
	border-radius: 16px;
	overflow: hidden;
}

.lg-brand-name {
	font-family: var(--lg-display);
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--lg-primary);
	line-height: 1.1;
	margin: 0;
}

.lg-brand-sub {
	margin: 0.45rem 0 0;
	font-size: 0.92rem;
	color: var(--lg-muted);
	font-weight: 500;
}

.lg-alert {
	border-radius: 12px;
	padding: 0.8rem 0.95rem;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 1.1rem;
	text-align: center;
}
.lg-alert-ok {
	background: #e8eefc;
	color: #022c8d;
	border: 1px solid #c9d6f5;
}
.lg-alert-err {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.lg-register {
	text-align: center;
	margin-bottom: 1.15rem;
}
.lg-register a {
	color: var(--lg-secondary);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}
.lg-register a:hover { text-decoration: underline; }

.lg-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lg-field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lg-muted);
	margin-bottom: 0.4rem;
}

.lg-input {
	position: relative;
}

.lg-input input {
	width: 100%;
	appearance: none;
	border: 1.5px solid var(--lg-line);
	background: var(--lg-surface);
	border-radius: 12px;
	padding: 0.92rem 1rem 0.92rem 2.85rem;
	font: inherit;
	font-size: 0.98rem;
	color: var(--lg-ink);
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.lg-input input::placeholder {
	color: #9aa1b5;
}

.lg-input input:hover {
	border-color: color-mix(in srgb, var(--lg-secondary) 35%, var(--lg-line));
}

.lg-input input:focus {
	background: #fff;
	border-color: var(--lg-secondary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-secondary) 18%, transparent);
}

.lg-input-icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--lg-secondary);
	opacity: .75;
	pointer-events: none;
}

.lg-row {
	display: flex;
	justify-content: flex-end;
	margin-top: -0.25rem;
}

.lg-forgot {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--lg-secondary);
	text-decoration: none;
}
.lg-forgot:hover { text-decoration: underline; }

.lg-submit {
	margin-top: 0.35rem;
	appearance: none;
	border: 0;
	cursor: pointer;
	width: 100%;
	border-radius: 12px;
	padding: 0.95rem 1.1rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient(120deg, var(--lg-primary), var(--lg-secondary));
	box-shadow: 0 12px 28px color-mix(in srgb, var(--lg-secondary) 35%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lg-submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--lg-secondary) 42%, transparent);
}
.lg-submit:active { transform: translateY(0); }

.lg-foot {
	margin-top: 1.35rem;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255,255,255,.72);
	position: relative;
	z-index: 1;
}
.lg-foot a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.lg-foot a:hover { text-decoration: underline; }

.lg-install {
	display: none;
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 40;
	max-width: 420px;
	margin: 0 auto;
	padding: 0.95rem 1rem;
	border-radius: 16px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 16px 40px rgba(16,20,40,.28);
	color: var(--lg-ink);
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.lg-install.is-visible { display: flex; }
.lg-install p {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	flex: 1 1 180px;
}
.lg-install-actions {
	display: flex;
	gap: 0.45rem;
}
.lg-install button {
	border: 0;
	border-radius: 10px;
	padding: 0.55rem 0.85rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 800;
	cursor: pointer;
}
.lg-install-go {
	color: #fff;
	background: linear-gradient(120deg, var(--lg-primary), var(--lg-secondary));
}
.lg-install-later {
	color: var(--lg-muted);
	background: #eef0f6;
}
html.lg-standalone .lg-install { display: none !important; }

@media (max-width: 480px) {
	.lg-card { padding: 1.85rem 1.35rem 1.5rem; }
	.lg-brand img { max-width: 160px; max-height: 60px; }
}