/* ===== 发力集团 · 登录/注册（动态极光 · 高级感） ===== */

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

body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2rem;
  padding-top:calc(1.2rem + env(safe-area-inset-top));
  padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));
  line-height:1.5;
  color:#1e293b;
  background:#ffffff;
  overflow-x:hidden;
}

/* --- 动态极光光斑（三层，各自漂移） --- */
.orb{
  position:fixed;border-radius:50%;
  filter:blur(70px);-webkit-filter:blur(70px);
  pointer-events:none;z-index:0;opacity:.55;
  will-change:transform,translate;
}
.orb-1{
  width:46vmax;height:46vmax;left:-15vmax;top:-17vmax;
  background:radial-gradient(circle at 35% 35%, rgba(0,122,255,.34), rgba(0,122,255,0) 68%);
  animation:drift1 22s ease-in-out infinite alternate;
}
.orb-2{
  width:42vmax;height:42vmax;right:-17vmax;bottom:-15vmax;
  background:radial-gradient(circle at 60% 60%, rgba(16,174,255,.30), rgba(16,174,255,0) 68%);
  animation:drift2 27s ease-in-out infinite alternate;
}
.orb-3{
  width:27vmax;height:27vmax;right:7vmax;top:-11vmax;
  background:radial-gradient(circle at 50% 50%, rgba(250,157,59,.26), rgba(250,157,59,0) 70%);
  animation:drift3 19s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(9vmax,7vmax,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-8vmax,-6vmax,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(-6vmax,8vmax,0) scale(.92)}}

/* --- 胶片噪点颗粒（材质层） --- */
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.6"/></svg>');
}

