/* ============================================================
   启元.QIEAM 页面域样式 —— 登录页 (v4/pages/login.css)
   消费者：login.html（未登录独立壳，组件全部使用 qx-* 标准件）。
   结构对齐主系统：顶栏 → qx-page-band → qx-panel → 页脚。
   壳层专属类一律 lg- 前缀；不引用 auth.css（注册/验证/TOTP 共用不受影响）。
   纪律：100% 消费 v4/tokens.css 既有令牌，零 !important。
   ============================================================ */

body.lg-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    line-height: var(--lh-body);
    color: var(--scale-ink-2);
    background-color: var(--scale-face);
    -webkit-font-smoothing: antialiased;
}

/* 跳转主内容链接（获得焦点才可见） */
.lg-skip {
    position: fixed;
    /* 布局规格值：60 为 skip link 局部堆叠层（<1000，UI 纪律检查项 6 豁免区间） */
    z-index: 60;
    top: var(--scale-sp-3);
    left: var(--scale-sp-3);
    padding: var(--scale-sp-2) var(--scale-sp-3);
    color: var(--scale-panel);
    background-color: var(--scale-steel);
    border-radius: var(--scale-r-ctl);
    font-size: var(--scale-t-meta);
    transform: translateY(calc(-100% - var(--scale-sp-4)));
    transition: transform var(--dur-inst) var(--ease-out);
}

.lg-skip:focus {
    transform: translateY(0);
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

/* ── 顶栏（品牌行 + 主题切换，同主系统顶栏语感） ── */
.lg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-3);
    padding: var(--scale-sp-3) var(--scale-sp-5);
    background-color: var(--scale-panel);
    border-bottom: 1px solid var(--scale-rule);
}

.lg-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-2);
}

.lg-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 布局规格值：32px 对齐 --scale-sp-5 档图标锚点（顶栏徽标容器） */
    width: 32px;
    height: 32px;
}

.lg-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.lg-brand-copy b {
    display: block;
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
    line-height: var(--lh-tight);
}

.lg-brand-copy small {
    display: block;
    margin-top: var(--scale-sp-hair);
    font-size: var(--scale-t-tick);
    /* 排版规格值：品牌副标字距 0.08em（tokens.css 无字距阶梯，不强行令牌化） */
    letter-spacing: 0.08em;
    color: var(--scale-ink-3);
}

.lg-theme-toggle {
    /* 布局规格值：40px 顶栏切换按钮点击热区（qx-icon-btn 基础上的壳层尺寸增强） */
    width: 40px;
    height: 40px;
}

/* 主题图标显隐（深浅互斥，同主系统顶栏按钮口径） */
.lg-theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .lg-theme-toggle .bi-sun { display: inline-block; }
[data-bs-theme="dark"] .lg-theme-toggle .bi-moon-stars { display: none; }

/* ── 主区：桌面双栏（左简介 / 右表单），窄屏单列表单优先 ── */
.lg-main {
    flex: 1;
    width: 100%;
    /* 布局意图：1140px 主区内容列上限，与主系统页宽语态一致 */
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--scale-sp-6) var(--scale-sp-5) var(--scale-sp-7);
}

.lg-columns {
    display: grid;
    /* 布局意图：右栏表单列 360px 起排、440px 封顶，面板语态宽度 */
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: var(--scale-sp-7) var(--scale-sp-8);
    /* 两栏等高：左栏元信息簇贴底，与右栏面板底缘齐平，消除底缘参差 */
    align-items: stretch;
    width: 100%;
}

.lg-form-col { width: 100%; }

/* ── 系统简介与内容摘要（lg-intro，V4 刻度语态） ── */
/* 纵向弹性列：内容靠顶，元信息簇（版本号 + 安全条）经 auto 边距贴底 */
.lg-intro {
    display: flex;
    flex-direction: column;
}

.lg-intro-brand {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-3);
}

.lg-intro-logo { display: inline-flex; }

.lg-version {
    /* 元信息簇：auto 顶推到底、与安全条成组；sp-5 为左栏内容不足时的保底间隔 */
    margin: auto 0 var(--scale-sp-2);
    padding-top: var(--scale-sp-5);
}

.lg-tagline {
    margin: var(--scale-sp-5) 0 0;
    font-size: var(--scale-t-lead);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--scale-ink-1);
    /* 排版规格值：导语紧排 -0.01em */
    letter-spacing: -0.01em;
}

