/* ==========================================================================
   宇速云 · 认证页统一样式（登录 / 注册 / 找回密码 / 绑定 / token 验证）
   --------------------------------------------------------------------------
   为什么单独一个文件：这 5 个页面各自带一份散落的 <style>（5 个模板 5 处样式），
   改一次要动 5 个地方、还容易风格不一致。这里抽出统一外壳，5 页共用。

   作用范围用 :has() 精确限定 —— 只有页面里存在认证容器时才生效，
   因此**不需要改任何模板结构**（登录页是 .loginDiv，其余 4 页是
   .auth-full-page-content / .auth-full-bg）。这样避免了在 body 上按
   $TplName 加条件的模板改动，零业务风险。

   设计令牌对齐用户中心（ys-skin.css）：主色 #1668dc、圆角 8px、
   卡片阴影与浮层同一档、正文色 #1a1f36。
   背景图由本机 ImageMagick 从 3.77MB 的 PNG 压成 JPEG（见
   assets/images/ys-login-bg.jpg），避免首屏被大图拖慢。
   ========================================================================== */

/* ---------- 页面背景：仅在认证页出现 ---------- */
body:has(.auth-full-page-content),
body:has(.auth-full-bg),
body:has(.loginDiv) {
	background-color: #091120;
	/*
	  纯 CSS 背景，替代原来的整张插画。为什么更好：
	    · 插画必然被裁 —— 屏幕比例太多（16:9 / 16:10 / 21:9 / 手机竖屏），
	      任何一张图在某些比例下都会裁坏主体或留出难看的空区，这正是"不和谐"的来源；
	      CSS 渐变没有裁切概念，任何比例都自然填满。
	    · 体积几乎为零（不用下载图片，之前 3.77MB 的 PNG 压到 0.15MB 仍是请求）
	    · 永远锐利，不随 DPR 发虚
	  层次从上到下：细网格 → 左侧主光晕（视觉焦点，替代原插画里的球体）
	  → 右上辅助光晕 → 深色基底渐变。
	*/
	background-image:
		/* ① 细网格：科技感的底纹，44px 一格 */
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
		/* ② 左侧主光晕：品牌色，作为画面焦点（卡片在右侧，互不干扰） */
		radial-gradient(circle at 24% 46%, rgba(22, 104, 220, .50) 0%, rgba(22, 104, 220, .16) 34%, transparent 62%),
		/* ③ 右上辅助光晕：让画面不死板 */
		radial-gradient(circle at 84% 14%, rgba(61, 145, 255, .22) 0%, transparent 48%),
		/* ④ 基底：深藍到近黑的缓慢过渡 */
		linear-gradient(158deg, #0b1526 0%, #0d1e38 46%, #091120 100%);
	background-size: 44px 44px, 44px 44px, auto, auto, auto;
	background-position: center center, center center, center center, center center, center center;
	background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
	background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* 认证内容区：垂直居中、给移动端留出上下安全间距 */
body:has(.auth-full-page-content) .auth-full-page-content,
body:has(.loginDiv) .container-fluid {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

/* ---------- 卡片：统一为 8px 圆角的现代卡片 ---------- */
.loginDiv,
.login_right,
.auth-full-page-content > .card,
.auth-full-page-content .card {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	/* 必须带 !important：主题的 change.qr.css 对登录卡单独写了 !important 的
	   圆角与阴影（实测普通声明压不过，计算值仍是旧的 4px / 2px 2px 20px）。 */
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ys-radius, 8px) !important;
	background-color: #fff;
	box-shadow: 0 18px 48px rgba(6, 16, 34, .28) !important;
	overflow: hidden;
}

/* 卡片内边距：原 .loginDiv 是 padding:0，内层各自撑开，导致左右留白不一致。
   这里统一给一层内边距，内部元素不再需要各自处理。 */
.loginDiv {
	padding: 28px 26px 24px;
}

.loginDiv > *:first-child,
.login_right > *:first-child {
	margin-top: 0;
}

/* 卡片标题区：让"登录/注册/找回密码"这类标题有统一的存在感 */
.loginDiv h3,
.loginDiv h4,
.login_right h3,
.login_right h4 {
	margin-bottom: 18px;
	color: var(--ys-text, #1a1f36);
	font-weight: 600;
	text-align: center;
}

/* ---------- 表单控件：与站内一致（边框 + 8px 圆角 + 聚焦态）---------- */
body:has(.loginDiv) .form-control,
body:has(.auth-full-page-content) .form-control {
	border-color: var(--ys-border, #e6e9ef);
	border-radius: var(--ys-radius, 8px);
}

body:has(.loginDiv) .form-control:focus,
body:has(.auth-full-page-content) .form-control:focus {
	border-color: var(--ys-primary, #1668dc);
	box-shadow: 0 0 0 .2rem rgba(22, 104, 220, .15);
}

body:has(.loginDiv) .btn-primary,
body:has(.auth-full-page-content) .btn-primary {
	border-radius: var(--ys-radius, 8px);
}

/* ---------- 移动端 ---------- */
@media (max-width: 767.98px) {
	body:has(.auth-full-page-content) .auth-full-page-content,
	body:has(.loginDiv) .container-fluid {
		padding: 16px 12px;
		min-height: 100vh;
	}

	.loginDiv,
	.login_right,
	.auth-full-page-content > .card,
	.auth-full-page-content .card {
		max-width: 100%;
	}

	/* 移动端背景用固定会因地址栏收缩而跳动，改为随内容滚动 */
	body:has(.auth-full-page-content),
	body:has(.auth-full-bg),
	body:has(.loginDiv) {
		background-attachment: scroll, scroll;
		background-position: center top, center top;
	}
}

/* ---------- 去掉与新背景图重复的旧插画 ----------
   主题自带的 <img src="loginleft.png"> 与 assets/images/登录页面.png 是同一套素材；
   现在背景图已承担该视觉，两者同屏会看到"两个图片"。这里隐去插画本身。
   用 :has() 限定，只影响认证页。 */
body:has(.loginDiv) img[src*="loginleft"],
body:has(.auth-full-page-content) img[src*="loginleft"],
body:has(.auth-full-bg) img[src*="loginleft"] {
	display: none !important;
}

/* ---------- 去除页面上下多余留白，消除纵向滚动 ----------
   app.min.css 的 .page-content 自带 `padding: 94px 12px 60px` —— 94px 是给
   顶部固定导航预留的、60px 是页脚预留。但认证页**没有顶部导航也没有页脚**
   （实测：1280x900 下文档高 1054、视口 900，多出 154px 正好 = 94 + 60；
   390x844 下多出 94px，同源）。
   这里清掉这两处内边距，容器 min-height:100vh 就能精确等于一屏、不再出现滚动条。
   用 box-sizing 保证 min-height 把内边距算在内。 */
body:has(.loginDiv) .page-content,
body:has(.auth-full-page-content) .page-content,
body:has(.auth-full-bg) .page-content {
	padding: 0 !important;
}

body:has(.loginDiv) .container-fluid,
body:has(.auth-full-page-content) .container-fluid,
body:has(.auth-full-bg) .container-fluid {
	box-sizing: border-box;
	min-height: 100vh !important;
}

/* 视口很矮时（比如笔记本 768 高）卡片可能仍高于一屏，此时允许滚动而非裁掉内容 */
@media (min-height: 0) {
	body:has(.loginDiv),
	body:has(.auth-full-page-content) {
		overflow-y: auto;
	}
}

/* ---------- 品牌图标水印（纯矢量，替代被移除的插画主体）----------
   背景改成纯 CSS 后画面缺一个"主体"，这里用品牌图标补上：
   放在左侧光晕区、低透明度、固定定位，z-index:-1 表示"在 body 背景之上、
   在卡片等内容之下"，因此不会影响任何交互。
   用 SVG 而非位图：任意放大都锐利，且与纯 CSS 背景同一个思路（无裁切问题）。 */
body:has(.loginDiv)::before,
body:has(.auth-full-page-content)::before,
body:has(.auth-full-bg)::before {
	content: "";
	position: fixed;
	left: 7vw;
	top: 50%;
	width: min(34vw, 420px);
	aspect-ratio: 220 / 200;
	transform: translateY(-50%);
	background: url("/themes/clientarea/ysyun_user/assets/images/ys-mark.svg") center / contain no-repeat;
	opacity: .55;
	pointer-events: none;
	z-index: -1;
}

/* 手机端卡片占满宽度，图标会与卡片打架，隐去 */
@media (max-width: 767.98px) {
	body:has(.loginDiv)::before,
	body:has(.auth-full-page-content)::before,
	body:has(.auth-full-bg)::before {
		display: none;
	}
}

/* ---------- 移动端适配：卡片宽度与高度 ----------
   实测 390x844 下的两个问题（都是约束来源查出来的，不是猜的）：

   ① 卡片只有 277px 宽，而容器可用 366px。
      原因：.widthLimit（max-width:500px）是 .container-fluid 这个 flex 容器的子项，
      声明是 flex: 0 1 auto —— 宽度按内容收缩，不会撑满。所以左右各空 56px。
   ② 卡片高 700px，内容实际只有 369px（tab 45 + 表单区 324）。
      原因是卡片被父容器拉伸，多出的 ~280px 全是空白。

   两处都只在移动端覆盖，桌面端维持"卡片靠右"的现有布局不动。 */
@media (max-width: 767.98px) {
	body:has(.loginDiv) .widthLimit,
	body:has(.auth-full-page-content) .widthLimit {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	body:has(.loginDiv) .loginDiv,
	body:has(.auth-full-page-content) .loginDiv {
		width: 100% !important;
		height: auto !important;
	}

	/* 卡片不再被拉伸后，原本被挤压的底部链接（现在注册 / 忘记密码 / 验证码登录）
	   宽度变充裕，会自动回到一行，不必额外处理 */
	body:has(.loginDiv) .widthLimit,
	body:has(.auth-full-page-content) .widthLimit {
		height: auto !important;
	}
}

/* ---------- 移动端卡片宽度：用视口宽度直接给，绕开 flex 尺寸推导 ----------
   上一轮用 flex: 1 1 100% + width:100% 没生效（同一媒体查询里的 height 规则却生效了，
   说明不是选择器没匹配，而是这个卡片在列方向的 flex 容器里按内容收缩，
   百分比宽度解析到的就是内容宽度 277px）。
   这里改用 100vw 直接给尺寸 —— 不依赖父容器的尺寸推导，最稳。
   左右各留 16px 边距，上限 500px 防止大屏上过宽。 */
@media (max-width: 767.98px) {
	body:has(.loginDiv) .loginDiv,
	body:has(.auth-full-page-content) .loginDiv,
	body:has(.loginDiv) .widthLimit,
	body:has(.auth-full-page-content) .widthLimit {
		width: calc(100vw - 32px) !important;
		max-width: 500px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   卡片内部：tab / 输入框 / 按钮 / 底部链接
   --------------------------------------------------------------------------
   这些类名不是猜的，是我从线上实测的 DOM 里取的：
     .QRLoginSwitchDiv   手机登录 / 邮箱登录 的切换行（实测高 45px）
     .iam-input-text     输入框（实测高 48px，但只有下划线、没有边框）
     .buttonAreaDiv/#button  登录按钮（实测用的是
                         linear-gradient(270deg, rgb(0,8,255), rgb(0,128,255))
                         这个亮蓝渐变，与品牌色 #1668dc 不一致）
     .hwid-text-container 底部链接（现在注册 / 忘记密码 / 验证码登录，实测高 40px）
   用覆盖而不是改模板 —— 这些页面各有 5~10 处 CustomDepot 外观开关，
   改模板要处理组合爆炸；覆盖样式则一次性对所有认证页生效。
   ========================================================================== */

/* tab 行：我原来在这里加了 display:flex/gap/子项内边距，结果与主题已有的
   flex 布局冲突，"邮箱登录"被挤到第二行。已回退 —— 这一块需要改 login.tpl
   内部结构才能真正做好，纯 CSS 覆盖会和主题规则互斗。 */

.QRLoginSwitchDiv > * {
	padding: 10px 0 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: color .18s ease;
}

/* ---------- 输入框：从"只有下划线"改为与站内一致的描边框 ---------- */
.inputField,
.pwdInputField {
	margin-bottom: 4px;
}

.iam-input-text,
.loginDiv input[type="text"],
.loginDiv input[type="password"] {
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ys-border, #e6e9ef);
	border-radius: var(--ys-radius, 8px);
	background-color: #fbfcfe;
	color: var(--ys-text, #1a1f36);
	font-size: 14px;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.iam-input-text:focus,
.loginDiv input[type="text"]:focus,
.loginDiv input[type="password"]:focus {
	border-color: var(--ys-primary, #1668dc);
	background-color: #fff;
	box-shadow: 0 0 0 .2rem rgba(22, 104, 220, .14);
	outline: none;
}

/* ---------- 登录按钮：去掉亮蓝渐变，统一品牌色与圆角 ---------- */
.buttonAreaDiv,
#button {
	margin-top: 20px;
	border-radius: var(--ys-radius, 8px);
	overflow: hidden;
}

.buttonAreaDiv button,
#button button,
.loginDiv button {
	background-image: none !important;
	background-color: var(--ys-primary, #1668dc) !important;
	border-radius: var(--ys-radius, 8px) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: .02em;
	transition: background-color .18s ease;
}

.buttonAreaDiv button:hover,
#button button:hover,
.loginDiv button:hover {
	background-color: var(--ys-primary-dark, #0f52b3) !important;
}

/* ---------- 底部链接：间距规整、可点高度补到 44px ---------- */
/* 底部链接：补无障碍需要的可点高度（实测原为 40px，低于 44px 推荐值）。
   必须同时给 display —— min-height 对行内元素无效（今天踩过两次的坑）。
   但不加内边距与字号：上一版加了这两项，整行对齐被打乱。 */
.hwid-text-container {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 亮红色的"验证码登录"与品牌色冲突，统一为主色 */
.loginDiv a[style*="color"],
.loginDiv a[class*="link"] {
	color: var(--ys-primary, #1668dc) !important;
}

/* ---------- .login_right 的宽度（/loginaccesstoken 等页用这个容器）----------
   实测：/loginaccesstoken 的卡片是 div.login_right，宽度只有 166px。
   我的 max-width:420px 对它无效 —— 因为它是 flex 里的子项、宽度由内容撑出，
   max-width 只是上限、不会把它撑大（和登录页 .widthLimit 一模一样的病根）。
   修法与移动端那次相同：用视口单位直接给宽度，绕开 flex 的尺寸推导。
   register / pwreset 也用这个类（它们本来就 420 宽），给显式值只会更一致。 */
.login_right {
	width: min(420px, calc(100vw - 32px)) !important;
	max-width: 420px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* ---------- 解开祖先容器对卡片宽度的夹制（/loginaccesstoken）----------
   实测父链（视口 1280）：
     .login_right          332px   ← 我想要 420
     .auth-full-page-content 428px  padding: 48px  → 内容盒 428-96 = 332px
     .col-xl-5             428px   (bootstrap 5/12 栏)
     .row.no-gutters      1026px
   所以卡片卡在 332 不是我的规则没生效，而是：① 父容器左右各 48px 内边距
   把可用宽度压到 332；② 卡片 flex-shrink:1，被压缩到父容器内容盒宽度。
   两处一起解开：父容器内边距收窄，并禁止卡片被压缩。 */
.auth-full-page-content {
	padding: 20px !important;
}

.login_right {
	flex-shrink: 0 !important;
}

/* ---------- 登录卡底部区域：规整成一行 ----------
   实测结构（login.tpl 197-216 行）：
     #bottomBtns
       .forgetPwdLink  <a href="register">现在注册</a>
       .forgetPwdLink  <a href="pwreset">忘记密码?</a>
       #iamCheckArea   <span onclick="phoneCheck(...)">验证码登录</span>   ← 注意：这是
                       登录方式切换开关，不是链接；与"密码登录"两个 span 互斥显示
   三者原本是三个块级 div 竖向堆叠、靠主题零散规则勉强并排，窄屏就被挤断。
   这里给这个**专用容器**设 flex 行 —— 它不像 tab 行那样已有主题 flex 规则，
   所以不会互斗（tab 行那次就是因为和已有规则冲突才回退的）。 */
#bottomBtns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 18px;
}

#bottomBtns .forgetPwdLink,
#bottomBtns #iamCheckArea {
	margin: 0 !important;
}

/* 切换开关原来渲染成红色，与品牌色系冲突；统一主色并补足可点高度。
   它是 span + onclick，所以必须显式给 cursor 和可点区域。 */
#iamCheckArea span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ys-primary, #1668dc) !important;
	font-size: 13px;
	cursor: pointer;
}

#iamCheckArea span:hover {
	color: var(--ys-primary-dark, #0f52b3) !important;
}

/* ---------- 约束卡片内的图片，避免撑破布局（/loginaccesstoken）----------
   实测该页卡片里有一个 logo 图片宽度达 1000px、高 250px（.logo img.cursor），
   而卡片只有 420px —— 图片直接溢出卡片，这是"布局错乱"的主要来源。
   这类页面（以及任何认证页）里的图片都应该受卡片宽度约束。 */
.loginDiv img,
.login_right img,
.auth-full-page-content img {
	max-width: 100% !important;
	height: auto !important;
}

/* 该页自带一套 tab 结构（ul.affs-nav），与登录页的 .QRLoginSwitchDiv 不同，
   这里一并规整：两个 tab 等分、居中、去掉默认下划线样式 */
.affs-nav {
	display: flex;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--ys-border, #e6e9ef);
}

.affs-nav .nav-item {
	flex: 1 1 0;
	text-align: center;
}

.affs-nav .nav-link {
	display: block;
	padding: 10px 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ys-text-muted, #5b6675);
	text-decoration: none;
}

.affs-nav .nav-link.active {
	color: var(--ys-primary, #1668dc);
	box-shadow: inset 0 -2px 0 var(--ys-primary, #1668dc);
}

/* ---------- /loginaccesstoken 左侧自有背景面板：交由统一背景接管 ----------
   实测该页结构是 bootstrap 双栏：
     div.col-xl-7.bglogo   598×900   ← 左侧"品牌背景面板"，自带浅色底
     div.col-xl-5          ...        ← 右侧卡片
   这个 bglogo 面板的浅色底盖在我的 CSS 背景之上，导致左半边是浅色面板、
   右半边是深蓝渐变 —— 两侧像两个页面，这就是该页"布局错乱"的主要观感来源。
   让它透明，统一交给登录页那套背景（网格 + 光晕 + 品牌图标）。
   注意：只改背景，不动它的尺寸与布局，避免影响卡片位置。 */
.auth-full-page-content .bglogo,
.col-xl-7.bglogo {
	background: transparent !important;
	background-image: none !important;
}

/* ---------- 卡片内 logo 收成正常尺寸 ----------
   实测 div.logo.text-center 里的 logo 图片会占满卡片宽度（419×68），
   把卡片的 tab 行挤在它下面。这里限制高度，让 logo 回归"图标"的量级。 */
.login_right .logo img,
.loginDiv .logo img {
	max-height: 48px !important;
	width: auto !important;
	max-width: 100% !important;
}

.login_right .logo,
.loginDiv .logo {
	margin-bottom: 12px;
}


/* ==========================================================================
   登录页浅色重做（对齐官网首页的设计语言）
   --------------------------------------------------------------------------
   背景：原来是深蓝黑科技风（那是官网改浅色之前的版本），现改为首页同一套
        浅蓝渐变（#f6faff → #eaf3ff）+ 品牌色光晕。
   色板与几何全部取自官网首页：主色 #1668dc、正文 #1a1f36、次要 #6b7280、
        圆角 10–12px、描边 rgba(23,38,70,.16)。
   这些规则放在文件末尾，用于覆盖上面针对深色底写的旧规则（同优先级、
        后出现者生效），因此不需要改动旧规则本身。
   ========================================================================== */

/* ---------- ① 页面底色与文字色（登录 / 注册 / 找回密码 三页统一）---------- */
body:has(.loginDiv),
body:has(.auth-full-page-content) {
	background-color: #f2f7ff;
	background-image:
		radial-gradient(circle at 16% 34%, rgba(22, 104, 220, .10) 0%, transparent 58%),
		radial-gradient(circle at 88% 6%, rgba(61, 145, 255, .10) 0%, transparent 52%),
		linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #1a1f36;
}

/* ---------- ② 登录页不显示用户中心外壳（侧栏占位 / 顶栏 / 页脚）---------- */
body:has(.loginDiv) .main-content,
body:has(.auth-full-page-content) .main-content {
	margin-left: 0 !important;
	padding: 0 !important;
}

body:has(.loginDiv) #page-topbar,
body:has(.loginDiv) .vertical-menu,
body:has(.loginDiv) .page-title-box,
body:has(.loginDiv) .footer,
body:has(.auth-full-page-content) #page-topbar,
body:has(.auth-full-page-content) .vertical-menu,
body:has(.auth-full-page-content) .page-title-box,
body:has(.auth-full-page-content) .footer {
	display: none !important;
}

body:has(.loginDiv) #content,
body:has(.loginDiv) .page-content {
	padding: 0 !important;
	min-height: 100vh;
}

/* ---------- ③ 双栏布局：左品牌 / 右卡片，整体垂直居中 ---------- */
body:has(.loginDiv) .widthLimit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 5vw, 96px);
	max-width: 1200px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 40px 24px;
	box-sizing: border-box;
}

/* ---------- ④ 左侧品牌区 ---------- */
.ys-login-brand {
	flex: 1 1 auto;
	max-width: 540px;
	min-width: 0;
}

.ys-brand-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.ys-brand-mark {
	width: 34px;
	height: 34px;
	display: block;
}

.ys-brand-name {
	font-size: 19px;
	font-weight: 700;
	color: #1a1f36;
	letter-spacing: .3px;
}

.ys-brand-title {
	font-size: 32px;
	line-height: 1.4;
	font-weight: 700;
	color: #1a1f36;
	margin: 0 0 14px;
}

.ys-brand-hl {
	color: #1668dc;
}

.ys-brand-sub {
	font-size: 15px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0 0 26px;
}

.ys-brand-points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}

.ys-brand-points li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	padding-left: 12px;
	border-left: 2px solid rgba(22, 104, 220, .35);
}

.ys-brand-points li strong {
	font-size: 14px;
	font-weight: 600;
	color: #1a1f36;
}

.ys-brand-foot {
	font-size: 13px;
	color: #98a2b3;
	margin: 0;
}

/* ---------- ⑤ 右侧登录卡 ---------- */
body:has(.loginDiv) .loginDiv {
	flex: 0 0 auto;
	width: 420px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 32px 32px 26px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .14);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba(23, 38, 70, .10);
}

/* 登录方式切换：浅色分段控件（原来是深底上的两个文字） */
.QRLoginSwitchDiv {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 24px;
	background: #f2f5fa;
	border-radius: 10px;
}

.QRLoginSwitchDiv > * {
	flex: 1 1 0;
	text-align: center;
	padding: 9px 0;
	border-radius: 8px;
	font-size: 14px;
	color: #6b7280;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.QRLoginSwitchDiv > .selectedType {
	background: #fff;
	color: #1668dc;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(23, 38, 70, .08);
}

.intervalDiv {
	display: none !important;
}

/* 输入框：浅色底 + 主色聚焦环 */
body:has(.loginDiv) .loginDiv .iam-input-text,
body:has(.loginDiv) .loginDiv input[type="text"],
body:has(.loginDiv) .loginDiv input[type="password"] {
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	padding: 0 14px;
	font-size: 14px;
	color: #1a1f36;
	background-color: #f7f9fc;
	border: 1px solid rgba(23, 38, 70, .12);
	border-radius: 8px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body:has(.loginDiv) .loginDiv .iam-input-text:focus,
body:has(.loginDiv) .loginDiv input[type="text"]:focus,
body:has(.loginDiv) .loginDiv input[type="password"]:focus {
	background-color: #fff;
	border-color: #1668dc;
	box-shadow: 0 0 0 3px rgba(22, 104, 220, .12);
	outline: none;
}

body:has(.loginDiv) .loginDiv input::placeholder {
	color: #98a2b3;
}

.inputField {
	margin-bottom: 14px;
}

/* 主按钮：登录 */
body:has(.loginDiv) .loginDiv button {
	width: 100%;
	height: 46px;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background-color: #1668dc;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease;
}

body:has(.loginDiv) .loginDiv button:hover {
	background-color: #1259c0;
	box-shadow: 0 8px 20px rgba(22, 104, 220, .22);
}

/* 次要按钮（获取验证码）：描边样式，不能跟主按钮一样铺满 */
body:has(.loginDiv) .loginDiv button.btn,
body:has(.loginDiv) .loginDiv button.btn-primary {
	width: auto;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 500;
	color: #1668dc;
	background-color: #fff;
	border: 1px solid rgba(22, 104, 220, .45);
	border-radius: 8px;
	box-shadow: none;
}

body:has(.loginDiv) .loginDiv button.btn:hover {
	color: #fff;
	background-color: #1668dc;
}

/* 卡片内文字与链接 */
body:has(.loginDiv) .loginDiv,
body:has(.loginDiv) .loginDiv * {
	color: #1a1f36;
}

body:has(.loginDiv) .loginDiv a,
body:has(.loginDiv) .loginDiv .commonLinkDiv,
body:has(.loginDiv) .loginDiv .hwid-text-container {
	color: #1668dc;
}

body:has(.loginDiv) .loginDiv a:hover {
	color: #1259c0;
	text-decoration: underline;
}

body:has(.loginDiv) .loginDiv .buttonAreaDiv,
body:has(.loginDiv) .loginDiv .forgetPwdLink {
	margin-top: 14px;
	font-size: 13px;
}

/* ---------- ⑥ 窄屏：单列，品牌区精简 ---------- */
@media (max-width: 991.98px) {
	body:has(.loginDiv) .widthLimit {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		padding: 32px 20px;
	}

	.ys-login-brand {
		max-width: none;
	}

	.ys-brand-head {
		margin-bottom: 18px;
	}

	.ys-brand-title {
		font-size: 24px;
	}

	.ys-brand-points,
	.ys-brand-foot {
		display: none;
	}

	body:has(.loginDiv) .loginDiv {
		width: 100%;
		padding: 24px 20px 20px;
	}
}


/* ---------- ⑦ 登录卡与分段控件的修正 ----------
   ① card 圆角/阴影：主题自带的 user.css（登录页在页内最后加载）里给
      .loginDiv 写了 8px 圆角与近黑的投影 rgba(6,16,34,.28)，那是深色底时期的
      值，在浅底上过重。这里用 !important 覆盖（对方也有 !important 的用法）。
   ② 选中态：登录方式切换的真实结构是
      .QRLoginSwitchDiv > .accountLogin > .selectedType，
      我上一版误用了直接子选择器（>），所以"手机登录"没变成白色胶囊。 */
body:has(.loginDiv) .loginDiv {
	border-radius: 12px !important;
	box-shadow: 0 18px 48px rgba(23, 38, 70, .10) !important;
}

.QRLoginSwitchDiv .accountLogin,
.QRLoginSwitchDiv #IAMLinkDiv {
	display: block;
	flex: 1 1 0;
}

.QRLoginSwitchDiv .accountLogin .ng-binding,
.QRLoginSwitchDiv #IAMLinkDiv .ng-binding {
	display: block;
	padding: 9px 0 !important;
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.QRLoginSwitchDiv .selectedType {
	background: #fff !important;
	color: #1668dc !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 3px rgba(23, 38, 70, .08);
}


/* ---------- ⑧ 收尾微调 ----------
   ① 左栏：主题自带给 #loginAdv 固定 800px 宽，我只把内容限到 540px，
      于是那 260px 余量让左右两栏的间距看着不匀；把宽度放开、由 flex 决定，
      左右间距就对称了。
   ② 手机：主题在 ≤500px 给 .loginDiv 写死 height:700px（那是它自己的插画版
      布局）。表单元素一多会被压住，改成随内容自适应；同时保留一层浅投影，
      免得卡片在浅底上"浮"不起来。 */
#loginAdv.ys-login-brand {
	width: auto;
	max-width: 560px;
}

@media (max-width: 500px) {
	body:has(.loginDiv) .loginDiv {
		height: auto !important;
		box-shadow: 0 12px 32px rgba(23, 38, 70, .10) !important;
	}

	body:has(.loginDiv) .widthLimit {
		padding: 24px 16px;
	}
}


/* ---------- ⑨ 登录方式切换的错位修正 + 去掉阴影 ----------
   实测（1920 视口）问题所在：
     · 外层 .accountLogin 有 padding: 9px 0（主题自带），内层胶囊也有 9px
       → 双重内边距，整排被撑到 65px 高；
     · 外层是 display:flex（主题自带，用于居中），内层 .ng-binding 因此不撑满，
       选中胶囊只有 56px 宽，而每个格子有 171px → 高亮只有中间一小块，
       看起来就是"没对齐/显示有问题"。
   做法：外层改为块级并等分，内层撑满整格；内边距只保留一层。
   同时按"不要阴影"的要求，去掉登录页上的所有投影（卡片、胶囊、按钮），
   层次一律用描边区分 —— 与用户中心/官网首页的扁平风格保持一致。 */
.QRLoginSwitchDiv .accountLogin,
.QRLoginSwitchDiv #IAMLinkDiv,
.QRLoginSwitchDiv .intervalDiv {
	display: block !important;
	flex: 1 1 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.QRLoginSwitchDiv .accountLogin .ng-binding,
.QRLoginSwitchDiv #IAMLinkDiv .ng-binding {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 0 !important;
	margin: 0 !important;
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	box-shadow: none !important;
}

body:has(.loginDiv) .loginDiv {
	box-shadow: none !important;
}

body:has(.loginDiv) .loginDiv button:hover {
	box-shadow: none;
}

body:has(.loginDiv) .loginDiv .selectedType,
body:has(.loginDiv) .loginDiv button {
	box-shadow: none !important;
}

@media (max-width: 500px) {
	body:has(.loginDiv) .loginDiv {
		box-shadow: none !important;
	}
}


/* 切换项高度钉死（主题给标签设了约 32px 行高，导致胶囊 52px、
   外格 57px 两者不齐、整排 65px 偏高）。统一成 40px 高的标准分段控件：
   外格与内层同高，选中胶囊才能严丝合缝地盖住半格。 */
.QRLoginSwitchDiv .accountLogin .ng-binding,
.QRLoginSwitchDiv #IAMLinkDiv .ng-binding {
	height: 40px !important;
	line-height: 40px !important;
	padding: 0 !important;
}

.QRLoginSwitchDiv .accountLogin,
.QRLoginSwitchDiv #IAMLinkDiv {
	height: 40px;
}


/* 两格强制等高：主题给 .accountLogin 里留了额外高度（实测比另一格高 17px，
   导致整排 65px、选中胶囊与格子对不齐）。这里把两格高度、行高、内边距
   全部钉死，并让整排垂直居中，得到标准的 48px 分段控件。 */
.QRLoginSwitchDiv {
	align-items: center;
}

.QRLoginSwitchDiv .accountLogin,
.QRLoginSwitchDiv #IAMLinkDiv {
	height: 40px !important;
	min-height: 0 !important;
	max-height: 40px !important;
	overflow: hidden;
}


/* intervalDiv（两个选项之间的分隔条）必须隐藏。
   注意：⑨ 里我把它和外层容器写在同一条规则里设成 display:block，
   反而覆盖了此前的 display:none，导致它以 20px 高度占位、整排从 48px 变成 65px。
   这里单独改回隐藏。 */
.QRLoginSwitchDiv .intervalDiv {
	display: none !important;
	height: 0 !important;
	flex: 0 0 0 !important;
}


/* 切换行高度自适应 + 去掉主题的下划线选中态。
   主题给 .QRLoginSwitchDiv 写死 height:65px、font-size:18px，
   并给选中项加 border-bottom:3px solid #252B3A（旧版下划线式 tab）。
   我们用的是白色胶囊式分段控件，所以高度改为随内容（40 + 8 = 48px），
   并把那条下划线去掉（含未选中项的透明占位边框）。 */
.QRLoginSwitchDiv {
	height: auto !important;
	min-height: 0 !important;
	font-size: 14px;
}

.QRLoginSwitchDiv .accountLogin div,
.QRLoginSwitchDiv .QRLogin div,
.QRLoginSwitchDiv div.selectedType {
	border-bottom: 0 !important;
	border-top: 0 !important;
}


/* ==========================================================================
   ⑩ 按参考图重做卡片内的控件（下划线式标签页 / 带图标输入框）
   --------------------------------------------------------------------------
   参考图（腾讯云 MCloud 登录页）的控件特征：
     · 标签页是"文字 + 下划线"式：选中项品牌蓝 + 2px 下划线，整排一条浅灰底线；
       不是分段胶囊（上一版做成了白底胶囊，这里改回来）。
     · 输入框左侧有灰色线性图标；密码框右侧有"显示/隐藏"眼睛。
     · 卡片顶部有标题"欢迎来到 品牌"（品牌名用主色）。
     · 全页不使用阴影，层次靠 1px 描边。
   同时修左侧错位：水印云再往左挪、品牌文字右移，并给两者加层级保证文字永不被压。
   ========================================================================== */

/* ---------- ① 标签页：下划线式 ---------- */
body:has(.loginDiv) .QRLoginSwitchDiv {
	display: flex !important;
	align-items: flex-end;
	gap: 26px;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin-bottom: 22px !important;
	background: transparent !important;
	border-radius: 0 !important;
	border-bottom: 1px solid rgba(23, 38, 70, .12);
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv {
	flex: 0 0 auto !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	overflow: visible !important;
	border-bottom: 0 !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .ng-binding,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv .ng-binding {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.4 !important;
	padding: 0 0 12px !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	background: transparent !important;
	border-radius: 0 !important;
	border-bottom: 2px solid transparent !important;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .ng-binding:hover,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv .ng-binding:hover {
	color: #1668dc !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv .selectedType {
	color: #1668dc !important;
	font-weight: 600 !important;
	border-bottom-color: #1668dc !important;
}

/* ---------- ② 卡片标题 ---------- */
.ys-card-title {
	font-size: 22px;
	font-weight: 700;
	color: #1a1f36;
	margin: 2px 0 24px;
	letter-spacing: .2px;
}

.ys-card-title-hl {
	color: #1668dc;
}

/* ---------- ③ 输入框图标与密码显隐 ---------- */
body:has(.loginDiv) .loginDiv .inputField {
	position: relative;
}

.ys-inp-icon,
.ys-eye {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	line-height: 1;
	color: #98a2b3;
	z-index: 2;
}

.ys-inp-icon {
	left: 14px;
	pointer-events: none;
}

.ys-eye {
	right: 12px;
	cursor: pointer;
}

.ys-eye:hover {
	color: #1668dc;
}

#emailInp,
#phoneInp {
	padding-left: 42px !important;
}

#emailPwdInp,
#phonePwdInp,
#phoneCodeInp {
	padding-right: 42px !important;
}

/* ---------- ④ 忘记密码 / 注册账号 / 按钮 ---------- */
body:has(.loginDiv) .loginDiv .forgetPwdLink {
	text-align: right;
	margin: 4px 0 18px;
	font-size: 13px;
}

body:has(.loginDiv) .loginDiv .hwid-text-container,
body:has(.loginDiv) .loginDiv .buttonAreaDiv {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 14px;
}

body:has(.loginDiv) .loginDiv button {
	border-radius: 6px !important;
}

/* ---------- ⑤ 左侧水印与品牌文字的错位修正 ----------
   原来水印 left:7vw、宽 min(34vw,420px)，正好压在品牌标题上（虽然 z-index:-1
   在文字下面，但深色文字叠在蓝色云形上很难读，观感就是"被盖住了"）。
   现在：水印再往左挪并略缩，品牌文字整体右移；同时给两者明确层级，
   保证任何视口下文字都在水印之上。 */
body:has(.loginDiv)::before {
	left: 0.5vw;
	width: min(27vw, 330px);
	opacity: .45;
	z-index: 0;
}

body:has(.loginDiv) .ys-login-brand,
body:has(.loginDiv) .loginDiv {
	position: relative;
	z-index: 1;
}

body:has(.loginDiv) .ys-login-brand {
	padding-left: 56px;
}

@media (max-width: 991.98px) {
	body:has(.loginDiv) .ys-login-brand {
		padding-left: 0;
	}
}


/* ---------- ⑪ 标签页两处修正 ----------
   ① 选中态没变蓝：我上面给普通标签写的规则是
        body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .ng-binding
        → 权重 (0,4,1)，而选中态那条是
        body:has(.loginDiv) .QRLoginSwitchDiv .selectedType
        → 权重 (0,3,1)。两条都带 !important 时，权重高的赢，
        于是"灰色"盖住了"蓝色"。这里把选中态补到同样的层级。
   ② 标签之间间距过大：主题给 .QRLoginSwitchDiv 写了 justify-content:space-around，
      两个标签被均匀摊开（实测间隔 130px）。改成左对齐 + 26px 间距。 */
body:has(.loginDiv) .QRLoginSwitchDiv {
	justify-content: flex-start !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .selectedType,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv .selectedType {
	color: #1668dc !important;
	font-weight: 600 !important;
	border-bottom-color: #1668dc !important;
}


/* ==========================================================================
   ⑫ 验证码行排版修正 + 云与文字底对齐
   --------------------------------------------------------------------------
   ① 验证码输入框被挤压：
      · 我在 ⑩ 里给 #phoneCodeInp 也加了 padding-right:42px（那是给密码框的
        眼睛按钮留位的），而验证码框根本没有眼睛 → 白白吃掉右侧 42px；
      · 主题把"获取验证码"按钮放在同级的 .input-group-append 里，用定位排版，
        与输入框互相争位置。
      改为标准 flex 一行：输入框 flex:1 且允许收缩，按钮固定宽度不换行，两者
      高度统一 44px 居中对齐。
   ② 云与文字底边对齐：
      原水印挂在 body::before 上、垂直居中，高度与左侧文字块不同，底部自然对不齐。
      现改为挂在品牌区上（.ys-login-brand::before），right:100% 让它紧贴文字块
      左侧、bottom:0 使两者底边严格对齐，并且随品牌区高度自适应，
      任何内容长度/视口下都保持对齐。 */
body:has(.loginDiv)::before {
	display: none !important;
}

.ys-login-brand::before {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 0;
	width: 300px;
	aspect-ratio: 220 / 200;
	background: url("/themes/clientarea/ysyun_user/assets/images/ys-mark.svg") center / contain no-repeat;
	opacity: .45;
	pointer-events: none;
	z-index: -1;
}

body:has(.loginDiv) .loginDiv .zdjj {
	/* 注意：这里不能加 !important。系统用行内 style="display:none" 控制
	   验证码块的显隐（验证码插件的容器也带 .zdjj 类），!important 会盖过行内
	   样式，把本该隐藏的验证码块全部显示出来。 */
	display: flex;
	align-items: center;
	gap: 10px;
}

#phoneCodeInp {
	padding-right: 14px !important;
	flex: 1 1 auto;
	min-width: 0;
}

body:has(.loginDiv) .loginDiv .zdjj .input-group-append {
	position: static !important;
	flex: 0 0 auto;
	height: auto !important;
	display: flex;
	align-items: center;
}

body:has(.loginDiv) .loginDiv .zdjj .input-group-append button {
	width: auto !important;
	height: 44px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.ys-login-brand::before {
		display: none;
	}
}


/* ==========================================================================
   ⑬ 云与文字真正底对齐 + 验证码行占满宽度
   --------------------------------------------------------------------------
   ① 上面把云挂在 #loginAdv（.ys-login-brand）上，但那个外框被主题写死
      height:438px，而文字内容实测只有 317px 高 → 底边差了 121px，仍然不齐。
      改挂到文字块 .ys-brand-inner 上（高度=内容高度），bottom:0 时两者底边
      严格相等；宽度随视口收缩，避免窄屏被切到屏幕外（<1200px 直接隐藏）。
   ② 验证码行 .zdjj 只有 274px 宽（卡片内容区是 355px），输入框被压到 154px。
      让它占满整行，输入框随 flex 撑开，按钮固定宽度不换行。 */
.ys-login-brand::before {
	display: none !important;
}

.ys-brand-inner {
	position: relative;
}

.ys-brand-inner::before {
	content: "";
	position: absolute;
	right: calc(100% + 8px);
	bottom: 0;
	width: clamp(140px, 15vw, 300px);
	aspect-ratio: 220 / 200;
	background: url("/themes/clientarea/ysyun_user/assets/images/ys-mark.svg") center / contain no-repeat;
	opacity: .45;
	pointer-events: none;
	z-index: -1;
}

body:has(.loginDiv) .loginDiv .zdjj {
	width: 100%;
}

@media (max-width: 1199.98px) {
	.ys-brand-inner::before {
		display: none;
	}
}

@media (max-width: 767.98px) {
	.ys-brand-inner::before {
		display: none;
	}
}


/* ==========================================================================
   ⑭ 验证码行放宽（输入框不再被挤）
   --------------------------------------------------------------------------
   实测：卡片内标签面板（#email / #phone）左右各有 44px 内边距，导致整行只有
   288px —— 验证码输入框只能分到 154px，和旁边的"获取验证码"按钮挤在一起。
   把面板内边距收到 12px（卡片自身 32px 内边距仍在，合计左右各 44px 的呼吸感
   不变），行宽增到约 352px，验证码输入框约 218px，所有输入框也更接近参考图
   那种"几乎撑满卡片"的舒展度。 .loginFormDiv / #hwLoginDivId 若有内边距一并
   归零，避免叠加。
   ========================================================================== */
body:has(.loginDiv) .loginDiv #email,
body:has(.loginDiv) .loginDiv #phone {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

body:has(.loginDiv) .loginDiv .loginFormDiv,
body:has(.loginDiv) .loginDiv #hwLoginDivId {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* ---------- ⑮ 卡片纵向收紧 ----------
   参考图的卡片比较紧凑。实测原来是：
     卡片上下内边距 32/26、标签行下间距 22、每个输入框下间距 24。
   收紧为 24/20、18、16，整卡高度约减少 60–70px。 */
body:has(.loginDiv) .loginDiv {
	padding: 24px 32px 20px !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv {
	margin-bottom: 18px !important;
}

body:has(.loginDiv) .loginDiv .inputField {
	margin-bottom: 16px !important;
}

body:has(.loginDiv) .loginDiv .forgetPwdLink {
	margin: 2px 0 14px !important;
}

body:has(.loginDiv) .loginDiv .hwid-text-container,
body:has(.loginDiv) .loginDiv .buttonAreaDiv {
	margin-top: 12px !important;
}


/* ==========================================================================
   ⑯ 登录页重做（按最新需求）：居中玻璃卡片 + 输入框统一 + 验证码内联 + 底部链接成行
   --------------------------------------------------------------------------
   与之前几版的差异（都是最新需求覆盖旧需求）：
     · 卡片从"左品牌右表单"改为**单卡片居中悬浮**，左侧品牌区隐藏（保留标记，
       需要时把下面 display:none 去掉即可恢复）。
     · 卡片改为**轻玻璃拟态**：极淡白色半透底 + 背景模糊 + 柔和大阴影（本次明确要求
       卡片有柔和阴影；标签/按钮等控件仍无阴影）。
     · 验证码输入框与图片改为同一行；图片圆角描边、手型光标。
     · 底部三个链接排成一行：现在注册（左）· 忘记密码（中）· 验证码登录（右）。
   ========================================================================== */

/* ---------- ① 卡片居中 + 玻璃拟态 ---------- */
body:has(.loginDiv) .ys-login-brand {
	display: none !important;
}

body:has(.loginDiv) .widthLimit {
	justify-content: center !important;
	gap: 0 !important;
}

body:has(.loginDiv) .loginDiv {
	width: 420px !important;
	max-width: calc(100vw - 32px) !important;
	margin: 0 auto !important;
	padding: 32px 32px 26px !important;
	border-radius: 16px !important;
	border: 1px solid rgba(255, 255, 255, .75) !important;
	background: rgba(255, 255, 255, .72) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.1);
	backdrop-filter: blur(14px) saturate(1.1);
	box-shadow: 0 18px 48px rgba(23, 38, 70, .10), 0 2px 8px rgba(23, 38, 70, .04) !important;
}

/* 页面上保留一枚云形装饰（放在左下角、低透明度，不参与排版、不压字） */
body:has(.loginDiv)::before {
	display: block !important;
	content: "";
	position: fixed;
	left: -2vw;
	bottom: 4vh;
	top: auto;
	transform: none;
	width: clamp(180px, 22vw, 380px);
	aspect-ratio: 220 / 200;
	background: url("/themes/clientarea/ysyun_user/assets/images/ys-mark.svg") center / contain no-repeat;
	opacity: .35;
	pointer-events: none;
	z-index: 0;
}

/* ---------- ② 标题 ---------- */
.ys-card-title {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: #1a1f36 !important;
	margin: 0 0 26px !important;
	letter-spacing: .2px;
}

/* ---------- ③ 标签页：间距拉开，激活态蓝字 + 短下划线 ---------- */
body:has(.loginDiv) .QRLoginSwitchDiv {
	gap: 36px !important;
	margin-bottom: 22px !important;
	border-bottom: 1px solid rgba(23, 38, 70, .10) !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .ng-binding,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv .ng-binding {
	font-size: 15px !important;
	color: #9aa3b5 !important;
	padding: 0 2px 12px !important;
	border-bottom: 2px solid transparent !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv .accountLogin .selectedType,
body:has(.loginDiv) .QRLoginSwitchDiv #IAMLinkDiv .selectedType {
	color: #1668dc !important;
	font-weight: 600 !important;
	border-bottom-color: #1668dc !important;
}

/* ---------- ④ 输入框统一：圆角 / 浅灰白底 / hover 与 focus 变主色 ---------- */
body:has(.loginDiv) .loginDiv .iam-input-text,
body:has(.loginDiv) .loginDiv input[type="text"],
body:has(.loginDiv) .loginDiv input[type="password"] {
	height: 46px !important;
	border-radius: 10px !important;
	background-color: #f7f9fc !important;
	border: 1px solid rgba(23, 38, 70, .14) !important;
	font-size: 14px !important;
	color: #1a1f36 !important;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body:has(.loginDiv) .loginDiv .iam-input-text:hover,
body:has(.loginDiv) .loginDiv input[type="text"]:hover,
body:has(.loginDiv) .loginDiv input[type="password"]:hover {
	border-color: rgba(22, 104, 220, .55) !important;
}

body:has(.loginDiv) .loginDiv .iam-input-text:focus,
body:has(.loginDiv) .loginDiv input[type="text"]:focus,
body:has(.loginDiv) .loginDiv input[type="password"]:focus {
	background-color: #fff !important;
	border-color: #1668dc !important;
	box-shadow: 0 0 0 3px rgba(22, 104, 220, .12) !important;
	outline: none !important;
}

body:has(.loginDiv) .loginDiv input::placeholder {
	color: #a8b0bf !important;
	font-weight: 400 !important;
}

body:has(.loginDiv) .loginDiv .inputField {
	margin-bottom: 16px !important;
}

/* ---------- ⑤ 验证码：输入框与图片同一行 ---------- */
body:has(.loginDiv) .loginDiv .allow_login_phone_captcha .inputField,
body:has(.loginDiv) .loginDiv .allow_login_email_captcha .inputField {
	display: flex !important;
	align-items: center;
	gap: 12px;
}

body:has(.loginDiv) .loginDiv .allow_login_phone_captcha .inputField > input,
body:has(.loginDiv) .loginDiv .allow_login_email_captcha .inputField > input {
	flex: 1 1 auto;
	min-width: 0;
}

body:has(.loginDiv) .loginDiv .allow_login_phone_captcha .input-group-append,
body:has(.loginDiv) .loginDiv .allow_login_email_captcha .input-group-append {
	position: static !important;
	flex: 0 0 auto !important;
	display: block !important;
	height: auto !important;
	line-height: 0;
}

body:has(.loginDiv) .loginDiv .allow_login_phone_captcha .input-group-append img,
body:has(.loginDiv) .loginDiv .allow_login_email_captcha .input-group-append img {
	display: block !important;
	width: 112px !important;
	height: 46px !important;
	object-fit: cover;
	border: 1px solid rgba(23, 38, 70, .12) !important;
	border-radius: 10px !important;
	cursor: pointer;
	background: #fff;
}

/* ---------- ⑥ 主按钮：通栏、大圆角、hover 加深 ---------- */
body:has(.loginDiv) .loginDiv button {
	width: 100% !important;
	height: 48px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background-color: #1668dc !important;
	color: #fff !important;
	border: 0 !important;
	transition: background-color .2s ease, box-shadow .2s ease;
}

body:has(.loginDiv) .loginDiv button:hover {
	background-color: #1259c0 !important;
}

/* ---------- ⑦ 底部链接一行：现在注册 · 忘记密码 · 验证码登录 ---------- */
body:has(.loginDiv) #bottomBtns {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	font-size: 13px;
}

body:has(.loginDiv) #bottomBtns > * {
	margin: 0 !important;
	text-align: left !important;
	flex: 0 0 auto;
}

body:has(.loginDiv) #bottomBtns .hwid-link-login,
body:has(.loginDiv) #bottomBtns .hwid-link-login span {
	color: #1668dc !important;
}

body:has(.loginDiv) #bottomBtns .loginswap {
	color: #98a2b3 !important;
}

body:has(.loginDiv) #bottomBtns #iamCheckArea .ng-binding {
	color: #1668dc !important;
	cursor: pointer;
	font-size: 13px;
}

body:has(.loginDiv) #bottomBtns .forgetPwdLink {
	text-align: left !important;
}

@media (max-width: 500px) {
	body:has(.loginDiv) .loginDiv {
		padding: 22px 18px 20px !important;
		border-radius: 14px !important;
	}

	body:has(.loginDiv) .QRLoginSwitchDiv {
		gap: 24px !important;
	}

	.ys-card-title {
		font-size: 22px !important;
	}
}


/* ---------- ⑰ 收尾：按钮圆角 / 底部链接统一 / 矮屏适配 ----------
   ① 按钮圆角一直是 8px：主题里那条 `#button button{border-radius:var(--ys-radius,8px)!important}`
      带 id，权重 (1,0,1) 高于我 ⑯ 的 (0,2,2)，所以 10px 不生效；
      而且外层 #button 自己也是 8px 圆角 + overflow:hidden，会把按钮圆角裁成 8px。
      这里把登录页的圆角变量直接改成 10px（所有 var(--ys-radius) 的地方一起统一），
      再把 #button 与按钮显式钉成 10px。
   ② 底部三个链接的字号/行高/内边距统一，间距用 space-between（左·中·右）。
   ③ 矮屏（<820px，比如笔记本半屏）卡片会超出屏幕，收紧一档竖向间距。 */
body:has(.loginDiv) {
	--ys-radius: 10px;
}

body:has(.loginDiv) .loginDiv #button {
	border-radius: 10px !important;
}

body:has(.loginDiv) .loginDiv #button button {
	border-radius: 10px !important;
}

