/* ============================================================
   auth/auth.css — GLZDGX 登录/注册页（主题自适应 + 主页同款呼吸背景）
   主题变量与主页 styles.css 保持一致，自包含以避免与 Tailwind 冲突。
   ============================================================ */

/* ===== 主题变量（dark / light，与主页一致） ===== */
[data-theme="dark"]{
  --bg:#050508;--bgE:#0b0b13;--tx:#f7f7fb;--txS:#cbccd9;--mu:#83849a;--mu2:#52546a;
  --ln:rgba(255,255,255,.07);--lnS:rgba(255,255,255,.14);--cb:rgba(255,255,255,.032);--cbH:rgba(255,255,255,.06);
  --cbd:rgba(255,255,255,.08);--cbdH:rgba(255,255,255,.18);--sh:0 40px 90px -40px rgba(0,0,0,.95);
  --gl:rgba(255,255,255,.036);--vg:rgba(0,0,0,.5);
  --gt:linear-gradient(105deg,#a78bfa,#e879f9 20%,#fb7185 38%,#fbbf24 56%,#22d3ee 74%,#a78bfa);
  --ga:linear-gradient(120deg,#7c5cff,#a855f7 42%,#22d3ee);--gw:rgba(124,92,255,.5);--nz:.03;color-scheme:dark
}
[data-theme="light"]{
  --bg:#f7f7fb;--bgE:#fff;--tx:#08080f;--txS:#26263a;--mu:#64647a;--mu2:#9a9aab;
  --ln:rgba(8,8,24,.07);--lnS:rgba(8,8,24,.13);--cb:#fff;--cbH:#fff;--cbd:rgba(8,8,24,.065);--cbdH:rgba(8,8,24,.15);
  --sh:0 26px 54px -24px rgba(8,8,24,.2);--gl:rgba(8,8,24,.03);--vg:rgba(255,255,255,.45);
  --gt:linear-gradient(105deg,#7c3aed,#c026d3 20%,#e11d48 38%,#d97706 56%,#0891b2 74%,#7c3aed);
  --ga:linear-gradient(120deg,#6d3cff,#8b5cf6 42%,#0891b2);--gw:rgba(124,92,255,.28);--nz:.02;color-scheme:light
}
:root{
  --e:cubic-bezier(.16,1,.3,1);--es:cubic-bezier(.65,0,.35,1);--espr:cubic-bezier(.34,1.56,.64,1);
  --fd:"Sora",-apple-system,BlinkMacSystemFont,"MiSans","HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --fs:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","MiSans","PingFang SC","HarmonyOS Sans SC",Roboto,Arial,sans-serif;
  --auth-fill:color-mix(in srgb, var(--bgE) 76%, transparent)
}

/* ===== View Transitions（主题切换圆形扩散，与主页 styles.css 一致） ===== */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* ===== 基础背景（CSS 光晕 + 网格打底；呼吸光晕由 glow.js 叠加在 canvas 上） ===== */
html{background:var(--bg);transition:background-color .7s var(--es)}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 115% at 80% -10%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(95% 100% at 2% 104%, rgba(34,211,238,.14), transparent 52%),
    radial-gradient(85% 85% at 50% 48%, rgba(232,121,249,.08), transparent 60%),
    linear-gradient(rgba(128,128,128,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,128,.05) 1px, transparent 1px);
  background-size:auto,auto,auto,46px 46px,46px 46px;
  background-attachment:fixed;
  color:var(--tx);font-family:var(--fs);transition:color .7s var(--es)
}
.canvas-glow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;contain:strict}
/* 纯 CSS 呼吸光晕（保底层，不依赖 canvas，确保背景有缓慢呼吸的彩色光斑） */
body::before{content:"";position:fixed;inset:-22%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(124,92,255,.30), transparent 70%),
    radial-gradient(34% 34% at 80% 22%, rgba(34,211,238,.26), transparent 70%),
    radial-gradient(42% 42% at 70% 80%, rgba(232,121,249,.22), transparent 70%),
    radial-gradient(30% 30% at 16% 82%, rgba(251,191,36,.20), transparent 70%);
  animation:auroraBreath 16s var(--es) infinite;will-change:transform,opacity}
@keyframes auroraBreath{0%,100%{opacity:.5;transform:translate3d(0,0,0) scale(1)}33%{opacity:.92;transform:translate3d(2.5%,-3%,0) scale(1.08)}66%{opacity:.66;transform:translate3d(-2%,2.5%,0) scale(.95)}}

/* 字体 */
body,h1,h2,h3,label{font-family:var(--fd)}
input{font-family:var(--fs)}

/* ===== 右上角 语言 / 主题 控制（两主题均保证对比度） ===== */
.auth-controls{position:fixed;top:18px;right:18px;z-index:50;display:flex;align-items:center;gap:10px}
.lang-toggle,.theme-toggle{background:rgba(255,255,255,.74);border:1px solid rgba(8,8,24,.12);color:#0b0b13;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lang-toggle{display:flex;align-items:center;gap:2px;padding:3px;height:34px;border-radius:999px}
.lang-toggle button{display:grid;place-items:center;min-width:32px;height:26px;padding:0 8px;border-radius:999px;font-family:var(--fd);font-size:11.5px;font-weight:700;color:inherit;background:transparent;transition:background-color .35s var(--es),color .35s var(--es)}
.lang-toggle button.active{color:#fff;background:#0b0b13}
.theme-toggle{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;transition:transform .5s var(--espr)}
.theme-toggle:hover{transform:scale(1.1) rotate(12deg)}
.theme-toggle svg{position:absolute;width:18px;height:18px;transition:opacity .5s,transform .65s var(--espr)}
[data-theme="dark"] .lang-toggle,[data-theme="dark"] .theme-toggle{background:rgba(18,18,28,.5);border-color:rgba(255,255,255,.16);color:#f2f2f7}
[data-theme="dark"] .lang-toggle button.active{color:#0b0b13;background:#f2f2f7}
.i-moon{opacity:1}
.i-sun{opacity:0;transform:rotate(-55deg) scale(.5)}
[data-theme="light"] .i-moon{opacity:0;transform:rotate(55deg) scale(.5)}
[data-theme="light"] .i-sun{opacity:1;transform:none}

/* ===== 玻璃卡片（主题自适应） ===== */
.glass-card{background:var(--auth-fill)!important;border:1px solid var(--lnS)!important;box-shadow:var(--sh)!important;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);isolation:isolate;position:relative;z-index:1;animation:aFadeIn .8s var(--e) .1s both}
.glass-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;z-index:0;background:linear-gradient(130deg,rgba(124,92,255,.72),rgba(232,121,249,.55) 30%,rgba(34,211,238,.55) 64%,rgba(124,92,255,.72));background-size:220% 220%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:aBorderSweep 9s var(--es) infinite}
.glass-card>*{position:relative;z-index:1}
@keyframes aFadeIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes aBorderSweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ===== 文字颜色随主题（覆盖 Tailwind 固定灰） ===== */
#authCard,#profileCard{color:var(--tx)}
#authCard label,#profileCard label{color:var(--txS)}
#title,#subtitle{color:var(--tx)}
#authCard .text-gray-900{color:var(--tx)!important}
#authCard .text-gray-600{color:var(--txS)!important}
#authCard .text-gray-500{color:var(--mu)!important}
#authCard .text-gray-400{color:var(--mu2)!important}
#profileCard .text-gray-900,#profileCard .text-gray-700{color:var(--tx)!important}
#profileCard .text-gray-500{color:var(--mu)!important}
#profileCard .text-gray-400{color:var(--mu2)!important}

/* ===== 输入框 ===== */
#authCard input{background:var(--cbd)!important;color:var(--tx)!important;border-color:var(--lnS)!important}
#authCard input::placeholder{color:var(--mu2)!important}
#authCard input:focus{border-color:rgba(124,92,255,.6)!important;box-shadow:0 0 0 3px rgba(124,92,255,.16)!important}

/* ===== Tab ===== */
#tabBar{background:var(--cb)!important}
#tabSlider{background:var(--tx)!important;box-shadow:0 4px 14px -6px rgba(5,5,8,.28),0 0 0 1px var(--lnS)!important;border-radius:10px!important;transition:left .38s var(--e),width .38s var(--e),background-color .35s var(--es)}
#authCard #tabBar .text-gray-900{color:var(--bg)!important}

/* ===== 登录/注册按钮（品牌渐变，自动双色） ===== */
#submitBtn{background:var(--ga)!important;background-size:220% 220%!important;border-radius:999px!important;animation:aBtnB 9s var(--es) infinite!important;position:relative;overflow:hidden;isolation:isolate;color:#fff!important}
#submitBtn::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%);transform:translateX(-150%);transition:transform .95s var(--e);pointer-events:none}
#submitBtn:hover{background-position:100% 50%!important;filter:brightness(1.05)!important;transform:translateY(-1px)}
#submitBtn:hover::after{transform:translateX(150%)}
#submitBtn:active{transform:scale(.972)}
#submitBtn[disabled]{opacity:.55;cursor:not-allowed}
@keyframes aBtnB{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#submitBtn.bg-green-600{background:linear-gradient(120deg,#10b981,#22d3ee 50%,#0891b2)!important;box-shadow:0 14px 38px -12px rgba(16,185,129,.5),inset 0 1px 0 rgba(255,255,255,.32)!important}

/* ===== Profile 成功态绿圈 → 品牌渐变 ===== */
#profileCard .w-20.h-20.bg-green-100.text-green-600{background:var(--ga)!important;color:#fff!important;box-shadow:0 22px 44px -18px var(--gw),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -8px 14px -8px rgba(5,5,8,.25)!important}
/* 用户 ID 框 */
#profileCard .bg-gray-50{border-left:3px solid transparent;background:var(--auth-fill)!important;background-image:linear-gradient(var(--auth-fill),color-mix(in srgb,var(--auth-fill) 80%,transparent)),linear-gradient(180deg,#7c5cff,#22d3ee);background-origin:border-box;background-clip:padding-box,border-box!important}

/* ===== 退出按钮 ===== */
#profileCard #logoutBtn{color:var(--tx)!important;background:var(--cb)!important;border-color:var(--lnS)!important;border-radius:999px!important;transition:transform .3s var(--e),color .3s,background-color .3s!important}
#profileCard #logoutBtn:hover{transform:translateY(-1px);color:#f43f5e!important;background:var(--cbH)!important}

/* ===== Sora 粗字重 ===== */
#title,#subtitle,h2,h3{font-family:var(--fd)!important;letter-spacing:-.02em}

/* ===== Turnstile 尺寸 ===== */
#turnstile-widget{transform:scale(.92);transform-origin:center}

/* ===== 密码规则提示 ===== */
.pwd-rules{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;list-style:none;max-height:0;opacity:0;overflow:hidden;margin:0;padding:0;transition:max-height .42s var(--e),opacity .3s var(--e),margin .42s var(--e)}
.pwd-rules.show{max-height:340px;opacity:1;margin-top:10px}
.pwd-rules li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mu);transition:color .25s}
.pwd-rules li .dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--lnS);position:relative;transition:border-color .25s,background-color .25s}
.pwd-rules li .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#10b981;transform:scale(0);transition:transform .25s var(--e)}
.pwd-rules li.valid{color:var(--txS)}
.pwd-rules li.valid .dot{border-color:transparent;background:rgba(16,185,129,.18)}
.pwd-rules li.valid .dot::after{transform:scale(1)}

