/* ============================================================================
注册页 / 找回密码页 的换肤覆盖层（baiduvps）
只被 register.tpl 和 pwreset.tpl 引用，作用域天然限死在这两页。
── 为什么不直接改 register.css ──────────────────────────────────────────
那个文件名字骗人。它其实是**会员中心的换肤层**：里面是 #page-topbar、
#sidebar-menu、.user-center_*、.header-search-droplist 这些选择器，
而且被 includes/head.tpl 全站加载（会员中心每一页都在用）。
这两页真正需要改的 3 条里，`.btn-primary` 和 `a` 都是**全局选择器**——
直接在 register.css 里改，会把会员中心的按钮和链接一起刷成橙色。
会员中心换皮是三期的事，这里不动它。
── 另一部分蓝改不动，只能覆盖 ──────────────────────────────────────────
tab 文字和下划线的 #6064ff 来自共享的
themes/clientarea/default/assets/css/app.min.css（78 处，是会员中心的主色），
按钮 hover 的 #3452e1 也在那份里。那个文件是 default 主题的，动了全站会员
中心跟着变，所以同样只在这里覆盖。
── 为什么不需要 !important ────────────────────────────────────────────
本文件在 register.tpl / pwreset.tpl 里排在 register.css 之后（实测它是
整页最后一个 ），选择器特异度和上游写成一样，同分靠顺序取胜就够了。
用 !important 会连带压掉 .text-danger 这类语义色，反而是坑。
变量来自 themes/_shared/design-token.css —— head.tpl 已经引过，这两页取得到，
所以后台「主题外观」改强调色，这两页会跟着变。fallback 是防它没加载上。
========================================================================= */
/* 顶栏（原 linear-gradient(270deg, #0080ff, #005aff)）
⚠ 走 --nav-bg-1/2 而不是 --skin-accent：见 app.css 里 #banner 那条同样的注释。
一个后台开关管三处顶栏（官网导航 / 会员中心 / 这三页）。 */
.zd-redb {
background-image: linear-gradient(90deg, var(--nav-bg-1, #131E33) 0%, var(--nav-bg-2, #2F4A76) 100%);
}
/* 顶栏 logo：跟登录页一模一样的写法。
register.css 原本写死 height:50px，而后台上传的 logo 源图只有 110x33，
被拉到 166x50（1.5 倍）就糊了。改成 height:auto + max-height，按原始像素渲染。
⚠ 2026-08-19 修正：这里原本写 max-height:50px，注释还说「换更高分辨率的
logo 也不用改，max-height 会兜住上限」—— 那个结论是错的。
50px 正好等于橙条高度，旧图 110×33 够不到上限所以看不出来；
换成 600×180 高清版后，logo 被撑到 167×50 把整条塞满，上下没有留白。
上限必须按**条高**留余量给，不能按图片给。
34px 是按「可见图形高度和换图前一致」倒推的（新素材画布留白占 16.1%，
34×0.839 ≈ 28.5px ≈ 旧图的 29px），50px 条上下各留 8px。
和登录页 app.css 那条 #banner #logo 是同一个值，改要一起改。 */
.zdredbz img {
height: auto;
width: auto;
max-height: 34px;
vertical-align: middle; /* 父级 a 是 line-height:50px，靠这个把图垂直居中 */
/* 同登录页：vertical-align:middle 按基线对齐，图一高就偏下。
实测抬 1px 后上 7.63 / 下 8.38，比不抬的 8.63 / 7.38 更正。 */
position: relative;
top: -1px;
}
/* 主按钮：注册 / 重置 / 获取验证码（原 bg #0069ff、border #006aff、hover #3452e1） */
.btn-primary {
background-color: var(--skin-accent, #D9520A);
border-color: var(--skin-accent, #D9520A);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
background-color: var(--skin-accent-deep, #B84508);
border-color: var(--skin-accent-deep, #B84508);
}
/* bootstrap 的 focus 蓝光环 */
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .15rem var(--brand-100, #F7D9C9);
}
/* 链接（原 register.css 的 a{color:#0060ff}；.text-primary 来自 default 的 #6064ff） */
a {
color: var(--skin-accent, #D9520A);
}
a:hover,
a:focus {
color: var(--skin-accent-deep, #B84508);
}
.text-primary {
color: var(--skin-accent, #D9520A) !important; /* 上游 default 那条本身带 !important */
}
/* 顶部 tab（邮箱注册 / 手机注册、邮箱找回 / 手机找回）
文字色 + ::after 那根下划线，原本都是 default 的 #6064ff */
.nav-tabs-custom .nav-link,
.nav-tabs-custom .nav-link.active,
.nav-tabs-custom .nav-item .nav-link.active {
color: var(--skin-accent, #D9520A);
}
.nav-tabs-custom .nav-link::after,
.nav-tabs-custom .nav-item .nav-link::after {
background: var(--skin-accent, #D9520A);
}
/* ═══════════════════════════════════════════════════════════════════════════
2026-08-23 第二轮：版式美化
第一轮（2026-08-18）只做了配色归一和 logo 上采样修复，没动几何。
这轮统一三页的圆角 / 字号 / 控件高度，并修掉下面这些实测缺陷。
── 缺陷 1：标题和表单在**每个断点**都错位，方向还会翻转 ──────────────────
上游 .zd-rebg 的左右 padding 随断点跳：260 / 200 / 130 / 30 / 20px，
而 .item p 的 padding-left 恒定 50px。实测七档错位量：
1920:-210 1700:-150 1440:-80 1200:+20 900:+20 768:-20 390:-20
没有一档是对齐的。
── 缺陷 2：表单宽度随视口乱跳 ────────────────────────────────────────────
卡片宽 = 视口 50%，表单宽 = 卡片 - 2×padding，于是实测
1920:440 1700:450 1440:460 1200:540 900:390 768:674 390:323
768 档一个输入框 674px 宽，屏越宽表单反而越窄。
两个缺陷同源 —— 卡片没有自己的宽度，是靠「50% 宽 + 大 padding」硬凑出来的。
所以不逐个断点打补丁，直接给卡片固定宽度、padding 恒定，标题和表单共用同
一个左内边距，错位从根上消失。
── 缺陷 3：输入框 focus 完全没有反馈 ─────────────────────────────────────
实测 :focus 时 box-shadow:none、边框色不变、outline:0px —— 点进去毫无变化。
（登录页是 border:1px solid #000，生硬的黑边，也一起归一成主色。）
── 缺陷 4：同一排两个按钮差 7px 高 ───────────────────────────────────────
「获取验证码」带行内 style="line-height:33px" → 46px；
「重置」没有 → 39px。注册页的「注册」是 46px，因为它比「重置」多了
d-flex/align-items-center 两个类。行内样式只能用 !important 压。
⚠ 作用域：本文件只被 register.tpl / pwreset.tpl 引用，且是整页最后一个
，所以同特异度靠顺序取胜，除非上游带 !important（.login_right 的
width 就带），否则一律不写 !important。
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. 卡片：固定宽度，不再随视口伸缩 ────────────────────────────────────
520px 跟登录页卡片(464px)是同一量级，两页并排看才像一套东西。
上游 .login_right 的 width 带 !important，必须同等压制。 */
.login_right {
width: 100% !important;
max-width: 520px;
margin-top: 0; /* 垂直居中改由 .auth-full-page-content 负责 */
}
/* 卡片体：padding 恒定 40px，压掉上游全部 5 个断点的 260/200/130/30/20。
上游那些都在 @media 里，媒体查询不加特异度，本文件靠顺序就能赢。 */
.zd-rebg {
padding: 28px 40px 36px;
border-radius: 0 0 var(--r-card, 12px) var(--r-card, 12px);
/* 阴影只画左 / 右 / 下三面 —— 顶面留给 .item，接缝才不会露出一道横影。
blur 大、spread 负，光晕收在边缘 4~6px 内，不会漫到卡片上方。 */
box-shadow:
-10px 0 20px -14px rgba(17, 24, 35, .16),
10px 0 20px -14px rgba(17, 24, 35, .16),
0 14px 26px -16px rgba(17, 24, 35, .20);
}
/* 卡片头：跟卡片体是**兄弟**不是父子（.item 和 .zd-rebg 平级），
所以圆角和阴影得两边分别给，拼成一张完整的卡。 */
.item {
background: var(--surface, #fff);
border-bottom: 1px solid var(--line, #E2E7EF);
border-radius: var(--r-card, 12px) var(--r-card, 12px) 0 0;
box-shadow:
-10px 0 20px -14px rgba(17, 24, 35, .16),
10px 0 20px -14px rgba(17, 24, 35, .16),
0 -8px 18px -14px rgba(17, 24, 35, .16);
}
/* 标题：左内边距跟卡片体的 40px 对齐 —— 缺陷 1 的正解。
上游那条 .item p 还挂了 box-shadow（在一个 上画卡片阴影，很怪），一并清掉。 */
.item p {
padding-left: 40px;
line-height: 1.4;
padding-top: 22px;
padding-bottom: 22px;
font-size: 17px;
font-weight: 600;
color: var(--ink-1, #111823);
box-shadow: none;
}
/* ── 2. 整页垂直居中 ──────────────────────────────────────────────────────
原来卡片恒定贴在 margin-top:68px，找回密码页只有 534px 高，下方空 298px，
视觉重心严重偏上。
⚠ padding-top 必须留够顶栏的高度：.zd-redb 是 position:absolute，不占流，
不留的话居中后卡片会钻到顶栏底下（实测 register 会重叠 1px）。
⚠ min-height 要扣掉页脚，不能写 100vh —— 否则页脚被推出首屏，整页平白多出滚动条。 */
.auth-full-page-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: calc(100vh - 70px);
padding-top: 50px;
padding-bottom: 20px;
box-sizing: border-box;
/* ⚠ 必须给 relative：下面那条 .zd-redb 的 top/left 要拿它当包含块。 */
position: relative;
}
/* ⚠⚠ 这两行是本轮改动的**必需配套**，删了顶栏会跑到页面正中横穿卡片 ⚠⚠
.zd-redb 是 position:absolute 但上游没写 top/left，靠的是「static position」
—— 也就是它在正常流里本该在的位置（容器顶部）。
而 CSS 规范规定：**绝对定位的 flex 子元素，其 static position 由 flex 容器的
justify-content / align-items 决定**。上面刚把父容器改成 flex + 双向居中，
于是顶栏的 static position 就被算到了容器正中间。
实测现象：灰蓝顶栏连同 logo 横穿卡片中部（y≈415）。
写死 top:0/left:0 让它不再依赖 static position，问题消失。 */
.zd-redb {
top: 0;
left: 0;
}
/* ── 3. 顶栏：logo 靠左，跟登录页对齐 ─────────────────────────────────────
上游 .zdredbz{width:50%;margin:0 auto} 把 logo 顶到屏幕中间偏左的位置，
跟登录页(靠左 30px)完全不是一个语言。 */
.zdredbz {
width: auto;
margin: 0 30px;
}
/* ── 4. 输入框 ────────────────────────────────────────────────────────────
上游：13px 字、0 圆角、focus 无反馈。归一到登录页的 14px + 圆角 + 主色 focus。 */
.zd-rebg .form-control {
height: 46px;
font-size: 14px;
color: var(--ink-2, #333F4E);
border-radius: var(--r-ctl, 8px);
border-color: var(--line-strong, #CFD7E3);
transition: border-color var(--t-fast, 120ms) var(--ease, ease),
box-shadow var(--t-fast, 120ms) var(--ease, ease);
}
.zd-rebg .form-control::placeholder { color: var(--ink-4, #8D9AAB); }
.zd-rebg .form-control:hover { border-color: var(--ink-4, #8D9AAB); }
/* 缺陷 3 的正解 —— 主色描边 + 一圈极淡的品牌浅底光环 */
.zd-rebg .form-control:focus {
border-color: var(--skin-accent, #D9520A);
box-shadow: 0 0 0 3px var(--brand-50, #FFF4ED);
}
/* select（「您从哪得知本站」）跟 input 同款 */
.zd-rebg select.form-control { height: 46px; }
/* ── 5. 按钮 ──────────────────────────────────────────────────────────────
统一 46px 高、圆角、字号。 */
.zd-rebg .btn { border-radius: var(--r-ctl, 8px); }
/* 缺陷 4 的正解：「获取验证码」的 line-height 是**行内样式**，只能 !important 压。 */
.zd-rebg .input-group-append .btn {
line-height: 1.5 !important;
height: 46px;
padding: 0 16px;
font-size: 14px;
white-space: nowrap;
}
/* 验证码按钮贴着输入框，两者相邻的那两个角必须是平的 */
.zd-rebg .input-group > .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.zd-rebg .input-group-append .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* 主按钮（注册 / 重置）：注册页原来 46px、找回页 39px，统一到 46px。
用 flex 居中而不是靠 line-height —— 上游注册页正是靠 d-flex 才凑到 46px 的，
找回页少了那两个类才矮 7px；这里补齐，模板就不用改。 */
.zd-rebg .btn-block {
display: flex;
align-items: center;
justify-content: center;
height: 46px;
margin-top: 4px;
font-size: 15px;
font-weight: 500;
letter-spacing: .02em;
box-shadow: 0 2px 8px -2px rgba(217, 82, 10, .35);
}
.zd-rebg .btn-block:hover { box-shadow: 0 4px 12px -2px rgba(217, 82, 10, .45); }
/* ── 6. tab（手机注册 / 邮箱注册）────────────────────────────────────────── */
.zd-rebg .nav-tabs-custom { border-bottom: 1px solid var(--line, #E2E7EF); }
.zd-rebg .nav-tabs-custom .nav-link {
font-size: 15px;
padding: 12px 4px;
transition: color var(--t-fast, 120ms) var(--ease, ease);
}
/* 未选中的那个 tab 上游也刷成了主色，两个 tab 一样橙，看不出选中的是哪个 */
.zd-rebg .nav-tabs-custom .nav-link:not(.active) { color: var(--ink-3, #5E6B7C); }
.zd-rebg .nav-tabs-custom .nav-link:not(.active):hover { color: var(--ink-1, #111823); }
/* ── 7. 表单内的说明文字与勾选项 ─────────────────────────────────────────── */
.zd-rebg .form-group > label,
.zd-rebg .zdy-label {
font-size: 13px;
font-weight: 500;
color: var(--ink-3, #5E6B7C);
margin-bottom: 6px;
}
.zd-rebg .custom-control-label,
.zd-rebg .form-check-label { font-size: 13px; color: var(--ink-3, #5E6B7C); }
/* 「我已阅读并同意」那行 —— 勾选框和文字基线原来差半行 */
.zd-rebg .custom-control { display: flex; align-items: center; }
/* ── 8. 底部「已有一个账户? 登录」 ───────────────────────────────────────── */
.zd-rebg .mt-5 { margin-top: 22px !important; }
.zd-rebg .mt-5 p { font-size: 13px; color: var(--ink-3, #5E6B7C); margin-bottom: 0; }
/* ── 9. 窄屏 ──────────────────────────────────────────────────────────────
手机上卡片本来就占满宽度，再居中会因为内容高于视口而顶出滚动条，所以关掉居中。 */
@media screen and (max-width: 768px) {
/* ⚠ 窄屏给顶栏留位必须用**父容器的 padding**，不能用 .login_right 的 margin-top。
这里 display 换回 block，块级父子之间的相邻外边距会**塌陷**：
.login_right 的 margin-top 会穿透 .auth-full-page-content，把容器自身
（连同 top:0 的绝对定位顶栏）整体下推。
实测症状：顶栏 y 从 0 变成 68，正好压在卡片头上。
桌面档没这个问题，是因为 flex 容器不参与外边距塌陷。 */
.auth-full-page-content {
display: block;
min-height: 0;
padding-top: 68px;
}
/* 上面那条 width:100%!important 会让卡片贴死屏幕两边（实测 390 档卡片正好 390px，
左右零留白）。上游原本是 93%，这里换算成固定 15px 边距，跟顶栏 logo 的 15px 对齐。 */
.login_right {
margin-top: 0;
width: calc(100% - 30px) !important;
}
.zd-rebg { padding: 22px 20px 28px; }
.item p {
padding-left: 0;
padding-top: 18px;
padding-bottom: 18px;
font-size: 16px;
}
.zdredbz { margin: 0 15px; }
}