/* Download.chat — modern futuristic SaaS auth (login / register / lost-password).
   Colors are driven by Customizer values injected as --dc-auth-* variables. */

:root {
	/* Brand defaults (mirror tokens.css). Overridden live by the Customizer. */
	--dc-auth-accent: #6d3bf5;   /* --dc-purple   */
	--dc-auth-accent2: #b8a6ff;  /* --dc-lavender */
	--dc-auth-bg: #07040f;       /* --dc-base     */
	--dc-auth-deep: #2a1364;     /* --dc-deep-purple, signature radial anchor */
}

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

html, body { height: 100%; }

.dc-auth-body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--dc-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--dc-text, #ece7ff);
	background: var(--dc-auth-bg);
	background-image:
		radial-gradient(1100px 620px at 18% -6%, color-mix(in srgb, var(--dc-auth-accent2) 26%, transparent), transparent 58%),
		radial-gradient(900px 640px at 108% 8%, color-mix(in srgb, var(--dc-auth-accent) 30%, transparent), transparent 55%),
		var(--dc-auth-image, none),
		radial-gradient(120% 120% at 20% 0%, var(--dc-auth-deep) 0%, color-mix(in srgb, var(--dc-auth-deep) 30%, var(--dc-auth-bg)) 45%, var(--dc-auth-bg) 100%);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

/* Layout: centered card, full viewport. */
.dc-auth {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	overflow: hidden;
}

/* Animated aurora glow behind the card. */
.dc-auth__aurora {
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 70vh;
	background:
		conic-gradient(from 180deg at 50% 50%,
			color-mix(in srgb, var(--dc-auth-accent) 55%, transparent),
			color-mix(in srgb, var(--dc-auth-accent2) 45%, transparent),
			transparent 70%);
	filter: blur(90px);
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}
.dc-auth-body--glow .dc-auth__aurora {
	opacity: .5;
	animation: dc-auth-float 14s ease-in-out infinite alternate;
}
@keyframes dc-auth-float {
	0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
	100% { transform: translate3d(4%, 3%, 0) rotate(12deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.dc-auth-body--glow .dc-auth__aurora { animation: none; }
}

/* Glass card. */
.dc-auth__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	padding: 36px 32px 28px;
	border-radius: var(--dc-radius-lg, 24px);
	background: linear-gradient(165deg, rgba(42, 19, 100, 0.55), rgba(27, 16, 54, 0.82) 42%, rgba(12, 7, 26, 0.92));
	border: 1px solid var(--dc-border, rgba(184, 166, 255, 0.16));
	box-shadow:
		0 0 0 1px rgba(184, 166, 255, 0.16),
		0 30px 80px -22px rgba(0, 0, 0, 0.7),
		0 20px 60px -18px rgba(109, 59, 245, 0.35);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	animation: dc-auth-rise .5s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes dc-auth-rise {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.dc-auth__brand { display: inline-flex; align-items: center; text-decoration: none; }
.dc-auth__logo { height: 34px; width: auto; display: block; }
.dc-auth__tagline {
	margin: 10px 0 22px;
	font-size: .82rem;
	color: var(--dc-muted, #9a8fc4);
	letter-spacing: .01em;
}

.dc-auth__title {
	margin: 0 0 6px;
	font-size: 1.55rem;
	line-height: 1.2;
	font-weight: 700;
	background: linear-gradient(92deg, #fff, var(--dc-auth-accent2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dc-auth__subtitle { margin: 0 0 22px; color: var(--dc-muted, #9a8fc4); font-size: .92rem; }

/* Alerts. */
.dc-auth__alert {
	margin: 0 0 18px;
	padding: 11px 14px;
	border-radius: 12px;
	font-size: .88rem;
	border: 1px solid transparent;
}
.dc-auth__alert--error { background: rgba(255, 88, 110, 0.12); border-color: rgba(255, 88, 110, 0.4); color: #ffb3bd; }
.dc-auth__alert--info  { background: color-mix(in srgb, var(--dc-auth-accent2) 14%, transparent); border-color: color-mix(in srgb, var(--dc-auth-accent2) 40%, transparent); color: var(--dc-auth-accent2); }

/* Form. */
.dc-auth__form { display: flex; flex-direction: column; gap: 16px; }
.dc-auth__field { display: flex; flex-direction: column; gap: 7px; text-align: start; }
.dc-auth__label { font-size: .8rem; color: var(--dc-muted, #9a8fc4); font-weight: 500; }
.dc-auth__input {
	width: 100%;
	padding: 13px 14px;
	border-radius: var(--dc-radius, 14px);
	background: rgba(7, 4, 15, 0.6);
	border: 1px solid var(--dc-border, rgba(184, 166, 255, 0.16));
	color: var(--dc-text, #ece7ff);
	font: inherit;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dc-auth__input::placeholder { color: var(--dc-muted, #9a8fc4); }
.dc-auth__input:focus {
	border-color: var(--dc-auth-accent2);
	background: rgba(7, 4, 15, 0.85);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-auth-accent2) 18%, transparent);
}

.dc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; }
.dc-auth__remember { display: inline-flex; align-items: center; gap: 8px; color: var(--dc-muted, #9a8fc4); cursor: pointer; }
.dc-auth__remember input { accent-color: var(--dc-auth-accent); width: 16px; height: 16px; }
.dc-auth__hint { margin: -4px 0 0; font-size: .78rem; color: var(--dc-muted, #9a8fc4); }

.dc-auth__link { color: var(--dc-auth-accent2); text-decoration: none; }
.dc-auth__link:hover { text-decoration: underline; }

.dc-auth__submit {
	margin-top: 4px;
	padding: 13px 18px;
	border: 0;
	border-radius: var(--dc-radius, 14px);
	font: inherit;
	font-weight: 600;
	color: #0a0616;
	cursor: pointer;
	background: linear-gradient(100deg, var(--dc-auth-accent), var(--dc-auth-accent2));
	box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--dc-auth-accent) 70%, transparent);
	transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.dc-auth__submit:hover { transform: translateY(-1px); filter: brightness(1.06); }
.dc-auth__submit:active { transform: translateY(0); }

.dc-auth__alt { margin: 20px 0 0; text-align: center; font-size: .9rem; color: var(--dc-muted, #9a8fc4); }
.dc-auth__foot {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--dc-border, rgba(184, 166, 255, 0.12));
	text-align: center;
	font-size: .74rem;
	color: var(--dc-muted, #9a8fc4);
}

@media (max-width: 480px) {
	.dc-auth__card { padding: 28px 22px 22px; border-radius: 18px; }
	.dc-auth__title { font-size: 1.35rem; }
}