body:has(.loginDiv) #bottomBtns,
body:has(.loginDiv) #bottomBtns * {
	font-size: 13px !important;
	line-height: 1.4 !important;
}

body:has(.loginDiv) #bottomBtns .hwid-link,
body:has(.loginDiv) #bottomBtns .hwid-text-container,
body:has(.loginDiv) #bottomBtns .forgetPwdLink {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none;
}

@media (max-height: 820px) {
	body:has(.loginDiv) .loginDiv {
		padding: 24px 32px 20px !important;
	}

	.ys-card-title {
		font-size: 24px !important;
		margin-bottom: 18px !important;
	}

	body:has(.loginDiv) .QRLoginSwitchDiv {
		margin-bottom: 16px !important;
	}

	body:has(.loginDiv) .loginDiv .inputField {
		margin-bottom: 12px !important;
	}

	body:has(.loginDiv) .loginDiv button {
		height: 46px !important;
	}
}


/* ---------- ⑱ 回退布局改动：保留左品牌区与那朵云，只保留卡片内的组件新样式 ----------
   上一版（⑯）为了做"单卡片居中"把左品牌区隐藏、并把云挪到左下角。
   现按要求回退：左品牌区恢复显示、云恢复为挂在文字块上（底边与文字对齐），
   两栏布局与间距恢复原样；⑯ 里对"卡片内组件"的改动（标题字号、标签页、
   输入框、验证码同行、按钮、底部链接）全部保留。
   注意：卡片外观（半透白 + 模糊 + 柔和阴影）属于本次组件需求的一部分，予以保留；
   若也要回退成纯白卡片，把下面 .loginDiv 那条注释掉即可。 */
