/**
 * HumiHQ — Auth page styles.
 *
 * Login / Register. Top-tier design. White theme. Full width.
 * V=#0ea5e9
 */

:root {
	--hqa-v: #0ea5e9;
	--hqa-bg: #ffffff;
	--hqa-surface: #f8fafc;
	--hqa-border: #e2e8f0;
	--hqa-text: #0f172a;
	--hqa-text-muted: #475569;
	--hqa-text-dim: #94a3b8;
	--hqa-radius: 10px;
}

.hqa {
	font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
	color: var(--hqa-text);
	background: var(--hqa-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	min-height: 60vh;
}

.hqa section { padding: 40px 5vw; width: 100%; max-width: none; box-sizing: border-box; }

/* ==================================================================== */
/*  BUTTONS                                                              */
/* ==================================================================== */
.hqa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 11px 24px; border-radius: 8px; font-size: 14px; font-weight: 600;
	text-decoration: none; transition: all .2s ease; border: none; cursor: pointer;
}
.hqa-btn--primary { background: var(--hqa-v); color: #fff; }
.hqa-btn--primary:hover { background: #0284c7; box-shadow: 0 4px 20px rgba(14,165,233,.3); }
.hqa-btn--ghost { background: transparent; color: var(--hqa-text); border: 1.5px solid var(--hqa-border); }
.hqa-btn--ghost:hover { background: var(--hqa-surface); }
.hqa-btn--text { background: transparent; color: var(--hqa-text-muted); padding: 8px 16px; }
.hqa-btn--text:hover { color: var(--hqa-text); }
.hqa-btn--full { width: 100%; padding: 14px 24px; font-size: 15px; }

/* ==================================================================== */
/*  HERO                                                                */
/* ==================================================================== */
.hqa-hero { text-align: center; padding-top: 60px; padding-bottom: 20px; }
.hqa-hero-title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--hqa-text); margin: 0 0 10px 0; line-height: 1.2; }
.hqa-hero-desc { font-size: 16px; color: var(--hqa-text-muted); max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* ==================================================================== */
/*  FORM SECTION                                                          */
/* ==================================================================== */
.hqa-form-section { display: flex; justify-content: center; padding-top: 0; }
.hqa-form-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--hqa-border); border-radius: var(--hqa-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.03); }

/* Tabs */
.hqa-tabs { display: flex; border-bottom: 1px solid var(--hqa-border); }
.hqa-tab {
	flex: 1; padding: 14px; border: none; background: transparent; font-size: 14px; font-weight: 600;
	color: var(--hqa-text-dim); cursor: pointer; transition: all .2s ease;
}
.hqa-tab.active { color: var(--hqa-text); border-bottom: 2px solid var(--hqa-v); margin-bottom: -1px; }
.hqa-tab:hover { color: var(--hqa-text); }

/* Form */
.hqa-form { padding: 24px; }
.hqa-form--hidden { display: none; }

.hqa-field { display: block; margin-bottom: 16px; }
.hqa-field span {
	display: block; font-size: 12px; font-weight: 600; color: var(--hqa-text-muted); margin-bottom: 4px;
}
.hqa-field input {
	width: 100%; padding: 11px 14px; border: 1.5px solid var(--hqa-border); border-radius: 7px;
	font-size: 14px; color: var(--hqa-text); background: var(--hqa-surface); transition: border-color .2s ease;
	box-sizing: border-box; outline: none;
}
.hqa-field input:focus { border-color: var(--hqa-v); background: #fff; box-shadow: 0 0 0 3px rgba(14,165,233,.08); }
.hqa-field input::placeholder { color: var(--hqa-text-dim); }

.hqa-error {
	padding: 10px 14px; border-radius: 7px; background: #fef2f2; border: 1px solid #fecaca;
	color: #dc2626; font-size: 13px; margin-bottom: 16px; line-height: 1.5;
}
.hqa-error a { color: #dc2626; font-weight: 600; }

.hqa-form-link { text-align: center; margin: 12px 0 0; font-size: 13px; color: var(--hqa-text-muted); }
.hqa-form-link a { color: var(--hqa-v); font-weight: 600; text-decoration: none; }
.hqa-form-link a:hover { text-decoration: underline; }

/* ==================================================================== */
/*  LOGGED IN STATE                                                       */
/* ==================================================================== */
.hqa-logged-in { text-align: center; padding: 80px 5vw; }
.hqa-logged-avatar { margin-bottom: 16px; display: flex; justify-content: center; }
.hqa-avatar-img { border-radius: 50%; border: 3px solid var(--hqa-v); }
.hqa-logged-in h2 { font-size: 22px; font-weight: 700; color: var(--hqa-text); margin: 0 0 8px 0; }
.hqa-logged-in p { font-size: 15px; color: var(--hqa-text-muted); margin: 0 0 24px 0; }
.hqa-logged-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ==================================================================== */
/*  FOOTER                                                               */
/* ==================================================================== */
.hqa-foot { text-align: center; border-top: 1px solid var(--hqa-border); padding: 24px 5vw; }
.hqa-foot p { font-size: 13px; color: var(--hqa-text-dim); margin: 0; }

@media (max-width: 480px) {
	.hqa-hero-title { font-size: 24px; }
	.hqa-form { padding: 16px; }
}