/* ============================================================
   北仑人才码 · 管理端登录页
   设计语言：深空蓝黑 / 玻璃拟态 / 精密网格 / 克制的青蓝辉光
   适配 layuiAdmin：表单控件沿用 layui lay-verify 校验体系
   ============================================================ */

   :root{
    /* —— 蓝黑基调 —— */
    --bg-void:      #020512;
    --bg-deep:      #050B1B;
    --bg-panel:     #071228;
    --bg-elevated:  #0A1A35;
  
    /* —— 玻璃层 —— */
    --glass-bg:     rgba(10, 24, 50, 0.62);
    --glass-bg-hi:  rgba(16, 36, 70, 0.78);
    --glass-line:   rgba(90, 170, 255, 0.16);
    --glass-line-hi:rgba(120, 200, 255, 0.34);
  
    /* —— 强调色 —— */
    --cy:           #22D3EE;   /* 青 */
    --sky:          #38BDF8;   /* 天青 */
    --blue:         #2563EB;   /* 主蓝 */
    --blue-soft:    #3B82F6;
    --violet:       #6366F1;   /* 极克制的紫，用于渐变收尾 */
  
    /* —— 文本 —— */
    --tx-1:         #E9F2FF;
    --tx-2:         #A8C1E0;
    --tx-3:         #6E88AD;
    --tx-4:         #46597A;
  
    /* —— 状态 —— */
    --ok:           #34D399;
    --warn:         #FBBF24;
    --err:          #FB7185;
  
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
  
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
  
    --font-cn: "PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC",
               "Microsoft YaHei UI","Microsoft YaHei",sans-serif;
    --font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,"Courier New",monospace;
  }
  
  *,*::before,*::after{ box-sizing:border-box; }
  
  html,body{ height:100%; }
  
  body.index_login_body{
    margin:0;
    font-family: var(--font-cn);
    color: var(--tx-1);
    background:
      radial-gradient(1200px 800px at 78% -10%, rgba(37,99,235,.20), transparent 60%),
      radial-gradient(900px 700px at 8% 110%, rgba(34,211,238,.12), transparent 62%),
      linear-gradient(168deg, var(--bg-deep) 0%, var(--bg-void) 55%, #01030C 100%);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  
    /* 顶栏 + 主舞台严格占满视口高度，避免整页被撑高 */
    display:flex;
    flex-direction:column;
  }
  /* 高度充足时抑制纵向滚动条（此时内容实测不会溢出视口）；
     高度不足（<640px）则放开，让内容可正常滚动，避免被裁切 */
  @media (min-height: 640px){
    body.index_login_body{ overflow-y:hidden; }
  }
  
  /* ============ 背景层 ============ */
  .bg-net{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; opacity:.55;
  }
  
  .bg-grid{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(90,170,255,.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(90,170,255,.055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 20%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 20%, transparent 78%);
  }
  
  /* 光晕 */
  .bg-orb{
    position:fixed; border-radius:50%; pointer-events:none; z-index:0;
    filter: blur(90px); opacity:.5;
    will-change: transform;
  }
  .orb-1{ width:620px; height:620px; top:-220px; right:-140px;
          background: radial-gradient(circle, rgba(56,189,248,.40), transparent 68%);
          animation: drift-a 26s var(--ease) infinite alternate; }
  .orb-2{ width:520px; height:520px; bottom:-200px; left:-120px;
          background: radial-gradient(circle, rgba(37,99,235,.38), transparent 68%);
          animation: drift-b 32s var(--ease) infinite alternate; }
  .orb-3{ width:380px; height:380px; top:42%; left:38%;
          background: radial-gradient(circle, rgba(99,102,241,.22), transparent 70%);
          animation: drift-c 38s var(--ease) infinite alternate; }
  
  @keyframes drift-a{ to{ transform: translate3d(-70px, 90px, 0) scale(1.12); } }
  @keyframes drift-b{ to{ transform: translate3d(90px, -70px, 0) scale(1.08); } }
  @keyframes drift-c{ to{ transform: translate3d(-60px, -50px, 0) scale(1.16); } }
  
  /* 暗角 + 扫描线质感 */
  .bg-vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(ellipse 78% 68% at 50% 46%, transparent 40%, rgba(1,3,10,.72) 100%);
  }
  .bg-scan{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
    background: repeating-linear-gradient(to bottom, rgba(180,220,255,.9) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }
  
  /* 中心放射光晕：给居中卡片一个「能量核心」的底光 */
  .bg-halo{
    position:fixed; left:50%; top:50%; z-index:0; pointer-events:none;
    width: min(1180px, 128vw); height: min(1180px, 128vh);
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle, rgba(56,189,248,.13) 0%, rgba(37,99,235,.07) 34%, transparent 62%),
      radial-gradient(circle at 50% 78%, rgba(99,102,241,.10), transparent 46%);
    animation: halo-breathe 9s var(--ease) infinite alternate;
  }
  @keyframes halo-breathe{
    from{ opacity:.72; transform: translate(-50%, -50%) scale(1); }
    to  { opacity:1;   transform: translate(-50%, -50%) scale(1.07); }
  }
  
  /* 透视地平线网格：底部纵深，消解大片空白 */
  .bg-floor{
    position:fixed; left:-34%; right:-34%; bottom:-7%; z-index:1; height:54vh;
    pointer-events:none;
    perspective: 300px;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95) 2%, rgba(0,0,0,.45) 40%, transparent 84%);
            mask-image: linear-gradient(to top, rgba(0,0,0,.95) 2%, rgba(0,0,0,.45) 40%, transparent 84%);
  }
  .bg-floor-inner{
    position:absolute; inset:0;
    transform-origin: 50% 100%;
    transform: rotateX(74.5deg)
               translate3d(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 14px), 0);
    background-image:
      linear-gradient(to right, rgba(70,170,240,.34) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(70,170,240,.34) 1px, transparent 1px);
    background-size: 78px 78px;
    transition: transform .9s var(--ease-out);
  }
  
  /* ============ HUD 装饰层 ============ */
  .hud{ position:fixed; inset:0; z-index:2; pointer-events:none; }
  
  /* 视口四角框 */
  .hud-frame{ position:absolute; inset: clamp(12px, 1.5vw, 24px); }
  .hud-frame span{
    position:absolute; width:30px; height:30px;
    border-color: rgba(56,189,248,.26);
  }
  .hud-frame .tl{ top:0;    left:0;  border-top:1px solid;    border-left:1px solid; }
  .hud-frame .tr{ top:0;    right:0; border-top:1px solid;    border-right:1px solid; }
  .hud-frame .bl{ bottom:0; left:0;  border-bottom:1px solid; border-left:1px solid; }
  .hud-frame .br{ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; }
  
  /* 顶部强调线 + 两端菱形标记 */
  .hud-topline{
    position:absolute; left:0; right:0; top:0; height:1px;
    background: linear-gradient(to right,
      transparent, rgba(56,189,248,.40) 16%, rgba(34,211,238,.85) 50%,
      rgba(56,189,248,.40) 84%, transparent);
  }
  .hud-topline::before,
  .hud-topline::after{
    content:""; position:absolute; top:-2.5px; width:6px; height:6px;
    background: var(--cy); transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(34,211,238,.95);
  }
  .hud-topline::before{ left:17%; }
  .hud-topline::after{ right:17%; }
  
  /* 左右垂直刻度尺 */
  .hud-ruler{
    position:absolute; top:50%; width:9px; height:min(52vh, 460px);
    transform:translateY(-50%); opacity:.6;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    background: repeating-linear-gradient(to bottom,
      rgba(56,189,248,.55) 0 1px, transparent 1px 10px);
  }
  .hud-ruler::before{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(to bottom,
      rgba(130,215,255,.95) 0 1px, transparent 1px 50px);
  }
  .hud-ruler-l{ left: clamp(14px, 2vw, 34px); }
  .hud-ruler-r{ right: clamp(14px, 2vw, 34px); }
  
  /* ============ 顶栏 ============ */
  .topbar{
    position:relative; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
    padding: 28px clamp(28px, 4vw, 64px) 0;
  }
  
  .brand{ display:flex; align-items:center; gap:14px; }
  
  .logo-mark{
    width:46px; height:46px; flex:none;
    display:grid; place-items:center;
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(56,189,248,.20), rgba(37,99,235,.10));
    border: 1px solid var(--glass-line-hi);
    box-shadow:
      0 0 0 1px rgba(2,6,18,.5) inset,
      0 10px 30px -12px rgba(56,189,248,.55),
      0 0 22px -6px rgba(56,189,248,.30);
    position:relative;
  }
  .logo-mark::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 55%);
    pointer-events:none;
  }
  
  .brand-text{ display:flex; flex-direction:column; gap:3px; line-height:1; }
  .brand-name{
    font-size:19px; font-weight:600; letter-spacing:.10em; color:var(--tx-1);
  }
  .brand-sub{
    font-family: var(--font-mono);
    font-size:9.5px; font-weight:500; letter-spacing:.30em;
    color:var(--tx-4); text-transform:uppercase;
  }
  
  .topbar-right{ display:flex; align-items:center; gap:28px; }
  
  .clock{
    display:flex; align-items:baseline; gap:10px;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  }
  .clock-date{ font-size:11.5px; color:var(--tx-4); letter-spacing:.06em; }
  .clock-time{ font-size:15px; font-weight:500; color:var(--tx-2); letter-spacing:.06em; }
  
  /* ============ 主舞台：左品牌 / 右登录 ============ */
  .stage{
    position:relative; z-index:5;
    flex:1; min-height:0;
    width:100%;
    display:grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr);
    /* safe center：高度够就垂直居中，放不下时自动退化为顶部对齐，
       保证溢出部分始终可滚动到，不会被顶出滚动区 */
    align-items:center;
    align-items: safe center;
    gap: clamp(36px, 5vw, 92px);
    max-width: 1560px;
    margin:0 auto;
    padding: clamp(24px, 3.4vh, 44px) clamp(28px, 4vw, 64px) clamp(36px, 5vh, 64px);
  }
  
  /* ============ 品牌主视觉 ============ */
  .brand-head{
    position:relative; z-index:2;
    display:flex; flex-direction:column; justify-content:center;
    gap: clamp(20px, 2.6vh, 30px);
    min-width:0;
    text-align:left;
    animation: head-in 1s var(--ease-out) both;
  }
  @keyframes head-in{
    from{ opacity:0; transform: translateY(-14px); filter: blur(9px); }
    to  { opacity:1; transform:none; filter:none; }
  }
  
  .brand-eyebrow{
    display:inline-flex; align-items:center; gap:11px;
    font-family: var(--font-mono);
    font-size:10.5px; font-weight:500; letter-spacing:.30em;
    color: var(--sky); text-transform:uppercase;
  }
  .brand-eyebrow::before{
    content:""; width:clamp(26px, 3vw, 40px); height:1px; flex:none;
    background: linear-gradient(to right, transparent, rgba(56,189,248,.8));
  }
  .brand-eyebrow::after{ display:none; }
  
  /* 主视觉：整句一条连续渐变，辉光柔和 */
  .headline{
    margin:0;
    font-size: clamp(40px, 4.1vw, 62px);
    line-height:1.12;
    font-weight:600;
    letter-spacing:.015em;
    white-space:nowrap;
    color:var(--tx-1);
  }
  .headline em{
    font-style:normal;
    background: linear-gradient(98deg,
      #CBE9FF 0%, #7DD3FC 22%, #38BDF8 50%, #4F7BF7 78%, #6366F1 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    filter: drop-shadow(0 0 34px rgba(56,189,248,.34));
  }
  /* 分隔点：脱离父级渐变，单独给半透明色 */
  .headline .hl-dot{
    background:none;
    -webkit-text-fill-color: rgba(140,200,255,.5);
    color: rgba(140,200,255,.5);
    padding: 0 .14em;
    filter:none;
  }
  
  /* 能力标签 */
  .chips{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .chip{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 16px;
    border-radius:999px;
    border:1px solid rgba(90,170,255,.17);
    background: linear-gradient(160deg, rgba(12,28,58,.58), rgba(6,14,32,.48));
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    font-size:12.5px; color:var(--tx-2); letter-spacing:.05em;
    cursor:default;
    transition: border-color .24s var(--ease), color .24s var(--ease),
                background .24s var(--ease), box-shadow .28s var(--ease),
                transform .24s var(--ease-out);
  }
  .chip svg{ color:var(--sky); opacity:.8; flex:none; transition: color .24s var(--ease); }
  .chip:hover{
    transform: translateY(-1.5px);
    border-color: rgba(56,189,248,.55);
    color: var(--tx-1);
    background: linear-gradient(160deg, rgba(16,36,70,.78), rgba(8,18,40,.58));
    box-shadow: 0 0 28px -10px rgba(56,189,248,.8);
  }
  .chip:hover svg{ color: var(--cy); opacity:1; }
  
  /* ============ 登录区 ============ */
  .login-panel{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
    gap:20px; min-width:0;
    width:100%; max-width:440px;
    justify-self:center;
  }
  
  /* 卡片背光：缓慢旋转的锥形光雾，让卡片像悬浮在能量场上 */
  .card-aura{
    position:absolute; left:50%; top:50%;
    width:126%; height:116%;
    transform: translate(-50%,-50%);
    z-index:0; pointer-events:none;
    background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(56,189,248,.55) 30deg,
      transparent 92deg,
      transparent 182deg,
      rgba(99,102,241,.45) 228deg,
      transparent 296deg);
    filter: blur(52px);
    opacity:.55;
    animation: aura-spin 24s linear infinite;
  }
  @keyframes aura-spin{
    to{ transform: translate(-50%,-50%) rotate(360deg); }
  }
  
  /* 卡片入场 */
  @keyframes card-in{
    from{ opacity:0; transform: translateY(20px) scale(.982); filter: blur(7px); }
    to  { opacity:1; transform: none; filter: none; }
  }
  
  .login-card{
    position:relative; z-index:1; width:100%; max-width:440px;
    padding: clamp(32px, 3.4vw, 44px);
    animation: card-in .95s var(--ease-out) both;
    border-radius: var(--r-xl);
    background: linear-gradient(165deg, var(--glass-bg-hi) 0%, var(--glass-bg) 46%, rgba(5,12,28,.72) 100%);
    border:1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
            backdrop-filter: blur(26px) saturate(150%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.07) inset,
      0 40px 80px -32px rgba(0,0,0,.85),
      0 0 70px -34px rgba(56,189,248,.55);
  }
  /* 顶部高光边 */
  .login-card::before{
    content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
    background: linear-gradient(to right, transparent, rgba(120,200,255,.75), transparent);
    pointer-events:none;
  }
  /* 卡片内扫光 */
  .login-card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: linear-gradient(104deg, transparent 34%, rgba(150,215,255,.055) 50%, transparent 66%);
    background-size: 260% 100%;
    animation: sheen 9s var(--ease) infinite;
  }
  @keyframes sheen{
    0%,100%{ background-position: 130% 0; }
    55%    { background-position: -30% 0; }
  }
  
  /* HUD 角标 */
  .corner{
    position:absolute; width:15px; height:15px; pointer-events:none;
    border-color: var(--sky); opacity:.62;
  }
  .corner.tl{ top:13px; left:13px;  border-top:1.5px solid; border-left:1.5px solid;  border-top-left-radius:5px; }
  .corner.tr{ top:13px; right:13px; border-top:1.5px solid; border-right:1.5px solid; border-top-right-radius:5px; }
  .corner.bl{ bottom:13px; left:13px;  border-bottom:1.5px solid; border-left:1.5px solid;  border-bottom-left-radius:5px; }
  .corner.br{ bottom:13px; right:13px; border-bottom:1.5px solid; border-right:1.5px solid; border-bottom-right-radius:5px; }
  
  .card-head{ margin-bottom:30px; position:relative; z-index:2; }
  .card-title{
    margin:0; font-size:25px; font-weight:600; letter-spacing:.02em; color:var(--tx-1);
  }
  
  /* 标题下的刻度线 + 发光菱形 */
  .card-rule{
    position:relative; display:block; height:1px; margin-top:16px;
    background: linear-gradient(to right,
      rgba(56,189,248,.85), rgba(56,189,248,.22) 42%, transparent 88%);
  }
  .card-rule::before{
    content:""; position:absolute; left:0; top:-2.5px;
    width:6px; height:6px;
    background: var(--cy); transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(34,211,238,.95);
  }
  .card-rule::after{
    content:""; position:absolute; right:8%; top:-1px;
    width:26px; height:3px;
    background: repeating-linear-gradient(to right,
      rgba(56,189,248,.55) 0 1px, transparent 1px 5px);
  }
  
  /* —— 表单（layui 结构适配） —— */
  .login_form{ position:relative; z-index:2; display:flex; flex-direction:column; gap:17px; margin:0; padding:0; list-style:none; }
  .login_form li{ list-style:none; }
  
  .field{ display:flex; flex-direction:column; gap:8px; }
  
  .control{
    position:relative; display:flex; align-items:center;
    border-radius: var(--r-md);
    background: rgba(3,8,20,.62);
    border:1px solid rgba(90,170,255,.15);
    transition: border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  }
  .control:hover{ border-color: rgba(90,170,255,.30); }
  
  /* 聚焦时左侧生长出的光条 */
  .control::before{
    content:""; position:absolute; left:1.5px; top:50%;
    width:2px; height:0; border-radius:2px;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, transparent, var(--cy), transparent);
    box-shadow: 0 0 12px rgba(34,211,238,.85);
    transition: height .3s var(--ease-out);
    pointer-events:none;
  }
  .control.is-focus::before{ height:62%; }
  
  .control.is-focus{
    border-color: rgba(56,189,248,.62);
    background: rgba(5,14,32,.80);
    box-shadow: 0 0 0 3.5px rgba(56,189,248,.13), 0 0 26px -8px rgba(56,189,248,.55);
  }
  
  .control-icon{
    flex:none; display:grid; place-items:center;
    width:46px; height:100%; min-height:50px;
    color: var(--tx-4);
    transition: color .22s var(--ease);
  }
  .control.is-focus .control-icon{ color: var(--sky); }
  
  .control input{
    flex:1; min-width:0;
    height:50px;
    padding:0 4px 0 0;
    background:transparent; border:0; outline:0;
    font-family: inherit; font-size:14.5px; letter-spacing:.03em;
    color: var(--tx-1);
    caret-color: var(--cy);
  }
  .control input::placeholder{ color: var(--tx-4); letter-spacing:.04em; }
  .control input:-webkit-autofill{
    -webkit-text-fill-color: var(--tx-1);
    -webkit-box-shadow: 0 0 0 1000px rgba(5,14,32,.9) inset;
    transition: background-color 9999s ease-out;
  }
  
  /* 密码显隐 / 后缀按钮 */
  .suffix-btn{
    flex:none; display:grid; place-items:center;
    width:40px; height:40px; margin-right:5px;
    background:transparent; border:0; border-radius:var(--r-sm);
    color: var(--tx-4); cursor:pointer;
    transition: color .2s var(--ease), background .2s var(--ease);
  }
  .suffix-btn:hover{ color: var(--sky); background: rgba(56,189,248,.09); }
  .suffix-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:1px; }
  
  /* 验证码 / 短信验证码行：图片列加宽到 128px，贴合常见验证码宽高比 */
  .captcha-row{ display:grid; grid-template-columns: minmax(0,1fr) 128px; gap:11px; }
  
  /* 后端图形验证码图片
     contain：无论后端图片什么尺寸都完整显示，绝不裁切字符；
     底色渐变兜底 letterboxing，视觉上依然是一整块 */
  .img_yzm{
    width:100%; height:50px;
    border-radius:var(--r-md);
    border:1px solid rgba(90,170,255,.18);
    background: linear-gradient(150deg, rgba(12,28,58,.95), rgba(6,14,32,.95));
    cursor:pointer;
    object-fit:contain; object-position:center;
    padding:2px;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
  }
  .img_yzm:hover{ border-color: rgba(56,189,248,.45); box-shadow: 0 0 18px -6px rgba(56,189,248,.55); }
  
  /* 短信验证码按钮 */
  .btn_sjyzm{
    height:50px;
    border-radius:var(--r-md);
    border:1px solid rgba(90,170,255,.24);
    background: rgba(6,16,36,.55);
    font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.04em;
    color:var(--tx-2); cursor:pointer;
    transition: all .24s var(--ease);
  }
  .btn_sjyzm:hover{
    border-color: rgba(56,189,248,.55);
    background: rgba(12,30,62,.72);
    color: var(--tx-1);
    box-shadow: 0 0 26px -12px rgba(56,189,248,.7);
  }
  .btn_sjyzm[disabled]{ cursor:not-allowed; color:var(--tx-4); border-color:rgba(90,170,255,.14); }
  
  /* 主按钮（对应原 .login_input_Btn） */
  .login_input_Btn{
    position:relative; overflow:hidden;
    width:100%; height:52px; margin-top:5px;
    border:0; border-radius:var(--r-md); cursor:pointer;
    font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.14em;
    color:#F2FAFF; text-align:center;
    background: linear-gradient(112deg, #0EA5E9 0%, #2563EB 52%, #4F46E5 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.24) inset,
      0 14px 34px -14px rgba(37,99,235,.95),
      0 0 44px -18px rgba(56,189,248,.85);
    transition: transform .22s var(--ease), box-shadow .28s var(--ease), filter .22s var(--ease);
  }
  .login_input_Btn:hover{
    transform: translateY(-1.5px);
    filter: brightness(1.06);
    box-shadow:
      0 1px 0 rgba(255,255,255,.28) inset,
      0 20px 42px -14px rgba(37,99,235,1),
      0 0 60px -16px rgba(56,189,248,.95);
  }
  .login_input_Btn:active{ transform: translateY(0); filter: brightness(.97); }
  .login_input_Btn:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
  .login_input_Btn.layui-btn-disabled{
    cursor:not-allowed; filter: grayscale(.35) brightness(.82); transform:none;
  }
  
  /* ============ 页脚 ============ */
  .login-footer{
    position:fixed; left:0; right:0; bottom:14px; z-index:5;
    text-align:center; pointer-events:none;
    font-size:11.5px; color:var(--tx-4); letter-spacing:.08em;
  }
  
  /* ============ layui 组件深色适配 ============ */
  /* lay-vertype="tips" 的行内提示 */
  .layui-form-tips{
    position:relative; padding:5px 10px; margin-top:6px;
    border-radius:6px;
    background: rgba(251,113,133,.14) !important;
    border:1px solid rgba(251,113,133,.28);
    color:#FDA4AF !important;
    font-size:12px; line-height:1.6;
  }
  .layui-form-tips i{
    position:absolute; top:-6px; left:14px;
    border-left:6px solid transparent; border-right:6px solid transparent;
    border-bottom:6px solid rgba(251,113,133,.28);
  }
  
  /* layer 弹层：深色玻璃 */
  .layui-layer{
    background: rgba(8,18,40,.94) !important;
    border:1px solid rgba(90,170,255,.25);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 40px -18px rgba(56,189,248,.35) !important;
    border-radius:12px !important;
  }
  .layui-layer .layui-layer-content{ color:var(--tx-1) !important; }
  .layui-layer .layui-layer-title{
    background: rgba(10,24,50,.9) !important;
    color:var(--tx-1) !important;
    border-bottom:1px solid rgba(90,170,255,.18) !important;
  }
  .layui-layer .layui-layer-btn a{
    background: linear-gradient(112deg, #0EA5E9, #2563EB) !important;
    border-color:transparent !important; color:#F2FAFF !important;
    border-radius:6px !important;
  }
  .layui-layer-msg{ border-width:1px !important; }
  
  /* ============ 响应式 ============ */
  
  /* 矮视口紧凑档：1366×768 等笔记本分辨率一屏放下 */
  @media (max-height: 820px){
    .topbar{ padding-top:18px; }
    .logo-mark{ width:40px; height:40px; border-radius:11px; }
    .brand-name{ font-size:17px; }
    .stage{ padding-top:14px; padding-bottom:22px; gap:clamp(30px,4vw,60px); }
    .brand-head{ gap:16px; }
    .headline{ font-size: clamp(32px, 3.2vw, 44px); }
    .chip{ padding:6px 13px; font-size:12px; }
    .login-card{ padding:30px 34px; }
    .card-head{ margin-bottom:20px; }
    .card-title{ font-size:22px; }
    .login_form{ gap:13px; }
  }
  @media (max-height: 690px){
    .brand-eyebrow{ display:none; }
    .brand-head{ gap:12px; }
    .headline{ font-size: clamp(27px, 2.7vw, 36px); }
    .chips{ gap:7px; }
    .chip{ padding:5px 11px; font-size:11.5px; }
    .chip svg{ width:12px; height:12px; }
    .card-head{ margin-bottom:16px; }
    .login_form{ gap:12px; }
    .login_input_Btn{ height:48px; margin-top:3px; }
  }
  
  /* 单列堆叠：窄屏 / 竖屏，改为居中 */
  @media (max-width: 1180px){
    .stage{
      grid-template-columns: minmax(0,1fr);
      max-width: 620px;
      /* safe center：高度充裕时居中，内容放不下时自动退化为顶部对齐，
         避免居中溢出把头部内容顶到滚动区之外（滚不回来） */
      align-content:center;
      align-content: safe center;
      gap: clamp(30px, 4vh, 46px);
    }
    .brand-head{ align-items:center; text-align:center; gap:16px; }
    .brand-eyebrow::before{ display:none; }
    .brand-eyebrow::after{
      display:block; content:""; width:34px; height:1px; flex:none;
      background: linear-gradient(to left, transparent, rgba(56,189,248,.8));
    }
    .headline{ text-align:center; font-size: clamp(30px, 5.6vw, 44px); }
    .chips{ justify-content:center; }
  }
  /* 单列 + 矮视口：再收一档，尽量不触发滚动 */
  @media (max-width: 1180px) and (max-height: 800px){
    .stage{ gap:22px; padding-top:16px; padding-bottom:30px; }
    .brand-head{ gap:11px; }
    .headline{ font-size: clamp(23px, 3.3vw, 30px); }
    .chip{ padding:5px 11px; font-size:11.5px; }
    .chip svg{ width:12px; height:12px; }
    .login-card{ padding:26px 28px; }
    .card-head{ margin-bottom:16px; }
    .login_form{ gap:12px; }
    .login_input_Btn{ height:48px; margin-top:3px; }
  }
  
  @media (max-width: 720px){
    .topbar{ padding:20px 20px 0; }
    .brand-sub{ display:none; }
    .stage{ padding: 26px 20px 48px; gap:28px; }
    .headline{ font-size: clamp(26px, 7.4vw, 34px); white-space:normal; }
    .brand-head{ gap:14px; }
    .chip{ padding:6px 13px; font-size:11.5px; }
    .login-card{ padding:28px 22px; border-radius:var(--r-lg); }
    .captcha-row{ grid-template-columns: minmax(0,1fr) 112px; }
    .orb-3{ display:none; }
    .hud-ruler{ display:none; }
    .bg-floor{ height:36vh; left:-60%; right:-60%; }
  }
  
  /* 降低动效偏好 */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
    .login-card::after{ display:none; }
    .bg-net{ opacity:.35; }
    .card-aura{ opacity:.45; }
  }