body:has(.loginDiv) .ys-login-brand {
	display: block !important;
}

body:has(.loginDiv) .widthLimit {
	justify-content: center !important;
	gap: clamp(32px, 5vw, 96px) !important;
}

/* 关掉 ⑯ 加在整页左下角的那朵云，云只保留在品牌文字块上 */
body:has(.loginDiv)::before {
	display: none !important;
}

/* 品牌文字块上的云保持启用（随文字块高度自适应，底边始终对齐）。
   限定在 >=1200px：窄屏左侧没有余量，展示会压到文字，与之前一致保持隐藏。 */
@media (min-width: 1200px) {
	.ys-brand-inner::before {
		display: block !important;
	}
}


/* ---------- ⑲ 卡片只留一层 + 输入框纯白 + 首个输入框上移 ----------
   ① "嵌套两层卡片"：实测卡片内部并没有第二层元素，是玻璃拟态（半透白 + 背景模糊）
      + 白色描边 + 双层投影叠出来的层次感。改为：不透明纯白底、去掉模糊与白色描边、
      投影只留一层柔和的，视觉上就是一张干净的卡片。
   ② 输入框底色由浅灰 #f7f9fc 改为纯白（浅灰那种"内凹/被压"的观感去掉），
      聚焦时也不再加光圈阴影，只把描边变主色，呼应"不要阴影"。
   ③ 第一个输入框离顶部太远：实测标签行底到第一个输入框有 60px，其中 38px 来自
      标签面板（#email / #phone）的上内边距（主题写的 44px）。把它归零，
      标签行下间距也收一档，输入框整体上移约 45px。 */
