/* ==========================================================================
   登录弹层  login-modal.css
   零依赖、零构建。配色沿用官网主蓝（#1677ff），独立类名前缀 .login-modal*，
   不污染官网 2021 版式样式。

   背景（为什么需要它）：顶栏「登录」原本 target="_blank" 开新标签页，
   落地页是总部登录页（登录框固定 303px 宽），观感又跳又小。
   改成当前页弹层 + 按视口放大。

   ⚠️ 关于放大：总部登录页里 .loginBox 是写死的 303px，跨域 iframe 我们改不了
   它的内部样式，只能对 iframe 元素本身做缩放。这里用 zoom 而不是 transform:scale
   —— zoom 会触发【重新布局渲染】，文字是重新栅格化的，放大后依然锐利；
   transform:scale 是把已栅格化的位图拉大，字号会发虚。
   Firefox 老版本不支持 zoom，用 @supports 兜底成 transform。
   ========================================================================== */

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 99995;              /* 略高于试用弹窗(99990)，两者不会同时开 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

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

/* ---- 遮罩 ---- */
.login-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 44, .58);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: login-mask-in .22s ease-out both;
}

@keyframes login-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 对话框 ---- */
.login-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 591px 是 iframe 渲染宽(303×1.95)，左右各留 44px 呼吸位 */
    max-width: 680px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 70px -12px rgba(8, 30, 74, .45), 0 2px 8px rgba(8, 30, 74, .10);
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    box-sizing: border-box;
    animation: login-dialog-in .28s cubic-bezier(.16, .84, .44, 1) both;
}

.login-modal__dialog *,
.login-modal__dialog *::before,
.login-modal__dialog *::after { box-sizing: border-box; }

@keyframes login-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 顶栏 ---- */
.login-modal__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 14px 0 20px;
    border-bottom: 1px solid #eef1f6;
    background: linear-gradient(180deg, #fafcff, #f4f7fc);
}

.login-modal__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    color: #16233c;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 微信扫码入口：靠右推，紧挨关闭按钮 */
.login-modal__alt {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cfe0fb;
    border-radius: 16px;
    background: #fff;
    color: #1677ff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, border-color .18s, box-shadow .18s;
}

.login-modal__alt:hover {
    background: #f2f7ff;
    border-color: #a9c9f7;
    box-shadow: 0 2px 8px rgba(22, 119, 255, .14);
}

.login-modal__alt:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }

.login-modal__close {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f3f5f9;
    color: #6b7280;
    cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
}

.login-modal__close:hover { background: #e6ebf5; color: #1677ff; transform: rotate(90deg); }
.login-modal__close:focus-visible { outline: 2px solid #1677ff; outline-offset: 2px; }

/* ---- 舞台（iframe 容器）----
   padding 给的是视觉呼吸位；zoom 会把 iframe 撑大，这里用 flex 居中兜住。 */
.login-modal__stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 0 8px;
    min-height: 200px;
    overflow: auto;
    background: #fff;
}

.login-modal__frame {
    display: block;
    width: 303px;                /* 总部 .loginBox 的实际宽度，填满它不留内部留白 */
    height: 325px;               /* 略高于登录框(约 314px)，避免内部出现滚动条 */
    border: 0;
    zoom: var(--lm-zoom, 1.95);  /* 由 JS 按视口再夹一次上限 */
}

/* 老 Firefox 等不支持 zoom 的浏览器：退化成 transform 缩放（字会略糊，但能用） */
@supports not (zoom: 1) {
    .login-modal__frame {
        transform: scale(var(--lm-zoom, 1.95));
        transform-origin: top center;
    }
    .login-modal__stage { min-height: calc(325px * var(--lm-zoom, 1.95)); }
}

/* ---- 加载态 ---- */
.login-modal__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #8b96a8;
    font-size: 13.5px;
    background: #fff;
    z-index: 2;
}

.login-modal__loading[hidden] { display: none; }

.login-modal__spin {
    width: 18px;
    height: 18px;
    border: 2px solid #dbe6f7;
    border-top-color: #1677ff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}

@keyframes login-spin { to { transform: rotate(360deg); } }

/* ---- 底部说明 ---- */
.login-modal__foot {
    flex: none;
    padding: 10px 20px 12px;
    background: #fffaf0;
    border-top: 1px solid #f6e6c8;
    color: #8a6212;
    font-size: 12.5px;
    line-height: 1.65;
}

.login-modal__foot b { color: #6d4c0a; font-weight: 600; }

/* ---- 滚动锁 ---- */
body.login-lock { overflow: hidden !important; }

/* 打开时压暗官网装饰层，避免和弹层抢视觉 */
body.login-lock .rb-aurora-canvas { opacity: .35; }

/* ---- 窄屏 ---- */
@media (max-width: 720px) {
    .login-modal { padding: 0; align-items: flex-end; }

    .login-modal__dialog {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 16px 16px 0 0;
    }

    .login-modal__head { padding: 0 10px 0 16px; min-height: 50px; gap: 8px; }

    .login-modal__title { font-size: 14.5px; }

    /* 小屏也要让人看懂这是干嘛的 —— 414px 宽实测放得下「微信扫码登录」六个字，
       只是稍微收一点内边距和字号。真的窄到 400px 以下才退化成纯图标。 */
    .login-modal__alt { padding: 0 10px; font-size: 12.5px; gap: 3px; }

    .login-modal__foot { padding: 9px 16px 11px; font-size: 12px; }
}

@media (max-width: 400px) {
    .login-modal__title { font-size: 13.5px; }

    /* 到这一步才真的放不下文字，只留箭头图标（aria-label 仍在，读屏不受影响） */
    .login-modal__alt-txt { display: none; }
    .login-modal__alt { padding: 0 9px; }
}