/* ===== 验证码组（注册模式平滑展开） ===== */
#codeGroup{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .42s var(--e),opacity .34s var(--e),transform .42s var(--e)}
#codeGroup.reveal{max-height:260px;opacity:1;transform:none}
#codeGroup.hidden{display:none}

/* ===== 注册实时安全检查看板 ===== */
#securityCheck{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .42s var(--e),opacity .34s var(--e),transform .42s var(--e)}
#securityCheck.reveal{max-height:240px;opacity:1;transform:none}
#securityCheck.hidden{display:none}
#securityCheck .sec-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mu2);margin-bottom:6px}
#securityCheck .sec-item{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mu);transition:color .25s}
#securityCheck .sec-dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--lnS);position:relative;transition:border-color .25s,background-color .25s}
#securityCheck .sec-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#10b981;transform:scale(0);transition:transform .25s var(--e)}
#securityCheck .sec-item.valid{color:var(--txS)}
#securityCheck .sec-item.valid .sec-dot{border-color:transparent;background:rgba(16,185,129,.18)}
#securityCheck .sec-item.valid .sec-dot::after{transform:scale(1)}
#securityCheck #secPassed{margin-top:8px;font-size:11.5px;font-weight:700;color:#10b981}

/* ===== 注册用户名（注册模式平滑展开） ===== */
#usernameGroup{overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .42s var(--e),opacity .34s var(--e),transform .42s var(--e)}
#usernameGroup.reveal{max-height:120px;opacity:1;transform:none}
#usernameGroup.hidden{display:none}
#authCard.hidden,#profileCard.hidden{display:none}
#avatarUpload.pf-upload.hidden{display:none}