body:has(.loginDiv) .loginDiv {
	background: #fff !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1px solid rgba(23, 38, 70, .06) !important;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .08) !important;
}

body:has(.loginDiv) .loginDiv .iam-input-text,
body:has(.loginDiv) .loginDiv input[type="text"],
body:has(.loginDiv) .loginDiv input[type="password"] {
	background-color: #fff !important;
}

body:has(.loginDiv) .loginDiv .iam-input-text:focus,
body:has(.loginDiv) .loginDiv input[type="text"]:focus,
body:has(.loginDiv) .loginDiv input[type="password"]:focus {
	background-color: #fff !important;
	box-shadow: none !important;
}

body:has(.loginDiv) .loginDiv #email,
body:has(.loginDiv) .loginDiv #phone {
	padding-top: 0 !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv {
	margin-bottom: 14px !important;
}


/* ---------- ⑳ 首个输入框再上移（真正的那 44px 在这）----------
   实测祖链：输入框顶 192 / #hwLoginDivId 顶 148，差值 44px 正是
   #hwLoginDivId 的 padding-top:44px（主题写的；⑲ 我改的是 #email/#phone，改错了元素）。
   上下都归零，卡片内留白交给卡片自身的 padding 控制，整卡高度再减约 60px。 */
body:has(.loginDiv) .loginDiv #hwLoginDivId {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* ---------- ㉑ 输入框居中 + 密码框图标占位 + 卡片再收紧 ----------
   ① 输入框没居中：实测左间隙 45px、右间隙 23px。原因是祖链上（标签面板 / 表单 /
      表单区 / 字段）各留了一点左右内边距与外边距，左右不等。这里把这一条链上的
      左右 padding / margin 全部归零，宽度交给卡片自身的 32px 内边距，
      并让四个输入框显式 width:100% 撑满内容区（验证码框不设，它要保持 flex 与
      图片同行）。
   ② 密码框图标压住占位文字：⑩ 只给账号/手机号框留了左侧图标位（padding-left:42px），
      漏了密码框——它的左内边距只有 14px，而锁图标定位在 left:14px，于是叠在一起。
   ③ 卡片偏高（521px）、底部偏松（21px）：输入框下间距 16→12、标题下间距 18→14、
      标签行下间距 14→12、卡片下内边距 20→16、底部链接上间距 16→12，
      整卡约减 30px 且下沿更利落。 */
