/* auth-dialog.css — 登录/注册共享对话框（唯一一套样式）。
 * 由 Hero 登录弹窗与 community/login.html、register.html 共同复用，避免两套登录风格漂移。
 * 视觉沿用原 anime-theme.css 的 .hero-login-* 弹窗（紫色渐变卡片），抽出为独立组件。
 *   - 弹窗用法：.auth-dialog-overlay > .auth-dialog（带关闭按钮）
 *   - 落地页用法：.auth-dialog-page > .auth-dialog（无遮罩、无关闭按钮）
 */

/* 遮罩层：仅弹窗用法。 */
.auth-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 10, 30, 0.62);
    backdrop-filter: blur(6px);
}
.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(400px, 92vw);
    padding: 28px 26px 22px;
    border: 1px solid rgba(223, 219, 255, 0.28);
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(160deg, rgba(43, 38, 92, 0.98), rgba(28, 26, 58, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.auth-dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    color: #d9d5ff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
}
.auth-dialog-close:hover { background: rgba(255, 255, 255, 0.16); }
.auth-dialog__title { margin: 0 0 6px; font-size: 20px; }
.auth-dialog__copy { margin: 0 0 16px; font-size: 13px; color: rgba(226, 224, 255, 0.82); line-height: 1.5; }
.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__form input {
    padding: 12px 14px;
    border: 1px solid rgba(223, 219, 255, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.06);
}
.auth-dialog__form input::placeholder { color: rgba(226, 224, 255, 0.5); }
.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(223, 219, 255, 0.3);
    border-radius: 12px;
    color: #c9b6ff;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
}
.auth-dialog__code-btn:hover { background: rgba(255, 255, 255, 0.14); }
.auth-dialog__code-btn:disabled { opacity: 0.55; cursor: default; }
.auth-dialog__submit {
    margin-top: 4px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #8d91ff, #b884ff);
    box-shadow: 0 10px 26px rgba(120, 110, 255, 0.4);
}
.auth-dialog__submit:disabled { opacity: 0.6; cursor: default; }
.auth-dialog__switch { margin: 16px 0 0; font-size: 13px; text-align: center; color: rgba(226, 224, 255, 0.72); }
.auth-dialog__switch button {
    border: 0;
    padding: 0;
    background: none;
    color: #c9b6ff;
    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: rgba(226, 224, 255, 0.68);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    background: none;
}
.auth-dialog__forgot button:hover { color: #c9b6ff; 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(135deg, #8d91ff, #b884ff);
    box-shadow: 0 10px 26px rgba(120, 110, 255, 0.4);
}
.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; }