/* ============================================================================
   登录页（05）· 2026-10-20 重新设计
   ----------------------------------------------------------------------------
   结构（自上而下）：
     ① .login              舞台：铺满视口、不产生滚动条，居中登录卡
     ② .lg-stage           全屏背景层（JS 创建，挂在 body 最前面；html.login-stage 时启用）
                           base → 光斑 → 网格 → 等高线 → 低多边形 → 图标 → 心电
                           → 扫描线 → 暗角 → 跟随鼠标高光 → 噪点
     ③ .login-card         实心渐变卡（**不用 backdrop-filter**：动效背景上每帧重模糊会掉帧）
     ④ .lock / .ver-banner 会话到期遮罩、线上横幅（保留原有行为）

   硬约束：
     · 零外部资源：所有图案都是渐变 / SVG / data-URI，没有一张图片、没有一个网络字体
     · 文字对比度 ≥ 4.5:1：卡片是不透明度很高的实心面，背景再花也不影响阅读
     · 动画只用 transform / opacity / CSS 变量 → 合成层内完成，不触发布局
     · 鼠标事件由 JS 用 rAF 合并，一帧最多写一次 CSS 变量
     · prefers-reduced-motion:reduce → 所有动画与视差关闭（JS 侧也不挂监听）
     · 触摸设备（hover:none）→ 不启用跟随高光与视差
   ============================================================================ */

/* ============================================================================
   一、登录舞台
   ============================================================================ */

/* 登录舞台作用域变量：背景配色与卡片的全部取值都在这里，规则里只引用变量。 */
:root.login-stage{
  /* 背景（两套主题共用一套「深色专业场景」，浅色主题下只是把光调亮、把字压在实心卡上） */
  --lg-bg-0:#070b12;
  --lg-bg-1:#0a121b;
  --lg-bg-2:#0c1a1d;
  --lg-grid:rgba(150,196,224,.075);
  --lg-grid-strong:rgba(150,196,224,.13);
  --lg-line:rgba(120,190,210,.30);
  --lg-accent:rgba(46,148,170,.55);
  --lg-spot-a:rgba(46,159,138,.30);    /* 品牌绿 */
  --lg-spot-b:rgba(52,118,196,.28);    /* 应急蓝 */
  --lg-spot-c:rgba(186,92,52,.16);     /* 一点暖色，避免整屏发青 */
  --lg-scan:rgba(140,235,225,.045);

  /* 卡片 */
  --lg-card-top:#16232e;
  --lg-card-bot:#0f1821;
  --lg-card-line:rgba(158,206,222,.20);
  --lg-card-hi:rgba(190,238,248,.10);
  --lg-card-wash:rgba(46,159,138,.10);
  --lg-card-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.03);

  /* 卡内文字：全部按「在 #16232e ~ #0f1821 实心面上」算过对比度 */
  --lg-ink:#f1f6fa;       /* 16.9:1 */
  --lg-ink2:#c6d4de;      /* 11.5:1 */
  --lg-ink3:#9fb1bf;      /* 8.0:1  */
  --lg-field:#0b131b;
  --lg-field-line:rgba(170,205,220,.26);
  --lg-field-line-hi:rgba(198,232,242,.44);
  --lg-field-ink:#f4f8fb;
  --lg-field-ph:#8ea1b0;
  --lg-danger:#ff8f83;    /* 6.3:1 on #1d1214 */
  --lg-danger-bg:rgba(150,40,32,.24);
  --lg-danger-line:rgba(255,143,131,.34);
  --lg-ok:#7fd8ae;

  /* 鼠标状态：JS 只写这几个变量（归一化坐标 / 像素坐标 / 高光开关），
     所有视差层都读它们 —— 所以「鼠标互动」永远只改 CSS 变量，不碰 DOM、不触发重排。 */
  --mx:0; --my:0; --cx:50vw; --cy:40vh; --spot:0;
}