body:has(.loginDiv) .loginDiv #hwLoginDivId,
body:has(.loginDiv) .loginDiv #email,
body:has(.loginDiv) .loginDiv #phone,
body:has(.loginDiv) .loginDiv form,
body:has(.loginDiv) .loginDiv .loginFormDiv,
body:has(.loginDiv) .loginDiv .inputField {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has(.loginDiv) .loginDiv #emailInp,
body:has(.loginDiv) .loginDiv #phoneInp,
body:has(.loginDiv) .loginDiv #emailPwdInp,
body:has(.loginDiv) .loginDiv #phonePwdInp {
	width: 100% !important;
}

#emailPwdInp,
#phonePwdInp {
	padding-left: 42px !important;
}

body:has(.loginDiv) .loginDiv .inputField {
	margin-bottom: 12px !important;
}

body:has(.loginDiv) .loginDiv {
	padding-bottom: 16px !important;
}

body:has(.loginDiv) .ys-card-title {
	margin-bottom: 14px !important;
}

body:has(.loginDiv) .QRLoginSwitchDiv {
	margin-bottom: 12px !important;
}

body:has(.loginDiv) #bottomBtns {
	margin-top: 12px !important;
}


/* ---------- ㉒ 输入框真正居中 ----------
   横向祖链实测：#hwLoginDivId 被主题写死 width:376px，而卡片内容区（420 - 左右各 32
   内边距）只有 356px → 整条表单链向右溢出 20px，表现就是输入框"没有居中"
   （左 33px、右 11px）。把它改成 100%，其余全部随卡片内边距对齐。 */
body:has(.loginDiv) .loginDiv #hwLoginDivId {
	width: 100% !important;
}


/* ---------- ㉓ 顶部留白 / 验证码登录重叠 / 底部链接统一 ----------
   ① 顶部留白：卡片上内边距 24 → 16（矮屏 14），标题更贴近卡片上沿。
   ② "验证码登录"重叠挤压的原因：⑰ 里我给 `#bottomBtns #iamCheckArea span` 加了
      display:inline-block !important，而系统正是用行内 style="display:none" 在
      "验证码登录 / 密码登录"之间切换（同一时刻只显示一个）。!important 盖过行内样式
      → 两个链接同时显示、互相挤压。上面已把那条规则中的 span 去掉，
      这里再明确一次：该容器内的 span 不设 display，交给系统控制。
   ③ 三个链接样式统一：同字号、同色系（现在注册/验证码登录=主色蓝，忘记密码=浅灰），
      并加 white-space:nowrap 防止窄屏被压成两行。 */
body:has(.loginDiv) .loginDiv {
	padding-top: 16px !important;
}

body:has(.loginDiv) #bottomBtns #iamCheckArea span {
	white-space: nowrap;
}

body:has(.loginDiv) #bottomBtns .hwid-text-container,
body:has(.loginDiv) #bottomBtns .loginswap,
body:has(.loginDiv) #bottomBtns #iamCheckArea span {
	font-size: 13px !important;
	line-height: 1.5 !important;
	white-space: nowrap;
	text-decoration: none;
}

body:has(.loginDiv) #bottomBtns .loginswap {
	color: #98a2b3 !important;
}

@media (max-height: 820px) {
	body:has(.loginDiv) .loginDiv {
		padding-top: 14px !important;
	}
}


/* ---------- ㉔ 底部链接统一（验证码登录 = 现在注册 的同款）----------
   实测：三个链接最内层颜色已经正确（现在注册 / 验证码登录 = #1668dc，
   忘记密码 = #98a2b3），但外层容器 #iamCheckArea 继承的是主题的红色
   rgb(199,2,11)，任何没写自己颜色的文字都会变红。这里把容器颜色也归到主色蓝，
   并把两个蓝色链接在字号 / 字重 / 下划线 / 悬停上完全对齐。 */
body:has(.loginDiv) #bottomBtns #iamCheckArea {
	color: #1668dc !important;
}

body:has(.loginDiv) #bottomBtns .hwid-text-container,
body:has(.loginDiv) #bottomBtns #iamCheckArea span {
	color: #1668dc !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	cursor: pointer;
}

body:has(.loginDiv) #bottomBtns .hwid-text-container:hover,
body:has(.loginDiv) #bottomBtns #iamCheckArea span:hover {
	color: #1259c0 !important;
	text-decoration: underline !important;
}

body:has(.loginDiv) #bottomBtns a:visited {
	color: #1668dc !important;
}


/* ---------- ㉕ 卡片底部空白收紧 ----------
   实测底部那片空白由三段叠成：
     · 链接元素盒子高 44px（文字只有 20px）→ 内部 24px 空
     · #bottomBtns 自带 margin-bottom: 40px
     · 卡片下内边距 16px
   合计约 80px。这里把链接盒压到文字高度（保留 24px 行高，仍有可点面积），
   并去掉那 40px 外边距，底部只剩卡片的 16px 内边距。 */
body:has(.loginDiv) #bottomBtns {
	margin-bottom: 0 !important;
	align-items: center !important;
}

body:has(.loginDiv) #bottomBtns > *,
body:has(.loginDiv) #bottomBtns .hwid-link,
body:has(.loginDiv) #bottomBtns .hwid-text-container,
body:has(.loginDiv) #bottomBtns .forgetPwdLink,
body:has(.loginDiv) #bottomBtns #iamCheckArea,
body:has(.loginDiv) #bottomBtns #iamCheckArea span,
body:has(.loginDiv) #bottomBtns .loginswap {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 24px !important;
}


/* ---------- ㉖ 验证码行与登录按钮之间的留白收紧 ----------
   实测这段间距是三层叠出来的：字段自身下间距 12 + .buttonAreaDiv 上间距 12 +
   #button 上间距 20 = 44px，而字段彼此之间只有 12px，所以看着空一块。
   现在只保留字段的 12px + #button 的 4px = 16px，与表单节奏一致。 */
body:has(.loginDiv) #button {
	margin-top: 4px !important;
	margin-bottom: 0 !important;
}

body:has(.loginDiv) .buttonAreaDiv {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* ---------- ㉗ 验证码块下间距归到 12px ----------
   验证码块的外层还带 .zdjj 类，主题给它写了 margin-bottom: 26px
   （实测验证码行到按钮 36px = 26 + 4 + 6 边框）。统一成 12px，
   与其它字段间距一致，验证码行到按钮变成 16px。 */
body:has(.loginDiv) .loginDiv .form-group.zdjj {
	margin-bottom: 12px !important;
}


/* ---------- ㉘ 验证码行 → 登录按钮 那段留白彻底压平 ----------
   全量纵向列表实测：验证码输入框/图片的底 = 395，登录按钮顶 = 429，中间 34px。
   它由四段叠成：验证码块自身底部多出的 ~12px（内边距/行高）+ .form-group.zdjj
   的 margin-bottom 12 + #button 的 margin-top 4 + 若干盒模型余量。
   这里把这条链上的内边距、外边距全部归零，只留 #button 的 12px，
   与字段之间的间距（12px）完全一致。 */
body:has(.loginDiv) .loginDiv .form-group.zdjj {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body:has(.loginDiv) .loginDiv .form-group.zdjj .inputField {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body:has(.loginDiv) .loginDiv .form-group.zdjj .input-group-append {
	margin-bottom: 0 !important;
}

body:has(.loginDiv) #button {
	margin-top: 12px !important;
}

body:has(.loginDiv) .buttonAreaDiv {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* ---------- ㉙ 验证码 → 登录按钮：真正压平（用带 id 的选择器）----------
   把空隙内的元素全列出来后，30px 的构成清楚了：
     · .buttonAreaDiv 的 margin-top 12px —— 来自主题里一条**带 id 的规则**，
       权重 (1,1,0) 高于我此前 `body:has(.loginDiv) .buttonAreaDiv` 的 (0,2,1)，
       所以我设的 0 一直没生效；
     · #button 的 margin-top 12px（我前面设的，保留）；
     · 按钮自身 6px 上外边距。
   这里统一用带 id 的选择器覆盖：只留 12px，与字段间距一致。 */
body:has(.loginDiv) #hwLoginDivId .buttonAreaDiv {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.loginDiv) #hwLoginDivId #button {
	margin-top: 12px !important;
}

body:has(.loginDiv) #hwLoginDivId #button button {
	margin-top: 0 !important;
}


/* ---------- ㉚ 验证码块：覆盖所有模式（修复切到"验证码登录"后图片单独占一行）----------
   验证码块的 DOM 结构（includes/verify 模板，positon=top）：
     .form-group.pwdInputField.zdjj.allow_login_<类型>_captcha
       └ .inputField            ← 输入框与图片的容器（要排成一行）
           ├ input#captcha_<类型>
           └ .input-group-append > img#<类型>
   我前面只给 phone / email 两个变体写了 flex，切到"验证码登录"后系统显示的是
   allow_login_code_captcha 那一块，于是图片按默认块级排版掉到了输入框下面。
   这里改成按结构通用匹配：.form-group.zdjj 下的 .inputField 一律 flex 一行，
   三种验证码类型（手机验证码 / 短信验证码 / 邮箱验证码）都覆盖。 */
body:has(.loginDiv) .loginDiv .form-group.zdjj > .inputField {
	display: flex !important;
	align-items: center;
	gap: 12px;
}

body:has(.loginDiv) .loginDiv .form-group.zdjj > .inputField > input {
	flex: 1 1 auto;
	min-width: 0;
}

body:has(.loginDiv) .loginDiv .form-group.zdjj > .inputField > .input-group-append {
	position: static !important;
	flex: 0 0 auto !important;
	display: block !important;
	height: auto !important;
	line-height: 0;
}

body:has(.loginDiv) .loginDiv .form-group.zdjj > .inputField > .input-group-append img {
	display: block !important;
	width: 112px !important;
	height: 46px !important;
	object-fit: cover;
	border: 1px solid rgba(23, 38, 70, .12) !important;
	border-radius: 10px !important;
	background: #fff;
	cursor: pointer;
}


/* ---------- ㉛ 两种模式下验证码间距都正确 ----------
   问题：㉘ 为了消掉"验证码块 → 登录按钮"的间距，把验证码块（.form-group.zdjj）
   的下外边距设成了 0。但切换登录方式后，验证码块后面跟的不是按钮而是**短信验证码行**，
   那 12px 就被一起消掉了，表现为"两个验证码贴在一起"。
   做法：间距归到验证码块自己身上（margin-bottom: 12），按钮上不再额外加，
   于是两种模式都得到 12px：
     · 手机密码登录：验证码块 → 登录按钮 = 12
     · 验证码登录：  验证码块 → 短信验证码行 = 12，短信行 → 登录按钮 = 12 */
body:has(.loginDiv) .loginDiv .form-group.zdjj {
	margin-bottom: 12px !important;
}

body:has(.loginDiv) #hwLoginDivId #button {
	margin-top: 0 !important;
}