/* 顶部轻提示 */
.toast{
  position:fixed;top:18px;left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:#0f172a;color:#fff;
  padding:10px 16px;border-radius:12px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:9999;font-size:.9rem;
  box-shadow:0 18px 45px -20px rgba(15,23,42,.55);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.card-stack{position:relative;z-index:2;width:100%;max-width:380px;animation:rise .7s cubic-bezier(.22,1,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* 品牌区 */
.brand{text-align:center;margin-bottom:1.5rem;animation:rise .7s .1s cubic-bezier(.22,1,.36,1) both}
.brand-badge{
  width:66px;height:66px;border-radius:20px;
  background:linear-gradient(135deg,#0a84ff 0%,#0066d6 100%);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,122,255,.50), inset 0 1px 0 rgba(255,255,255,.28);
  animation:badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.brand-badge svg{width:33px;height:33px}
.brand-name{margin-top:.85rem;font-size:1.5rem;font-weight:700;letter-spacing:.10em;color:#0f172a}
.brand-sub{margin-top:.25rem;font-size:.8rem;color:#8a94a6;letter-spacing:.18em}

/* 卡片（旋转渐变描边 8s 循环） */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
.card{
  position:relative;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 24px 60px -24px rgba(15,23,42,.20),
    0 4px 16px -8px rgba(15,23,42,.06);
}
.card::before{
  content:'';position:absolute;inset:-1.5px;border-radius:23.5px;z-index:-1;
  background:conic-gradient(from var(--ga),
    rgba(0,122,255,0) 0%, rgba(0,122,255,.55) 12%, rgba(16,174,255,.45) 24%, rgba(0,122,255,0) 40%, rgba(0,122,255,0) 100%);
  animation:spinBorder 8s linear infinite;
}
@keyframes spinBorder{to{--ga:360deg}}
#loginCard{padding:2rem 1.9rem 1.6rem}
#registerCard{padding:1.8rem 1.8rem 1.5rem}

h2{text-align:center;font-weight:600;letter-spacing:.02em;color:#0f172a}
#loginCard h2{font-size:1.35rem;margin-bottom:1.4rem}
#registerCard h2{font-size:1.35rem;margin-bottom:1.2rem}

.alert-info{
  margin-bottom:1rem;padding:.7rem 1rem;
  background:rgba(250,157,59,.10);border:1px solid rgba(250,157,59,.25);
  color:#b45309;border-radius:12px;font-size:.88rem;text-align:center;
}

/* 输入组 */
.input-group{position:relative}
#loginCard .input-group{margin-bottom:.95rem}
#registerCard .input-group{margin-bottom:.85rem}

.input-group i{
  position:absolute;left:1.05rem;top:50%;
  transform:translateY(-50%);
  font-size:1rem;color:#a4aec0;
  transition:color .2s ease;pointer-events:none;
}

.input-group input{
  width:100%;
  background:#f4f6f8;
  border:1.5px solid transparent;
  border-radius:13px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  caret-color:#0066d6;
  color:#1e293b;
  font-weight:450;
  font-family:inherit;
}
#loginCard .input-group input,
#registerCard .input-group input{
  padding:.88rem 1rem .88rem 2.7rem;
  font-size:.95rem;
}
.input-group input::placeholder{color:#a4aec0;font-weight:400}
.input-group:focus-within i{color:#0066d6}
.input-group input:focus{
  background:#fff;
  border-color:#007aff;
  box-shadow:0 0 0 4px rgba(0,122,255,.10);
}

/* 按钮（流光扫过） */
.login-btn,.register-btn{
  position:relative;overflow:hidden;
  width:100%;
  border:none;
  border-radius:13px;
  cursor:pointer;
  background:linear-gradient(135deg,#0a84ff 0%,#0066d6 100%);
  color:#fff;
  font-weight:600;
  font-family:inherit;
  box-shadow:0 12px 24px -10px rgba(0,122,255,.55), inset 0 1px 0 rgba(255,255,255,.22);
  transition:box-shadow .2s, transform .15s, filter .2s;
}
.login-btn::after,.register-btn::after{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  animation:sheen 3.8s ease-in-out infinite;
}
@keyframes sheen{0%,55%{left:-70%}100%{left:140%}}
.login-btn{padding:.9rem;font-size:1rem;letter-spacing:.25em;margin-top:.45rem}
.register-btn{padding:.9rem;font-size:1rem;letter-spacing:.05em;margin-top:.3rem}
.login-btn:hover,.register-btn:hover{filter:brightness(1.04);box-shadow:0 16px 30px -12px rgba(0,122,255,.60), inset 0 1px 0 rgba(255,255,255,.22)}
.login-btn:active,.register-btn:active{transform:scale(.985)}

/* 底部链接 */
.signup-row,.login-redirect{
  width:100%;
  text-align:center;
  display:flex;align-items:center;justify-content:center;
  gap:.25rem;flex-wrap:wrap;
}
#loginCard .login-redirect{margin-top:1.25rem;font-size:.9rem;color:#8a94a6}
#registerCard .login-redirect{margin-top:1.1rem;font-size:.9rem;color:#8a94a6}
.signup-row{margin-top:1.1rem;font-size:.9rem;color:#8a94a6}

.signup-row a,.login-redirect a,.captcha-link{
  color:#0066d6;
  font-weight:600;
  text-decoration:none;
  position:relative;
  padding:.1rem .2rem;
  cursor:pointer;
  transition:color .2s;
}
.signup-row a::after,.login-redirect a::after,.captcha-link::after{
  content:'';
  position:absolute;bottom:-1px;left:.2rem;right:.2rem;
  height:1.5px;background:#0066d6;
  transform:scaleX(0);transform-origin:right;
  transition:transform .2s ease-out;
}
.signup-row a:hover,.login-redirect a:hover,.captcha-link:hover{color:#0051b8}
.signup-row a:hover::after,.login-redirect a:hover::after,.captcha-link:hover::after{
  transform:scaleX(1);transform-origin:left;
}

/* 人机验证 */
.captcha-container{margin-bottom:.95rem}
.captcha-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem}
.captcha-equation{
  font-weight:500;color:#1e293b;
  background:#f4f6f8;
  padding:.3rem .85rem;border-radius:2rem;
  font-size:.9rem;border:1px solid #e9eef3;
}
.captcha-input{
  width:100%;padding:.85rem 1rem;font-size:.95rem;
  background:#f4f6f8;border:1.5px solid transparent;border-radius:13px;outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  font-family:inherit;
}
.captcha-input:focus{
  background:#fff;border-color:#007aff;
  box-shadow:0 0 0 4px rgba(0,122,255,.10);
}

.hint{margin-top:.9rem;text-align:center;color:#8a94a6;font-size:.88rem}
.err{margin-top:1rem;text-align:center;color:#dc2626;font-weight:600;font-size:.92rem}

/* 版权 */
.copyright{
  text-align:center;
  font-size:.76rem;
  color:#a4aec0;
  margin-top:1.7rem;
  padding-top:1.05rem;
  border-top:1px solid #eef1f5;
  letter-spacing:.22em;
}
#registerCard .copyright{margin-top:1.4rem;padding-top:.9rem}

@media (max-width:480px){
  body{padding:1rem .9rem}
  #loginCard{padding:1.7rem 1.5rem 1.4rem}
  #registerCard{padding:1.5rem 1.4rem 1.3rem}
  .brand-badge{width:60px;height:60px;border-radius:18px}
  .brand-name{font-size:1.35rem}
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce){
  .orb,.card::before,.brand-badge,.login-btn::after,.register-btn::after,
  .card-stack,.brand{animation:none!important}
}

/* ===== 暗色模式（跟随工作台 kefu_theme 设置） ===== */
html.dark,body.dark{
  background:#000;
}
body.dark{
  color:#f5f5f7;
  background:#000;
}
body.dark .orb{opacity:.34}
body.dark .orb-1{
  background:radial-gradient(circle at 35% 35%, rgba(0,122,255,.22), rgba(0,122,255,0) 68%);
}
body.dark .orb-2{
  background:radial-gradient(circle at 60% 60%, rgba(16,174,255,.18), rgba(16,174,255,0) 68%);
}
body.dark .orb-3{
  background:radial-gradient(circle at 50% 50%, rgba(250,157,59,.14), rgba(250,157,59,0) 70%);
}
body.dark .toast{
  background:rgba(44,44,46,.94);color:#f5f5f7;
  box-shadow:0 18px 45px -20px rgba(0,0,0,.8);
}
body.dark .brand-name{color:#f5f5f7}
body.dark .brand-sub{color:#8e8e93}
body.dark .card{
  background:rgba(28,28,30,.92);
  border-color:rgba(255,255,255,.10);
  box-shadow:
    0 24px 60px -24px rgba(0,0,0,.75),
    0 4px 16px -8px rgba(0,0,0,.45);
}
body.dark .card::before{
  background:conic-gradient(from var(--ga),
    rgba(0,122,255,0) 0%, rgba(0,122,255,.40) 12%, rgba(16,174,255,.32) 24%, rgba(0,122,255,0) 40%, rgba(0,122,255,0) 100%);
}
body.dark h2{color:#f5f5f7}
body.dark .input-group i{color:#636366}
body.dark .input-group input{
  background:#2c2c2e;
  color:#f5f5f7;
  border-color:rgba(255,255,255,.08);
}
body.dark .input-group input::placeholder{color:#636366}
body.dark .input-group input:focus{
  background:#3a3a3c;
  border-color:#007aff;
  box-shadow:0 0 0 4px rgba(0,122,255,.16);
}
body.dark .input-group:focus-within i{color:#0a84ff}
body.dark .captcha-equation{
  background:#2c2c2e;color:#f5f5f7;border-color:rgba(255,255,255,.10);
}
body.dark .captcha-input{
  background:#2c2c2e;color:#f5f5f7;border-color:rgba(255,255,255,.08);
}
body.dark .captcha-input:focus{
  background:#3a3a3c;border-color:#007aff;
  box-shadow:0 0 0 4px rgba(0,122,255,.16);
}
body.dark .alert-info{
  background:rgba(250,157,59,.14);border-color:rgba(250,157,59,.30);color:#ffb340;
}
body.dark .hint{color:#8e8e93}
body.dark .signup-row,
body.dark .login-redirect{color:#8e8e93}
body.dark .signup-row a,
body.dark .login-redirect a,
body.dark .captcha-link{color:#0a84ff}
body.dark .copyright{
  color:#636366;
  border-top-color:rgba(255,255,255,.10);
}
body.dark .err{color:#ff6b62}