/* 浅色主题：卡片换成实心白，背景沿用深色场景（深色舞台 + 白卡对比度最好，也最稳） */
@media (prefers-color-scheme:light){
  :root.login-stage{
    --lg-card-top:#ffffff;
    --lg-card-bot:#f4f8f7;
    --lg-card-line:rgba(24,42,56,.16);
    --lg-card-hi:rgba(255,255,255,.9);
    --lg-card-wash:rgba(46,159,138,.06);
    --lg-card-shadow:0 40px 80px -28px rgba(3,10,16,.75), 0 1px 0 rgba(255,255,255,.9);
    --lg-ink:#0f1a22;
    --lg-ink2:#3d4d59;
    --lg-ink3:#5b6b77;
    --lg-field:#f5f8f9;
    --lg-field-line:rgba(24,42,56,.20);
    --lg-field-line-hi:rgba(24,42,56,.38);
    --lg-field-ink:#0f1a22;
    --lg-field-ph:#6a7a86;
    --lg-danger:#a0301f;
    --lg-danger-bg:rgba(163,54,41,.08);
    --lg-danger-line:rgba(163,54,41,.26);
    --lg-ok:#1f6b4a;
  }
}
/* 显式选择的主题（prefs 写 data-scheme，覆盖系统偏好） */
:root.login-stage[data-scheme="dark"]{
  --lg-card-top:#16232e; --lg-card-bot:#0f1821;
  --lg-card-line:rgba(158,206,222,.20);
  --lg-card-hi:rgba(190,238,248,.10);
  --lg-card-wash:rgba(46,159,138,.10);
  --lg-card-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.03);
  --lg-ink:#f1f6fa; --lg-ink2:#c6d4de; --lg-ink3:#9fb1bf;
  --lg-field:#0b131b; --lg-field-line:rgba(170,205,220,.26); --lg-field-line-hi:rgba(198,232,242,.44);
  --lg-field-ink:#f4f8fb; --lg-field-ph:#8ea1b0;
  --lg-danger:#ff8f83; --lg-danger-bg:rgba(150,40,32,.24); --lg-danger-line:rgba(255,143,131,.34);
  --lg-ok:#7fd8ae;
}
:root.login-stage[data-scheme="light"]{
  --lg-card-top:#ffffff; --lg-card-bot:#f4f8f7;
  --lg-card-line:rgba(24,42,56,.16);
  --lg-card-hi:rgba(255,255,255,.9);
  --lg-card-wash:rgba(46,159,138,.06);
  --lg-card-shadow:0 40px 80px -28px rgba(3,10,16,.75), 0 1px 0 rgba(255,255,255,.9);
  --lg-ink:#0f1a22; --lg-ink2:#3d4d59; --lg-ink3:#5b6b77;
  --lg-field:#f5f8f9; --lg-field-line:rgba(24,42,56,.20); --lg-field-line-hi:rgba(24,42,56,.38);
  --lg-field-ink:#0f1a22; --lg-field-ph:#6a7a86;
  --lg-danger:#a0301f; --lg-danger-bg:rgba(163,54,41,.08); --lg-danger-line:rgba(163,54,41,.26);
  --lg-ok:#1f6b4a;
}

/* 舞台本体：铺满视口，且**不产生滚动条**。
   body 自身是 overflow:hidden；这里用 min-height:100dvh（而不是 height）——
   极矮视口（横屏手机、小窗）下卡片能自然撑高，页码不会被裁掉。
   ⚠️ background 必须是 **transparent**：这一层在 z-index:0，会盖住 z-index:-1 的背景层。
      早先这里写了不透明兜底色，结果整块背景被它糊掉 —— 页面看着「只有底色、没有图案」，
      而 CSS 与元素全都存在，排查时极易误判成「图层没画」。兜底色交给 .lg-stage 自己。 */
.login{
  position:relative;z-index:0;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3.2vh,40px) 20px;
  overflow:auto;                 /* 极矮视口下卡片可滚，但背景层固定不动 */
  overscroll-behavior:contain;
  background:transparent;
  isolation:isolate;
}

/* ============================================================================
   二、全屏背景层
   position:fixed;inset:0 → 再怎么动都不产生滚动条；pointer-events:none → 不挡表单。
   ============================================================================ */