.lg-tagline span {
    color: var(--scale-steel);
    font-style: normal;
}

.lg-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--scale-sp-3);
    margin: var(--scale-sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.lg-feat {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-3);
    padding: var(--scale-sp-4);
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
}

.lg-feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* 布局规格值：44px 图标容器（触控最小热区规格） */
    width: 44px;
    height: 44px;
    background-color: var(--scale-steel-wash);
    color: var(--scale-steel);
    font-size: var(--scale-t-title);
}

.lg-feat-copy { min-width: 0; }

.lg-feat-copy b {
    display: block;
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
    line-height: var(--lh-tight);
}

.lg-feat-copy p {
    margin: var(--scale-sp-1) 0 0;
    font-size: var(--scale-t-meta);
    line-height: var(--lh-body);
    color: var(--scale-ink-3);
}

.lg-secure {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-2);
    /* 紧跟 lg-version 组成元信息簇，间距由 lg-version 的 margin-bottom 提供 */
    padding: var(--scale-sp-3) var(--scale-sp-4);
    background-color: var(--scale-recess);
    border: 1px solid var(--scale-rule);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    line-height: var(--lh-body);
}

.lg-secure i {
    flex-shrink: 0;
    margin-top: var(--scale-sp-hair);
    color: var(--scale-ok);
}

.lg-secure b {
    color: var(--scale-ink-2);
    font-weight: 600;
}

.lg-secure p { margin: var(--scale-sp-hair) 0 0; }

.lg-band-sub {
    margin: var(--scale-sp-1) 0 0;
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

/* ── 反馈提示（语义衬底 + 中性边框，直角口径与 qx-panel 一致） ── */
.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-2);
    margin-bottom: var(--scale-sp-3);
    padding: var(--scale-sp-2) var(--scale-sp-3);
    border: 1px solid var(--scale-rule);
    font-size: var(--scale-t-body);
    line-height: var(--lh-body);
}

.lg-alert i {
    flex-shrink: 0;
    margin-top: var(--scale-sp-hair);
}

.lg-alert ul {
    margin: 0;
    padding-left: var(--scale-sp-3);
}

.lg-alert--error {
    background-color: var(--scale-redline-wash);
    border-color: var(--scale-rule);
    color: var(--scale-redline);
}

/* 成功提示走绿色语义衬底（--scale-ok-wash），不再借用交互青的 steel-wash */
.lg-alert--ok {
    background-color: var(--scale-ok-wash);
    border-color: var(--scale-rule);
    color: var(--scale-ok);
}

/* ── 面板内表单小件（lg- 前缀页面域） ── */
/* 字段头行：标签左、辅助链接右（忘记密码），不新增面板二级头 */
.lg-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--scale-sp-2);
}

.lg-field-head .lg-link { flex: none; }

.lg-link {
    font-size: var(--scale-t-meta);
    font-weight: 500;
    color: var(--scale-steel);
    text-decoration: none;
    transition: color var(--dur-inst) var(--ease-out);
}

.lg-link:hover {
    color: var(--scale-steel-hi);
    text-decoration: underline;
}

.lg-link:focus-visible {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
    border-radius: var(--scale-r-ctl);
}

.lg-input-group { position: relative; }

.lg-input-group > i {
    position: absolute;
    top: 50%;
    left: var(--scale-sp-2);
    transform: translateY(-50%);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
    pointer-events: none;
    transition: color var(--dur-inst) var(--ease-out);
}

.lg-input-group:focus-within > i { color: var(--scale-steel); }

/* 内嵌图标/眼睛按钮时的输入内距（图标区 8 偏移 + 32 起排，眼睛区 8+32，令牌间距） */
.lg-input-group .qx-input {
    width: 100%;
    padding-left: var(--scale-sp-5);
    padding-right: var(--scale-sp-6);
}

/* 首屏未触碰的空必填框不标红：占位符仍在（值为空）且未聚焦时回默认框色，
   输入/填充/聚焦后交还组件 :invalid 与 :focus 态（仅登录页作用域） */
.lg-input-group .qx-input:invalid:placeholder-shown:not(:focus) {
    border-color: var(--scale-rule);
}

