/* ====================================================================
   AQUA RITUAL · 独立登录 / 注册页样式
   ==================================================================== */
:root{
  --aqua:#287FEA; --mint:#58DCC8; --violet:#8B72F4;
  --bg1:#F7FBFF; --bg2:#EDF6FC; --navy:#0B3E78;
  --navy-soft:#2B5687; --ink-2:#6C87A6; --white:#FFFFFF;
  --glass-bg:rgba(255,255,255,0.6); --glass-border:rgba(255,255,255,0.8);
  --radius:26px;
  --font:'PingFang SC','HarmonyOS Sans','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font);color:var(--navy);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(88,220,200,0.30), transparent 60%),
    radial-gradient(1000px 800px at 98% 12%, rgba(40,127,234,0.24), transparent 58%),
    radial-gradient(900px 700px at 60% 100%, rgba(139,114,244,0.16), transparent 55%),
    linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;-webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(340px 340px at 20% 30%, rgba(88,220,200,0.16), transparent 70%),
    radial-gradient(380px 380px at 82% 22%, rgba(40,127,234,0.14), transparent 70%),
    radial-gradient(360px 360px at 70% 85%, rgba(139,114,244,0.12), transparent 70%);
  filter:blur(2px);
}
/* 背景装饰水球（弱化，纯装饰） */
.bg-drop{position:fixed;z-index:0;border-radius:50%;pointer-events:none;filter:blur(2px);}
.bg-drop.a{width:260px;height:260px;left:-60px;bottom:-60px;background:radial-gradient(circle at 35% 30%, rgba(88,220,200,0.35), rgba(40,127,234,0.10) 60%, transparent 72%);}
.bg-drop.b{width:200px;height:200px;right:-40px;top:-40px;background:radial-gradient(circle at 40% 35%, rgba(139,114,244,0.28), rgba(40,127,234,0.08) 60%, transparent 72%);}

.auth-card{
  position:relative;z-index:1;width:min(420px,92vw);border-radius:28px;padding:30px 26px 26px;
  background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);box-shadow:0 24px 60px rgba(11,62,120,0.16);
}
.a-logo{
  width:60px;height:60px;border-radius:18px;margin:0 auto 14px;
  background:linear-gradient(140deg,var(--aqua),var(--mint));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(40,127,234,0.35);position:relative;overflow:hidden;
}
.a-logo::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;top:10px;right:10px;background:rgba(255,255,255,0.5);filter:blur(2px);}
.a-title{text-align:center;font-size:21px;font-weight:800;letter-spacing:.5px;color:var(--navy);}
.a-sub{text-align:center;font-size:12.5px;color:var(--ink-2);margin:6px 0 22px;line-height:1.6;}

.tabs{display:flex;background:rgba(11,62,120,0.06);border-radius:14px;padding:4px;margin-bottom:20px;}
.tabs .t{flex:1;text-align:center;padding:10px;border-radius:11px;font-size:14px;font-weight:700;color:var(--navy-soft);cursor:pointer;transition:.2s;}
.tabs .t.active{background:linear-gradient(120deg,var(--aqua),var(--violet));color:#fff;box-shadow:0 6px 16px rgba(40,127,234,0.3);}

.field{margin-bottom:13px;}
.field label{font-size:12px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:6px;}
.field input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(40,127,234,0.2);font-size:14px;color:var(--navy);background:rgba(255,255,255,0.9);outline:none;font-family:var(--font);transition:.2s;}
.field input:focus{border-color:var(--aqua);box-shadow:0 0 0 4px rgba(40,127,234,0.12);}
.field .inv-hint{font-size:11px;color:var(--violet);margin-top:5px;font-weight:600;}
.field.code .hide-code{background:rgba(139,114,244,0.08);border-color:rgba(139,114,244,0.25);}

.err-text{font-size:12px;color:#EF4444;font-weight:600;text-align:center;margin:6px 0;min-height:16px;}
.err-text.info{color:var(--aqua);}
.auth-btn{width:100%;padding:14px;border:none;border-radius:14px;margin-top:6px;background:linear-gradient(120deg,var(--aqua),var(--violet));color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:var(--font);box-shadow:0 8px 20px rgba(40,127,234,0.3);transition:.2s;}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(40,127,234,0.4);}
.auth-btn:disabled{opacity:.65;cursor:not-allowed;transform:none;}
.a-tip{font-size:11px;color:var(--ink-2);text-align:center;margin-top:16px;line-height:1.7;}
.a-tip b{color:var(--aqua);}
.a-tip .link{color:var(--violet);cursor:pointer;font-weight:700;}

.login-ok{text-align:center;padding:8px 0 4px;}
.login-ok .ok{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(140deg,#22C55E,#4ADE80);display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;box-shadow:0 8px 22px rgba(34,197,94,0.35);animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
.back-home{display:inline-block;margin-top:14px;color:var(--aqua);font-weight:700;font-size:13px;text-decoration:none;cursor:pointer;}

@media(max-width:420px){
  .auth-card{padding:24px 18px 22px;}
}