.lg-stage{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  /* 只做布局/绘制隔离。
     ⚠️ 千万别写 contain:strict（= size + layout + paint + style）：
        它会把这层变成「尺寸为零的包含块」，所有 absolute 子层拿到 0×0 的百分比尺寸，
        于是网格/渐变/光斑全部退化成「什么都没有」—— 且 CSS 与 DOM 看上去完全正常。 */
  contain:layout paint;
  background:var(--lg-bg-0, #070b12);
  color:#bcd8e4;
}
.lg-layer{position:absolute;inset:-8%;will-change:transform}

/* ① 底色：三色径向渐变叠一层纵向明暗，形成「夜间指挥中心」的底 */
.lg-base{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 18% 8%, #10222c 0%, rgba(16,34,44,0) 62%),
    radial-gradient(90% 80% at 88% 92%, #0d2024 0%, rgba(13,32,36,0) 60%),
    linear-gradient(165deg, var(--lg-bg-1) 0%, var(--lg-bg-0) 46%, var(--lg-bg-2) 100%);
}

/* ② 缓慢漂移的光斑：只动 transform/opacity，超长周期（38~62s）避免抢注意力 */
.lg-spots{transform:translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0)}
.lg-spot{
  position:absolute;border-radius:50%;filter:blur(0px);
  background:radial-gradient(circle at 50% 50%, var(--c) 0%, rgba(0,0,0,0) 68%);
  will-change:transform,opacity;
}
.lg-spot.a{--c:var(--lg-spot-a);width:70vmax;height:70vmax;left:-16vmax;top:-24vmax;animation:lg-drift-a 46s var(--move,ease) infinite alternate}
.lg-spot.b{--c:var(--lg-spot-b);width:62vmax;height:62vmax;right:-18vmax;bottom:-26vmax;animation:lg-drift-b 58s var(--move,ease) infinite alternate}
.lg-spot.c{--c:var(--lg-spot-c);width:44vmax;height:44vmax;left:38%;top:22%;animation:lg-drift-c 38s var(--move,ease) infinite alternate}
@keyframes lg-drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7vmax,5vmax,0) scale(1.12)}
}
@keyframes lg-drift-b{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(-8vmax,-6vmax,0) scale(1)}
}
@keyframes lg-drift-c{
  from{transform:translate3d(0,0,0) scale(.94);opacity:.75}
  to{transform:translate3d(-5vmax,7vmax,0) scale(1.1);opacity:1}
}

/* ③ 细网格（32px）+ 每 160px 一条稍亮的定位线；再叠一层「网格点」让近处有质感 */
.lg-grid{
  inset:0;opacity:.9;
  background-image:
    linear-gradient(to right, var(--lg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lg-grid) 1px, transparent 1px),
    linear-gradient(to right, var(--lg-grid-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lg-grid-strong) 1px, transparent 1px),
    radial-gradient(circle, rgba(160,210,230,.16) 1px, transparent 1.4px);
  background-size:32px 32px, 32px 32px, 160px 160px, 160px 160px, 160px 160px;
  background-position:0 0, 0 0, -1px -1px, -1px -1px, 0 0;
  transform:
    perspective(900px)
    translate3d(calc(var(--mx) * 18px), calc(var(--my) * 12px), 0)
    rotateX(calc(var(--my) * 1.2deg))
    rotateY(calc(var(--mx) * -1.4deg));
  /* 中心留亮、四周压暗，避免网格在边角抢戏 */
  -webkit-mask-image:radial-gradient(120% 95% at 50% 42%, #000 24%, rgba(0,0,0,.35) 72%, transparent 100%);
  mask-image:radial-gradient(120% 95% at 50% 42%, #000 24%, rgba(0,0,0,.35) 72%, transparent 100%);
}

/* ④ 等高线：几组椭圆而不是图片 —— 用 repeating-radial-gradient 画出地形线 */
.lg-contour{
  inset:-10%;opacity:.5;mix-blend-mode:screen;
  background-image:
    repeating-radial-gradient(58% 42% at 78% 18%, transparent 0 38px, rgba(126,200,214,.13) 38px 39px),
    repeating-radial-gradient(44% 56% at 12% 88%, transparent 0 46px, rgba(126,200,214,.10) 46px 47px);
  transform:translate3d(calc(var(--mx) * -10px), calc(var(--my) * -8px), 0);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 78%);
  mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 78%);
}

/* ⑤ 低多边形线框（SVG，字符串来自 login.js） */
.lg-terrain{inset:0;color:var(--lg-accent);transform:translate3d(calc(var(--mx) * 26px), calc(var(--my) * 16px), 0)}
.lg-terrain svg{width:100%;height:100%;display:block}
.lg-terrain .lg-line{opacity:.24}
.lg-terrain .lg-dot{opacity:.4}