.lg-eye {
    position: absolute;
    top: 50%;
    right: var(--scale-sp-1);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 布局规格值：32px 对齐 --scale-sp-5 档图标锚点（可见性切换按钮热区） */
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--scale-ink-3);
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--scale-r-ctl);
    font-size: var(--scale-t-body);
    transition: color var(--dur-inst) var(--ease-out),
                background-color var(--dur-inst) var(--ease-out);
}

.lg-eye:hover {
    color: var(--scale-ink-1);
    background-color: var(--scale-recess);
}

.lg-eye:focus-visible {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 1px;
}

.lg-eye[aria-pressed="true"] { color: var(--scale-steel); }

/* 大写锁定提示（login.js 以 .show 显隐） */
.lg-caps-hint {
    display: none;
    margin: 0;
    color: var(--scale-warn);
    font-size: var(--scale-t-meta);
}

.lg-caps-hint.show { display: block; }

/* 记住用户名行 */
.lg-check-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--scale-sp-4);
    font-size: var(--scale-t-body);
}

/* 控件视觉与六态由 qx-check 标准件承担；此处仅归零 label 外边距 */
.lg-check-row label {
    margin: 0;
}

/* 用户协议勾选：qx-check 标准件 + lg-agree__label 布局修饰（整行占满）；
   未勾选时按钮预灰（JS 随后同步 disabled；无 JS 时勾选后 :has 条件解除，仍可正常提交）；
   服务端校验失败时模板给 label 追加 is-error，错误边框由 qx-check 错误态承接 */
.lg-agree {
    margin-bottom: var(--scale-sp-4);
}

.lg-agree__label {
    display: flex;
    margin: 0;
}

.lg-agree__hint {
    margin: var(--scale-sp-2) 0 0;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
}

.lg-agree__hint.is-error { color: var(--scale-redline); }

#loginForm:has(#agreeTerms:not(:checked)) #loginBtn {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--scale-recess);
    border-color: var(--scale-rule);
    color: var(--scale-ink-4);
}

/* 主按钮：占满面板内容宽 */
.lg-submit { width: 100%; }

/* ── SSO 区 ── */
.lg-divider {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    margin: var(--scale-sp-4) 0 var(--scale-sp-2);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-tick);
}

.lg-divider::before,
.lg-divider::after {
    flex: 1;
    height: 1px;
    content: "";
    background-color: var(--scale-rule);
}

.lg-sso-row {
    display: grid;
    /* 布局意图：120px 为 SSO 按钮最小列宽，多提供方自动换行 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--scale-sp-2);
}

.lg-sso-btn { width: 100%; }

/* ── 注册行 / 版权 ── */
.lg-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-2);
    margin-top: var(--scale-sp-4);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-3);
}

.lg-foot-row .lg-link {
    font-size: var(--scale-t-body);
    font-weight: 600;
}

/* 版权条满宽（body 直接子项）：分隔线横贯视口，左右内距与顶栏一致 */
.lg-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--scale-sp-1) var(--scale-sp-3);
    padding: var(--scale-sp-3) var(--scale-sp-5);
    border-top: 1px solid var(--scale-rule);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    text-align: center;
}

/* ── 响应式：≤1024 单列表单优先、简介后置 ── */
@media (max-width: 1024px) {
    .lg-columns { grid-template-columns: minmax(0, 1fr); }

    /* 布局意图：520px 为窄屏单列内容上限，保持可读行长 */
    .lg-form-col {
        order: 1;
        max-width: 520px;
        margin: 0 auto;
    }

    .lg-intro {
        order: 2;
        max-width: 520px;
        margin: var(--scale-sp-6) auto 0;
    }
}

/* ── ≤480：收紧留白、特性网格单列、隐藏品牌副标 ── */
@media (max-width: 479.98px) {
    .lg-topbar { padding: var(--scale-sp-3) var(--scale-sp-4); }
    .lg-copy { padding-inline: var(--scale-sp-4); }
    .lg-main { padding: var(--scale-sp-5) var(--scale-sp-3) var(--scale-sp-5); }
    .lg-feats { grid-template-columns: minmax(0, 1fr); }
    .lg-brand-copy small { display: none; }
}

/* ── 动效红线：尊重系统减弱动效偏好 ── */
@media (prefers-reduced-motion: reduce) {
    .lg-skip,
    .lg-link,
    .lg-input-group > i,
    .lg-eye { transition: none; }
}