/* ====================================================================
   authModal.css — 全站共用登录/注册 Modal 的外层结构样式。
   表单字段本身（输入框/按钮/Google 按钮/分隔线/安全提示/法律文字等）复用
   account.css 里已有的 auth-* 类，这个文件只负责 Modal 特有的：
   遮罩、居中弹窗容器、关闭按钮、动画、手机端内部滚动。
   加载这个文件的页面必须同时加载 account.css（顺序不影响，两者选择器
   互不重叠）。
   ==================================================================== */

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 180ms ease;
}

.auth-modal-overlay[hidden] {
    display: none;
}

.auth-modal-overlay.is-open {
    opacity: 1;
}

.auth-modal-dialog {
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E2E7EF);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.auth-modal-overlay.is-open .auth-modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

.auth-modal-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
    background: var(--surface, #fff);
}

.auth-modal-mark {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-number, #172033);
    font-weight: 700;
    font-size: 0.92rem;
}

.auth-modal-mark svg {
    width: 18px;
    height: 18px;
    color: var(--brand, #2563EB);
}

.auth-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: none;
    color: var(--text-muted, #94A3B8);
    cursor: pointer;
}

.auth-modal-close svg {
    width: 16px;
    height: 16px;
}

.auth-modal-close:hover {
    color: var(--text-secondary, #64748B);
    background: var(--surface-muted, #F8FAFC);
}

.auth-modal-body {
    padding: 18px 28px 28px;
}

.auth-modal-body .auth-tabs {
    justify-content: center;
    gap: 36px;
    margin-bottom: 22px;
}

.auth-modal-body #accountTabs .account-tab {
    font-size: 1.1rem;
}

/* 2026-09：邮箱统一入口改版——第一屏不再展示"注册/登录" Tab（保留元素只是为了继续复用
   accountPage.js 已有的表单切换逻辑，见 authModal.js setActiveTab），这里强制隐藏；
   #accountTabs 也用了 .auth-tabs 类（display:flex），跟原生 [hidden] 属性选择器同等
   优先级时后声明的会赢，所以用更高优先级的选择器确保它始终不可见 */
.auth-modal-body #accountTabs[hidden] {
    display: none;
}

/* 邮箱在第一屏统一收集，真正表单里原本各自的邮箱字段不再重复展示（真实 <input> 节点和
   id 都还在，值会被 authModal.js 同步过去，accountPage.js 提交时读到的还是这两个真实
   id，没有任何变化） */
.auth-modal-body .auth-field--email {
    display: none;
}

/* ---------------- 第一屏：统一欢迎入口 ---------------- */

.auth-step-email {
    padding-top: 4px;
}

.auth-welcome-title {
    margin: 0 0 20px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-number, #172033);
    text-align: center;
}

.auth-google-btn--primary {
    background: var(--brand, #2563EB);
    border-color: var(--brand, #2563EB);
    color: #fff;
}

.auth-google-btn--primary:hover {
    background: var(--brand-hover, #1D4ED8);
}

/* Google 官方多色 G 图标在纯色按钮上保留原色即可，不需要额外处理 */

/* 2026-09：邮箱 + 继续改成一个统一的大输入框组件——宽度和上面的 Google 按钮一致
   （两者都是 .auth-modal-body 里同一列宽度的块级元素，天然对齐，不需要额外设置宽度），
   外层这一圈边框/圆角/背景统一画在 .auth-step-email-row 本身上，输入框自己的边框/圆角
   去掉、改透明，"继续"按钮也去掉自己的圆角，靠外层 overflow:hidden 顺着外框圆角裁出
   正确的右侧圆角，视觉上就是"一个大框，左边输入、右边按钮"，不是两个独立控件拼在一起 */
.auth-step-email-row {
    display: flex;
    align-items: stretch;
    height: 54px;
    border: 1px solid var(--border, #E2E7EF);
    border-radius: 13px;
    background: var(--surface, #fff);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 焦点高亮画在外层这一整个框上，不要再让里面的 <input> 自己也弹一层框（避免双层框） */
.auth-step-email-row:focus-within {
    border-color: var(--brand, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.auth-step-email-row .auth-input-wrap {
    flex: 1;
    min-width: 0;
}

.auth-step-email-row .auth-input {
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
}

.auth-step-email-row .auth-input:focus {
    outline: none;
    box-shadow: none;
}

.auth-step-continue-btn {
    flex: none;
    height: 100%;
    padding: 0 20px;
    border: none;
    border-radius: 0;
    background: var(--brand, #2563EB);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-step-continue-btn:hover:not(:disabled) {
    background: var(--brand-hover, #1D4ED8);
}

.auth-step-continue-btn:disabled {
    background: var(--surface-muted, #F1F4F9);
    color: var(--text-muted, #94A3B8);
    cursor: not-allowed;
}

.auth-step-email .auth-legal-footer {
    margin-top: 18px;
}

/* ---------------- 第二屏：6 位邮箱验证码 ---------------- */

.auth-step-code {
    padding-top: 4px;
    text-align: center;
}

.auth-code-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.auth-code-icon {
    width: 44px;
    height: 44px;
    color: var(--brand, #2563EB);
}

.auth-code-hint {
    margin: 0 0 20px;
    font-size: 0.92rem;
    color: var(--text-secondary, #64748B);
    line-height: 1.5;
}

.auth-code-email {
    font-weight: 700;
    color: var(--text-number, #172033);
}

.auth-code-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.auth-code-box {
    width: 46px;
    height: 54px;
    border: 1px solid var(--border, #E2E7EF);
    border-radius: 12px;
    background: var(--surface, #fff);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-number, #172033);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-code-box:focus {
    outline: none;
    border-color: var(--brand, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.auth-code-box:disabled {
    opacity: 0.6;
}

.auth-step-code .auth-error {
    margin-bottom: 12px;
}

.auth-code-resend {
    margin: 0 0 18px;
    font-size: 0.86rem;
    color: var(--text-secondary, #64748B);
}

.auth-code-resend .auth-switch-btn {
    margin-left: 4px;
}

.auth-code-resend .auth-switch-btn:disabled {
    color: var(--text-muted, #94A3B8);
    cursor: not-allowed;
}

.auth-step-code .auth-inline-link {
    font-size: 0.86rem;
}

/* ====================================================================
   手机版（≤768px）：改成底部半屏 Bottom Sheet，不再垂直居中铺满——
   上半屏继续露出背景市场页面，下半屏是登录/注册面板，面板本身最高
   55vh，内容超出时面板内部滚动，背景页面保持锁定不可滚动/不可点击
   （锁定逻辑本来就是 authModal.js 已有的 body overflow:hidden + 遮罩
   拦截点击，这里不涉及 JS，纯 CSS 调整位置/尺寸/圆角）。
   ≥769px 桌面端不受这个断点影响，完全维持上面原有的居中弹窗样式。

   iOS Safari 专项修复：地址栏/底部工具栏会动态收起展开，普通的 vh 单位
   在 Safari 里默认按"工具栏完全收起"的最大可能高度计算，不是按当前
   实际可见区域计算——工具栏还显示着时（刚打开页面最常见的状态），
   用 72svh（small viewport height，始终按"工具栏展开、可见区域最小"的
   基准计算，不会被 Safari 的动态基准放大）覆盖 72vh，两条写在一起：
   不支持 svh 的浏览器自动忽略第二条、继续用第一条 vh 兜底，支持的浏览器
   （包括真机 iOS Safari）用第二条更准确的值。 */
@media (max-width: 768px) {
    .auth-modal-overlay {
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.28);
    }

    .auth-modal-dialog {
        width: 100%;
        max-width: none;
        max-height: 72vh;
        max-height: 72svh;
        border-radius: 20px 20px 0 0;
        transform: translateY(16px);
        -webkit-overflow-scrolling: touch;
    }

    /* 顶部留出空间给下面的拖拽视觉条；.auth-modal-header 本身继续保持桌面端
       已有的 position:sticky（这里不覆盖它，sticky 本身就能作为下面绝对定位
       拖拽条的容器），关闭按钮/品牌小标滚动时依然贴在顶部不会被表单内容盖住。
       真机 iOS Safari 上 sticky 元素和它下面的滚动内容之间会出现重绘/合成
       层不同步的已知问题（滚动时 sticky 区域出现"透明/被下方内容穿透"的
       视觉错误）——显式给白底、显式关掉 backdrop-filter、显式 z-index 高于
       表单内容、并用 translateZ(0) 强制这块区域单独提升成一个合成层，是
       这个 WebKit 渲染问题的标准修复方式，不影响布局本身 */
    .auth-modal-header {
        padding-top: 22px;
        z-index: 5;
        background: #fff;
        opacity: 1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .auth-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: #D7DCE5;
    }

    .auth-modal-body {
        padding: 16px 20px 22px;
    }
}

/* Modal 专用轻提示（忘记密码/Google 占位），和 account.html 上的 #authToast
   是各自独立的两个元素（分属不同文档），样式保持一致 */
.auth-modal-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(10px);
    background: rgba(23, 32, 51, 0.92);
    color: #fff;
    font-size: 0.84rem;
    padding: 10px 18px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2001;
    white-space: nowrap;
}

.auth-modal-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}