/* ⑥ 散落的救援图标：极低透明度 + 缓慢浮动；分两层做视差 */
.lg-icons{inset:0;transform:translate3d(calc(var(--mx) * 34px), calc(var(--my) * 22px), 0)}
.lg-ico{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  color:#a9dcea;opacity:.13;
  animation:lg-bob 13s ease-in-out infinite alternate;
  will-change:transform;
}
.lg-ico.deep{opacity:.09;animation-duration:19s;animation-direction:alternate-reverse}
.lg-ico svg{width:100%;height:100%;display:block}
.lg-ico:nth-child(2n){animation-delay:-4s}
.lg-ico:nth-child(3n){animation-delay:-8s}
.lg-ico:nth-child(4n){animation-delay:-11s}
/* 卡片正后方的图标会从卡片两侧「穿出来」，收一点更干净（卡片 404 宽居中 ≈ 正中 28%） */
.lg-ico:nth-child(5),
.lg-ico:nth-child(8){opacity:.07}
@keyframes lg-bob{
  from{transform:translate3d(0,0,0) rotate(var(--rot))}
  to{transform:translate3d(0,-18px,0) rotate(calc(var(--rot) + 4deg))}
}

/* ⑦ 心电遥测：底部一条，缓慢扫描 —— 只是「活着」的暗示，不做戏剧化跳动 */
.lg-ecg{
  inset:auto 0 4vh 0;height:120px;color:#8ee6d0;opacity:.30;
  transform:translate3d(calc(var(--mx) * -18px), 0, 0);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.lg-ecg svg{width:100%;height:100%;display:block}
.lg-ecg .lg-line{opacity:.55}
.lg-beat{animation:lg-beat 2.4s ease-out infinite}
.lg-beat.d2{animation-delay:1.2s}
@keyframes lg-beat{
  0%,100%{opacity:.25}
  8%{opacity:1}
  22%{opacity:.3}
}

/* ⑧ 扫描线：一条很淡的横带自上而下；用 translate3d，深色下几乎看不见但能感到「在跑」 */
.lg-scan{
  inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.lg-scan::before{
  content:"";position:absolute;left:0;right:0;top:-30%;height:30%;
  background:linear-gradient(180deg, transparent, var(--lg-scan) 55%, rgba(140,235,225,.02) 70%, transparent);
  animation:lg-scan 9s linear infinite;
}
@keyframes lg-scan{
  from{transform:translate3d(0,-40%,0)}
  to{transform:translate3d(0,340%,0)}
}

/* ⑨ 暗角：把视线压回卡片 */
.lg-vignette{
  inset:0;
  background:
    radial-gradient(78% 68% at 50% 46%, transparent 40%, rgba(3,7,11,.55) 82%, rgba(3,7,11,.82) 100%),
    linear-gradient(180deg, rgba(4,8,12,.45), transparent 26%, transparent 74%, rgba(4,8,12,.5));
}

/* ⑩ 跟随鼠标的柔光：用 CSS 变量定位，元素本身常驻（只改位置，不改 DOM） */
.lg-spot-cursor{
  inset:0;
  background:radial-gradient(340px circle at var(--cx) var(--cy), rgba(120,225,205,.10), rgba(120,225,205,.035) 42%, transparent 68%);
  opacity:var(--spot);
  transition:opacity .5s var(--move, ease);
}

/* ⑪ 噪点：SVG feTurbulence 生成为 data-URI（不是外部图片），给纯色面一点胶片颗粒 */
.lg-noise{
  inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ============================================================================
   三、登录卡片
   ============================================================================ */
.login-card{
  position:relative;
  width:min(404px,100%);
  padding:26px 28px 22px;
  border-radius:16px;
  color:var(--lg-ink);
  background:
    /* 顶部一道极细的内高光（模拟光源在左上） */
    linear-gradient(180deg, var(--lg-card-hi), rgba(255,255,255,0) 42%),
    /* 品牌色轻扫，避免整卡死灰 */
    radial-gradient(120% 90% at 0% 0%, var(--lg-card-wash), rgba(0,0,0,0) 58%),
    linear-gradient(170deg, var(--lg-card-top), var(--lg-card-bot));
  border:1px solid var(--lg-card-line);
  box-shadow:
    inset 0 1px 0 var(--lg-card-hi),
    inset 0 0 0 1px rgba(0,0,0,.14),
    var(--lg-card-shadow);
  animation:lg-card-in .55s var(--move, ease) both;
}
/* 卡片顶部的一道品牌渐变线：让卡片和背景里的绿蓝光斑呼应 */
.login-card::before{
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(110,220,190,.85) 24%, rgba(90,170,240,.75) 60%, transparent);
  opacity:.75;
}
@keyframes lg-card-in{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* 品牌区 */
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.login-brand .mark{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  color:#eafff7;
  background:linear-gradient(150deg, #2f9d87, #1d6f73 58%, #184f66);
  box-shadow:0 6px 18px -6px rgba(20,150,130,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.login-brand > div{min-width:0}
.login-brand b{font-size:16.5px;font-weight:700;display:block;letter-spacing:-.01em;color:var(--lg-ink)}
.login-brand em{font-style:normal;font-size:12px;color:var(--lg-ink3);display:block;margin-top:1px}
/* 状态芯片：本地 / 线上 */
.login-chip{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;
  padding:5px 8px;border-radius:999px;
  color:var(--lg-ink2);background:rgba(140,200,220,.08);
  border:1px solid rgba(160,210,230,.18);
}
.login-chip .dot{
  width:6px;height:6px;border-radius:50%;background:var(--lg-ok);
  box-shadow:0 0 0 3px rgba(127,216,174,.14);
}

/* 表单字段 */
.login-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.login-f label{font-size:12.5px;font-weight:600;color:var(--lg-ink2)}
.login-in{position:relative;display:flex;align-items:center}
.login-in-ic{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  display:flex;color:var(--lg-ink3);pointer-events:none;
}
.login-f input{
  width:100%;height:42px;padding:0 12px 0 36px;
  border-radius:var(--r-sm, 6px);
  border:1px solid var(--lg-field-line);
  background:var(--lg-field);
  color:var(--lg-field-ink);
  font-size:14px;
  transition:border-color .16s var(--move, ease), box-shadow .16s var(--move, ease), background .16s var(--move, ease);
}
.login-f input::placeholder{color:var(--lg-field-ph)}
.login-f input:hover{border-color:var(--lg-field-line-hi)}
.login-f input:focus{
  border-color:rgba(110,225,195,.72);
  outline:none;
  box-shadow:0 0 0 3px rgba(90,200,175,.20), inset 0 1px 2px rgba(0,0,0,.28);
  background:color-mix(in srgb, var(--lg-field) 88%, #6ee1c3 12%);
}
.login-f input:focus-visible{outline:none}   /* 焦点环由上面的 box-shadow 承担 */
/* 浏览器自动填充：默认会糊上一块刺眼的白/黄底，这里拉回到深色输入框 */
.login-f input:-webkit-autofill,
.login-f input:-webkit-autofill:hover,
.login-f input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lg-field-ink);
  -webkit-box-shadow:inset 0 0 0 100px var(--lg-field), 0 0 0 3px rgba(90,200,175,.20);
  caret-color:var(--lg-field-ink);
}

/* 提交按钮 */
.login-submit{
  position:relative;width:100%;height:44px;margin-top:4px;
  border-radius:var(--r-sm, 6px);
  color:#f2fffb;font-size:14px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(160deg, #22806e, #1f7568 50%, #1b5a68);
  box-shadow:0 10px 24px -12px rgba(20,150,130,.9), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s var(--move, ease), box-shadow .16s var(--move, ease), filter .16s var(--move, ease);
}
.login-submit:hover{filter:brightness(1.07);box-shadow:0 14px 30px -12px rgba(20,170,145,.95), inset 0 1px 0 rgba(255,255,255,.32)}
.login-submit:active{transform:translateY(1px)}
.login-submit:focus-visible{outline:2px solid #8ef0d4;outline-offset:2px}
.login-submit[disabled]{opacity:.62;cursor:not-allowed;filter:none;transform:none}
/* 登录中：一道极细的光在按钮内部扫过（reduced-motion 下关闭） */
.login-submit[disabled]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 45%, transparent 70%);
  background-size:220% 100%;
  animation:lg-btn 1.1s linear infinite;
}
@keyframes lg-btn{from{background-position:120% 0}to{background-position:-40% 0}}

/* 错误提示：位于表单顶部、紧贴账号输入之前 —— 提交失败时视线刚好落在那里 */
.login-err{
  display:flex;gap:9px;align-items:flex-start;
  margin-bottom:14px;padding:10px 12px;
  border-radius:var(--r-sm, 6px);
  background:var(--lg-danger-bg);
  border:1px solid var(--lg-danger-line);
  color:var(--lg-danger);
  font-size:12.5px;line-height:1.6;font-weight:600;
}
.login-err-ic{flex:0 0 auto;display:flex;margin-top:1px}
.login-err-t{min-width:0}
/* 会话失效原因（不是提交错误）：语气更中性，用信息色而不是红色 */
.login-reason{
  display:flex;gap:9px;align-items:flex-start;
  margin-bottom:14px;padding:10px 12px;border-radius:var(--r-sm, 6px);
  background:rgba(110,190,220,.09);
  border:1px solid rgba(140,210,230,.26);
  color:var(--lg-ink2);font-size:12.5px;line-height:1.6;
}
.login-reason-ic{flex:0 0 auto;display:flex;margin-top:1px;color:#8fdcf0}

/* 底部说明 */
.login-note{
  margin-top:18px;padding-top:13px;
  border-top:1px solid rgba(170,205,220,.14);
  font-size:11.5px;line-height:1.72;color:var(--lg-ink3);
}
.login-note > div + div{margin-top:4px}
.login-note b{color:var(--lg-ink2)}
.login-note code{
  font-family:var(--mono, ui-monospace, monospace);font-size:11px;
  background:rgba(150,200,220,.12);color:var(--lg-ink2);
  padding:1px 5px;border-radius:4px;
}

/* 线上横幅：保持原有信息与入口，只换成「深色面上也成立」的配色 */
.ver-banner{
  border:1px solid rgba(120,220,190,.32);
  background:linear-gradient(160deg, rgba(46,159,138,.18), rgba(46,159,138,.07));
  border-radius:var(--r, 8px);
  padding:11px 13px;margin-bottom:16px;
  color:var(--lg-ink2);
}
.ver-banner-t{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--lg-ink)}
.ver-banner-t .tag{flex:0 0 auto}
.ver-banner-d{margin-top:6px;font-size:12.5px;color:var(--lg-ink2);line-height:1.6}
.ver-banner-a{margin-top:8px;font-size:12.5px}
.ver-banner-a a{color:#8ef0d4;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ver-banner-a a:hover{color:#c2fff0}

/* 窄屏：卡片撑满可读宽度，状态芯片收成一行并让品牌名可换行 */
@media (max-width:520px){
  .login{padding:14px 12px}
  .login-card{width:100%;padding:22px 18px 18px;border-radius:14px}
  .login-brand{flex-wrap:wrap;row-gap:8px}
  .login-brand b{font-size:15.5px}
  .login-chip{margin-left:0}
  .login-note{font-size:11px}
}

/* 低于 640px 高（横屏手机 / 小窗）：去掉卡片上下多余留白，保证「表单 + 按钮」先可见 */
@media (max-height:640px){
  .login{padding:10px 12px;align-items:flex-start}
  .login-card{margin:auto;padding:18px 20px 16px}
  .login-brand{margin-bottom:14px}
  .login-note{margin-top:12px;padding-top:10px;font-size:11px;line-height:1.5}
  .login-note > div:nth-child(n+2){display:none}
}

/* ============================================================================
   四、动效降级
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  /* 背景：光斑 / 浮动图标 / 扫描线 / 心电 全部静止 */
  .lg-stage .lg-spot,
  .lg-stage .lg-ico,
  .lg-stage .lg-scan::before,
  .lg-stage .lg-beat{animation:none !important}
  /* 视差与跟随高光一律取消（JS 侧也不会挂监听） */
  .lg-stage .lg-layer,
  .lg-stage .lg-grid,
  .lg-stage .lg-spots,
  .lg-stage .lg-icons,
  .lg-stage .lg-terrain,
  .lg-stage .lg-ecg{transform:none !important;will-change:auto}
  .lg-stage .lg-spot-cursor{opacity:.35 !important}
  /* 卡片进场、按钮流光取消 */
  .login-card{animation:none !important}
  .login-submit[disabled]::after{animation:none !important;display:none}
  .login-submit{transition:none}
  .login-f input{transition:none}
}
/* 触摸设备：没有 hover 就谈不上「跟随」，把常驻高光也收掉 */
@media (hover:none){
  .lg-stage .lg-spot-cursor{display:none}
}

/* ============================================================================
   五、会话到期遮罩（保留原行为，仅按钮配色跟随新主题）
   ============================================================================ */
.lock{
  position:fixed;inset:0;z-index:80;background:rgba(8,12,17,.62);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.lock-card{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-pop);
  width:min(420px,100%);padding:24px;text-align:center;
}
.lock-card h2{font-size:17px;font-weight:700;margin-bottom:8px}
.lock-card p{font-size:13px;color:var(--ink2);line-height:1.75;margin-bottom:6px}
.lock-count{font-size:30px;font-weight:700;color:var(--warn);font-variant-numeric:tabular-nums;margin:10px 0 4px}
.lock-card .btn{margin-top:14px}