/* ==========================================================================
   q-login.css · ff3sys 统一登录界面皮肤   v1.0.5  (2026-09-26)
   --------------------------------------------------------------------------
   作用域：两种承载形态共用同一份皮肤，零外溢到应用页
     A) PHP 独立登录页  -> <body class="lg-page">            （SEMS/SCRS/SFMS/STMS）
     B) SPA 内嵌登录视图 -> 登录容器上加 class="lg-page"      （PCMS/MOD/SPCS/HOE/SSMS）

   v1.0.5 —— 统一补充「英文全称」（P5：7 站命名区口径对齐 home.ff3sys.cn）
     ① 新增 `.lg-name-en`：中文态展示「中文名 + 英文全称」两行；
        英文全称**唯一权威来源** = 门户 /var/www/portal/index.html 的 `const SYSTEMS`。
     ② en 态由 `html[lang^="en"] .lg-page .lg-name-en{display:none}` 隐藏 —— 此时
        `.lg-name` 自身已是英文，不隐藏会出现同名两行。纯 CSS 判定，各站无需改 JS：
        已实测 7 站（SEMS/SCRS/SFMS/STMS/PCMS/MOD/SPCS）的
        `document.documentElement.lang` 在 zh/en 两态均正确翻转。
     ③ 两行式站点（SFMS/STMS 的 `.lg-name.lg-last`）底部间距转移到英文行：
        zh 态 `.lg-name` 归零、`.lg-name-en` 取 22px；en 态英文行隐藏时中文名自行补足
        （用 `html[lang^="en"]` 抬特异度压过 `:has(+ …)` 规则）。
     ④ MOD 的 `Management OnDuty System` → `Management On Duty System`；
        SPCS 的 `Smart Product Collection System` → `Smart Product Statistics System`
        （两处均为与门户不一致的拼写，本版一并更正）。

   v1.0.4 —— SPA 承载形态适配（Phase 4：PCMS / MOD / SPCS）
     ① 新增 `.lg-gate`：以 `body.logged-out` 等宿主类控显隐的站点（MOD），
        登录容器默认隐藏、宿主类出现时才 display:flex。
     ② 新增 `.lg-overlay`：保留原 `.login-screen{position:fixed;inset:0}` 的
        覆盖层语义（PCMS），z-index 走 `--lg-z`（PCMS 需 50：其 .sheet=60 必须压在其上）。
     ③ 语言条归一：SPA 用 <button> 且由 JS 切 `.active`（PCMS/MOD），
        需与 PHP 站的 `a.on` 同款；并把 `.seg-btn`/`.tb-btn` 等宿主类收成全站统一胶囊。
     ④ `.lg-hint:empty` 自动隐藏（MOD 的 #loginHint 只写 textContent）。
     ⑤ `.lg-page .dev-credit` 显式配色（PCMS 改名后 q-dark 的 `.login-box .dev-credit` 会失配）。
     ⑥ ★显式钉死 `--q-field` / `--q-text`：SPA 站登录容器改名后，若仍处于
        `body:has(.shell)` 作用域，q-dark 会把 `--q-field` 翻成深色，而 q-theme 的
        `input:not(…)×5{background:var(--q-field)!important}`（0,5,1）会就地生效 ——
        输入框变深底而占位符仍是深色，不可读。就地重定义与作用域无关。
     ⑦ ★输入框的 color / border 必须进「对抗块」：MOD、SPCS **未加载 q-theme.css**，
        于是 q-dark 的 `form:has(input[type=password]) input{color:#e8edf7!important;
        border-color:#2a3447!important}`（0,1,3）会就地生效 → 浅字压浅底。
   依赖：  /qtheme/q-theme.css（Q 版令牌与自托管字体）
   加载：  必须在 q-theme.css / q-dark.css **之后**（建议各站 <head> 末位）
   回滚：  删除各站 <link rel="stylesheet" href="/qtheme/q-login.css?v=..."> 与对应的
           lg-page 类即可；本文件可留在原处（不被引用即无副作用）。
   --------------------------------------------------------------------------
   ★三条必须保留的原因注释（评审时不要删）：

   1) font-family 必须显式声明并带 !important
      —— 全局 00-wb-uialign.conf 注入的
         `body,h1,h2,…,button,input,.brand{font-family:'SimSun','宋体'!important}`
         会把登录页所有文字变成宋体，压掉 Q 版字体。

   2) 所有深底文字必须用本文件的 --lg-* 令牌
      —— 不要复用 --txt-2/--txt-3/--q-muted 等浅色主题令牌：
         深色登录卡里还夹着被 uialign `[class*=login i]` 刷成浅底的子块，混用会造浅字浅底。
         同理：SPA 站的登录容器**不要**保留含 "login" 的 class 名，
         否则会被 uialign 的 [class*=login i]{background:#f4f7fb!important} 刷成浅底。

   3) 末段「对抗全局注入层」整块必须保留
      —— uialign 与 q-dark.css 用 `form:has(input[type=password]) …{…!important}` 无差别
         命中登录表单里的**所有** button/input，会把显隐按钮刷成蓝色实心块、
         把表单面板底色与卡片压成同色（丢掉层次）、把圆角改掉。
         该块用 `.lg-page` 前缀（(0,2,0)）抬过 `:has()` 选择器，并统一带 !important。
         ★断点相关的量值一律走 CSS 变量，这样 !important 不会打断响应式覆盖。

   4) 占位符必须单独覆盖
      —— q-theme.css 有全局 `::placeholder{color:#aab6cf!important}`，
         落在浅色输入面 #f6f9ff 上只有 **1.93:1**。全页「文本节点」扫描扫不到伪元素，
         所以这类问题不会体现在常规对比度报告里，必须显式断言 ::placeholder 计算色。

   5) 输入框的边框/底色/圆角/聚焦态**不重复对抗**
      —— q-theme.css 的
         `input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range])`
         特异度 (0,5,1) 且全带 !important，任何常规覆盖都赢不了。
         本皮肤改为「取值与其一致」（--lg-field/--lg-field-txt 直接引用 --q-field/--q-text，
         --lg-r-field 引用 --q-r-md），既不用打架也不会视觉走样。
   ========================================================================== */

