/* =========================================================
   OBS DESIGN SYSTEM
   Login Page
   ========================================================= */

body.obs-login-page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--obs-space-8) var(--obs-space-4);
	background: var(--obs-page-background);
	overflow-x: hidden;
}

/* =========================================================
   BACKGROUND EFFECTS
   ========================================================= */
body.obs-login-page::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
	opacity: 0.25;
	mix-blend-mode: overlay;
	pointer-events: none;
}

body.obs-login-page::after {
	content: "";
	position: fixed;
	inset: -120px;
	background: var(--obs-page-glow);
	filter: blur(var(--obs-blur-md));
	opacity: 0.75;
	animation: obs-login-glow 10s ease-in-out infinite alternate;
	pointer-events: none;
}

/* =========================================================
   CONTAINER
   ========================================================= */
.obs-login {
	position: relative;
	width: min(460px, 100%);
	z-index: var(--obs-z-base);
}

/* =========================================================
   PANEL
   ========================================================= */
.obs-login-panel {
	position: relative;
	padding: var(--obs-space-6) var(--obs-space-6) var(--obs-space-5);
	background: var(--obs-glass-surface);
	border: var(--obs-border-width-thin) solid var(--obs-border-primary);
	border-radius: var(--obs-radius-xl);
	box-shadow: var(--obs-shadow-lg);
	backdrop-filter: blur(var(--obs-blur-md));
	-webkit-backdrop-filter: blur(var(--obs-blur-md));
	overflow: hidden;
}

.obs-login-panel::before {
	content: "";
	position: absolute;
	inset: -2px;
	background: var(--obs-panel-glow);
	filter: blur(var(--obs-blur-md));
	opacity: 0.9;
	pointer-events: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.obs-login-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--obs-space-3);
	padding: var(--obs-space-2) 0 var(--obs-space-4);
	z-index: var(--obs-z-base);
}

.obs-login-logo {
	width: min(220px, 100%);
	height: auto;
	filter: drop-shadow(var(--obs-shadow-md));
}

.obs-login-title {
	margin-top: var(--obs-space-1);
	font-size: var(--obs-font-size-xl);
	font-weight: var(--obs-font-weight-bold);
	letter-spacing: 0.2px;
}

.obs-login-hint {
	color: var(--obs-text-muted);
	font-size: var(--obs-font-size-sm);
	text-align: center;
}

/* =========================================================
   FORM
   ========================================================= */
.obs-login-form {
	position: relative;
	z-index: var(--obs-z-base);
}

.obs-login-form .obs-field {
	margin-block: var(--obs-space-3);
}

/* =========================================================
   LINKS
   ========================================================= */
.obs-login-links {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--obs-space-3);
	margin: var(--obs-space-3) 0 var(--obs-space-4);
	font-size: var(--obs-font-size-sm);
	z-index: var(--obs-z-base);
}

.obs-login-links a {
	color: var(--obs-primary);
	font-weight: var(--obs-font-weight-bold);
}

.obs-login-links a:hover {
	color: var(--obs-primary-hover);
	text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
   ========================================================= */
.obs-login-submit {
	width: 100%;
	background: var(--obs-brand-gradient);
	box-shadow: var(--obs-shadow-md), var(--obs-shadow-inset-strong);
}

.obs-login-submit:hover {
	box-shadow: var(--obs-shadow-lg), var(--obs-shadow-inset-strong);
}

/* =========================================================
   ERROR
   ========================================================= */
.obs-login-error {
	position: relative;
	margin-top: var(--obs-space-3);
	padding: var(--obs-space-3) var(--obs-space-4);
	color: var(--obs-text-primary);
	background: var(--obs-danger-surface);
	border: var(--obs-border-width-thin) solid var(--obs-danger-border);
	border-radius: var(--obs-radius-md);
	font-size: var(--obs-font-size-sm);
	z-index: var(--obs-z-base);
}

/* =========================================================
   DIVIDER
   ========================================================= */
.obs-login-divider {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--obs-space-3);
	margin: var(--obs-space-4) 0;
	color: var(--obs-text-disabled);
	font-size: var(--obs-font-size-xs);
	z-index: var(--obs-z-base);
}

.obs-login-divider::before, .obs-login-divider::after {
	content: "";
	flex: 1;
	height: var(--obs-border-width-thin);
	background: var(--obs-divider-color);
}

/* =========================================================
   DESKTOP LINK
   ========================================================= */
.obs-login-desktop {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--obs-space-4);
	padding: var(--obs-space-3) var(--obs-space-4);
	color: var(--obs-text-primary);
	background: var(--obs-surface-2);
	border: var(--obs-border-width-thin) solid var(--obs-border-primary);
	border-radius: var(--obs-radius-lg);
	font-weight: var(--obs-font-weight-extrabold);
	box-shadow: var(--obs-shadow-inset-soft);
	transition: background var(--obs-transition-fast), border-color
		var(--obs-transition-fast), transform var(--obs-transition-fast);
	z-index: var(--obs-z-base);
}

.obs-login-desktop:hover {
	color: var(--obs-text-primary);
	background: var(--obs-surface-hover);
	border-color: var(--obs-primary);
	transform: translateY(-2px);
}

.obs-login-desktop-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	color: var(--obs-button-primary-text);
	background: var(--obs-brand-gradient);
	border-radius: var(--obs-radius-md);
	box-shadow: var(--obs-shadow-sm);
	font-size: var(--obs-font-size-xl);
}

/* =========================================================
   PROGRESS
   ========================================================= */
.obs-login-progress {
	position: relative;
	display: none;
	margin-top: var(--obs-space-3);
	z-index: var(--obs-z-base);
}

.obs-login-progress-track {
	width: 100%;
	height: var(--obs-space-2);
	background: var(--obs-progress-track);
	border: var(--obs-border-width-thin) solid var(--obs-border-secondary);
	border-radius: var(--obs-radius-pill);
	overflow: hidden;
}

.obs-login-progress-bar {
	width: 0;
	height: 100%;
	background: var(--obs-brand-gradient);
	border-radius: var(--obs-radius-pill);
	transition: width var(--obs-transition-slow);
}

/* =========================================================
   STATES
   ========================================================= */
.obs-login-error.is-shaking {
    animation:
        obs-login-shake
        250ms
        ease-in-out
        0s
        2;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes obs-login-glow {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(18px, -10px, 0)
            scale(1.03);
    }
}

@keyframes obs-login-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media ( max-width : 480px) {
	.obs-login-panel {
		padding: var(--obs-space-5) var(--obs-space-4) var(--obs-space-4);
	}
	.obs-login-links {
		flex-direction: column;
		align-items: center;
		gap: var(--obs-space-2);
	}
}

body{
    background:red;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.obs-login-page::after,
    .obs-login-error.is-shaking {
        animation: none;
    }
}