/* auth-dialog.css — 登录/注册共享对话框（唯一一套样式）。
 * 由 Hero 登录弹窗与 community/login.html、register.html 共同复用，避免两套登录风格漂移。
 * 视觉统一为社区深色登录卡片：深色面板、浅色输入框、青紫渐变主按钮。
 *   - 弹窗用法：.auth-dialog-overlay > .auth-dialog（带关闭按钮）
 *   - 落地页用法：.auth-dialog-page > .auth-dialog（无遮罩、无关闭按钮）
 */

/* 遮罩层：仅弹窗用法。 */
.auth-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(1, 4, 10, 0.78);
    backdrop-filter: blur(4px);
}
.auth-dialog-overlay[hidden] { display: none; }
body.is-auth-dialog-open { overflow: hidden; }

/* 落地页外壳：仅 mount 用法，铺满视口居中。 */
.auth-dialog-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
}

/* 对话框卡片：两种用法同款。 */
.auth-dialog {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 42px 36px 36px;
    overflow-y: auto;
    border: 1px solid rgba(138, 157, 190, 0.22);
    border-radius: 20px;
    color: #f6f8ff;
    background: #0d0d17;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(143, 155, 178, 0.42) transparent;
}
.auth-dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #8995aa;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
}
.auth-dialog-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.auth-dialog :where(button, input):focus-visible {
    outline: 2px solid #24c8f1;
    outline-offset: 2px;
}
.auth-dialog__title { margin: 0 0 8px; color: #f6f8ff; font-size: 28px; line-height: 1.2; text-align: center; }
.auth-dialog__copy { margin: 0 0 30px; color: #8f9bb2; font-size: 14px; line-height: 1.5; text-align: center; }
.auth-dialog__error { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: #ffd9d9; background: rgba(220, 70, 70, 0.2); }
.auth-dialog__error[hidden] { display: none; }
.auth-dialog__error.is-success { color: #d5ffe0; background: rgba(48, 170, 95, 0.2); }
.auth-dialog__form { display: flex; flex-direction: column; gap: 10px; }
.auth-dialog__label {
    margin-top: 8px;
    color: #cbd4e4;
    font-size: 13px;
    font-weight: 650;
}
.auth-dialog__label[hidden] { display: none; }
.auth-dialog__form input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    outline: none;
    color: #101728;
    font: inherit;
    background: #edf3ff;
    box-sizing: border-box;
}
.auth-dialog__form input::placeholder { color: #8c98ad; }
.auth-dialog__form input:focus { border-color: #24c8f1; box-shadow: 0 0 0 3px rgba(36, 200, 241, 0.18); }
.auth-dialog__form input[hidden] { display: none; }

/* 验证码行：输入框 + 「获取验证码」按钮并排（仅注册模式出现）。 */
.auth-dialog__code-row { display: flex; gap: 8px; }
.auth-dialog__code-row[hidden] { display: none; }
.auth-dialog__code-row input { flex: 1; min-width: 0; }
.auth-dialog__code-btn {
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid rgba(36, 200, 241, 0.4);
    border-radius: 10px;
    color: #1cc9ef;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(28, 201, 239, 0.08);
}
.auth-dialog__code-btn:hover { background: rgba(28, 201, 239, 0.14); }
.auth-dialog__code-btn:disabled { opacity: 0.55; cursor: default; }
.auth-dialog__submit {
    height: 48px;
    margin-top: 16px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(105deg, #13c6e9, #8134cd);
    box-shadow: none;
}
.auth-dialog__submit:hover { filter: brightness(1.08); }
.auth-dialog__submit:disabled { opacity: 0.6; cursor: wait; }
.auth-dialog__switch { margin: 24px 0 0; font-size: 13px; text-align: center; color: #8f9bb2; }
.auth-dialog__switch button {
    border: 0;
    padding: 0;
    background: none;
    color: #1cc9ef;
    font: inherit;
    cursor: pointer;
}
.auth-dialog__switch button:hover { text-decoration: underline; }
.auth-dialog__forgot { margin: 10px 0 0; text-align: center; }
.auth-dialog__forgot button {
    border: 0;
    padding: 0;
    color: #8f9bb2;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    background: none;
}
.auth-dialog__forgot button:hover { color: #1cc9ef; text-decoration: underline; }

/* 注册后邮箱验证步骤 */
.auth-dialog__verify[hidden] { display: none; }
.auth-dialog__verify-msg {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(226, 224, 255, 0.92);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(223, 219, 255, 0.18);
}
.auth-dialog__verify-resend,
.auth-dialog__verify-done {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.auth-dialog__verify-resend {
    margin-bottom: 8px;
    color: #c9b6ff;
    background: rgba(255, 255, 255, 0.08);
}
.auth-dialog__verify-resend:hover { background: rgba(255, 255, 255, 0.14); }
.auth-dialog__verify-resend:disabled { opacity: 0.5; cursor: default; }
.auth-dialog__verify-done {
    color: #fff;
    background: linear-gradient(105deg, #13c6e9, #8134cd);
    box-shadow: none;
}
.auth-dialog__verify-feedback {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
    color: rgba(172, 255, 189, 0.92);
}
.auth-dialog__verify-feedback[hidden] { display: none; }

/* 落地页顶部「返回社区」链接（弹窗用法不出现）。 */
.auth-back {
    position: absolute;
    top: 100px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: rgba(226, 224, 255, 0.6);
    text-decoration: none;
}
.auth-back:hover { color: #c9b6ff; }

@media (max-width: 540px) {
    .auth-dialog-overlay { padding: 14px; }
    .auth-dialog { padding: 38px 22px 28px; border-radius: 16px; }
}