/* ------------------------------------------------------------ 令牌 + 变量 */
.lg-page{
  /* ★就地钉死宿主令牌（文件头 v1.0.4 ⑥）：与是否处于 .shell / body:has(.shell)
     深色作用域无关，保证输入框恒为浅底 + 深字（占位符 --lg-field-ph 才成立）。 */
  --q-field:#f6f9ff;
  --q-text:#2c3550;
  /* 面 */
  --lg-bg:#0f1420;            /* 页面底 */
  --lg-card:#161d2b;          /* 卡片 */
  --lg-panel:#101827;         /* 表单面板（比卡片深一阶，形成层次） */
  --lg-line:#2a3447;          /* 描边 */
  --lg-field:var(--q-field,#f6f9ff);       /* 输入面 —— 直接引用 Q 版令牌：
      q-theme.css 用 `input:not(…)×5{border/background/color/radius…!important}`
      （特异度 0,5,1）无差别接管所有 input 的字段外观，本皮肤与其取值保持一致即可，
      不重复对抗。此处 var() 的兜底值保证「未加载 q-theme.css」时仍然正确。 */
  --lg-field-txt:var(--q-text,#2c3550);    /* 输入文字    11.50:1  on #f6f9ff */
  --lg-field-ph:#5f6a80;      /* 占位符       5.16:1  on #f6f9ff —— 见下方对抗块 */
  /* 字 —— 全部经 WCAG 有效背景实测 ≥4.5:1 */
  --lg-txt:#ffffff;           /* 品牌名      16.87:1  on #161d2b */
  --lg-txt-2:#c4cde0;         /* 中文名/辅助 10.57:1  on #161d2b */
  --lg-mut:#9aa7bf;           /* 副标题       6.95:1  on #161d2b */
  --lg-mut-2:#8b93b8;         /* 页脚         6.10:1  on #0f1420 */
  /* 品牌与主色 */
  --lg-brand:#1f4e79;         /* 徽标渐变起（白字 8.66:1） */
  --lg-brand-2:#2a6299;       /* 徽标渐变止（白字 6.35:1） */
  --lg-dot:#6fa8dc;           /* 品牌名两侧 ● （on 深卡 6.68:1） */
  --lg-primary:#1d4ed8;       /* 主按钮（白字 6.70:1） */
  --lg-primary-h:#1b45bd;
  --lg-link:#7fb0e8;          /* 文字链接（on 深卡 7.45:1） */
  --lg-ic:#7a869c;            /* 输入框内线性图标 */
  /* 状态 */
  --lg-err-txt:#fca5a5;       /* on #3a1418 8.56:1 */
  --lg-err-bg:rgba(220,38,38,.14);
  --lg-err-line:#7f1d1d;
  --lg-focus:rgba(29,78,216,.22);
  /* 圆角 */
  --lg-r-card:22px; --lg-r-panel:14px;
  --lg-r-field:var(--q-r-md,16px);   /* 跟随 Q 版字段圆角令牌（q-theme 强制 0,5,1，不对抗） */
  --lg-r-btn:12px;  --lg-r-logo:18px;
  /* 尺寸（断点相关量值集中在此，供「对抗块」用 !important 引用） */
  --lg-w:400px;
  --lg-h-field:46px;          /* 输入框 / 按钮 / 验证码框高度 */
  --lg-form-pad:20px;
  --lg-card-pad:36px 32px 32px;
  --lg-gap:18px;
  --lg-page-pad:24px 16px calc(24px + env(safe-area-inset-bottom));
  --lg-fs-input:14px;
  --lg-z:50;                  /* .lg-overlay 的层级（PCMS 原值 50：其 .sheet=60 需压在其上） */
  /* 字体（--q-f-* 由 q-theme.css 提供；此处给出兜底栈） */
  --lg-f-body:var(--q-f-body,'PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei',system-ui,-apple-system,sans-serif);
  --lg-f-cute:var(--q-f-cute,'Q Cute','PingFang SC','Hiragino Sans GB','YouYuan','Microsoft YaHei UI','Microsoft YaHei',sans-serif);
}

/* --------------------------------------------- 形态 A：PHP 独立登录页 */
html:has(body.lg-page){ background:var(--lg-bg)!important; }
body.lg-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--lg-gap); min-height:100vh; min-height:100dvh; margin:0;
  padding:var(--lg-page-pad);
  background:var(--lg-bg)!important; color:var(--lg-txt-2)!important;
  font-family:var(--lg-f-body)!important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* --------------------------------------------- 形态 B：SPA 内嵌登录视图 */
/* 容器自带撑满视口与居中，不依赖各站原有 .login-wrap 的定位与背景，
   因此可以安全地把容器上含 "login" 的 class 去掉（避开 uialign 浅底注入）。 */
.lg-page:not(body){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--lg-gap); min-height:100vh; min-height:100dvh; margin:0;
  padding:var(--lg-page-pad);
  background:var(--lg-bg)!important; color:var(--lg-txt-2)!important;
  font-family:var(--lg-f-body)!important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* SPA 靠 class="hidden" 切换视图；必须显式兜住，避免被上面的 display:flex 顶掉 */
.lg-page.hidden{ display:none!important; }

/* ★`.lg-gate`：宿主用 body 类控登录显隐的站点（MOD：body.logged-out）。
   原站点是 `.login-screen{display:none}` + `body.logged-out .login-screen{display:flex}`；
   本皮肤不再依赖宿主类名，改由这两个类承载同一语义。
   特异度：.lg-page.lg-gate (0,2,0) > .lg-page:not(body) (0,1,1) → 默认隐藏；
   body.logged-out .lg-page.lg-gate (0,2,1) → 登录时显示。无需 !important。 */
.lg-page.lg-gate{ display:none; }
body.logged-out .lg-page.lg-gate{ display:flex; }

/* ★`.lg-overlay`：保留原 `.login-screen{position:fixed;inset:0;z-index:50}` 的
   覆盖层语义（PCMS：登录层与 #app 互为兄弟，且 .sheet/.area-dropdown/.viewer 分层其上）。
   z-index 走 --lg-z（默认 50）。 */
.lg-page.lg-overlay{ position:fixed; inset:0; z-index:var(--lg-z); overflow:auto; }

/* ★全局 border-box：漏了这条会让 .lg-card 变成 400+padding+边框=468px，
   并在 390px 移动端造成横向溢出（scrollWidth 448 > 390）。 */
.lg-page, .lg-page *{ box-sizing:border-box; }
/* ★覆盖全局注入的 SimSun 强制（对方带 !important，故此处亦须 !important） */
.lg-page, .lg-page *{ font-family:var(--lg-f-body)!important; }
.lg-page .lg-logo, .lg-page .lg-brand{ font-family:var(--lg-f-cute)!important; }
.lg-page [hidden]{ display:none!important; }
.lg-page img,.lg-page svg{ vertical-align:middle; }
.lg-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------------------------------------------------------- 卡片 */
.lg-card{
  position:relative; width:min(var(--lg-w),100%);
  padding:var(--lg-card-pad); text-align:center;
  background:var(--lg-card); border:2px solid var(--lg-line);
  border-radius:var(--lg-r-card); box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* -------------------------------------------------- 语言切换（★卡内右上）
   ★本块必须放在 .lg-card 内部：定位基准是 .lg-card{position:relative}（设计定为「卡内右上」）。
   两种宿主形态：PHP 站用 <a class="on">；SPA 站用 <button>，由宿主 JS 切 class="active"。 */
.lg-lang{
  position:absolute; top:16px; right:18px; display:flex; align-items:center; gap:6px;
  font-size:13px; line-height:1; font-weight:400; color:var(--lg-txt-2);
}
.lg-lang a, .lg-lang button.lg-langbtn{
  display:inline-block; padding:4px 9px; border:0; border-radius:999px; background:transparent;
  font-family:inherit; font-size:13px; font-weight:400; color:var(--lg-txt-2)!important;
  text-decoration:none; cursor:pointer; transition:background .15s,color .15s;
}
.lg-lang a:hover, .lg-lang button.lg-langbtn:hover{ background:rgba(30,58,138,.45); color:#fff!important; }
.lg-lang a.on, .lg-lang a.active,
.lg-lang button.lg-langbtn.on, .lg-lang button.lg-langbtn.active{
  background:#1e3a8a; color:#fff!important; font-weight:700;
}  /* 白字 10.36:1 */
.lg-lang i{ font-style:normal; opacity:.4; }

/* ★归一化：无论宿主原来用 .seg-btn（PCMS 白底深字）、.tb-btn（SPCS 半透明白描边）
   还是 .login-lang-opt（MOD 深胶囊），只要落在 .lg-lang 里就收成同一枚胶囊。
   `>` 直系 + !important，压过宿主自有的 .seg-btn/.tb-btn/.active（含 flex:1 拉伸）。 */
.lg-page .lg-lang > a,
.lg-page .lg-lang > button{
  flex:0 0 auto!important; width:auto!important; height:auto!important; min-width:0!important;
  margin:0!important; padding:4px 9px!important;
  border:0!important; border-radius:999px!important; background:transparent!important;
  font-family:var(--lg-f-body)!important; font-size:13px!important; font-weight:400!important;
  letter-spacing:0!important; line-height:1!important; color:var(--lg-txt-2)!important;
  box-shadow:none!important; transform:none!important; text-decoration:none!important;
  white-space:nowrap; cursor:pointer;
}
.lg-page .lg-lang > a:hover,
.lg-page .lg-lang > button:hover{ background:rgba(30,58,138,.45)!important; color:#fff!important; }
.lg-page .lg-lang > a.on, .lg-page .lg-lang > a.active,
.lg-page .lg-lang > button.on, .lg-page .lg-lang > button.active{
  background:#1e3a8a!important; color:#fff!important; font-weight:700!important;
}

/* ---------------------------------------------------------------- 徽标 */
.lg-logo{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 auto 14px; border-radius:var(--lg-r-logo);
  background:linear-gradient(135deg,var(--lg-brand),var(--lg-brand-2));
  color:#fff; font-size:28px; font-weight:800; line-height:1; letter-spacing:0;
  text-transform:uppercase; user-select:none;
  box-shadow:0 6px 16px rgba(255,196,83,.28), inset 0 0 0 2px rgba(255,255,255,.16);
}

/* ------------------------------------------------------- 品牌行（三行式） */
.lg-brand{ margin:0; font-size:22px; font-weight:700; letter-spacing:1px; line-height:1.25; color:var(--lg-txt)!important; }
.lg-brand .lg-dot{ color:var(--lg-dot); font-weight:400; }
.lg-name{ margin-top:6px; font-size:14px; font-weight:600; line-height:1.5; color:var(--lg-txt-2)!important; }
.lg-sub{ margin:6px 0 22px; font-size:13px; font-weight:400; line-height:1.6; color:var(--lg-mut)!important; }
/* 两行式品牌（该站没有独立的副标题文案时用）：补足中文名与表单之间的间距，
   避免为了凑「三行」而编造文案。SFMS / STMS 走这一支。 */
.lg-name.lg-last{ margin-bottom:22px; }

/* ------------------------------------------------- 英文全称行（v1.0.5）
   中文态 = 「中文名 + 英文全称」两行；en 态英文行隐藏（.lg-name 已是英文，避免重复）。
   全称唯一权威来源：门户 home.ff3sys.cn 的 const SYSTEMS。
   ★配色与 .lg-name 同令牌（--lg-txt-2 = #c4cde0，在 #161d2b 上 10.57:1），
     字号小一档以示层级；不得复用 --txt-2/--q-muted 等浅色主题令牌（见文件头注释 2）。 */
.lg-name-en{
  margin-top:3px; font-size:12.5px; font-weight:600!important; line-height:1.4;
  text-align:center; color:var(--lg-txt-2)!important; letter-spacing:.2px;
}
/* 两行式站点（.lg-name.lg-last 后紧跟英文行）→ 底部间距转移给英文行，避免 22+22 */
.lg-page .lg-name.lg-last:has(+ .lg-name-en){ margin-bottom:0; }
.lg-page .lg-name.lg-last + .lg-name-en{ margin-bottom:22px; }
/* en 态：英文行隐藏；中文名（两行式）恢复自己的底部间距（抬特异度压过上面的 :has 规则） */
html[lang^="en"] .lg-page .lg-name-en{ display:none!important; }
html[lang^="en"] .lg-page .lg-name.lg-last{ margin-bottom:22px!important; }

/* ---------------------------------------------------------------- 表单 */
.lg-form{
  padding:var(--lg-form-pad); text-align:left;
  background:var(--lg-panel); border-radius:var(--lg-r-panel);
}

/* 错误提示 / 服务端或 JS 回填的提示 */
.lg-err{
  display:block; margin:0 0 12px; padding:9px 12px;
  background:var(--lg-err-bg); border:1px solid var(--lg-err-line);
  border-radius:10px; color:var(--lg-err-txt); font-size:13px; line-height:1.5; text-align:center;
}
.lg-msg:empty, .lg-err:empty{ display:none; }
.lg-hint-inline{ margin:0 0 12px; font-size:12.5px; line-height:1.6; text-align:center; color:var(--lg-mut)!important; }
.lg-hint-inline:empty{ display:none; }

/* 输入行 */
.lg-field{ position:relative; display:block; margin:0 0 12px; }
.lg-field:last-of-type{ margin-bottom:0; }
.lg-field > input{
  width:100%; height:var(--lg-h-field); margin:0; padding:12px 44px 12px 40px;
  background:var(--lg-field); color:var(--lg-field-txt);
  border:2px solid transparent; border-radius:var(--lg-r-field); box-shadow:none;
  font-size:var(--lg-fs-input); font-weight:600; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.lg-field > input::placeholder{ color:var(--lg-field-ph); font-weight:400; }
.lg-field > input:focus{ border-color:var(--lg-primary); box-shadow:0 0 0 4px var(--lg-focus); }
.lg-field > input:disabled{ opacity:.6; cursor:not-allowed; }
.lg-ico{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--lg-ic); pointer-events:none;
}
.lg-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:9px; color:var(--lg-ic); cursor:pointer;
}
.lg-eye:hover{ background:rgba(29,78,216,.10); color:var(--lg-primary); }

/* 记住我 / 忘记密码 */
.lg-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; font-size:13px;
}
.lg-remember{ display:inline-flex; align-items:center; gap:7px; font-weight:400; color:var(--lg-txt-2); cursor:pointer; user-select:none; }
.lg-remember input{ width:15px; height:15px; margin:0; accent-color:var(--lg-primary); }
.lg-forgot{ color:var(--lg-link)!important; text-decoration:none; }
.lg-forgot:hover{ text-decoration:underline; }
.lg-hint{ margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--lg-mut)!important; }
/* ★MOD 的 #loginHint 只由 JS 写 textContent（清空用 ''），空态必须自动收起，
   否则会在按钮下方留一条无内容的 12px 占位。 */
.lg-hint:empty{ display:none; }

/* 验证码（失败 ≥3 次才出现） */
.lg-cap{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.lg-cap > input{
  flex:0 0 132px; width:132px; height:var(--lg-h-field); margin:0; padding:12px 12px 12px 14px;
  background:var(--lg-field); color:var(--lg-field-txt);
  border:2px solid transparent; border-radius:var(--lg-r-field); box-shadow:none;
  font-size:var(--lg-fs-input); font-weight:600; outline:none;
}
.lg-cap > input::placeholder{ color:var(--lg-field-ph); font-weight:400; }
.lg-cap > input:focus{ border-color:var(--lg-primary); box-shadow:0 0 0 4px var(--lg-focus); }
.lg-cap .lg-capq{ font-size:14px; font-weight:600; color:var(--lg-txt-2); white-space:nowrap; }
.lg-cap .lg-capq b{ color:#ffd27f; }   /* 题面数字高亮 on #101827 10.9:1 */

/* 登录按钮 */
.lg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:var(--lg-h-field); margin-top:16px; padding:0 18px;
  background:var(--lg-primary); color:#fff; border:0; border-radius:var(--lg-r-btn);
  font-size:15px; font-weight:700; letter-spacing:.3px; line-height:1.2; cursor:pointer;
  transition:background .15s, transform .06s;
}
.lg-btn:hover{ background:var(--lg-primary-h); }
.lg-btn:active{ transform:translateY(1px); }
.lg-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.lg-spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:lg-spin .7s linear infinite;
}
@keyframes lg-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .lg-spin{ animation-duration:2.2s; } }

