/* GPT Image 2 — 登录/注册页样式 v4 */

body{
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,158,203,.42),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(167,216,255,.40),transparent 32%),
    radial-gradient(circle at 70% 88%,rgba(158,232,216,.36),transparent 34%),
    linear-gradient(135deg,#fff8fc 0%,#eff8ff 48%,#f7fff7 100%);
}
body:before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.42) 1px,transparent 1px);
  background-size:46px 46px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%);
}
body:after{
  content:"";position:fixed;inset:auto -18% -26% auto;width:760px;height:760px;border-radius:999px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(199,168,255,.34),transparent 66%);filter:blur(8px);animation:breathe 8s ease-in-out infinite;
}

/* ── 浮动粒子 ─────────────────────────────── */
.particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.particle{position:absolute;border-radius:50%;animation:float linear infinite;opacity:0;box-shadow:0 0 18px currentColor}
@keyframes float{0%{transform:translateY(0) scale(.8);opacity:0}12%{opacity:.42}88%{opacity:.42}100%{transform:translateY(-100vh) scale(0);opacity:0}}
@keyframes breathe{0%,100%{opacity:.56;transform:scale(1)}50%{opacity:.82;transform:scale(1.08)}}

/* ── 玻璃卡片 ─────────────────────────────── */
.glass{
  position:relative;z-index:1;width:100%;max-width:460px;padding:34px;
  border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.86);box-shadow:0 28px 90px rgba(148,163,184,.24),inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  transition:transform .35s ease,box-shadow .35s ease;
}
.glass:before{
  content:"";position:absolute;inset:10px;border-radius:24px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,158,203,.18),transparent 34%,rgba(158,232,216,.14));
  opacity:.82;
}
.glass>*{position:relative;z-index:1}
.glass:hover{transform:translateY(-3px);box-shadow:0 34px 100px rgba(148,163,184,.30),inset 0 1px 0 rgba(255,255,255,.8)}

/* ── Hero ─────────────────────────────────── */
.hero{text-align:center;margin-bottom:18px}
.hero h1{
  font-size:clamp(30px,5vw,46px);margin:0;letter-spacing:-.05em;line-height:1.06;
  background:linear-gradient(120deg,#ff78b8 0%,#91cfff 38%,#7ee2ca 68%,#b99cff 100%);
  -webkit-background-clip:text;color:transparent;background-size:220% auto;
  animation:shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0 center}50%{background-position:100% center}}
.hero p{color:var(--muted);margin:10px 0 0;font-size:14px;font-weight:700;letter-spacing:.02em}
.glass>div:nth-child(3) a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.65);transition:.25s}
.glass>div:nth-child(3) a:hover{color:var(--text)!important;background:rgba(255,255,255,.72);transform:translateY(-1px)}

/* ── Tab ──────────────────────────────────── */
.tabs{
  display:flex;margin-bottom:22px;border-radius:18px;overflow:hidden;position:relative;padding:4px;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.64);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.tab-btn{flex:1;border:0;padding:11px 12px;font-size:14px;font-weight:900;cursor:pointer;background:transparent;color:var(--muted);transition:.25s;position:relative;z-index:1;border-radius:14px}
.tab-btn.active{color:var(--text)}
.tab-slider{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border-radius:14px;transition:.3s cubic-bezier(.4,0,.2,1);z-index:0;box-shadow:0 10px 24px rgba(148,163,184,.16)}

/* ── 表单增强 ─────────────────────────────── */
.field{margin-bottom:15px}.field label{font-size:12px;letter-spacing:.03em}
input[type=text],input[type=password],input[type=email]{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(148,163,184,.08)}
input:focus{border-color:rgba(255,126,184,.62);box-shadow:0 0 0 4px rgba(255,158,203,.15),inset 0 1px 0 rgba(255,255,255,.8)}
.btn{margin-top:2px;border-radius:18px;padding:14px 16px;background:linear-gradient(135deg,#ff82bd 0%,#9bd6ff 52%,#8ce8d4 100%);box-shadow:0 16px 34px rgba(255,130,189,.27);letter-spacing:.02em}.btn:hover{box-shadow:0 20px 42px rgba(255,130,189,.36)}

/* ── 验证码行 ─────────────────────────────── */
.code-row{display:flex;gap:10px}.code-row input{flex:1}
.code-btn{white-space:nowrap;padding:12px 16px;border-radius:15px;border:1px solid rgba(255,255,255,.68);font-weight:900;font-size:13px;cursor:pointer;background:rgba(255,255,255,.56);color:var(--text);transition:.25s;box-shadow:0 8px 22px rgba(148,163,184,.10)}
.code-btn:hover{background:rgba(255,255,255,.82);transform:translateY(-1px)}.code-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.code-btn.counting{background:linear-gradient(135deg,#ff91c4,#a7d8ff);color:white}

/* ── 注册提示 ─────────────────────────────── */
.reg-hint{margin-top:14px;text-align:center;font-size:12px;color:var(--muted);line-height:1.7}.reg-hint span{background:linear-gradient(90deg,#ff72b5,#7fd3ff);-webkit-background-clip:text;color:transparent;font-weight:900}
.alert{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ── 暗色模式保底 ─────────────────────────── */
body.dark{background:linear-gradient(135deg,#10172a,#182036 48%,#102a33)}
body.dark .glass{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.16)}
body.dark .tabs,body.dark .code-btn,body.dark .glass>div:nth-child(3) a{background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.16)}
body.dark .tab-slider{background:rgba(30,41,59,.78)}
body.dark .tab-btn.active{color:#f8fafc!important}

/* ── 手机端 ───────────────────────────────── */
@media(max-width:520px){
  body{padding:16px;align-items:flex-start;overflow-y:auto}.glass{margin-top:22px;padding:24px 18px;border-radius:24px;max-width:100%}.glass:before{inset:8px;border-radius:19px}.hero{margin-bottom:16px}.hero h1{font-size:30px}.hero p{font-size:13px}.tab-btn{padding:10px;font-size:13px}.code-row{gap:8px}.code-btn{padding:10px 12px;font-size:12px}.field{margin-bottom:13px}
}