*{margin:0;padding:0;box-sizing:border-box;}

  :root{
    --primary:#6366f1;
    --primary-2:#a855f7;
    --ink:#111827;
    --muted:#9aa3b2;
    --field-bg:#f4f5f9;
    --danger:#ef4444;
    --wechat:#07c160;
  }

  html,body{height:100%;}

  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background:
      radial-gradient(1100px 760px at 12% 8%,  #e2e8ff 0%, transparent 58%),
      radial-gradient(1000px 700px at 88% 92%, #fbe8ff 0%, transparent 58%),
      linear-gradient(135deg, #f7f8ff 0%, #fbf7ff 48%, #fff6fb 100%);
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  /* ============ 背景光斑 ============ */
  .bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:0;
    pointer-events:none;
  }
  .orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:.5;
  }
  .orb-1{width:460px;height:460px;background:#a5b4fc;top:-150px;left:-120px;animation:float1 16s ease-in-out infinite;}
  .orb-2{width:420px;height:420px;background:#e9d5ff;bottom:-170px;right:-110px;animation:float2 18s ease-in-out infinite;}
  .orb-3{width:320px;height:320px;background:#a5f3fc;top:42%;right:14%;opacity:.32;animation:float1 20s ease-in-out infinite reverse;}

  @keyframes float1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(50px,60px) scale(1.12);}
  }
  @keyframes float2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-60px,-50px) scale(1.08);}
  }

  .card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:960px;
    min-height:540px;
    background:#fff;
    border-radius:28px;
    display:grid;
    grid-template-columns:400px 1fr;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:
      0 40px 90px -30px rgba(79,70,229,.28),
      0 14px 36px -18px rgba(168,85,247,.18),
      0 0 0 1px rgba(99,102,241,.06);
    animation:cardIn .7s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes cardIn{
    from{opacity:0;transform:translateY(24px) scale(.97);}
    to{opacity:1;transform:none;}
  }

  /* ============ 左侧品牌区 ============ */
  .brand{
    position:relative;
    padding:44px 40px;
    color:#fff;
    background:linear-gradient(160deg,#4338ca 0%,#6d28d9 48%,#a21caf 100%);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .brand::before{
    content:'';
    position:absolute;
    width:230px;height:230px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    right:-70px;bottom:-50px;
  }
  .brand::after{
    content:'';
    position:absolute;
    width:360px;height:360px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    right:-150px;bottom:-130px;
  }
  .glow{
    position:absolute;
    width:320px;height:320px;
    top:-140px;right:-110px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.4),transparent 68%);
    filter:blur(12px);
  }

  .brand-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .logo{
    width:42px;height:42px;
    border-radius:21px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
  }
  .logo svg{width:22px;height:22px;}
  .brand-top span{font-size:17px;font-weight:700;letter-spacing:.6px;}

  .brand-mid{
    position:relative;
    z-index:2;
    margin-top:auto;
  }
  .brand-mid h1{
    font-size:30px;
    font-weight:700;
    letter-spacing:-.5px;
    margin-bottom:14px;
  }
  .brand-mid p{
    font-size:14px;
    line-height:1.85;
    color:rgba(255,255,255,.78);
  }

  .feats{
    position:relative;
    z-index:2;
    list-style:none;
    margin-top:28px;
    display:grid;
    gap:13px;
  }
  .feats li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:rgba(255,255,255,.88);
  }
  .feats i{
    width:19px;height:19px;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    display:grid;
    place-items:center;
    font-style:normal;
    font-size:10px;
    flex:none;
  }

  /* ============ 右侧面板 ============ */
  .panel{
    padding:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .tabs{
    position:relative;
    display:flex;
    background:#f2f3f8;
    border-radius:14px;
    padding:4px;
    margin-bottom:30px;
  }
  .tab{
    flex:1;
    position:relative;
    z-index:2;
    border:0;
    background:none;
    cursor:pointer;
    padding:11px 0;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:#8b93a7;
    border-radius:10px;
    transition:color .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .tab.active{color:#1e1b4b;}
  .tab-slider{
    position:absolute;
    top:4px;bottom:4px;left:4px;
    width:calc(50% - 4px);
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(30,27,75,.14);
    transition:left .34s cubic-bezier(.4,0,.2,1);
  }
  .tab-slider.right{left:50%;}

  .pane{display:none;}
  .pane.active{display:block;animation:paneIn .35s ease both;}
  @keyframes paneIn{
    from{opacity:0;transform:translateY(9px);}
    to{opacity:1;transform:none;}
  }

  /* ============ 提示条 ============ */
  .alert{
    display:none;
    align-items:center;
    gap:8px;
    font-size:12.5px;
    line-height:1.4;
    color:#dc2626;
    background:#fef2f2;
    border:1px solid #fecaca;
    padding:10px 13px;
    border-radius:11px;
    margin-bottom:16px;
    animation:paneIn .25s ease;
  }
  .alert.show{display:flex;}
  .alert.ok{
    color:#047857;
    background:#ecfdf5;
    border-color:#a7f3d0;
  }

  /* ============ 输入框 ============ */
  .field{
    position:relative;
    height:54px;
    background:var(--field-bg);
    border-radius:14px;
    border:1.5px solid transparent;
  /*   transition:background .22s ease,border-color .22s ease,box-shadow .22s ease; */
    margin-bottom:16px;
     display: flex;align-items: center;
     overflow: hide;
  }
  .field:focus-within{
    background:#fff;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(99,102,241,.13);
  }
  .field.error{
    border-color:var(--danger);
    background:#fff6f6;
    box-shadow:0 0 0 4px rgba(239,68,68,.1);
  }
  .field.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97);}
  @keyframes shake{
    10%,90%{transform:translateX(-2px);}
    20%,80%{transform:translateX(4px);}
    30%,50%,70%{transform:translateX(-6px);}
    40%,60%{transform:translateX(6px);}
  }

  .field-icon{
/*      position:absolute;
    left:16px;top:50%;
    transform:translateY(-50%); */
    margin:0 16px;
    color:#a8b0c0; 
    pointer-events:none;
    width:18px;height:18px;
    transition:color .22s ease;
    z-index:10;
  }
  .field:focus-within .field-icon{color:var(--primary);}
  .field.error .field-icon{color:var(--danger);}

  .field input{
    flex-grow:1;
    padding:19px 0px;
    border:0;
    outline:0;
    background:none;
     background:var(--field-bg);
    background-color: transparent !important;
    font-family:inherit;
    font-size:14px;
    line-height:1;
    color:var(--ink);
    letter-spacing:.3px;
  }
  .field input:-webkit-autofill,
.field input:-webkit-autofill:hover, 
.field input:-webkit-autofill:focus, 
.field input:-webkit-autofill:active {
/*   -webkit-box-shadow: 0 0 0 1000px #fff inset !important; 或者设为你的聚焦颜色 */
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--ink);
}
/*    .field input::placeholder{color:transparent;}  */
 
  .field label{
    position:absolute;
    left:46px;top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:var(--muted);
    pointer-events:none;
    transition:top .18s ease,font-size .18s ease,color .18s ease;
  }
  .field input:focus ~ label,
  .field input:not(:placeholder-shown) ~ label{
    top:15px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.2px;
    color:var(--primary);
  }
  .field.error input:focus ~ label,
  .field.error input:not(:placeholder-shown) ~ label{color:var(--danger);} 

  /* 密码眼睛 */
  .eye{
    position:absolute;
    right:12px;top:50%;
    transform:translateY(-50%);
    width:32px;height:32px;
    border:0;background:none;
    cursor:pointer;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#a8b0c0;
    transition:color .2s,background .2s;
  }
  .eye:hover{color:var(--primary);background:rgba(99,102,241,.08);}
  .eye svg{width:18px;height:18px;}
  .eye .eye-off{display:none;}
  .eye.showing .eye-on{display:none;}
  .eye.showing .eye-off{display:block;}

  /* 验证码行 */
  .field-row{
    display:flex;
    gap:12px;
    margin-bottom:16px;
  }
  .field-row .field{flex:1;margin-bottom:0;}

  #captchaCanvas{
    width:124px;height:54px;
    border-radius:14px;
    cursor:pointer;
    flex:none;
    background:var(--field-bg);
    border:1.5px solid transparent;
    transition:border-color .22s ease;
  }
  #captchaCanvas:hover{border-color:rgba(99,102,241,.4);}

  /* 选项行 */
  .options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:2px 0 22px;
    font-size:13px;
  }
  .check{
    display:flex;
    align-items:center;
    gap:8px;
    color:#6b7280;
    cursor:pointer;
    user-select:none;
  }
  .check input{display:none;}
  .check span{
    width:17px;height:17px;
    border-radius:5px;
    border:1.5px solid #d1d5db;
    background:#fff;
    display:grid;
    place-items:center;
    transition:.2s ease;
    flex:none;
  }
  .check input:checked + span{
    background:linear-gradient(135deg,#6366f1,#a855f7);
    border-color:transparent;
  }
  .check input:checked + span::after{
    content:'';
    width:4px;height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) translate(-1px,-1px);
  }
  .link{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
    transition:color .2s;
  }
  .link:hover{color:var(--primary-2);}

  /* 提交按钮 */
  .submit{
    position:relative;
    width:100%;
    height:50px;
    border:0;
    border-radius:14px;
    cursor:pointer;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    letter-spacing:3px;
    color:#fff;
    background:linear-gradient(120deg,#6366f1,#8b5cf6 45%,#a855f7);
    background-size:200% 100%;
    box-shadow:0 12px 26px -8px rgba(99,102,241,.7);
    transition:background-position .45s ease,transform .2s ease,box-shadow .25s ease;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  .submit:hover{
    background-position:100% 0;
    transform:translateY(-1px);
    box-shadow:0 16px 32px -8px rgba(99,102,241,.8);
  }
  .submit:active{transform:translateY(0) scale(.995);}
  .submit:disabled{cursor:default;}

  .btn-text{transition:opacity .2s;}
  .spinner{
    position:absolute;
    inset:0;margin:auto;
    width:20px;height:20px;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    opacity:0;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .submit.loading .btn-text{opacity:0;}
  .submit.loading .spinner{opacity:1;}

  /* ============ 注册引导 ============ */
  .divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0 16px;
    color:#b7bdcb;
    font-size:11.5px;
    letter-spacing:.4px;
    user-select:none;
  }
  .divider::before,
  .divider::after{
    content:'';
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,#e7e9f2 30%,#e7e9f2 70%,transparent);
  }

  .signup-btn{
    width:100%;
    height:48px;
    border:1.5px solid #e3e5f0;
    border-radius:14px;
    background:#fff;
    color:#5b6478;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    letter-spacing:.4px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    transition:border-color .22s ease,background .22s ease,color .22s ease,
               transform .2s ease,box-shadow .25s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .signup-btn b{
    font-weight:700;
    color:var(--primary);
    transition:color .22s ease;
  }
  .signup-btn svg{
    width:15px;height:15px;
    margin-left:2px;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .signup-btn:hover{
    border-color:rgba(99,102,241,.5);
    background:rgba(99,102,241,.05);
    color:var(--primary);
    transform:translateY(-1px);
    box-shadow:0 10px 22px -12px rgba(99,102,241,.55);
  }
  .signup-btn:hover b{color:var(--primary-2);}
  .signup-btn:hover svg{transform:translateX(3px);}
  .signup-btn:active{transform:translateY(0) scale(.995);}

  /* ============ 扫码面板 ============ */
  #pane-qr{text-align:center;}

  .qr-frame{
    position:relative;
    width:200px;height:200px;
    margin:0 auto;
    padding:8px;
    background:#fff;
    border-radius:18px;
    border:1px solid #eef0f6;
    box-shadow:0 14px 34px -16px rgba(30,27,75,.4);
  }
  .qr-inner{
    position:relative;
    width:100%;height:100%;
    overflow:hidden;
    border-radius:10px;
  }
  #qrCanvas{
    width:100%;height:100%;
    display:block;
    border-radius:10px;
  }

  .qr-logo{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:42px;height:42px;
    border-radius:12px;
    background:var(--wechat);
    display:grid;
    place-items:center;
    box-shadow:0 0 0 4px #fff;
    animation:pop .5s cubic-bezier(.2,1.4,.5,1) both;
  }
  .qr-logo svg{width:25px;height:25px;fill:#fff;}
  @keyframes pop{
    from{transform:translate(-50%,-50%) scale(.5);opacity:0;}
    to{transform:translate(-50%,-50%) scale(1);opacity:1;}
  }

  .qr-scan{
    position:absolute;
    left:0;right:0;top:0;
    height:42%;
    background:linear-gradient(180deg,
      rgba(7,193,96,0) 0%,
      rgba(7,193,96,.16) 42%,
      rgba(7,193,96,.5) 50%,
      rgba(7,193,96,.16) 58%,
      rgba(7,193,96,0) 100%);
    animation:scan 2.8s cubic-bezier(.45,0,.55,1) infinite;
    pointer-events:none;
  }
  @keyframes scan{
    0%{transform:translateY(-130%);}
    100%{transform:translateY(340%);}
  }

  .qr-mask{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.93);
    backdrop-filter:blur(2px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:#374151;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    border-radius:10px;
  }
  .qr-mask.show{opacity:1;visibility:visible;}
  .qr-mask span{
    font-size:12px;
    font-weight:600;
    color:var(--primary);
  }

  .qr-tip{
    margin-top:24px;
    font-size:14px;
    color:#4b5563;
  }
  .qr-tip b{color:var(--wechat);}
  .qr-sub{
    margin-top:8px;
    font-size:12.5px;
    color:#9aa3b2;
  }
  .qr-refresh{
    margin-top:22px;
    border:1px solid #e5e7ef;
    background:#fff;
    color:#6b7280;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    padding:9px 18px;
    border-radius:10px;
    cursor:pointer;
    transition:.2s ease;
  }
  .qr-refresh:hover{
    color:var(--primary);
    border-color:rgba(99,102,241,.45);
    background:rgba(99,102,241,.05);
  }

  /* ============ 响应式 ============ */
  @media (max-width:880px){
    body{padding:16px;}
    .card{
      grid-template-columns:1fr;
      max-width:440px;
      min-height:auto;
      border-radius:24px;
    }
    .brand{
      padding:26px 28px;
      flex-direction:row;
      align-items:center;
    }
    .brand-mid,.feats{display:none;}
    .brand::before,.brand::after,.glow{display:none;}
    .logo{width:36px;height:36px;border-radius:18px;}
    .logo svg{width:19px;height:19px;}
    .brand-top span{font-size:16px;}
    .panel{padding:30px 26px 34px;}
    .tabs{margin-bottom:24px;}
  }
  @media (max-width:420px){
    .panel{padding:26px 20px 30px;}
    .brand{padding:22px 20px;}
    #captchaCanvas{width:104px;}
    .divider{margin:18px 0 14px;}
  }