/* 登录页：全站门户，左侧说明 + 右侧登录卡，背景是缓慢自转的环状基因组 */
.authbody{min-height:100vh;margin:0;overflow-x:hidden;padding-bottom:0}
#auth-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;opacity:.72}
/* 压住 3D 背景，保证文字与卡片始终可读 */
.authbody:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 90% at 22% 50%, rgba(7,11,18,.92), rgba(7,11,18,.55) 55%, transparent 78%),
    linear-gradient(180deg, rgba(7,11,18,.55), transparent 28%, transparent 72%, rgba(7,11,18,.7))}
:root[data-theme="light"] .authbody:after{
  background:
    radial-gradient(70% 90% at 22% 50%, rgba(246,248,252,.94), rgba(246,248,252,.6) 55%, transparent 78%),
    linear-gradient(180deg, rgba(246,248,252,.6), transparent 28%, transparent 72%, rgba(246,248,252,.75))}

.authwrap{position:relative;z-index:1;min-height:100vh;display:grid;
  grid-template-columns:1.05fr minmax(380px,.95fr);align-items:center;
  gap:clamp(24px,5vw,72px);max-width:1240px;margin:0 auto;
  padding:clamp(28px,5vh,64px) var(--gut)}

.authside .brand{margin-bottom:clamp(20px,4vh,38px)}
.authside .brand-txt b{font-size:19px}
.authside .brand-txt em{font-size:11px}
.authside h1{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.03em;margin:0 0 16px}
.authside h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.authside .lead{font-size:clamp(14.5px,1.5vw,16.5px);color:var(--ink2);max-width:50ch;margin-bottom:26px}

.authstats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;padding:0;margin:0 0 24px}
.authstats li{background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.authstats b{display:block;font-family:var(--mono);font-size:clamp(17px,2.2vw,22px);letter-spacing:-.02em}
.authstats span{font-size:11px;color:var(--ink3)}
.authfoot{font-size:12px;color:var(--ink3);margin:0;max-width:56ch}

.authmain{display:flex;justify-content:center}
.authcard{width:100%;max-width:400px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(18px);
  border:1px solid var(--line2);border-radius:var(--r2);box-shadow:var(--sh);
  padding:clamp(22px,3.4vw,32px);position:relative;overflow:hidden}
.authcard:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.authhead{margin-bottom:18px}
.authhead h2{margin:0 0 3px;font-size:21px}
.authhead p{margin:0;font-size:13px}
.hint{font-size:12px;color:var(--ink3);margin:12px 0 0;text-align:center}

@media (max-width:980px){
  .authwrap{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:44px;
    align-content:start}
  .authside h1{font-size:clamp(26px,7vw,36px)}
  .authside .lead{margin-bottom:20px}
  .authmain{justify-content:stretch}
  .authcard{max-width:none}
}
@media (max-width:560px){
  .authstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .authside h1 br{display:none}
  .authfoot{display:none}
}

/* 明暗切换：登录页不继承 base.html 的顶栏，所以按钮浮在右上角 */
.auththeme{position:fixed;top:clamp(14px,2.4vh,24px);right:clamp(14px,2.4vw,28px);z-index:3;
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line2);border-radius:12px;
  background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(10px);
  color:var(--ink2);transition:color .2s ease,border-color .2s ease}
.auththeme:hover{color:var(--ink);border-color:var(--acc)}
.auththeme svg{width:18px;height:18px}
.auththeme .i-sun{display:none}
:root[data-theme="light"] .auththeme .i-sun{display:block}
:root[data-theme="light"] .auththeme .i-moon{display:none}
/* 浅色下三维背景要压得更狠，否则深色的环会在浅底上显脏 */
:root[data-theme="light"] #auth-bg{opacity:.38}
@media (max-width:560px){.auththeme{width:36px;height:36px}}

/* 背景：与首页同一套真实数据画的基因组环（公开轮廓接口，不含位点名称） */
#auth-genome{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(118vh,1180px);aspect-ratio:1;z-index:0;opacity:.52;pointer-events:none}
:root[data-theme="light"] #auth-genome{opacity:.9}
/* 圆心读数在登录页是多余的：左侧已有统计数字，而且它会压在登录卡和标题上 */
#auth-genome .hg-acc,#auth-genome .hg-len,
#auth-genome .hg-cap,#auth-genome .hg-cap2{display:none}
@media (max-width:980px){#auth-genome{width:min(104vh,760px);opacity:.4}}
@media (max-width:560px){#auth-genome{width:min(86vh,560px);opacity:.3}}

/* 密码显隐 */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:44px!important;width:100%}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:8px;background:transparent;color:var(--ink3);padding:0}
.pw-toggle:hover{color:var(--ink2);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pw-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.pw-toggle svg{width:17px;height:17px}
.pw-toggle .i-eye-off{display:none}
.pw-toggle.on .i-eye{display:none}
.pw-toggle.on .i-eye-off{display:block}
.pw-toggle.on{color:var(--acc)}

/* 登录页的语言切换：和明暗按钮并排放在右上角 */
.authbody > .langsw{position:fixed;top:clamp(14px,2.4vh,24px);
  right:calc(clamp(14px,2.4vw,28px) + 48px);z-index:3}
.authbody > .langsw button{height:40px;border-radius:12px;
  background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(10px);
  border-color:var(--line2)}
@media (max-width:560px){
  .authbody > .langsw{right:calc(clamp(14px,2.4vw,28px) + 44px)}
  .authbody > .langsw button{height:36px}
}