/* ---------- ㉜ 修复"邮箱登录页里验证码登录切换点了没反应" ----------
   排查结论：
     · 系统本身**不支持邮箱验证码登录**（全站搜不到 email_code），
       而 phoneCheck() 只切换手机标签页的验证码方式（图形验证码 ⇄ 短信验证码）。
     · key.js 的标签切换里，点「邮箱登录」会给 #phone 与 #iamCheckArea 加 ng-hide
       （靠 .ng-hide{display:none} 隐藏），所以在邮箱页本不该出现这个切换链接。
     · 但我在 ⑰ 里给 #iamCheckArea 写了 display:inline-block !important，
       把 .ng-hide 的隐藏盖掉了 → 邮箱页里链接继续显示，点了没有任何反应。
   修法：去掉那条 display 声明（已在上面从 ⑰ 中移除；这里再兜一道，
   确保 ng-hide 优先生效），让链接只在手机标签页出现——在那里它是有效的。 */
body:has(.loginDiv) #bottomBtns #iamCheckArea.ng-hide {
	display: none !important;
}


/* ---------- ㉝ 移动端：隐藏左侧品牌区（大标题 + 品牌图标/云），卡片居中且更紧凑 ----------
   起因：⑱ 恢复品牌区时用的是无媒体查询的 `display: block !important`，
   把主题"@media(max-width:500px){ #loginAdv{display:none} }"的隐藏一起盖掉了
   → 手机上仍显示「欢迎回来…」大标题与品牌图标，卡片被挤得不居中、整体偏长。
   这里在 ≤992px 直接隐藏整块品牌区（含它上面的云），并把布局改为居中单列、
   纵向间距收紧一档。 */
@media (max-width: 991.98px) {
	body:has(.loginDiv) .ys-login-brand {
		display: none !important;
	}

	body:has(.loginDiv) .widthLimit {
		flex-direction: column;
		align-items: center !important;
		justify-content: center;
		gap: 0 !important;
		padding: 20px 16px;
	}

	body:has(.loginDiv) .loginDiv {
		width: 100% !important;
		max-width: 420px !important;
		margin: 0 auto !important;
		padding: 20px 18px 16px !important;
		border-radius: 14px !important;
	}

	.ys-brand-inner::before {
		display: none !important;
	}

	body:has(.loginDiv)::before {
		display: none !important;
	}

	.ys-card-title {
		font-size: 20px !important;
		margin-bottom: 12px !important;
	}

	body:has(.loginDiv) .QRLoginSwitchDiv {
		gap: 20px !important;
		margin-bottom: 10px !important;
	}

	body:has(.loginDiv) .loginDiv .inputField {
		margin-bottom: 10px !important;
	}

	body:has(.loginDiv) .loginDiv .form-group.zdjj {
		margin-bottom: 10px !important;
	}

	body:has(.loginDiv) #hwLoginDivId #button {
		margin-top: 10px !important;
	}

	body:has(.loginDiv) .loginDiv button {
		height: 44px !important;
	}
}


/* ---------- ㉞ 移动端：输入框撑满卡片 + 卡片真正居中 ----------
   390px 实测：
     · .loginFormDiv 只有 258.67px，而父级（#hwLoginDivId）是 288.67px
       → 主题在移动端把它写窄了 30px，输入框因此偏左（左 19 / 右 49）；
     · .widthLimit 带 margin-right: -7.33px（主题移动端规则）→ 卡片整体偏左 4px。
   两处都用 !important 归正：表单区宽度 100%、容器左右外边距归零。 */
@media (max-width: 991.98px) {
	body:has(.loginDiv) .loginDiv .loginFormDiv {
		width: 100% !important;
	}

	body:has(.loginDiv) .widthLimit {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/* ---------- ㉟ 左侧品牌文字块下移（与登录卡片对齐）----------
   主题给 #loginAdv 写死 height:438px，而登录卡片实测 392px；两者在 flex 里居中后，
   品牌块上下各多出 23px，看起来"比登录组件高、顶出一截"。
   改为高度随内容（auto），于是它按内容高度与卡片居中，顶边自然下移约 60px，
   底边的云也随之一同下移（云锚定在文字块上，底边仍然与文字对齐）。 */
#loginAdv.ys-login-brand {
	height: auto !important;
}


/* ---------- ㊱ 移动端：验证码行居中 + 首个输入框上方留白 ----------
   390px 实测两处问题：
   ① 手机号输入框上方 50px：主题在 ≤500px 给标签面板 #email / #phone 加了
      margin-top: 40px（`@media(max-width:500px){ #email,#hwLoginDivId #phone{margin-top:40px} }`），
      我此前只归零了左右内边距，没管上外边距。→ 归零后只剩标签行的 10px。
   ② 验证码行整体右移 15px 并溢出卡片内边距：该块（.form-group.zdjj）在移动端
      被加了左边距，其内部的 .input-group-append（图片容器）又带左边距，
      于是输入框+图片整体偏右、右边缘超出内容区。→ 左右外边距/内边距与图片容器
      的左边距全部归零，行宽回到 100%，图片与输入框之间只保留 gap 12px。 */
@media (max-width: 991.98px) {
	body:has(.loginDiv) .loginDiv #email,
	body:has(.loginDiv) .loginDiv #phone {
		margin-top: 0 !important;
	}

	body:has(.loginDiv) .loginDiv .form-group.zdjj {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body:has(.loginDiv) .loginDiv .form-group.zdjj .inputField {
		width: 100% !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	body:has(.loginDiv) .loginDiv .form-group.zdjj .input-group-append {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
}


/* ---------- ㊲ 登录按钮与输入框左右对齐（移动端实测差 32px）----------
   390px 实测：输入框左右与卡片内容区对齐（0/0），而登录按钮左右各缩进 16px
   —— 按钮外面的 .zdbtn / #button 在移动端带了左右内边距。归零后按钮与输入框
   同宽（通栏），符合"卡片内铺满"的要求。 */
body:has(.loginDiv) .loginDiv #button,
body:has(.loginDiv) .loginDiv #buttonArea,
body:has(.loginDiv) .loginDiv .zdbtn,
body:has(.loginDiv) .loginDiv .zdbt,
body:has(.loginDiv) .loginDiv .buttonAreaDiv {
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has(.loginDiv) .loginDiv #button button {
	width: 100% !important;
}


/* ---------- ㊳ 验证码行与输入框同宽（桌面端也统一）----------
   桌面实测：输入框 355px（与卡片内容区对齐），验证码行容器却只有 330px
   （主题给验证码块的 .inputField 写了固定宽度），右侧多出 25px 空白。
   改为 100%，三种模式下验证码行都与上面的输入框严格同宽。 */
body:has(.loginDiv) .loginDiv .form-group.zdjj .inputField {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* ==========================================================================
   ㊴ 注册页 / 找回密码页：套用登录页同一套皮肤
   --------------------------------------------------------------------------
   两个页面共用结构：.auth-full-page-content > .login_right（居中卡片）。
   这里把登录页定下来的规范平移过来：
     浅蓝底 + 白色玻璃卡片（16px 圆角、柔和阴影）、标题加粗深色、
     输入框 10px 圆角 / 白底 / 浅描边 / hover 与 focus 变主色、
     主按钮通栏品牌蓝（.btn-block）、"获取验证码"为描边小按钮（.btn-primary 但不带 btn-block）、
     图形验证码的 bootstrap 行改为紧凑一行（去掉标签列与多余内边距）、
     协议勾选框统一主色、移动端单列收窄。
   阴影只给卡片，其余控件一律不带（与登录页一致）。
   ========================================================================== */

/* ---------- ① 页面底色（与登录页同款）---------- */
body:has(.auth-full-page-content) {
	background-color: #f2f7ff;
	background-image:
		radial-gradient(circle at 16% 34%, rgba(22, 104, 220, .10) 0%, transparent 58%),
		radial-gradient(circle at 88% 6%, rgba(61, 145, 255, .10) 0%, transparent 52%),
		linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #1a1f36;
}

body:has(.auth-full-page-content) .container-fluid {
	padding: 0 !important;
}

/* ---------- ② 卡片 ---------- */
body:has(.auth-full-page-content) .login_right {
	width: 100% !important;
	max-width: 460px !important;
	margin: 0 auto !important;
	padding: 32px 32px 26px !important;
	background: #fff !important;
	border: 1px solid rgba(23, 38, 70, .06) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .08) !important;
}

body:has(.auth-full-page-content) .login_right h1,
body:has(.auth-full-page-content) .login_right h2,
body:has(.auth-full-page-content) .login_right h3,
body:has(.auth-full-page-content) .login_right h4 {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #1a1f36 !important;
	margin: 0 0 20px !important;
}

body:has(.auth-full-page-content) .login_right label,
body:has(.auth-full-page-content) .login_right .col-form-label {
	font-size: 13px !important;
	color: #6b7280 !important;
	margin-bottom: 6px !important;
}

/* ---------- ③ 输入框：与登录页同规范 ---------- */
body:has(.auth-full-page-content) .login_right input.iam-input-text,
body:has(.auth-full-page-content) .login_right input.form-control,
body:has(.auth-full-page-content) .login_right input[type="text"],
body:has(.auth-full-page-content) .login_right input[type="password"],
body:has(.auth-full-page-content) .login_right select.form-control {
	height: 46px !important;
	box-sizing: border-box;
	padding: 0 14px !important;
	font-size: 14px !important;
	color: #1a1f36 !important;
	background-color: #fff !important;
	border: 1px solid rgba(23, 38, 70, .14) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: border-color .2s ease;
}

body:has(.auth-full-page-content) .login_right input:hover,
body:has(.auth-full-page-content) .login_right select.form-control:hover {
	border-color: rgba(22, 104, 220, .55) !important;
}

body:has(.auth-full-page-content) .login_right input:focus,
body:has(.auth-full-page-content) .login_right select.form-control:focus {
	border-color: #1668dc !important;
	box-shadow: none !important;
	outline: none !important;
}

body:has(.auth-full-page-content) .login_right input::placeholder {
	color: #a8b0bf !important;
	font-weight: 400 !important;
}

body:has(.auth-full-page-content) .login_right .form-group,
body:has(.auth-full-page-content) .login_right .inputField {
	margin-bottom: 14px !important;
}

/* ---------- ④ 按钮：主按钮通栏、验证码按钮描边 ---------- */
body:has(.auth-full-page-content) .login_right button.btn-block {
	width: 100% !important;
	height: 48px !important;
	margin-top: 6px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background-color: #1668dc !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: background-color .2s ease;
}

body:has(.auth-full-page-content) .login_right button.btn-block:hover {
	background-color: #1259c0 !important;
}

body:has(.auth-full-page-content) .login_right button.btn-primary:not(.btn-block) {
	width: auto !important;
	height: 46px !important;
	padding: 0 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #1668dc !important;
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid rgba(22, 104, 220, .45) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	white-space: nowrap;
}

body:has(.auth-full-page-content) .login_right button.btn-primary:not(.btn-block):hover {
	color: #fff !important;
	background-color: #1668dc !important;
}

/* ---------- ⑤ 图形验证码：bootstrap 行 → 紧凑一行 ---------- */
body:has(.auth-full-page-content) .login_right .form-group.row {
	display: block !important;
	margin: 0 0 14px !important;
}

body:has(.auth-full-page-content) .login_right .form-group.row > [class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body:has(.auth-full-page-content) .login_right .input-group {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
	width: 100% !important;
}

body:has(.auth-full-page-content) .login_right .input-group > input {
	flex: 1 1 auto;
	min-width: 0;
}

body:has(.auth-full-page-content) .login_right .input-group-append {
	position: static !important;
	display: block !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}

body:has(.auth-full-page-content) .login_right .input-group-append img {
	display: block !important;
	width: 112px !important;
	height: 46px !important;
	object-fit: cover;
	border: 1px solid rgba(23, 38, 70, .12) !important;
	border-radius: 10px !important;
	background: #fff;
	cursor: pointer;
}

/* ---------- ⑥ 协议勾选框 / 链接 ---------- */
body:has(.auth-full-page-content) .login_right .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #1668dc !important;
	border-color: #1668dc !important;
}

body:has(.auth-full-page-content) .login_right a {
	color: #1668dc;
}

body:has(.auth-full-page-content) .login_right a:hover {
	color: #1259c0;
}

/* ---------- ⑦ 移动端 ---------- */
@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right {
		max-width: 100% !important;
		padding: 22px 18px 18px !important;
		border-radius: 14px !important;
	}

	body:has(.auth-full-page-content) .login_right h1,
	body:has(.auth-full-page-content) .login_right h2,
	body:has(.auth-full-page-content) .login_right h3,
	body:has(.auth-full-page-content) .login_right h4 {
		font-size: 20px !important;
	}
}


/* ---------- ㊵ 注册 / 找回密码：去掉非卡片的装饰阴影 ----------
   实测这两个页面上还有三处阴影：
     · .login_right（卡片本身，保留——本次要求卡片有柔和阴影）
     · p.text-left / .qrebg（主题的装饰性阴影，去掉）
     · a.nav-link 的 inset 阴影（这是标签页"选中下划线"的实现方式，属功能性，保留） */
body:has(.auth-full-page-content) .login_right p.text-left,
body:has(.auth-full-page-content) .login_right [class*="qre"] {
	box-shadow: none !important;
}


/* ==========================================================================
   ㊶ 注册 / 找回密码：标题与切换标签对齐登录页
   --------------------------------------------------------------------------
   实测这两个页面的问题（移动端尤其明显）：
     · 标题是 <p class="text-left">，字号只有 18px，比登录页标题（24px 粗体）弱；
     · 切换标签用 bootstrap 的 .affs-nav.nav-justified：两个标签**都是蓝色**，
       选中态靠 inset 阴影（box-shadow: 0 -2px 0 0 inset）实现，与登录页的
       "选中蓝字+2px 蓝色下划线、未选浅灰"完全不是一个观感；
     · nav-justified 让两个标签等分撑满，与登录页"按内容宽度、间距 36px"也不同。
   这里统一到登录页规范。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #1a1f36 !important;
	text-align: left !important;
	margin: 0 0 20px !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav {
	display: flex !important;
	justify-content: flex-start !important;
	gap: 36px;
	border-bottom: 1px solid rgba(23, 38, 70, .10) !important;
	margin-bottom: 18px !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav .nav-item {
	flex: 0 0 auto !important;
	text-align: left !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav .nav-link {
	display: inline-block !important;
	height: auto !important;
	padding: 0 2px 12px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #9aa3b5 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: color .2s ease, border-color .2s ease;
}

body:has(.auth-full-page-content) .login_right .affs-nav .nav-link.active {
	color: #1668dc !important;
	font-weight: 600 !important;
	border-bottom-color: #1668dc !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav .nav-link:hover {
	color: #1668dc !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right .affs-nav {
		gap: 24px;
	}

	body:has(.auth-full-page-content) .login_right p.text-left {
		font-size: 20px !important;
	}
}


/* ==========================================================================
   ㊷ 注册页左侧品牌区：复用登录页那套样式
   --------------------------------------------------------------------------
   注册页的容器是 .auth-full-page-content（登录页是 .widthLimit），
   之前所有品牌区规则都写成 `body:has(.loginDiv) ...`，所以插了标记也不会有样式。
   这里按同样的规范补一份，作用域改为注册/找回密码页；数值与登录页完全一致：
   两栏 gap clamp(32px,5vw,96px)、品牌块 560 宽、云挂在文字块上底边对齐、
   ≥1200px 才显示（窄屏隐藏避免压字）。 */
body:has(.auth-full-page-content) .auth-full-page-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 5vw, 96px);
	max-width: 1200px;
	margin: 0 auto;
	min-height: 100vh;
	padding: 40px 24px;
	box-sizing: border-box;
}

