/* ============================================================================
   学员登录页 / 个人主页 共用样式
   ----------------------------------------------------------------------------
   依赖 index.css（页头、footer、字体、layui 栅格），这里只写本页独有的部分，
   全部以 .login- 前缀命名，避免和首页样式互相污染。
   ============================================================================ */

.login-body {
    background: #f2f5f9;
    min-height: 100%;
}

/* 【必须保留】`hidden` 属性会被下面那些 `display: block` 盖掉 ——
   作者样式优先级高于浏览器默认的 `[hidden] { display: none }`，
   于是 JS 里 `node.hidden = true` 会「藏不住」。这里显式兜一次。 */
.login-body [hidden] {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   【性能兜底 · 必须保留】
   index.css 开头有一条
       body *, *:hover { transition-duration: …; transition-property: … z-index, transform, box-shadow }
   它给页面上**每一个 DOM 节点**都挂上过渡（连 `z-index` 都做动画，毫无意义），
   而且 `*:hover` 又重复一遍。本页每秒刷新倒计时、点击时反复切换 `hidden`，
   每来一次都要让浏览器对整棵树重算样式并启动过渡 —— 现象就是
   「点快一点浏览器就卡」。

   这里在**登录页 / 个人主页范围内**把它整体关掉（不动 index.css，免得影响首页）。
   确实需要过渡的地方在本文件里按需单独加回（见下面的页头导航）。 */
.login-body,
.login-body *,
.login-body *:hover {
    transition: none;
}

/* 页头导航的 hover 保留原有过渡手感 */
.login-body .cxunet-header-nav ul li a {
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* ----------------------------------------------------------------------------
   【必须保留】index.css 里 `* { cursor: default !important }` 会把本文件所有
   `cursor: pointer` 压掉（作者样式里 `!important` 的优先级高于普通声明），
   于是页面上每个按钮/链接都显示箭头光标，看着就「不像能点」。
   这里用同等 `!important` + 更高的选择器优先级把它抢救回来。
   ---------------------------------------------------------------------------- */
.login-body a,
.login-body .qr-mask-btn,
.login-body .login-btn,
.login-body .login-btn-ghost {
    cursor: pointer !important;
}

/* 登录页页头不做透明渐变（首页是透明+滚动变色），这里始终白底 */
.login-body #cxunet-header {
    background: #ffffff;
}

.login-main {
    width: 100%;
    float: left;
    /* 页头是 fixed，高度约 70px，这里让开 */
    padding: 120px 0 60px;
}

.login-card {
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 30px 34px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 40, 100, 0.07);
    box-sizing: border-box;
    /* 【必须保留】子元素里凡是用 `float` / 绝对定位的，容器不形成 BFC 就兜不住，
       卡片高度会塌成「上下 padding」那 74px，白色卡片的底边直接兜不住二维码。
       overflow:hidden 让它成为 BFC，把浮动的子元素高度算进来。 */
    overflow: hidden;
}

.login-panel {
    width: 100%;
    text-align: center;
}

.login-title {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #2f363c;
}

.login-sub {
    margin-bottom: 26px;
    font-size: 13px;
    line-height: 1.7;
    color: #8a8f99;
}

/* ---------------- 二维码 ---------------- */

.qr-box {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto 18px;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.qr-img {
    width: 240px;
    height: 240px;
    display: block;
}

.qr-loading {
    width: 100%;
    height: 240px;
    line-height: 240px;
    text-align: center;
    font-size: 13px;
    color: #8a8f99;
}

/* 遮罩尺寸与 .qr-box 一致；内容用「绝对定位 + 垂直居中」而不是固定
   margin-top —— 内容多寡（有没有头像、有没有按钮）都不会再撑出盒子被裁掉。
   历史事故：`.qr-mask-text` 写死 92px，遇到「头像 + 文字 + 按钮」的组合就把
   按钮顶出 240px 的盒子，而 `.qr-box` 是 `overflow:hidden` ——
   被裁掉的部分**既看不见也点不到**（实测按钮可见高度 = 0px）。 */
.qr-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    padding: 0 16px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.97);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.qr-mask-text {
    font-size: 15px;
    color: #2f363c;
}

.qr-mask-tip {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #8a8f99;
}

.qr-mask-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 20px;
    font-size: 13px;
    line-height: 20px;
    color: #ffffff;
    background-color: #1e9fff;
    border-radius: 4px;
}

/* 已扫码：头像 + 文案 */
.qr-scan-avatar {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2f7;
    line-height: 56px;
    text-align: center;
    flex: 0 0 auto;
}

.qr-scan-avatar img {
    width: 56px;
    height: 56px;
    display: block;
}

.qr-scan-fallback {
    font-size: 20px;
    color: #1e9fff;
}

#qr-scanned .qr-mask-text {
    font-size: 14px;
    color: #1e9fff;
}

/* ---------------- 状态行 / 票根 ---------------- */

.login-status {
    min-height: 20px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 20px;
    color: #8a8f99;
}

.login-status.is-error {
    color: #e34d59;
}

/* 报错提示行：独占一行（不覆盖状态行内容），由 JS 做 5 秒倒计时后隐藏 */
.login-hint {
    min-height: 20px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 20px;
    color: #e34d59;
}

/* 票据短号：与手机上小程序显示的 8 位编号对照用（对不上说明扫的不是这张码） */
.login-ticket {
    display: inline-block;
    margin-bottom: 18px;
    padding: 3px 14px;
    font-size: 12px;
    line-height: 20px;
    color: #6b7280;
    background: #f6f9fd;
    border: 1px solid #e3eefb;
    border-radius: 999px;
}

.login-ticket b {
    margin-left: 2px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    letter-spacing: 1px;
    color: #1e9fff;
}

/* ---------------- 按钮 ---------------- */

.login-actions {
    text-align: center;
}

.login-actions-sub {
    margin-top: 10px;
}

.login-btn,
.login-btn-ghost {
    display: inline-block;
    min-width: 120px;
    height: 38px;
    line-height: 36px;
    margin: 4px 5px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.login-btn {
    color: #ffffff;
    background-color: #1e9fff;
    border: 1px solid #1e9fff;
}

.login-btn-ghost {
    color: #1e9fff;
    background-color: #ffffff;
    border: 1px solid #a8d8ff;
}

.login-btn-ghost:hover {
    border-color: #1e9fff;
    background-color: #f4faff;
}

.login-tip {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.8;
    color: #a4a9b3;
}

/* ---------------- 已登录 ---------------- */

.login-user {
    margin-bottom: 26px;
}

.login-avatar {
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: block;
    background: #eef2f7;
    object-fit: cover;
}

.login-avatar-empty {
    line-height: 76px;
    text-align: center;
    font-size: 26px;
    color: #1e9fff;
}

.login-nickname {
    font-size: 18px;
    color: #2f363c;
    word-break: break-all;
}

.login-desc {
    margin-top: 8px;
    font-size: 12px;
    color: #8a8f99;
}

/* ---------------- footer ---------------- */

.login-footer {
    width: 100%;
    float: left;
    text-align: center;
}

.login-footer ul li {
    list-style: none;
}

/* ---------------- 小屏 ---------------- */

@media screen and (max-width: 768px) {
    .login-main {
        padding: 100px 0 40px;
    }

    .login-card {
        padding: 30px 20px 26px;
    }

    .login-btn,
    .login-btn-ghost {
        min-width: 108px;
    }
}