/* 账号业务 · 这一份自己的样式：登录 / 注册整屏。
   公共部分见 ../shared/base.css */

/* 整屏两栏：左品牌区、右卡片。背景图铺满裁切，夜间在它上面压一层深色。
   图走本目录上一层的 assets/（跟着原型走），不指到原型文件夹外面去 ——
   原先指的是 业务原型图设计 外面那份，那份一删背景就没了 */
.shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;
 background-image:url("../assets/auth-bg.png");background-size:cover;background-position:center}
body.dk .shell{background-image:linear-gradient(rgba(20,22,27,.86),rgba(20,22,27,.86)),
 url("../assets/auth-bg.png")}
/* —— 左栏品牌区 —— 内容上下居中，左边留出跟图里插画错开的那段距离 */
.brand{display:flex;align-items:center;padding:56px 48px 56px clamp(56px,20%,210px)}
.bw{max-width:520px}
.bw h1{margin:0;color:#1c3f8f;font:700 52px/1.1 var(--f);letter-spacing:-.01em}
body.dk .bw h1{color:#a8c4ff}
.bw .bs{padding-top:6px;color:#1c3f8f;font:700 28px/1.3 var(--f)}
body.dk .bw .bs{color:#a8c4ff}
/* 标题下面那条短横线 */
.bw .rule{width:42px;height:3px;margin:18px 0 0;border-radius:2px;background:var(--acc)}
.bw .tx{padding-top:18px;color:#41506b;font-size:15px;line-height:1.85}
body.dk .bw .tx{color:var(--mute)}
/* 三条特性：一个圆形底图标加标题和一行说明 */
.feat{list-style:none;margin:0;padding:26px 0 0}
.feat li{display:flex;align-items:flex-start;gap:14px;padding:11px 0}
.feat i{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%}
.feat b{display:block;font-size:16px;font-weight:600}
.feat span{display:block;color:#41506b;font-size:13px}
body.dk .feat span{color:var(--mute)}
/* 三条特性各自的淡底和图标色。这是品牌区的装饰配图，不参与控件那套强调色 */
.f1 i{background:#e4eefc;color:#2f6bd8}
.f2 i{background:#eae6fb;color:#6d5bd0}
.f3 i{background:#ddf3e4;color:#2f9e63}
body.dk .f1 i{background:rgba(47,107,216,.22);color:#8db4ff}
body.dk .f2 i{background:rgba(109,91,208,.24);color:#b3a6f0}
body.dk .f3 i{background:rgba(47,158,99,.22);color:#7fd6a4}
/* —— 右栏 —— 卡片在栏里居中 */
.pane{display:grid;place-items:center;padding:44px 24px}
.card{width:min(470px,100%);padding:0 32px 26px;border-radius:var(--r);
 background:var(--panel);box-shadow:0 18px 44px rgba(20,24,40,.1)}
body.dk .card{box-shadow:0 18px 44px rgba(0,0,0,.3)}
/* 卡片顶部那两个标签：当前那个用强调色，底下一条 2px 横线 */
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{position:relative;flex:1;padding:17px 0;border:0;background:transparent;color:var(--mute);
 font:600 15px/1 var(--f);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--acc)}
.tab.on:before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc)}
.dt{padding-top:24px;font-size:24px;font-weight:700}
/* —— 临时演示提示 —— 只有登录那一屏摆一条，标题底下、表单上头。
   淡底那组数照帮助中心那档浅蓝提示框（.hbox.tip）：强调色 8% 调在卡片色上、圆角 10、字号 13。
   撤掉提示时删这条和 auth.js 里的 DEMO() */
.demo{margin-top:16px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.7;
 background:color-mix(in srgb,var(--acc) 8%,var(--panel))}
/* 字段：标签 14px 600、左边一条 3px 竖条、行距 18、不分栏。
   竖条用 currentColor，校验标红时跟着标签一起红 */
.fm{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 0 0}
.fm .lr{display:flex;align-items:center;gap:10px;padding-bottom:8px}
.fm .lr>label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px;font-weight:600}
.fm .lr>label:before{content:"";flex:none;width:3px;height:14px;border-radius:1px;background:currentColor}
/* 输入框的壳：左边一个图标，整框聚焦时描边换强调色 */
.iw{display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--line);
 border-radius:9px;background:var(--panel)}
.iw:focus-within{border-color:var(--acc)}
.iw>svg{flex:none;color:var(--mute)}
.iw input{flex:1;min-width:0;padding:12px 0;border:0;background:transparent;color:inherit;
 font:14px/1.4 var(--f)}
.iw input:focus{outline:0}
.iw input::placeholder{color:var(--mute)}
/* 验证码那一格右端的「获取验证码」：贴在框里跟输入框同一行，不撑高整格 */
.iw .cdb{flex:none;padding:5px 10px;border:1px solid var(--acc);border-radius:7px;
 background:transparent;color:var(--acc);font:12px/1.4 var(--f);cursor:pointer;white-space:nowrap}
.iw .cdb:hover{background:color-mix(in srgb,var(--acc) 8%,transparent)}
/* 没填对：标签保持原样，输入框那圈描边转红，框底下补一行红字
   （实心红圆里一个白感叹号 + 说明）。红字这一格一直占着位子、平时收起来，
   不重画整页，按了才把话写进去，输入框里已经敲的字一个不动 */
.fc.ms .iw{border-color:var(--dgr)}
.fc .fe{display:none;align-items:center;gap:6px;padding-top:8px;color:var(--dgr);font-size:12px}
.fc.ms .fe{display:flex}
.fc .fe svg{flex:none}
/* 这一屏只有一个动作，按钮撑满卡宽 */
.btn{display:block;width:100%;margin-top:20px;padding:13px 14px;border:1px solid transparent;
 border-radius:9px;background:var(--panel);color:inherit;font:600 15px/1.2 var(--f);cursor:pointer}
.btn.p{background:var(--acc);color:var(--accInk)}
.btn.p:hover{background:var(--accH)}
/* 卡底那一行换屏出口：整行居中，可点那半截是强调色链接 */
.alt{padding-top:18px;color:var(--mute);font-size:14px;text-align:center}
.lnk{color:var(--acc);text-decoration:none;cursor:pointer}
button.lnk{border:0;padding:0;background:transparent;font:14px/1.6 var(--f);cursor:pointer}
/* 夜间开关：钉在窗口右上角，32px 见方 */
.dk2{position:fixed;top:16px;right:20px;z-index:9;display:grid;place-items:center;
 width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--mute);cursor:pointer}
.dk2:hover{background:var(--tint);color:var(--ink)}
/* 提示条：钉在窗口那一行、水平居中，4.5 秒自己消失，同时只有一条；pointer-events:none */
.tstw{position:fixed;left:0;right:0;top:7px;z-index:60;display:grid;place-items:center;
 pointer-events:none}
.tst{padding:9px 16px;border:1px solid color-mix(in srgb,var(--okc) 24%,transparent);
 border-radius:11px;background:color-mix(in srgb,var(--okc) 9%,var(--panel));color:var(--okc);
 font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
@keyframes tstUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tst.rise{animation:tstUp .2s ease}
/* 窄屏收成单栏：品牌区让位，只留卡片 */
@media (max-width:900px){
 .shell{grid-template-columns:minmax(0,1fr)}
 .brand{display:none}
}