body:has(.auth-full-page-content) .ys-login-brand {
	display: block;
	flex: 1 1 auto;
	max-width: 560px;
	min-width: 0;
	padding-left: 56px;
	position: relative;
	z-index: 1;
}

body:has(.auth-full-page-content) .ys-brand-inner {
	position: relative;
}

body:has(.auth-full-page-content) .ys-brand-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

body:has(.auth-full-page-content) .ys-brand-mark {
	width: 34px;
	height: 34px;
	display: block;
}

body:has(.auth-full-page-content) .ys-brand-name {
	font-size: 19px;
	font-weight: 700;
	color: #1a1f36;
	letter-spacing: .3px;
}

body:has(.auth-full-page-content) .ys-brand-title {
	font-size: 32px;
	line-height: 1.4;
	font-weight: 700;
	color: #1a1f36;
	margin: 0 0 14px;
}

body:has(.auth-full-page-content) .ys-brand-hl {
	color: #1668dc;
}

body:has(.auth-full-page-content) .ys-brand-sub {
	font-size: 15px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0 0 26px;
}

body:has(.auth-full-page-content) .ys-brand-points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
}

body:has(.auth-full-page-content) .ys-brand-points li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	padding-left: 12px;
	border-left: 2px solid rgba(22, 104, 220, .35);
}

body:has(.auth-full-page-content) .ys-brand-points li strong {
	font-size: 14px;
	font-weight: 600;
	color: #1a1f36;
}

body:has(.auth-full-page-content) .ys-brand-foot {
	font-size: 13px;
	color: #98a2b3;
	margin: 0;
}

@media (min-width: 1200px) {
	body:has(.auth-full-page-content) .ys-brand-inner::before {
		content: "";
		position: absolute;
		right: calc(100% + 8px);
		bottom: 0;
		width: clamp(140px, 15vw, 300px);
		aspect-ratio: 220 / 200;
		background: url("/themes/clientarea/ysyun_user/assets/images/ys-mark.svg") center / contain no-repeat;
		opacity: .45;
		pointer-events: none;
		z-index: -1;
	}
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .auth-full-page-content {
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 20px 16px;
	}

	body:has(.auth-full-page-content) .ys-login-brand {
		display: none !important;
	}
}


/* ==========================================================================
   ㊸ 注册页收尾：图标占位 / 大图标只留一个 / 品牌标尺寸对齐
   --------------------------------------------------------------------------
   ① 输入框左侧图标需要给输入框留出 42px 左内边距（与登录页一致）。
      用 .form-group:has(.ys-inp-icon) 自动命中"加了图标的那几个框"，
      动态自定义字段不加图标自然也不受影响。
   ② "注册页大图标显示两个"：注册/找回密码页早期有一枚**页面级云水印**
      （body::before 用 ys-mark.svg），㊷ 又给品牌文字块加了一枚云，
      于是同形状的云出现两次（登录页在 ⑫ 已把 body::before 关掉，所以只有一枚）。
      这里把这两页的页面级水印也关掉，只保留品牌区那一枚——与登录页完全一致。
   ③ 品牌标：注册页实测 34x31，登录页 34x34（SVG 原比例 220:200 会矮一点），
      统一成 34x34 并 object-fit: contain，两页视觉一致。 */
body:has(.auth-full-page-content) .login_right .form-group {
	position: relative;
}

body:has(.auth-full-page-content) .login_right .form-group:has(.ys-inp-icon) > input {
	padding-left: 42px !important;
}

body:has(.auth-full-page-content)::before {
	display: none !important;
}

body:has(.auth-full-page-content) .ys-brand-mark {
	width: 34px !important;
	height: 34px !important;
	object-fit: contain;
}


/* ---------- ㊹ 注册页图标：不依赖包裹层类名 ----------
   实测有一个带图标的输入框（手机号）外层不是 .form-group（它是跟国家码 select
   一起排的另一种结构），所以 .form-group:has(...) 命不中：图标缺少定位参照与左内边距。
   改为按"直接父级是否含图标"匹配，任何包裹层都成立。 */
body:has(.auth-full-page-content) .login_right *:has(> .ys-inp-icon) {
	position: relative;
}

body:has(.auth-full-page-content) .login_right *:has(> .ys-inp-icon) > input {
	padding-left: 42px !important;
}


/* ---------- ㊺ 注册 / 找回密码：密码眼睛的定位与占位 ----------
   与登录页同一实现：.ys-eye 绝对定位在右侧 12px，输入框右侧留 42px。
   用 :has(> .ys-eye) 自动命中加了眼睛的包裹层，不依赖类名。 */
body:has(.auth-full-page-content) .login_right *:has(> .ys-eye) {
	position: relative;
}

body:has(.auth-full-page-content) .login_right *:has(> .ys-eye) > input {
	padding-right: 42px !important;
}

body:has(.auth-full-page-content) .login_right .ys-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 17px;
	line-height: 1;
	color: #98a2b3;
	cursor: pointer;
	z-index: 2;
}

body:has(.auth-full-page-content) .login_right .ys-eye:hover {
	color: #1668dc;
}


/* ==========================================================================
   ㊻ 注册 / 找回密码：卡片内部上下留白对齐登录页
   --------------------------------------------------------------------------
   实测对比（同一视口）：
     · 登录卡内部：上 16px / 下 16px，字段间距 12px，标题下 14px，标签行下 12px
     · 注册/找回卡：上 32px / 下 26px，字段间距 14px，标题下 20px，标签行下 18px
   另外主题还给包裹层留了余量：.qrebg（标签区）有内边距、.mt-4（表单区外壳）
   有 24px 上外边距 —— 这两处正是"标题下面空一大截"的来源。
   这里全部按登录页的节奏收紧，两页观感与登录页一致。 */
body:has(.auth-full-page-content) .login_right {
	padding: 16px 32px 16px !important;
}

body:has(.auth-full-page-content) .login_right .item,
body:has(.auth-full-page-content) .login_right .qrebg {
	padding: 0 !important;
	margin: 0 !important;
}

body:has(.auth-full-page-content) .login_right .mt-4,
body:has(.auth-full-page-content) .login_right .tab-content > .tab-pane {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.auth-full-page-content) .login_right p.text-left {
	margin: 0 0 14px !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav {
	margin-bottom: 12px !important;
}

body:has(.auth-full-page-content) .login_right .form-group,
body:has(.auth-full-page-content) .login_right .inputField {
	margin-bottom: 12px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right {
		padding: 16px 18px 14px !important;
	}
}


/* ---------- ㊼ 找回密码：标题到标签行的间距与注册页对齐 ----------
   实测标题到标签行：注册页 15px，找回密码页 45px（多 30px），
   来源是该页标签区外面的包裹结构与标题自身外边距的叠加。
   统一为 15px 一档，并顺手把卡片里"表单区→按钮"的节奏与登录页保持一致。 */
body:has(.auth-full-page-content) .login_right p.text-left + * ,
body:has(.auth-full-page-content) .login_right .item + * {
	margin-top: 0 !important;
}

body:has(.auth-full-page-content) .login_right > .d-flex > .item {
	margin-bottom: 15px !important;
}


/* ---------- ㊽ 修正 ㊼ 的反效果 + 压缩底部留白 ----------
   ① 标题到标签行：㊼ 里我给 .item 加了 margin-bottom:15，而标题自身还有 14px
      下外边距，两者叠加成 60px（比原来 45 还大）。改为：标题外边距归零、
      只由 .item 提供 15px，最终与注册页一致。
   ② 底部留白：按钮下方那行"已有一个账户? 登录"带 bootstrap 的 .mt-5（48px），
      是"底部空一大截"的主因。压到 12px。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-bottom: 0 !important;
}

body:has(.auth-full-page-content) .login_right .item {
	margin-bottom: 15px !important;
}

body:has(.auth-full-page-content) .login_right .mt-5 {
	margin-top: 12px !important;
}


/* ==========================================================================
   ㊾ 登录页「获取验证码」按钮 → 与注册页完全一致
   --------------------------------------------------------------------------
   实测差异（同一视口）：
     登录页：109x44、蓝底白字、圆角 6、15px/600   ← 被 ⑯ 给卡片所有按钮设的
              "主按钮"填充样式一起吃掉了（.zdjj 里的这个按钮并不是主按钮）
     注册页： 94x46、白底蓝字、1px 蓝色描边、圆角 10、13px/500
   这里按注册页的实测值覆盖（选择器带 .zdjj .input-group-append 提高权重，
   压过 ⑯ 的通用 button 规则）。 */
body:has(.loginDiv) .loginDiv .zdjj .input-group-append button,
body:has(.loginDiv) .loginDiv button.btn {
	width: auto !important;
	height: 46px !important;
	padding: 0 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #1668dc !important;
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid rgba(22, 104, 220, .45) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	white-space: nowrap;
	line-height: 1.4 !important;
}

body:has(.loginDiv) .loginDiv .zdjj .input-group-append button:hover,
body:has(.loginDiv) .loginDiv button.btn:hover {
	color: #fff !important;
	background-color: #1668dc !important;
}


/* ==========================================================================
   ㊿ 注册 / 找回密码：去掉标题下的浅色横线 + 标题左移
   --------------------------------------------------------------------------
   ① "标题下面那条线"实测是标题所在包裹层 DIV.item 的下边框
      （0.67px rgb(237,237,237)，浅到发白）——不是标签行的那条底轨。
      这里只去掉这条；标签行的底轨保留（那是下划线式标签的一部分，
      与登录页一致）。
   ② 标题文字左移：这两个页面的标题左偏移实测只有 1px（已紧贴内容左沿），
      但仍显偏右。按需求把标题单独左移 10px（移动端 6px），
      只动标题、不影响输入框与按钮的对齐。 */
body:has(.auth-full-page-content) .login_right .item {
	border-bottom: 0 !important;
}

body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -10px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -6px !important;
	}
}


