*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body.layui-layout-body.auth-page,
body.auth-page{
  margin:0!important;
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif!important;
  background:linear-gradient(165deg,#f3fcf7 0%,#e8f8f1 42%,#dff5eb 100%)!important;
  color:#1a3d32!important;
  min-height:100vh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
}
body.auth-page .layui-layout,
body.auth-page .layui-side,
body.auth-page .layui-header{display:none!important}

#particles,#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-glow{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.7}
.bg-glow.g1{width:560px;height:560px;left:-160px;top:-160px;background:radial-gradient(circle,#a8f0d0,transparent 70%);animation:glowFloat 14s ease-in-out infinite}
.bg-glow.g2{width:640px;height:640px;right:-200px;bottom:-220px;background:radial-gradient(circle,#7ee0bd,transparent 70%);animation:glowFloat 18s ease-in-out infinite reverse}
.bg-glow.g3{width:340px;height:340px;right:22%;top:-120px;background:radial-gradient(circle,#b8f5dc,transparent 70%);opacity:.55;animation:glowFloat 11s ease-in-out infinite 2s}
@keyframes glowFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}

.auth-shell,.wrap{
  position:relative;z-index:2;width:min(1160px,94vw);
  display:flex!important;align-items:center;justify-content:space-between;
  gap:60px;padding:48px 0;min-height:auto!important;
  grid-template-columns:unset!important;
}
body.auth-page > .auth-shell{
  display:flex!important;
  grid-template-columns:unset!important;
  width:min(1160px,94vw);min-height:auto;
}

.auth-showcase,.brand{
  flex:1.15;min-width:0;
  padding:0!important;overflow:visible!important;
  background:none!important;
  display:block!important;
  animation:riseIn .9s cubic-bezier(.2,.8,.25,1) both;
}
.auth-showcase::before{display:none!important}

.auth-brand,.brand-badge{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px}
.auth-brand-mark,.badge-icon{
  width:56px;height:56px;border-radius:14px;flex:none;position:relative;
  background:linear-gradient(135deg,#0a9b73,#12c48a);
  box-shadow:0 8px 24px rgba(10,155,115,.28);
}
.auth-brand-mark::after,.badge-icon::before{
  content:"";position:absolute;inset:-5px;border-radius:18px;
  border:1.5px solid rgba(10,155,115,.35);animation:ringPulse 2.4s ease-out infinite;
}
.auth-brand-mark::before{
  content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.95);
  border-radius:50%;border-top-color:transparent;border-left-color:transparent;transform:rotate(-20deg);
}
@keyframes ringPulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.22);opacity:0}}
.auth-brand > span:last-child,.badge-text b{
  display:block;font-size:15px;letter-spacing:3px;color:#0a5c44;font-weight:700;
}

.auth-hero{margin:0;max-width:none;animation:none}
.auth-hero .eyebrow,.brand .en{
  margin-top:8px;margin-bottom:0;font-size:12px;letter-spacing:4px;
  color:rgba(10,155,115,.55);text-transform:uppercase;font-weight:500;
}
.auth-hero h1,.brand h1{
  font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.3;letter-spacing:1px;margin:0;
  background:linear-gradient(90deg,#0a3d2e 15%,#0a9b73 85%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.auth-hero h1 span{background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.auth-hero p,.brand .desc{
  margin-top:20px;font-size:14px;line-height:2;color:#3d6b5c;max-width:520px;
}

.auth-feature-list,.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.auth-features h3{display:none}
.auth-feature-list span,.tags span{
  font-size:12px;color:#0a7a5a;padding:6px 14px;
  border:1px solid rgba(10,155,115,.28);border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(4px);
  opacity:0;animation:tagIn .5s ease forwards;
  box-shadow:0 2px 8px rgba(10,155,115,.08);
}
.auth-feature-list span::before{display:none!important}
.auth-feature-list span:nth-child(1),.tags span:nth-child(1){animation-delay:.5s}
.auth-feature-list span:nth-child(2){animation-delay:.65s}
.auth-feature-list span:nth-child(3){animation-delay:.8s}
.auth-feature-list span:nth-child(4){animation-delay:.95s}
.auth-feature-list span:nth-child(5){animation-delay:1.05s}
.auth-feature-list span:nth-child(6){animation-delay:1.15s}
@keyframes tagIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.auth-stats,.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:34px 0 0;max-width:560px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  animation:none;
}
.auth-stat,.stat{
  padding:16px 14px 13px;border-radius:12px;position:relative;overflow:hidden;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(220,248,236,.88));
  border:1px solid rgba(10,155,115,.18);backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(10,155,115,.08);
  transition:transform .3s,border-color .3s,box-shadow .3s;opacity:0;animation:tagIn .6s ease forwards;
}
.auth-stat + .auth-stat::before{display:none!important}
.auth-stat:nth-child(1){animation-delay:.7s}
.auth-stat:nth-child(2){animation-delay:.85s}
.auth-stat:nth-child(3){animation-delay:1s}
.auth-stat:hover,.stat:hover{
  transform:translateY(-4px);border-color:rgba(10,155,115,.45);
  background:linear-gradient(160deg,#fff,rgba(210,245,230,.95));
  box-shadow:0 8px 24px rgba(10,155,115,.14);
}
.auth-stat b,.stat .num{
  display:block;font-size:24px;font-weight:800;color:#0a3d2e;font-variant-numeric:tabular-nums;
  font-family:inherit;letter-spacing:0;line-height:1.15;
}
.auth-stat b em,.stat .num i{font-style:normal;font-size:12px;font-weight:400;color:#0a9b73;margin-left:2px}
.auth-stat span,.stat .lbl{display:block;font-size:12px;color:#5a8a78;margin-top:4px;letter-spacing:0}
.auth-stat::after,.stat::after{
  content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#0a9b73,#12c48a);transform-origin:left;
  animation:barGrow 1.6s .8s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.auth-advantages{display:grid;gap:10px;margin-top:28px;max-width:560px}
.auth-adv{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;
  padding:10px 12px;border-radius:10px;border:1px solid transparent;
  transition:background .25s,border-color .25s;
}
.auth-adv:hover{background:rgba(255,255,255,.75);border-color:rgba(10,155,115,.22)}
.auth-adv i{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(10,155,115,.12);color:#0a9b73;font-style:normal;font-weight:800;font-size:.75rem;
}
.auth-adv strong{display:block;font-size:13px;color:#0a3d2e;margin-bottom:2px}
.auth-adv p{margin:0;font-size:12px;line-height:1.6;color:#4d7a68}

.auth-live,.wave-note{
  margin-top:22px;font-size:11px;color:#5a8a78;letter-spacing:1px;
  display:flex;align-items:center;gap:8px;
}
.auth-live-dot{
  width:7px;height:7px;border-radius:50%;background:#0eb085;
  box-shadow:0 0 0 0 rgba(14,176,133,.45);animation:blink 1.6s ease infinite;
}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(14,176,133,.4)}50%{opacity:.45;box-shadow:0 0 0 6px rgba(14,176,133,0)}}
.auth-live b{color:#0a9b73;font-weight:700}

.auth-panel{
  width:min(430px,100%);flex:none;position:relative;min-height:auto;height:auto;
  padding:0!important;border:0!important;background:none!important;backdrop-filter:none!important;
  display:block!important;align-self:center;
}
.auth-panel .login-container,
.auth-panel .register-box,
.card{
  width:100%!important;max-width:none;margin:0;
  background:rgba(255,255,255,.98)!important;
  border-radius:18px!important;padding:42px 40px 34px!important;
  box-shadow:0 20px 50px rgba(10,100,70,.12),0 0 0 1px rgba(10,155,115,.12)!important;
  color:#1f2d3d;position:relative;overflow:hidden;
  border:0!important;backdrop-filter:none!important;
  animation:cardIn .9s .2s cubic-bezier(.2,.8,.25,1) both;
}
.auth-panel .login-container::before,
.auth-panel .register-box::before,
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;opacity:1;filter:none;
  background:linear-gradient(90deg,#0a9b73,#12c48a,#0a9b73);background-size:200% auto;
  animation:lineFlow 3.5s linear infinite;border-radius:0;
}
@keyframes lineFlow{to{background-position:200% center}}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.login-title,
.auth-panel .register-box h2{
  text-align:left;font-size:22px;font-weight:800;color:#12312a;letter-spacing:1px;margin:0 0 8px;
}
.card-sub{
  font-size:13px;color:#8a97a8;margin:0 0 22px;
}
.layui-tab-title{
  text-align:left!important;border-bottom:1px solid #e6ecf4!important;margin:0 0 22px!important;
  height:auto!important;
}
.layui-tab-title li{
  width:auto!important;min-width:0;padding:0 14px!important;line-height:42px!important;
  font-size:14px!important;color:#8a97a8!important;font-weight:500;
}
.layui-tab-title li.layui-this{color:#0a9b73!important;font-weight:700}
.layui-tab-title .layui-this:after{
  border:none!important;height:2px!important;background:#0a9b73!important;border-radius:2px;
  width:100%!important;left:0!important;right:0!important;
}
.layui-tab>.layui-tab-content{background:none;padding:0}
.layui-tab-bar{display:none}

.layui-form-item .layui-input,
.auth-panel .register-box .layui-input{
  border-radius:10px!important;border:1.5px solid #e2e9f2!important;height:50px!important;
  padding:0 16px!important;background:#f7fafd!important;color:#1f2d3d!important;
  box-shadow:none!important;text-indent:0!important;
}
.auth-panel .register-box .layui-input{text-indent:36px!important}
.layui-form-item .layui-input::placeholder,
.auth-panel .register-box .layui-input::placeholder{color:#a5b2c2}
.layui-form-item .layui-input:focus,
.auth-panel .register-box .layui-input:focus{
  border-color:#0a9b73!important;background:#fff!important;
  box-shadow:0 0 0 4px rgba(10,155,115,.12)!important;
}
.auth-panel .register-box .layui-icon{color:#9aa8ba;left:14px;top:16px}

.login-btn,
.auth-panel .register-box button.layui-btn{
  width:100%;height:50px;border:0!important;border-radius:10px!important;cursor:pointer;
  font-size:16px!important;font-weight:700!important;letter-spacing:4px;color:#fff!important;
  background:linear-gradient(90deg,#0a9b73,#12c48a)!important;
  box-shadow:0 8px 20px rgba(10,155,115,.32)!important;
  transition:transform .2s,box-shadow .25s;
}
.login-btn:hover,
.auth-panel .register-box button.layui-btn:hover{
  transform:translateY(-2px);box-shadow:0 12px 28px rgba(10,155,115,.42)!important;
}

.wechat-qrcode{text-align:center;padding:8px 0 4px}
.wechat-qrcode img,.wechat-qrcode .headimg{
  width:176px;height:176px;border-radius:12px;display:inline-block;
  box-shadow:0 10px 28px rgba(10,155,115,.14);background-size:cover;background-position:center;
  border:1px solid #e6ecf4;
}
.wechat-qrcode p{margin-top:14px;color:#8a97a8;font-size:13px;line-height:1.6}

.auth-switch{margin-top:16px;text-align:center;font-size:12.5px;color:#8a97a8}
.auth-switch a{color:#0a9b73;font-weight:700;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

.auth-panel .register-box .send [data-send] span,
.auth-panel .register-box [data-send] span{
  background:rgba(10,155,115,.12)!important;color:#0a9b73!important;border-radius:8px;
}

.copyright{
  position:relative!important;margin-top:18px;text-align:center;
  color:#6a9484!important;font-size:12px;
}
.copyright a{color:#0a9b73}

/* Tablet / phone: intro first, login below */
@media (max-width:991px){
  body.auth-page{
    align-items:flex-start!important;
    padding:calc(72px + env(safe-area-inset-top,0px)) 16px 24px!important;
  }
  .auth-shell,.wrap,body.auth-page > .auth-shell{
    flex-direction:column!important;
    gap:28px;
    padding:20px 0 40px;
    width:100%;
    max-width:560px;
  }
  .auth-showcase,.brand{
    text-align:center;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    order:1;
    width:100%;
    padding-top:10px!important;
    overflow:visible!important;
  }
  .auth-brand,.brand-badge{
    margin-top:8px;
    margin-bottom:22px;
    position:relative;
    z-index:1;
  }
  .auth-brand-mark::after,.badge-icon::before{
    animation:none;
    opacity:.35;
    transform:scale(1.05);
  }
  .auth-panel{
    width:100%;
    order:2;
  }
  .auth-hero p,.brand .desc{max-width:100%}
  .auth-feature-list,.tags{justify-content:center}
  .auth-stats,.stats{max-width:100%;width:100%}
  .auth-advantages{text-align:left;width:100%;max-width:100%}
  .auth-live{justify-content:center}
  .layui-tab-title{display:flex!important;justify-content:center}
  .layui-tab-title li{flex:1;text-align:center;padding:0 8px!important}
}
@media (max-width:575px){
  body.auth-page{padding:calc(80px + env(safe-area-inset-top,0px)) 12px 28px!important}
  .auth-shell,body.auth-page > .auth-shell{padding:20px 0 32px;gap:22px}
  .auth-showcase,.brand{padding-top:18px!important}
  .auth-brand,.brand-badge{margin-top:14px;margin-bottom:18px}
  .auth-brand-mark,.badge-icon{width:48px;height:48px;border-radius:12px}
  .auth-hero h1,.brand h1{font-size:22px;letter-spacing:.5px}
  .auth-hero .eyebrow{font-size:11px;letter-spacing:2px}
  .auth-hero p{display:none}
  .auth-advantages{display:none}
  .auth-features{width:100%}
  .auth-feature-list{gap:8px;margin-top:16px}
  .auth-feature-list span{padding:5px 10px;font-size:11px}
  .auth-stats{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:20px;
  }
  .auth-stat{padding:12px 6px 14px}
  .auth-stat b{font-size:17px}
  .auth-stat span{font-size:11px}
  .auth-stat::after{left:8px;right:8px}
  .auth-live{margin-top:16px;font-size:10px;flex-wrap:wrap;justify-content:center}
  .auth-panel .login-container,
  .auth-panel .register-box{
    padding:26px 18px 22px!important;
    border-radius:14px!important;
  }
  .login-title,.auth-panel .register-box h2{font-size:18px;text-align:center}
  .card-sub{text-align:center}
  .wechat-qrcode img,.wechat-qrcode .headimg{width:156px;height:156px}
  .wechat-qrcode p{font-size:12px;padding:0 4px}
  .layui-form-item .layui-input,
  .auth-panel .register-box .layui-input{height:46px!important;font-size:16px!important}
  .login-btn,.auth-panel .register-box button.layui-btn{height:46px;letter-spacing:2px;font-size:15px!important}
  .copyright{font-size:11px;line-height:1.6;padding:0 8px}
}
@media (max-width:380px){
  .auth-stats{grid-template-columns:1fr 1fr; }
  .auth-stat:last-child{grid-column:1 / -1}
}