/* ---------------------------------------------------------------- 页脚 */
.lg-foot{ font-size:12px; line-height:1.7; font-weight:400; text-align:center; color:var(--lg-mut-2)!important; }
.lg-foot b{ font-weight:600; color:var(--lg-mut)!important; }
/* ★PCMS 复用类：`.dev-credit` 由 JS(applyDevCredit) 按本机设置切 display，
   所以**不能改类名**。但改名后 q-dark 的 `.login-box .dev-credit` 兜底会失配，
   且它原本是 `.login-foot` 内的深底次要字 —— 在此显式给出配色。 */
.lg-page .dev-credit{ color:var(--lg-mut)!important; font-size:11px; letter-spacing:.4px; }

/* ------------------------------------------------ 在线/离线指示（可选） */
.lg-offline{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:999;
  display:flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:999px; font-size:13px; box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.lg-offline i{ width:9px; height:9px; border-radius:50%; background:currentColor; }
.lg-offline.online{ background:#e8f6ee; color:#1e7b45; }
.lg-offline.offline{ background:#fdf0e6; color:#9a6700; }

/* ==========================================================================
   ★对抗全局注入层（00-wb-uialign.conf + q-dark.css）
   —— 这两层都用 `form:has(input[type=password]) …{…!important}` 无差别命中登录表单
      内的所有 button/input，以及 `body:has(form:has(input[type=password]))` 改页面底色。
      下面用 `.lg-page` 前缀（2 个 class）抬高优先级，并用 !important 对齐。
      断点相关量值全部走变量，故此处 !important 不会打断 §响应式 的覆盖。
   ========================================================================== */
.lg-page .lg-form{
  background:var(--lg-panel)!important;
  padding:var(--lg-form-pad)!important;
  border-radius:var(--lg-r-panel)!important;
  box-shadow:none!important;
}
.lg-page .lg-card{
  background:var(--lg-card)!important;
  border:2px solid var(--lg-line)!important;
  border-radius:var(--lg-r-card)!important;
}
.lg-page .lg-field > input,
.lg-page .lg-cap > input{
  background:var(--lg-field)!important;
  /* ★v1.0.4：color / border 必须进对抗块。MOD、SPCS 未加载 q-theme.css，
     于是 `form:has(input[type=password]) input{color:#e8edf7!important}`（q-dark）
     会就地生效 —— 浅字压浅底不可读；其 border-color:#2a3447!important 同理。
     （PCMS 加载了 q-theme，其 input:not(…)×5 特异度 0,5,1 仍会接管 border，
       本条只是让 MOD/SPCS 与 PCMS 视觉一致：无框字段 + 焦点描边。） */
  color:var(--lg-field-txt)!important;
  border:2px solid transparent!important;
  border-radius:var(--lg-r-field)!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.lg-page .lg-field > input:focus,
.lg-page .lg-cap > input:focus{ border-color:var(--lg-primary)!important; box-shadow:0 0 0 4px var(--lg-focus)!important; }
/* ★占位符对比度（易漏项）：q-theme.css 有全局 `::placeholder{color:#aab6cf!important}`，
   落在浅色输入面 #f6f9ff 上只有 1.93:1 —— 用户视角「提示字几乎看不见」。
   注意：全页「文本节点」扫描**扫不到伪元素**，必须单独断言 ::placeholder 的计算色。 */
.lg-page .lg-field > input::placeholder,
.lg-page .lg-cap > input::placeholder{
  color:var(--lg-field-ph)!important; font-weight:400!important; opacity:1!important;
}
.lg-page .lg-btn{
  background:var(--lg-primary)!important;
  color:#fff!important;
  border:0!important;
  border-radius:var(--lg-r-btn)!important;
  padding:0 18px!important;
  font-weight:700!important;
  letter-spacing:.3px!important;
}
.lg-page .lg-btn:hover{ background:var(--lg-primary-h)!important; }
.lg-page .lg-eye{
  background:transparent!important;
  color:var(--lg-ic)!important;
  border:0!important;
  border-radius:9px!important;
  padding:0!important;
  box-shadow:none!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.lg-page .lg-eye:hover{ background:rgba(29,78,216,.10)!important; color:var(--lg-primary)!important; }
.lg-page .lg-btn .lg-spin{ border-radius:50%!important; }
.lg-page .lg-remember{ font-weight:400!important; }
.lg-page .lg-lang a, .lg-page .lg-lang button.lg-langbtn{ font-weight:400!important; letter-spacing:0!important; }
.lg-page .lg-lang a.on, .lg-page .lg-lang a.active,
.lg-page .lg-lang button.lg-langbtn.on, .lg-page .lg-lang button.lg-langbtn.active{ font-weight:700!important; }
.lg-page .lg-logo{ font-weight:800!important; border-radius:var(--lg-r-logo)!important; }
.lg-page .lg-name{ font-weight:600!important; }
.lg-page .lg-name-en{ font-weight:600!important; letter-spacing:.2px!important; }
.lg-page .lg-sub, .lg-page .lg-foot, .lg-page .lg-hint{ font-weight:400!important; }
.lg-page .lg-brand, .lg-page .lg-brand .lg-dot{ letter-spacing:1px!important; }
.lg-page .lg-brand .lg-dot{ letter-spacing:0!important; font-weight:400!important; }

/* ---------------------------------------------------------------- 响应式 */
/* ≥1024px：基准（垂直居中，卡 400px） */
@media (max-width:1023px){
  .lg-page{ --lg-card-pad:32px 28px 28px; }
}
/* 480–767px：卡片圆角收小，品牌字号降一档 */
@media (max-width:767px){
  .lg-page{ --lg-card-pad:28px 22px 24px; --lg-r-card:18px; }
  .lg-brand{ font-size:20px; }
  .lg-name-en{ font-size:12px; }
}
/* <480px：移动端 —— 卡片上下留白、圆角 16px、输入 16px 防 iOS 聚焦缩放、触摸目标 ≥44px */
@media (max-width:479px){
  .lg-page{
    --lg-gap:14px; --lg-page-pad:16px 12px calc(16px + env(safe-area-inset-bottom));
    --lg-card-pad:22px 18px 20px; --lg-r-card:16px; --lg-r-logo:16px;
    --lg-form-pad:16px; --lg-h-field:44px; --lg-fs-input:16px;
  }
  .lg-logo{ width:48px; height:48px; font-size:24px; }
  .lg-brand{ font-size:19px; }
  .lg-field > input{ padding-left:38px; }
  .lg-lang{ top:12px; right:12px; }
}
/* 横屏矮屏：改为上对齐 + 可滚动，避免键盘弹出遮挡 */
@media (max-height:520px){
  .lg-page{ justify-content:flex-start; }
}
/* 打印/导出：浅底黑字 */
@media print{
  .lg-page{ background:#fff!important; color:#111!important; }
  .lg-card{ box-shadow:none; border-color:#ccc; }
}