/* ---------- 标签下划线变粗的修正 ----------
   实测：注册/找回密码页的选中标签上有**两层**下划线
     · 我加的 border-bottom: 2px solid #1668dc（与登录页一致）
     · 主题自带的 ::after 伪元素，content:""、height:2px、同色
   两层叠在一起看着就是 4px 的粗线。这里把主题那条隐掉，
   只保留 2px，与登录页的实测值（border-bottom 2px）完全一致。 */
body:has(.auth-full-page-content) .login_right .affs-nav .nav-link::after,
body:has(.auth-full-page-content) .login_right .affs-nav .nav-link.active::after {
	content: none !important;
	display: none !important;
	height: 0 !important;
	background: none !important;
}


/* ==========================================================================
   找回密码：标题与底部两处收紧
   --------------------------------------------------------------------------
   ① 标题到"手机找回/邮箱找回"实测 45px（注册页同位置 15px）。逐层量出：
      标签区外层 DIV.qregb 带 padding-top:30px —— 我此前把类名写成了 qrebg
      （少一个字母），所以那条归零规则一直没命中。改为 qregb 后间距回到 15px。
   ② 底部：按钮下方除了"已有一个账户? 登录"那一行（21px）外，外层容器还留着
      约 30px 下边距。把表单/面板/外层容器的下外边距与内边距一并归零，
      卡片下内边距收到 12px。 */
body:has(.auth-full-page-content) .login_right .qregb {
	padding-top: 0 !important;
}

body:has(.auth-full-page-content) .login_right .mt-5 {
	margin-top: 10px !important;
	margin-bottom: 0 !important;
}

body:has(.auth-full-page-content) .login_right .tab-content,
body:has(.auth-full-page-content) .login_right .tab-content > .tab-pane,
body:has(.auth-full-page-content) .login_right .flex-column.h-100,
body:has(.auth-full-page-content) .login_right form,
body:has(.auth-full-page-content) .login_right form > *:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

body:has(.auth-full-page-content) .login_right {
	padding-bottom: 12px !important;
}


/* ---------- 底部最后一段留白（找回密码 / 注册通用）----------
   逐层量出：最后一行"登录"下方还有 DIV.qregb 的 padding-bottom: 30px
   （此前只归零了它的上内边距）。归零后，卡片底部只剩自身的 12px 内边距，
   与登录页的底部留白（17px）一致。 */
body:has(.auth-full-page-content) .login_right .qregb {
	padding-bottom: 0 !important;
}


/* ==========================================================================
   注册 / 找回密码：标题再左移 + 标题与标签行的观感对齐登录页
   --------------------------------------------------------------------------
   实测三页：
     登录：标题 26px、左偏移 +1、标签行高 36、标题底→标签行顶 14
     注册/找回：标题 24px、左偏移 -9、标签行高 46、间距 15
   结论：间距数值本来就一样（14 vs 15），"看着留白更大"来自两处框的差别——
     ① 标签行高 46 vs 36（bootstrap 的 .nav-link 自带上下内边距），
     ② 标题字号 24 vs 26。
   处理：标题左移幅度加大（桌面 -18px、移动 -12px）、字号补到 26px、
   标签行上内边距归零（行高回到 36 一档），三页观感即一致。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -18px !important;
	font-size: 26px !important;
}

body:has(.auth-full-page-content) .login_right .affs-nav .nav-link {
	padding-top: 0 !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -12px !important;
		font-size: 22px !important;
	}
}


/* ---------- 标题左移加大（注册 / 找回密码）----------
   此前 -18px（距卡片左边框 14px），按要求再左移：桌面 -26px（距边框 6px）、
   移动端 -18px。再往左就会贴到卡片边框上（-32px），观感会像溢出，
   因此保留 6px 余量；若需要与卡片边框严格对齐，把数值改成 -32px 即可。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -26px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -18px !important;
	}
}


/* ==========================================================================
   标签行高的真正来源（注册 / 找回密码：标题到标签留白偏大）
   --------------------------------------------------------------------------
   逐层量出的结果：
     标题底 264 → UL 顶 279（15px，来自 .item 的下外边距）
     UL 高 46 = A 的高 46；而 A = 文字行高 **32px** + padding-bottom 12 + 下划线 2
   也就是主题给 .nav-link 写了 line-height:32px，把标签撑高了 10px
   （登录页同位置的标签行高是 21px + 12 + 2 = 35/36）。
   压平行高后：标签行 35px，标题到第一个输入框的总距离 = 15 + 35 + 12 = 62px，
   与登录页（14 + 36 + 12 = 62）完全一致。 */
body:has(.auth-full-page-content) .login_right .affs-nav .nav-link,
body:has(.auth-full-page-content) .login_right .affs-nav .nav-item {
	line-height: 21px !important;
}


/* ==========================================================================
   找回密码 / 注册：去掉栅格额外内边距，标题与标签、输入框对齐
   --------------------------------------------------------------------------
   实测（找回密码页）：卡片内边距 32px，但输入框左右各空 63px —— 多出的 31px
   来自 bootstrap 栅格（.row 的负外边距 + [class*=col-] 的左右内边距）。
   结果是标题在 7px、标签文字与输入框在 63px，三者不在一条竖线上，
   观感就是"卡片和密码框组件两边留白太多、跟其他页面不一样"。
   处理：
     ① 栅格容器的左右外边距/内边距归零 → 输入框与标签回到与登录页一致的 33px；
     ② 标题左移撤回（原来为了"左移"设了 -26px），改回与标签文字同一左沿
        （-2px 是标签文字自身 2px 内边距的补偿）。 */
body:has(.auth-full-page-content) .login_right .row,
body:has(.auth-full-page-content) .login_right [class*="col-"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -2px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -2px !important;
	}
}


/* ==========================================================================
   找回密码 / 注册：卡片内两侧留白偏大（比登录页多 31px）
   --------------------------------------------------------------------------
   实测输入框/标签距卡片边框 63px，而卡片内边距只有 32px —— 多出的 31px 在这一串
   包裹层里（.qregb > .mt-4 > .tab-content > .tab-pane > form；它们不是栅格，
   所以上一版针对 .row/col-* 的修复没有命中）。
   这条链上的左右内边距一并归零，输入框与标签回到与登录页一致的 33px；
   标题此时也与它们同一条左沿，三者对齐。 */
body:has(.auth-full-page-content) .login_right .qregb,
body:has(.auth-full-page-content) .login_right .mt-4,
body:has(.auth-full-page-content) .login_right .tab-content,
body:has(.auth-full-page-content) .login_right .tab-content > .tab-pane,
body:has(.auth-full-page-content) .login_right .tab-content > .tab-pane > form {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* 注册页的同类包裹层拼写是 .qrebg（找回密码页是 .qregb），两种都覆盖，
   保证两页的横向留白一致。 */
body:has(.auth-full-page-content) .login_right .qrebg,
body:has(.auth-full-page-content) .login_right .qrebg > *,
body:has(.auth-full-page-content) .login_right .qregb > * {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* ---------- 大标题与"手机注册/手机找回"标签严格同左沿 ----------
   实测（桌面）：标题左沿 31、标签文字左沿 33 → 标题偏左 2px；
   移动端此前是标签被 31px 内边距推右（已随上一条修复消除）。
   标签文字的左沿 = 内容左沿 + 标签自身 2px 内边距，
   所以标题设 margin-left: 2px 即与标签文字严格对齐（桌面与移动端同一规则）。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: 2px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: 2px !important;
	}
}


/* ---------- 大标题左沿最终归零，与标签文字严格同沿 ----------
   实测：margin-left 设为 2px 时标题落到 35（标签文字 33），偏右 2px；
   设为 0 时标题 33 = 标签文字 33，完全同沿（桌面与移动端一致）。
   这是最后一次调整，三处（标题 / 标签文字 / 输入框）左沿统一为 33（移动端 19）。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: 0 !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: 0 !important;
	}
}


/* ==========================================================================
   密码找回 / 欢迎注册宇速云：标题最终左移 6px（本轮唯一生效的那条）
   --------------------------------------------------------------------------
   代码审查结论：这个标题元素上累计压了 18 条同名规则（历轮调整都是追加覆盖），
   生效的只有文件里最后一条。当前状态是 margin-left:0、左沿与标签文字一致（33/19）。
   按要求再左移一点：-6px → 左沿 27（桌面）/ 13（移动端），距卡片边框 5px，
   仍在卡片内、不会溢出。
   （注意：该标题的样式链建议后续合并成一条，见交付说明。） */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -6px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -6px !important;
	}
}


/* ==========================================================================
   标题左移改为"看得见的幅度"（-6px 太小，肉眼几乎无法分辨）
   --------------------------------------------------------------------------
   排查过程（避免误判为缓存问题）：
     · /pwreset、/register 输出的 ys-auth.css 版本号 = 1790099449，
       与磁盘文件修改时间一致 → 缓存没有挡住，样式确实是新的；
     · 计算值确认生效：标题左沿 27、标签/输入框左沿 33（差 6px）→ 规则生效，
       只是 6px 在 33px 内边距的衬托下难以察觉。
   现在：桌面 -16px（标题左沿 17，距卡片边框 15px）、移动端 -10px（左沿 9），
   标题会明显比"手机找回/手机注册"往左突出，肉眼可辨。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -16px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -10px !important;
	}
}


/* ==========================================================================
   标题左移到最大幅度（与卡片左边框齐平）
   --------------------------------------------------------------------------
   反馈"没效果"排查结论：样式已生效（计算值 margin-left:-16px、标题左沿 17、
   标签左沿 33），CSS 版本号也随文件时间更新 —— 6/16px 的位移在 460px 宽的卡片上
   仍不易察觉。这里直接给到上限：-32px（桌面，标题与卡片左边框齐平）、
   -18px（移动端）。要回退只改这两个数值即可。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -32px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -18px !important;
	}
}


/* ==========================================================================
   标题位置：PC 与移动端统一到同一偏移（都相对"手机找回/手机注册"左移 8px）
   --------------------------------------------------------------------------
   过程回顾：-32/-18 时两端都贴到了卡片左边框（实测 PC 1px、移动 1px），
   反馈"PC 偏右、移动端偏左"说明两端给你的感受不一致。
   现在两端用同一个相对偏移：margin-left: -8px →
     PC：标题左沿 25（标签 33）＝左移 8px，距卡片边框 7px
     移动：标题左沿 10（标签 19）＝左移 8px，距卡片边框 8px
   两端观感一致，且都不贴边、也不与标签同沿，肉眼可辨。 */
body:has(.auth-full-page-content) .login_right p.text-left {
	margin-left: -8px !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		margin-left: -8px !important;
	}
}


/* ==========================================================================
   【真正原因】标题文字被自身的 padding-left:50px 推右，所以"改了没效果"
   --------------------------------------------------------------------------
   用 Range 量文字墨迹位置才发现：元素盒子左沿 25，而**文字实际左沿 75** ——
   差值 50px 正是该元素计算值里的 padding-left:50px（主题给的）。
   之前所有 margin-left 调整移的都是盒子，文字在盒子里始终被内边距顶住，
   所以肉眼几乎看不到变化（这也是我历轮"验证通过"却没效果的原因）。
   处理：内边距归零 + 外边距归零 → 文字与"手机找回/手机注册"文字严格同沿。
   （若想要的不是同沿而是左移，改 margin-left 即可，这次会真正生效。） */
body:has(.auth-full-page-content) .login_right p.text-left {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

@media (max-width: 991.98px) {
	body:has(.auth-full-page-content) .login_right p.text-left {
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
}