/* auth.css — sign-in page. Shared tokens live in site.css. */

.auth {
	display: flex; align-items: center; justify-content: center;
	padding: 72px 24px 96px;
}
@media (max-width: 720px) { .auth { padding: 40px 20px 64px; } }

.auth-card {
	width: 100%; max-width: 420px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 40px 36px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .8) inset,
		0 30px 60px -24px rgba(0, 0, 0, .16),
		0 12px 30px -14px rgba(0, 0, 0, .08);
}
@media (max-width: 480px) { .auth-card { padding: 32px 24px; } }

.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 {
	font-size: 30px; font-weight: 600; letter-spacing: -0.025em;
	line-height: 1.15; margin: 0 0 8px;
}
.auth-head p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ── Error banner ───────────────────────────────────────────── */
.auth-error {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 12px 14px; margin-bottom: 22px;
	border-radius: 10px;
	background: #fde9ea; color: #a32c40;
	font-size: 14px; line-height: 1.4;
}
.auth-error svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

/* ── Telegram button ────────────────────────────────────────── */
.auth-telegram {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; padding: 14px 22px;
	border: 1px solid transparent; border-radius: 980px;
	background: var(--accent); color: #fff;
	font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
	cursor: pointer; transition: all .2s ease;
}
.auth-telegram:hover { background: var(--accent-deep); transform: translateY(-1px); }
.auth-telegram svg { width: 18px; height: 18px; }

/* The Telegram widget draws its own button inside an iframe - just centre it. */
.auth-widget { display: flex; justify-content: center; min-height: 40px; }
.auth-widget iframe { border: 0; color-scheme: light; }

.auth-note {
	margin: 14px 0 0; text-align: center;
	font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.auth-note b { color: var(--ink); font-weight: 600; }

/* ── "or" divider ───────────────────────────────────────────── */
.auth-or {
	display: flex; align-items: center; gap: 14px;
	margin: 26px 0;
	color: var(--ink-3);
	font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Sign in / sign up ──────────────────────────────────────── */
/* Only the side the card is showing is on the page. The other one is removed
   outright rather than hidden, so its required fields never hold back the form
   somebody is actually filling in. */
.auth-card:not(.is-register) .side-up,
.auth-card.is-register .side-in { display: none; }

/* ── Credentials form ───────────────────────────────────────── */
.auth-field { margin-bottom: 14px; }
.auth-field label {
	display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px;
}
.auth-field input {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--line); border-radius: 10px;
	font-family: inherit; font-size: 15px;
	background: #fff; color: var(--ink); outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-field input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(42, 171, 238, .16);
}

.auth-err, .auth-hint {
	margin: 6px 0 0; font-size: 12px; line-height: 1.4;
}
.auth-err { color: #a32c40; }
.auth-hint { color: var(--ink-3); }

.auth-submit {
	width: 100%; margin-top: 20px; padding: 13px 22px;
	border: 1px solid transparent; border-radius: 980px;
	background: var(--ink); color: #fff;
	font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
	cursor: pointer; transition: all .2s ease;
}
.auth-submit:hover { background: #000; transform: translateY(-1px); }

.auth-foot {
	margin: 24px 0 0; text-align: center;
	font-size: 13px; color: var(--ink-2);
}
.auth-foot a { color: var(--accent); }
.auth-foot a:hover { color: var(--accent-deep); }