/* ===== 用户中心 profileCard ===== */
#profileCard{text-align:center}
.pf-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:12px}
.pf-avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--cbd);border:1px solid var(--lnS);box-shadow:0 18px 38px -18px var(--gw);flex:0 0 auto}
.pf-avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.pf-avatar-initial{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#3b82f6,#a855f7);color:#fff;font-size:38px;font-weight:800;font-family:var(--fd)}
.pf-name{margin:6px 0 0;font-size:19px;font-weight:800;color:var(--tx)!important;font-family:var(--fd)}
.pf-email{font-size:12px;color:var(--mu)!important;word-break:break-all}
.pf-uid{font-size:11px;color:var(--mu2)!important;font-family:var(--fs)}
.pf-msg{min-height:20px;font-size:12.5px;font-weight:600;margin:2px 0 8px}
.pf-msg-err{color:#f43f5e}
.pf-msg-ok{color:#10b981}
.pf-section{text-align:left;margin-top:14px;padding-top:13px;border-top:1px solid var(--ln)}
.pf-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mu2)!important;margin:0 0 10px;font-family:var(--fd)}
.pf-avatar-options{display:flex;gap:6px;flex-wrap:wrap}
.pf-opt{flex:1 1 auto;min-width:96px;padding:8px 10px;border-radius:10px;border:1px solid var(--lnS);background:var(--cb);color:var(--txS);font-size:12px;font-weight:700;transition:background-color .25s,color .25s,border-color .25s,transform .2s}
.pf-opt:hover{background:var(--cbH);transform:translateY(-1px)}
.pf-opt.active{border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.16);color:var(--tx)}
.pf-opt[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.pf-upload{margin-top:10px}
.pf-file{width:100%;font-size:12px;color:var(--txS)!important;background:var(--cbd)!important;border:1px dashed var(--lnS)!important;border-radius:10px;padding:9px}
.pf-hint{font-size:11px;color:var(--mu2)!important;margin:6px 0 0}
.pf-row{display:flex;gap:8px;align-items:flex-start}
.pf-row .pf-input{margin-bottom:0}
.pf-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--lnS)!important;background:var(--cbd)!important;color:var(--tx)!important;font-size:13px;margin-bottom:8px}
.pf-input::placeholder{color:var(--mu2)!important}
.pf-input:focus{border-color:rgba(124,92,255,.6)!important;box-shadow:0 0 0 3px rgba(124,92,255,.16)!important;outline:none}
.pf-btn{flex:0 0 auto;padding:10px 16px;border-radius:10px;font-size:12.5px;font-weight:800;color:#fff;background:var(--ga);border:none;transition:transform .2s,filter .2s}
.pf-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pf-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.pf-btn-block{width:100%;margin-top:2px}
.pf-logout{width:100%;margin-top:18px;padding:10px 14px;border-radius:999px;border:1px solid var(--lnS);background:var(--cb);color:var(--tx)!important;font-size:13px;font-weight:700;transition:color .25s,background-color .25s,transform .2s}
.pf-logout:hover{color:#f43f5e!important;background:var(--cbH);transform:translateY(-1px)}
.pf-logout[disabled]{opacity:.55;cursor:not-allowed;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== 手机端：只渲染静态一帧（保留静态渐变，关闭常驻动画与高开销模糊） ===== */
@media (max-width:620px){
  body::before{animation:none!important;will-change:auto;opacity:.72;transform:none}
  .glass-card{animation:none!important;opacity:1;transform:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .glass-card::before{animation:none!important;background-position:0 0}
  #submitBtn{animation:none!important;background-position:50% 50%}
  .lang-toggle,.theme-toggle{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .canvas-glow{will-change:auto}
}