*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html{-webkit-text-size-adjust:100%}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
      -webkit-font-smoothing:antialiased;
      min-height:100vh;
    }

    /* ============ 整体：左右分栏 ============ */
    #LAY-user-login{
      min-height:100vh;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      background:linear-gradient(170deg,#fbfcff 0%,#f2f6fc 46%,#e9eff9 100%);
      position:relative;
      overflow:hidden;
    }
    /* 背景光斑 */
    #LAY-user-login::before{
      content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
      background:
        radial-gradient(46vw 46vw at 4% -10%,rgba(10,132,255,.20),transparent 62%),
        radial-gradient(50vw 50vw at 98% 6%,rgba(191,90,242,.16),transparent 62%),
        radial-gradient(56vw 46vw at 52% 116%,rgba(255,159,10,.12),transparent 60%);
    }

    /* ============ 左：品牌区 ============ */
    .login-brand{
      position:relative;z-index:1;
      display:flex;flex-direction:column;justify-content:center;
      padding:56px clamp(32px,6vw,84px);
    }
    .login-brand-inner{max-width:440px}
    .brand-mark{
      width:56px;height:56px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(140deg,#0a84ff,#5e5ce6 56%,#bf5af2);
      color:#fff;margin-bottom:26px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 14px 32px -12px rgba(10,132,255,.85);
      transition:transform .5s cubic-bezier(.34,1.56,.64,1);
    }
    .brand-mark:hover{transform:rotate(-6deg) scale(1.06)}
    .brand-mark svg{width:28px;height:28px}

    .login-brand h1{
      font-size:clamp(26px,3.4vw,38px);
      font-weight:700;letter-spacing:-.035em;line-height:1.16;
      margin-bottom:14px;
      background:linear-gradient(135deg,#0a84ff,#5e5ce6 52%,#bf5af2);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .login-brand > .login-brand-inner > p{
      font-size:14.5px;color:#565d6b;line-height:1.8;
      margin-bottom:34px;max-width:400px;
    }

    .brand-points{list-style:none;display:flex;flex-direction:column;gap:14px}
    .brand-points li{display:flex;align-items:flex-start;gap:12px}
    .bp-dot{
      width:8px;height:8px;border-radius:50%;flex:0 0 auto;
      margin-top:7px;
      background:linear-gradient(135deg,#0a84ff,#5e5ce6);
      box-shadow:0 0 0 4px rgba(10,132,255,.14);
    }
    .brand-points b{display:block;font-size:13.5px;font-weight:600;color:#111318;margin-bottom:2px}
    .brand-points small{display:block;font-size:12.5px;color:#8e8e93}

    .brand-foot{
      margin-top:auto;padding-top:44px;
      font-size:12px;color:#a1a1a6;
    }

    /* ============ 右：表单区 ============ */
    .login-panel{
      position:relative;z-index:1;
      display:flex;align-items:center;justify-content:center;
      padding:40px clamp(24px,4vw,56px);
    }
    .login-main{
      position:relative;
      width:100%;max-width:372px;
      padding:34px 30px 26px;
      background:rgba(255,255,255,.62);
      -webkit-backdrop-filter:blur(28px) saturate(1.85);
              backdrop-filter:blur(28px) saturate(1.85);
      border:1px solid rgba(255,255,255,.8);
      border-radius:28px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 1px rgba(255,255,255,.3),
        inset 0 0 56px rgba(255,255,255,.12),
        0 26px 68px -20px rgba(56,68,130,.3),
        0 6px 20px -10px rgba(56,68,130,.16);
      animation:cardIn .5s cubic-bezier(.34,1.42,.64,1);
    }
    .login-main::before{
      content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent);
      pointer-events:none;
    }
    @keyframes cardIn{from{transform:scale(.96) translateY(10px)}to{transform:scale(1) translateY(0)}}

    /* 表单头部 */
    .login-head{text-align:center;margin-bottom:26px}
    .login-avatar{
      width:64px;height:64px;margin:0 auto 14px;
      border-radius:50%;overflow:hidden;
      border:2px solid rgba(255,255,255,.9);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 26px -12px rgba(56,68,130,.4);
    }
    .login-avatar img{width:100%;height:100%;object-fit:cover;display:block}
    .login-title{
      font-size:21px;font-weight:700;letter-spacing:-.025em;
      margin-bottom:6px;color:#111318;
    }
    .login-subtitle{font-size:12.5px;color:#8e8e93}

    /* 输入框 */
    .layui-form-item{margin-bottom:13px;position:relative}
    .layui-input{
      height:50px !important;
      line-height:50px !important;
      padding:0 16px 0 46px !important;
      border:1px solid rgba(142,142,147,.24) !important;
      border-radius:16px !important;
      background:rgba(255,255,255,.7) !important;
      font-size:14.5px !important;
      color:#1c1c1e !important;
      box-sizing:border-box;
      transition:box-shadow .22s ease,border-color .22s ease,background .22s ease;
    }
    .layui-input:focus{
      border-color:rgba(0,122,255,.72) !important;
      background:rgba(255,255,255,.96) !important;
      box-shadow:0 0 0 3.5px rgba(0,122,255,.15) !important;
      outline:none !important;
    }
    .layui-input::placeholder{color:#a1a1a6}
    .login-icon{
      position:absolute;left:16px;top:50%;
      transform:translateY(-50%);
      font-size:18px;color:#a1a1a6;
      pointer-events:none;z-index:2;
      transition:color .22s ease;
    }
    .layui-form-item:focus-within .login-icon{color:#007aff}

    /* 登录按钮 */
    #submit_login{
      width:100%;height:50px;
      margin-top:8px;
      border:0 !important;border-radius:16px !important;
      display:flex;align-items:center;justify-content:center;gap:9px;
      font-size:15px !important;font-weight:600;
      color:#fff !important;
      background:linear-gradient(135deg,#0a84ff,#5e5ce6 56%,#7b6cf6) !important;
      cursor:pointer;position:relative;overflow:hidden;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 16px 36px -14px rgba(10,132,255,.92) !important;
      transition:transform .42s cubic-bezier(.34,1.56,.64,1),filter .22s ease,opacity .22s ease;
    }
    #submit_login span{letter-spacing:.08em}
    #submit_login svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
    #submit_login:hover{filter:brightness(1.07)}
    #submit_login:hover svg{transform:translateX(4px)}
    #submit_login:active{transform:scale(.965);opacity:.92}

    /* 链接 */
    .login-links{
      display:flex;justify-content:space-between;align-items:center;
      margin-top:18px;font-size:13px;
    }
    .login-links a{
      color:#007aff !important;font-weight:500;
      padding:7px 12px;border-radius:10px;
      transition:background .16s ease;
    }
    .login-links a:hover{background:rgba(0,122,255,.1)}

    .login-footer{
      margin-top:22px;padding-top:18px;
      border-top:1px solid rgba(142,142,147,.16);
      text-align:center;font-size:11.5px;color:#a1a1a6;
    }
    .login-footer a{color:#7c7c82 !important;text-decoration:none}
    .login-footer a:hover{color:#007aff !important}

    /* ============ 响应式：窄屏改为单列 ============ */
    @media (max-width:880px){
      #LAY-user-login{grid-template-columns:1fr}
      .login-brand{display:none}
      .login-panel{padding:32px 20px;min-height:100vh}
      .login-main{max-width:392px;padding:30px 24px 22px;border-radius:24px}
      .login-title{font-size:19.5px}
      .login-avatar{width:58px;height:58px}
    }

    /* ============ 深色模式 ============ */
    @media (prefers-color-scheme:dark){
      #LAY-user-login{background:linear-gradient(170deg,#0b0e15 0%,#10141e 50%,#080b11 100%)}
      .login-brand h1{filter:brightness(1.34)}
      .login-brand > .login-brand-inner > p{color:#a9b1c1}
      .brand-points b{color:#f2f4f9}
      .brand-points small{color:#7c8598}
      .brand-foot{color:#5c6472}
      .login-main{
        background:rgba(30,32,38,.58);
        border-color:rgba(255,255,255,.14);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.2),
          inset 0 0 56px rgba(255,255,255,.04),
          0 26px 68px -20px rgba(0,0,0,.75);
      }
      .login-title{color:#f2f4f9}
      .layui-input{
        background:rgba(255,255,255,.09) !important;
        border-color:rgba(255,255,255,.15) !important;
        color:#fff !important;
      }
      .layui-input:focus{background:rgba(255,255,255,.14) !important}
      .login-footer{border-top-color:rgba(255,255,255,.08);color:#7c8598}
      .login-footer a{color:#8e8e93 !important}
    }

    @media (prefers-reduced-motion:reduce){
      *{animation:none !important;transition-duration:.01ms !important}
    }

/* ============================================================
   注册 / 找回密码 共用扩展
   ============================================================ */

/* 验证码行：输入框 + 按钮并排 */
.code-item{
  display:flex !important;
  align-items:stretch;
  gap:9px;
}
.code-input{position:relative;flex:1 1 auto;min-width:0}
.code-item .layui-input{
  width:100% !important;
  padding:0 16px 0 46px !important;
}
.code-btn{
  flex:0 0 auto;
  height:50px !important;
  line-height:50px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  white-space:nowrap;
  background:rgba(255,255,255,.72) !important;
  color:#007aff !important;
  border:1px solid rgba(0,122,255,.36) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .18s ease !important;
}
.code-btn:hover{background:rgba(0,122,255,.1) !important}
.code-btn:active{transform:scale(.95)}
.code-btn[disabled]{
  opacity:.5;cursor:not-allowed;
  color:#8e8e93 !important;
  border-color:rgba(142,142,147,.3) !important;
}

/* 表单较长时的滚动与间距 */
.login-main{max-height:calc(100vh - 60px);overflow-y:auto}

/* 深色模式补充 */
@media (prefers-color-scheme:dark){
  .code-btn{
    background:rgba(255,255,255,.1) !important;
    color:#6ab8ff !important;
    border-color:rgba(106,184,255,.3) !important;
  }
  .code-btn:hover{background:rgba(106,184,255,.16) !important}
}

/* ---------- 返回按钮（找回密码页） ---------- */
.back-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin-bottom:16px;
  padding:7px 13px;border-radius:11px;
  font-size:12.5px;font-weight:500;
  color:#6b7280 !important;text-decoration:none;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(142,142,147,.2);
  transition:background .16s ease,color .16s ease,transform .38s cubic-bezier(.34,1.56,.64,1);
}
.back-btn:hover{background:rgba(255,255,255,.8);color:#1c1c1e !important}
.back-btn:active{transform:scale(.96)}
.back-btn svg{flex:0 0 auto}

@media (prefers-color-scheme:dark){
  .back-btn{
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.14);
    color:#9aa3b0 !important;
  }
  .back-btn:hover{background:rgba(255,255,255,.16);color:#fff !important}
}