/* ==========================================================================
   Nansai 会员中心主题 · 浅色玻璃拟态 / 科技蓝青
   加载顺序：bootstrap(CDN) → icons → app.min → global → responsive → 本文件
   ========================================================================== */

:root {
	--ns-primary: #2563eb;
	--ns-primary-strong: #1d4ed8;
	--ns-primary-soft: #dbeafe;
	--ns-cyan: #06b6d4;
	--ns-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	--ns-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, .10) 0%, rgba(6, 182, 212, .10) 100%);

	--ns-ink: #0f172a;
	--ns-body: #475569;
	--ns-muted: #94a3b8;
	--ns-line: rgba(15, 23, 42, .07);
	--ns-line-strong: rgba(15, 23, 42, .12);

	--ns-glass: rgba(255, 255, 255, .74);
	--ns-glass-strong: rgba(255, 255, 255, .88);
	--ns-glass-border: rgba(255, 255, 255, .65);
	--ns-blur: blur(20px) saturate(170%);

	--ns-radius-lg: 22px;
	--ns-radius: 16px;
	--ns-radius-sm: 11px;

	--ns-shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
	--ns-shadow: 0 10px 30px rgba(15, 23, 42, .07);
	--ns-shadow-lg: 0 22px 48px rgba(15, 23, 42, .11);
	--ns-shadow-accent: 0 10px 24px rgba(37, 99, 235, .24);

	--ns-topbar: 70px;
	--ns-sidebar: 250px;
	--ns-ease: cubic-bezier(.4, 0, .2, 1);
	--ns-success: #10b981;
	--ns-warning: #f59e0b;
	--ns-danger: #ef4444;
	--ns-info: #06b6d4;
}

/* ==========================================================================
   1. 基座与背景
   ========================================================================== */

body.ns-light {
	background: #eef2f9;
	color: var(--ns-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif !important;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ns-aurora {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.ns-aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(120px);
	opacity: .26;
	will-change: transform;
	animation: ns-drift 24s var(--ns-ease) infinite alternate;
}

.ns-aurora span:nth-child(1) {
	width: 520px;
	height: 520px;
	top: -180px;
	left: -120px;
	background: #93c5fd;
}

.ns-aurora span:nth-child(2) {
	width: 460px;
	height: 460px;
	top: 30%;
	right: -180px;
	background: #67e8f9;
	animation-delay: -8s;
}

.ns-aurora span:nth-child(3) {
	width: 400px;
	height: 400px;
	bottom: -160px;
	left: 32%;
	background: #c7d2fe;
	animation-delay: -16s;
}

@keyframes ns-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(48px, 36px, 0) scale(1.14);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ns-ink);
	font-weight: 600;
}

a {
	color: var(--ns-primary);
	transition: color .2s var(--ns-ease);
}

a:hover,
a:focus {
	color: var(--ns-primary-strong);
	text-decoration: none;
}

code,
.ns-code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

::selection {
	background: rgba(37, 99, 235, .16);
	color: var(--ns-ink);
}

.main-content {
	position: relative;
	z-index: 1;
	transition: margin-left .3s var(--ns-ease);
}

/* 滚动条 */
.ns-light ::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

.ns-light ::-webkit-scrollbar-track {
	background: transparent;
}

.ns-light ::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, .28);
	border-radius: 99px;
	border: 2px solid transparent;
	background-clip: content-box;
}

.ns-light ::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, .48);
	background-clip: content-box;
}

/* 顶部读条 */
.ns-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 1100;
	background: var(--ns-gradient);
	box-shadow: 0 0 12px rgba(37, 99, 235, .6);
	opacity: 0;
	transition: width .2s var(--ns-ease), opacity .3s var(--ns-ease);
}

.ns-progress.is-on {
	opacity: 1;
}

/* ==========================================================================
   2. 顶栏
   ========================================================================== */

#page-topbar {
	background: rgba(255, 255, 255, .78) !important;
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	border-bottom: 1px solid var(--ns-line);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 22px rgba(15, 23, 42, .04) !important;
	transition: box-shadow .3s var(--ns-ease), background .3s var(--ns-ease);
}

body.ns-scrolled #page-topbar {
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
}

.navbar-brand-box {
	background: transparent !important;
	border-right: 1px solid var(--ns-line);
	transition: width .3s var(--ns-ease);
}

.navbar-brand-box .logo {
	transition: opacity .2s var(--ns-ease);
}

.navbar-brand-box .logo:hover {
	opacity: .78;
}

.ns-menu-btn {
	color: #64748b !important;
	border-radius: 12px !important;
	width: 40px;
	height: 40px !important;
	margin-left: 12px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s var(--ns-ease), color .2s var(--ns-ease) !important;
}

.ns-menu-btn i {
	font-size: 21px;
	line-height: 1;
}

.ns-menu-btn:hover {
	background: rgba(37, 99, 235, .08) !important;
	color: var(--ns-primary) !important;
}

.ns-topbar-crumb {
	align-items: center;
	margin-left: 6px;
	padding-left: 18px;
	border-left: 1px solid var(--ns-line);
}

.ns-topbar-crumb .breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 13px;
}

.ns-topbar-crumb .breadcrumb-item + .breadcrumb-item::before {
	content: "\F0142";
	font-family: "Material Design Icons";
	color: #cbd5e1;
	padding-right: 8px;
	font-size: 13px;
}

.ns-topbar-crumb .breadcrumb-item a {
	color: var(--ns-muted);
}

.ns-topbar-crumb .breadcrumb-item.active {
	color: var(--ns-ink);
	font-weight: 500;
}

/* app.min.css 的 .header-item{height:70px} 会让按钮撑满栏高，
   而 .btn 是 inline-block、图标默认顶对齐，必须显式 flex 居中 */
#page-topbar .header-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background: transparent;
}

.ns-icon-btn {
	width: 40px;
	padding: 0 !important;
	color: #64748b !important;
	border-radius: 12px !important;
	transition: background .2s var(--ns-ease), color .2s var(--ns-ease) !important;
}

.ns-icon-btn:hover {
	background: rgba(37, 99, 235, .08) !important;
	color: var(--ns-primary) !important;
}

.ns-icon-btn i {
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

.ns-icon-btn img {
	display: block;
}

/* 角标必须放在按钮外层：waves-effect 自带 overflow:hidden，
   放进按钮里白色描边和投影会被切掉 */
.ns-icon-wrap {
	position: relative;
}

/* d-lg-inline-block 带 !important，同样只在 >=992px 覆盖，
   保证外层盒子与按钮盒子完全重合，角标定位才有基准 */
@media (min-width:992px) {
	#page-topbar .ns-icon-wrap {
		display: flex !important;
		align-items: center;
		height: 40px;
	}
}

.ns-badge {
	position: absolute;
	top: -3px;
	right: -5px;
	z-index: 3;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ns-danger) !important;
	color: #fff !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	border: 2px solid #fff;
	border-radius: 99px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
	pointer-events: none;
}

.ns-avatar {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	border-radius: 10px;
	background: var(--ns-gradient);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: -.5px;
	box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
	overflow: hidden;
	white-space: nowrap;
}

.ns-user-btn {
	border-radius: 13px !important;
	padding: 0 8px 0 4px !important;
	width: auto !important;
	height: 40px !important;
	border: 1px solid var(--ns-line) !important;
	background: rgba(255, 255, 255, .55) !important;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease) !important;
}

.ns-user-btn:hover {
	border-color: rgba(37, 99, 235, .3) !important;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .07) !important;
}

.ns-user-name {
	color: var(--ns-ink);
	font-size: 13px;
	font-weight: 600;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-user-caret {
	font-size: 15px;
	color: var(--ns-muted);
	margin-left: 2px;
}

.ns-login-btn {
	border-radius: 11px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	background: var(--ns-gradient) !important;
	border: none !important;
	box-shadow: var(--ns-shadow-accent);
}

/* 下拉面板：浮在内容之上，底色必须完全不透明，否则会透出下方卡片 */
.ns-dropdown {
	border: 1px solid var(--ns-line) !important;
	border-radius: var(--ns-radius) !important;
	background: #fff !important;
	box-shadow: var(--ns-shadow-lg) !important;
	padding: 8px !important;
	margin-top: 10px !important;
	transform-origin: top left;
	animation: ns-pop .18s var(--ns-ease);
}

.dropdown-menu-right.ns-dropdown {
	transform-origin: top right;
}

/* Popper 用内联 transform 定位，keyframes 里再写 transform 会在动画期间
   把定位整个覆盖掉；改用独立的 translate/scale 属性与之叠加 */
@keyframes ns-pop {
	from {
		opacity: 0;
		translate: 0 -6px;
		scale: .98;
	}

	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

.ns-dropdown .dropdown-item {
	border-radius: var(--ns-radius-sm);
	color: var(--ns-body);
	font-size: 13px;
	padding: 9px 12px !important;
	display: flex;
	align-items: center;
	transition: background .16s var(--ns-ease), color .16s var(--ns-ease);
}

.ns-dropdown .dropdown-item i {
	font-size: 17px;
	width: 22px;
	color: var(--ns-muted);
	transition: color .16s var(--ns-ease);
}

.ns-dropdown .dropdown-item:hover,
.ns-dropdown .dropdown-item:focus {
	background: rgba(37, 99, 235, .08);
	color: var(--ns-ink);
}

.ns-dropdown .dropdown-item:hover i {
	color: var(--ns-primary);
}

.ns-dropdown .dropdown-item.ns-danger {
	color: var(--ns-danger);
}

.ns-dropdown .dropdown-item.ns-danger i {
	color: var(--ns-danger);
}

.ns-dropdown .dropdown-item.ns-danger:hover {
	background: rgba(239, 68, 68, .08);
}

.ns-dropdown .dropdown-divider {
	border-top: 1px solid var(--ns-line);
	margin: 6px 4px;
}

.ns-dropdown-head {
	padding: 12px 12px 14px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ns-line);
}

.ns-dropdown-head-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ns-ink);
	word-break: break-all;
}

.ns-dropdown-head-id {
	font-size: 12px;
	color: var(--ns-muted);
	margin-top: 3px;
	font-variant-numeric: tabular-nums;
}

/* 顶栏知识库搜索 */
.ns-search-panel {
	width: 328px;
	padding: 12px !important;
}

.ns-search-panel .input-group {
	align-items: stretch;
}

.ns-search-panel .form-control {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.ns-search-panel .input-group-append .btn {
	margin-left: -1px;
	border: 1px solid var(--ns-primary);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: var(--ns-gradient);
	color: #fff;
	padding-left: 14px;
	padding-right: 14px;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: filter .2s var(--ns-ease), box-shadow .2s var(--ns-ease);
}

.ns-search-panel .input-group-append .btn:hover {
	filter: brightness(1.06) saturate(110%);
}

.ns-search-panel .input-group-append .btn:focus {
	box-shadow: none;
	outline: none;
}

.ns-search-tip {
	margin-top: 9px;
	padding: 0 2px;
	font-size: 11.5px;
	color: var(--ns-muted);
}

/* ==========================================================================
   3. 侧边栏
   ========================================================================== */

.vertical-menu.ns-sidebar {
	background: rgba(255, 255, 255, .68) !important;
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	border-right: 1px solid var(--ns-line);
	box-shadow: none !important;
	flex-direction: column;
	transition: width .3s var(--ns-ease), box-shadow .3s var(--ns-ease);
}

/* app.min.css 在 ≤992px 用 .vertical-menu{display:none}（0,1,0）收起侧栏，
   这里必须同档声明，否则本选择器 (0,2,0) 会让抽屉常驻遮挡内容 */
@media (min-width: 993px) {
	.vertical-menu.ns-sidebar {
		display: flex;
	}
}

@media (max-width: 992px) {
	.vertical-menu.ns-sidebar {
		display: none;
	}
}

.ns-sidebar [data-simplebar] {
	height: auto !important;
	flex: 1 1 auto;
	min-height: 0;
}

#sidebar-menu {
	padding: 14px 0 26px 0;
}

#sidebar-menu ul li a {
	color: #556275;
	padding: .68rem 1.2rem .68rem 1.35rem;
	font-size: 13.5px;
	font-weight: 500;
	border-radius: 12px;
	margin: 2px 12px;
	position: relative;
	transition: color .25s var(--ns-ease), background .25s var(--ns-ease);
}

#sidebar-menu ul li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 0 3px 3px 0;
	background: var(--ns-gradient);
	transform: translateY(-50%);
	transition: height .28s var(--ns-ease);
}

#sidebar-menu ul li a i {
	color: #8d99ab;
	font-size: 1.2rem;
	min-width: 1.6rem;
	transition: color .25s var(--ns-ease), transform .25s var(--ns-ease);
}

#sidebar-menu ul li a:hover {
	color: var(--ns-ink);
	background: rgba(37, 99, 235, .07);
}

#sidebar-menu ul li a:hover i {
	color: var(--ns-primary);
	transform: translateX(1px);
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover span {
	color: var(--ns-primary);
}

#sidebar-menu .has-arrow::after {
	float: none;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: 0;
	line-height: 1;
	font-size: .82rem;
	color: #a8b3c3;
	transform: translateY(-50%);
	transition: transform .25s var(--ns-ease), color .25s var(--ns-ease);
}

#sidebar-menu .mm-active>.has-arrow::after {
	transform: translateY(-50%) rotate(-180deg);
}

/* 二级：主流控制台做法 —— 纯缩进 + 圆角行块，不画连接线/圆点 */
#sidebar-menu ul li ul.sub-menu {
	position: relative;
	padding: 2px 0 4px;
	margin: 0 12px 4px;
	border-left: none;
	overflow: hidden;
}

#sidebar-menu ul li ul.sub-menu>li {
	position: relative;
}

#sidebar-menu ul li ul.sub-menu>li>a {
	padding: 7px 14px 7px 46px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: #64748b;
	margin: 1px 0;
	border-radius: 9px;
	background: transparent;
}

/* 一级带图标、二级起纯文字，缩进即层级 */
#sidebar-menu ul li ul.sub-menu>li>a i {
	display: none;
}

#sidebar-menu ul li ul.sub-menu>li>a::before {
	content: none;
}

#sidebar-menu ul li ul.sub-menu>li>a:hover {
	background: rgba(15, 23, 42, .045);
	color: var(--ns-ink);
}

/* 三级：整块再右移一档，字号字色再降一级 */
#sidebar-menu ul li ul.sub-menu li ul.sub-menu {
	margin: 0 0 2px 20px;
	padding: 0;
}

#sidebar-menu ul li ul.sub-menu li ul.sub-menu>li>a {
	padding: 7px 14px 7px 46px;
	font-size: 12.5px;
	color: #7c8798;
}

/* 子项选中：浅蓝底 + 主色文字，只认 app.js 打的 a.active */
#sidebar-menu ul li ul.sub-menu li>a.active {
	font-weight: 600;
	color: var(--ns-primary) !important;
	background: rgba(37, 99, 235, .1) !important;
}

#sidebar-menu ul li ul.sub-menu li>a.active i {
	color: var(--ns-primary) !important;
}

#sidebar-menu ul li ul.sub-menu li>a.active:hover {
	background: rgba(37, 99, 235, .1) !important;
}

#sidebar-menu ul li .badge {
	margin-top: 3px;
	background: var(--ns-gradient) !important;
	color: #fff !important;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 99px;
}

/* app.min.css 用 !important 把 .mm-active 全家钉成 #6064ff。
   这里只接管「字色」，选中底色改由 a.active 决定 —— metismenu 会给所有
   展开的父级 li 加 mm-active，用它做选中态会让每个展开分组都像当前页。 */
#sidebar-menu ul li.mm-active>a,
#sidebar-menu ul li.mm-active>a i,
#sidebar-menu ul li.mm-active>i {
	color: var(--ns-primary) !important;
}

/* 当前页：app.js 会给命中的 <a> 加 .active。底色只给行，不给图标，
   否则图标方块会在行高亮里再套一块，看着像蒙了层遮罩 */
#sidebar-menu ul li>a.active {
	color: var(--ns-primary) !important;
	background: var(--ns-gradient-soft);
	font-weight: 600;
}

#sidebar-menu ul li>a.active i {
	color: var(--ns-primary) !important;
}

#sidebar-menu ul li>a.active::before {
	height: 56%;
}

#sidebar-menu ul li>a.active:hover {
	background: var(--ns-gradient-soft);
}

#sidebar-menu ul li.open>a {
	color: var(--ns-ink);
}

#sidebar-menu ul li.open>a i {
	color: var(--ns-primary);
}

#sidebar-menu ul li.open>a.has-arrow::after {
	color: var(--ns-primary);
}

.ns-sidebar-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--ns-line);
	padding: 12px 16px;
	background: rgba(255, 255, 255, .35);
}

.ns-sidebar-foot-inner {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	color: var(--ns-muted);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ns-sidebar-foot-inner i {
	font-size: 15px;
	color: var(--ns-success);
	flex: 0 0 auto;
}

/* 移动端抽屉 */
.ns-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(15, 23, 42, .38);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ns-ease), visibility .3s var(--ns-ease);
}

body.sidebar-enable .ns-backdrop {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 993px) {
	.ns-backdrop {
		display: none;
	}
}

/* 折叠态 */
body.vertical-collpsed .vertical-menu.ns-sidebar {
	background: rgba(255, 255, 255, .82) !important;
}

body.vertical-collpsed .ns-sidebar-foot {
	display: none;
}

body.vertical-collpsed #sidebar-menu {
	padding-top: 14px;
}

body.vertical-collpsed #sidebar-menu ul li a {
	margin: 0;
	border-radius: 0;
	padding: 15px 20px !important;
}

body.vertical-collpsed #sidebar-menu ul li a::before {
	display: none;
}

body.vertical-collpsed #sidebar-menu ul li.mm-active:not(.open)>a {
	background: transparent;
}

body.vertical-collpsed #sidebar-menu ul li ul.sub-menu {
	margin: 0;
	border-left: none;
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
	border-radius: 0 14px 14px 0;
	padding: 6px 0;
}

body.vertical-collpsed #sidebar-menu ul li ul.sub-menu li a {
	border-radius: 0;
	padding: .5rem 1rem .5rem 1.4rem !important;
}

/* 移动端抽屉呈现 */
@media (max-width: 992px) {
	body.sidebar-enable .vertical-menu.ns-sidebar {
		display: flex !important;
		z-index: 1001;
		box-shadow: 22px 0 48px rgba(15, 23, 42, .16) !important;
		background: rgba(255, 255, 255, .94) !important;
		animation: ns-slide-in .28s var(--ns-ease);
	}
}

@keyframes ns-slide-in {
	from {
		transform: translateX(-14px);
		opacity: .4;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

/* ==========================================================================
   4. 页头 / 主体留白 / 页脚
   ========================================================================== */

.ns-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 22px;
	margin: 0 0 18px 0;
	border-radius: var(--ns-radius);
	background: var(--ns-glass);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ns-pagehead-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ns-back {
	display: none;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	color: var(--ns-muted);
	background: rgba(148, 163, 184, .12);
	transition: all .2s var(--ns-ease);
}

.ns-back.is-on {
	display: inline-flex;
}

.ns-back:hover {
	color: #fff;
	background: var(--ns-gradient);
	box-shadow: var(--ns-shadow-accent);
}

.ns-back i {
	font-size: 20px;
	line-height: 1;
}

.ns-pagehead-title h1 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ns-ink);
	text-transform: none;
	line-height: 1.35;
	word-break: break-word;
}

.ns-pagehead-id {
	font-size: 13px;
	font-weight: 500;
	color: var(--ns-muted);
	font-variant-numeric: tabular-nums;
}

.ns-pagehead-right .breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 12.5px;
}

.ns-pagehead-right .breadcrumb-item + .breadcrumb-item::before {
	content: "\F0142";
	font-family: "Material Design Icons";
	color: #cbd5e1;
	font-size: 13px;
	padding-right: 7px;
}

.ns-pagehead-right .breadcrumb-item a {
	color: var(--ns-muted);
}

.ns-pagehead-right .breadcrumb-item.active {
	color: var(--ns-body);
}

@media (max-width: 767.98px) {
	.ns-pagehead {
		padding: 14px 16px;
		margin-bottom: 14px;
	}

	.ns-pagehead-title h1 {
		font-size: 17px;
	}

	.ns-pagehead-right {
		display: none;
	}
}

.ns-footer {
	background: transparent !important;
	color: var(--ns-muted) !important;
	border-top: 1px solid var(--ns-line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.ns-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ns-footer-copy {
	font-size: 12.5px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.ns-footer-copy a {
	color: var(--ns-muted);
}

.ns-footer-copy a:hover {
	color: var(--ns-primary);
}

.ns-footer-sep {
	width: 1px;
	height: 11px;
	background: var(--ns-line-strong);
	margin: 0 10px;
	display: inline-block;
}

.ns-backtop {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--ns-muted);
	cursor: pointer;
	transition: color .2s var(--ns-ease);
}

.ns-backtop:hover {
	color: var(--ns-primary);
}

.ns-backtop i {
	font-size: 15px;
}

/* ==========================================================================
   5. 控制台首页：Hero / KPI / 面板
   ========================================================================== */

.ns-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	padding: 28px 30px;
	margin-bottom: 18px;
	border-radius: var(--ns-radius-lg);
	background: var(--ns-glass-strong);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ns-hero::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--ns-gradient);
}

.ns-hero::after {
	content: "";
	position: absolute;
	right: -90px;
	top: -110px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--ns-gradient-soft);
	filter: blur(6px);
	pointer-events: none;
}

.ns-hero-main {
	position: relative;
	z-index: 1;
	flex: 1 1 380px;
	min-width: 0;
}

.ns-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ns-primary);
	background: rgba(37, 99, 235, .09);
	padding: 5px 11px;
	border-radius: 99px;
}

.ns-hero-eyebrow i {
	font-size: 13px;
}

.ns-hero-title {
	margin: 14px 0 12px;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ns-ink);
	word-break: break-word;
}

.ns-hero-title em {
	font-style: normal;
	background: var(--ns-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	word-break: break-all;
}

.ns-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.ns-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ns-body);
	background: rgba(148, 163, 184, .13);
	border: 1px solid transparent;
	padding: 4px 11px;
	border-radius: 99px;
	transition: all .2s var(--ns-ease);
	white-space: nowrap;
}

.ns-chip i {
	font-size: 13px;
}

.ns-chip-ok {
	color: #047857;
	background: rgba(16, 185, 129, .12);
}

.ns-chip-warn {
	color: #b45309;
	background: rgba(245, 158, 11, .14);
}

.ns-chip-mute {
	color: var(--ns-muted);
	border-style: dashed;
	border-color: rgba(148, 163, 184, .4);
	background: transparent;
}

a.ns-chip:hover {
	border-color: rgba(37, 99, 235, .35);
	color: var(--ns-primary);
	background: rgba(37, 99, 235, .07);
}

.ns-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ns-hero-side {
	position: relative;
	z-index: 1;
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* 余额 */
.ns-balance {
	width: 100%;
	padding: 16px 18px;
	border-radius: var(--ns-radius);
	background: var(--ns-gradient-soft);
	border: 1px solid var(--ns-line);
	text-align: center;
}

.ns-balance-label {
	font-size: 11.5px;
	color: var(--ns-muted);
	margin-bottom: 5px;
}

.ns-balance-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--ns-ink);
	letter-spacing: -.025em;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

.ns-side-sub {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--ns-line);
}

.ns-side-sub-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--ns-muted);
}

.ns-side-sub-item b {
	margin-left: auto;
	color: var(--ns-body);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ns-dot {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	display: inline-block;
}

.ns-dot-cyan {
	background: var(--ns-cyan);
	box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}

.ns-dot-amber {
	background: var(--ns-warning);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

/* KPI */
.ns-kpi-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.ns-kpi {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px;
	border-radius: var(--ns-radius);
	background: var(--ns-glass);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
	overflow: hidden;
	transition: transform .28s var(--ns-ease), box-shadow .28s var(--ns-ease), border-color .28s var(--ns-ease);
	color: var(--ns-body);
}

.ns-kpi:hover {
	transform: translateY(-3px);
	box-shadow: var(--ns-shadow-lg);
	border-color: rgba(37, 99, 235, .22);
	color: var(--ns-body);
}

.ns-kpi:hover .ns-kpi-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--ns-primary);
}

.ns-kpi-icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	position: relative;
}

.ns-kpi-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.ns-tone-blue {
	background: linear-gradient(135deg, #2563eb, #4f8cff);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .3);
}

.ns-tone-cyan {
	background: linear-gradient(135deg, #06b6d4, #34d399);
	box-shadow: 0 8px 18px rgba(6, 182, 212, .28);
}

.ns-tone-amber {
	background: linear-gradient(135deg, #f59e0b, #fbbf24);
	box-shadow: 0 8px 18px rgba(245, 158, 11, .28);
}

.ns-tone-violet {
	background: linear-gradient(135deg, #6366f1, #a78bfa);
	box-shadow: 0 8px 18px rgba(99, 102, 241, .28);
}

.ns-kpi-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ns-kpi-label {
	font-size: 12px;
	color: var(--ns-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ns-kpi-value {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ns-ink);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

.ns-kpi-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	margin-top: -10px;
	font-size: 20px;
	color: #cbd5e1;
	opacity: 0;
	transform: translateX(-5px);
	transition: all .28s var(--ns-ease);
}

/* 面板 */
.ns-panel {
	position: relative;
	border-radius: var(--ns-radius);
	background: var(--ns-glass);
	border: 1px solid var(--ns-glass-border);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
	padding: 0 0 4px 0;
	margin-bottom: 18px;
	overflow: hidden;
}

.ns-panel-fill {
	min-height: 420px;
}

.ns-panel-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	color: var(--ns-muted);
	font-size: 13px;
	animation: ns-pulse 1.6s ease-in-out infinite;
}

@keyframes ns-pulse {

	0%,
	100% {
		opacity: .45;
	}

	50% {
		opacity: 1;
	}
}

.ns-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--ns-line);
}

.ns-panel-title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ns-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ns-panel-title i {
	font-size: 18px;
	color: var(--ns-primary);
}

.ns-panel-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12.5px;
	color: var(--ns-muted);
	transition: color .2s var(--ns-ease), gap .2s var(--ns-ease);
	white-space: nowrap;
}

.ns-panel-more i {
	font-size: 15px;
}

.ns-panel-more:hover {
	color: var(--ns-primary);
	gap: 5px;
}

/* 产品入口 */
.ns-prod-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 14px 16px 16px;
}

.ns-prod-cell {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 13px;
	border-radius: var(--ns-radius-sm);
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--ns-line);
	transition: all .24s var(--ns-ease);
	min-width: 0;
}

.ns-prod-cell:hover {
	border-color: rgba(37, 99, 235, .28);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.ns-prod-cell-icon {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ns-gradient-soft);
	color: var(--ns-primary);
	font-size: 15px;
}

.ns-prod-cell-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ns-body);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-prod-cell-num {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--ns-ink);
	font-variant-numeric: tabular-nums;
}

.ns-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 40px 20px;
	text-align: center;
}

.ns-empty i {
	font-size: 40px;
	color: #cbd5e1;
	margin-bottom: 6px;
}

.ns-empty p {
	margin: 0;
	font-size: 13px;
	color: var(--ns-muted);
}

.ns-empty .ns-empty-title {
	font-size: 14px;
	color: var(--ns-body);
	font-weight: 500;
}

.ns-empty .ns-empty-tip {
	font-size: 12px;
}

.ns-empty .btn {
	margin-top: 14px;
}

/* ==========================================================================
   6. 资源列表表格
   ========================================================================== */

.ns-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ns-table {
	margin: 0;
	width: 100%;
	min-width: 640px;
	color: var(--ns-body);
	background: transparent;
}

.ns-table thead th {
	color: var(--ns-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: none;
	border-bottom: 1px solid var(--ns-line);
	padding: 11px 16px;
	white-space: nowrap;
}

.ns-table thead th:first-child {
	padding-left: 20px;
}

.ns-table thead th:last-child {
	padding-right: 20px;
}

.ns-th-inner {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ns-sortable {
	cursor: pointer;
	user-select: none;
	transition: color .2s var(--ns-ease);
}

.ns-sortable:hover {
	color: var(--ns-primary);
}

.ns-sort-caret {
	display: inline-flex;
	flex-direction: column;
	line-height: 0;
	color: rgba(148, 163, 184, .55);
}

.ns-sort-caret i {
	font-size: 11px;
	height: 9px;
	line-height: 9px;
	transition: color .2s var(--ns-ease);
}

.ns-sortable:hover .ns-sort-caret {
	color: rgba(148, 163, 184, .9);
}

.ns-sortable.ns-sort-asc .ns-sort-caret i:first-child,
.ns-sortable.ns-sort-desc .ns-sort-caret i:last-child {
	color: var(--ns-primary);
}

.ns-table tbody td {
	border: none;
	border-bottom: 1px solid var(--ns-line);
	padding: 13px 16px;
	font-size: 13px;
	vertical-align: middle;
	background: transparent;
}

.ns-table tbody td:first-child {
	padding-left: 20px;
}

.ns-table tbody td:last-child {
	padding-right: 20px;
}

.ns-table tbody tr {
	transition: background .18s var(--ns-ease);
}

.ns-table tbody tr:hover {
	background: rgba(37, 99, 235, .045);
}

.ns-table tbody tr:last-child td {
	border-bottom: none;
}

.ns-cell-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--ns-ink);
}

.ns-cell-main:hover {
	color: var(--ns-primary);
}

.ns-cell-title {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 300px;
}

.ns-cell-sub {
	font-size: 11.5px;
	color: var(--ns-muted);
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 300px;
}

.ns-cell-mono {
	font-size: 12.5px;
	color: var(--ns-body);
	font-variant-numeric: tabular-nums;
}

.ns-cell-mute {
	color: var(--ns-muted);
	font-size: 12.5px;
}

.ns-code {
	display: inline-block;
	font-size: 12px;
	color: var(--ns-body);
	background: rgba(148, 163, 184, .14);
	border-radius: 7px;
	padding: 2px 7px;
	word-break: break-all;
}

.ns-table-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 20px 14px;
	border-top: 1px solid var(--ns-line);
	background: rgba(248, 250, 252, .5);
}

.ns-pageinfo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--ns-muted);
}

.ns-pageinfo b {
	color: var(--ns-body);
	font-weight: 600;
}

.ns-pageinfo-sep {
	width: 1px;
	height: 12px;
	background: var(--ns-line-strong);
}

/* 单选下拉的兜底样式：JS 组件（ns-sel）接管后这里主要覆盖 multiple 列表框、
   input-group 内的 select 与脚本未执行的情况 */
.ns-light select:not([multiple]):not([size]),
.ns-auth select:not([multiple]):not([size]),
select.ns-select-sm:not([multiple]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 13px 13px;
	padding-right: 32px;
	cursor: pointer;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease), background-color .2s var(--ns-ease);
}

.ns-light select:not([multiple]):not([size]):hover,
select.ns-select-sm:not([multiple]):hover {
	border-color: rgba(37, 99, 235, .42);
	background-color: #fff;
}

.ns-light select:not([multiple]):not([size]):focus,
select.ns-select-sm:not([multiple]):focus {
	outline: none;
	border-color: var(--ns-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
	background-color: #fff;
}

.ns-light select option,
.ns-light select optgroup,
.ns-auth select option {
	background: #fff;
	color: var(--ns-ink);
	font-weight: 400;
}

.ns-light select option:checked,
select.ns-select-sm option:checked {
	background: rgba(37, 99, 235, .1) !important;
	color: var(--ns-primary);
	font-weight: 600;
}

.ns-select-sm:not([multiple]) {
	background-position: right 7px center;
	background-size: 11px 11px;
	padding-right: 24px;
}

.ns-select-sm {
	border: 1px solid var(--ns-line-strong);
	border-radius: 8px;
	background-color: #fff;
	color: var(--ns-body);
	font-size: 12.5px;
	padding: 2px 24px 2px 7px;
	height: 28px;
	outline: none;
	transition: border-color .2s var(--ns-ease);
}

.ns-select-sm:focus {
	border-color: var(--ns-primary);
}

/* ==========================================================================
   7. 通用控件
   ========================================================================== */

.ns-btn-glow {
	background: var(--ns-gradient) !important;
	border: none !important;
	border-radius: var(--ns-radius-sm) !important;
	padding: 10px 20px !important;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff !important;
	box-shadow: var(--ns-shadow-accent) !important;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: transform .22s var(--ns-ease), box-shadow .22s var(--ns-ease), filter .22s var(--ns-ease) !important;
}

.ns-btn-glow:hover,
.ns-btn-glow:focus {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(37, 99, 235, .36) !important;
	filter: saturate(115%);
	color: #fff !important;
}

.ns-btn-ghost {
	background: rgba(255, 255, 255, .6) !important;
	border: 1px solid rgba(37, 99, 235, .22) !important;
	border-radius: var(--ns-radius-sm) !important;
	padding: 10px 18px !important;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ns-primary) !important;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: all .22s var(--ns-ease) !important;
}

.ns-btn-ghost:hover {
	background: #fff !important;
	border-color: rgba(37, 99, 235, .42) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .14) !important;
}

.ns-btn-quiet {
	background: transparent !important;
	border: 1px solid var(--ns-line-strong) !important;
	border-radius: var(--ns-radius-sm) !important;
	color: var(--ns-body) !important;
	font-weight: 500;
}

.ns-btn-quiet:hover {
	background: rgba(148, 163, 184, .1) !important;
	color: var(--ns-ink) !important;
}

.ns-link {
	font-size: 12.5px;
	color: var(--ns-primary);
	transition: color .2s var(--ns-ease);
}

.ns-link:hover {
	color: var(--ns-primary-strong);
}

.ns-link-strong {
	font-weight: 600;
	color: var(--ns-primary);
}

.ns-link-strong:hover {
	color: var(--ns-primary-strong);
}

.ns-label {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ns-body);
}

.ns-auth-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	min-height: 20px;
}

/* 自定义下拉：原生 select 只承担取值，视觉与交互由 ns-sel 组件接管 */
.ns-sel {
	position: relative;
	min-width: 64px;
}

.ns-sel-inline {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

.ns-sel-block {
	display: block;
	width: 100%;
}

.ns-sel > select {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	appearance: none;
	-webkit-appearance: none;
}

.ns-sel-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	margin: 0;
	padding: .53rem 32px .53rem .85rem;
	border: 1px solid rgba(148, 163, 184, .35);
	border-radius: var(--ns-radius-sm);
	background: rgba(255, 255, 255, .82);
	color: var(--ns-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	user-select: none;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease), background .2s var(--ns-ease);
}

.ns-sel-btn:hover {
	border-color: rgba(37, 99, 235, .42);
	background: #fff;
}

.ns-sel-btn:focus,
.ns-sel.is-open .ns-sel-btn {
	outline: none;
	border-color: var(--ns-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

.ns-sel-txt {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-sel.is-placeholder .ns-sel-txt {
	color: #a9b4c4;
}

.ns-sel-caret {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -8px;
	font-size: 16px;
	line-height: 16px;
	color: var(--ns-muted);
	pointer-events: none;
	transition: transform .2s var(--ns-ease), color .2s var(--ns-ease);
}

.ns-sel.is-open .ns-sel-caret {
	transform: rotate(180deg);
	color: var(--ns-primary);
}

.ns-sel-btn[disabled] {
	background: rgba(241, 245, 252, .85);
	color: var(--ns-muted);
	cursor: not-allowed;
	border-color: rgba(148, 163, 184, .28);
}

.ns-sel-btn[disabled]:hover {
	border-color: rgba(148, 163, 184, .28);
	background: rgba(241, 245, 252, .85);
}

form.was-validated .ns-sel > select:invalid ~ .ns-sel-btn,
.ns-sel > select.parsley-error ~ .ns-sel-btn {
	border-color: rgba(239, 68, 68, .55);
	background: rgba(239, 68, 68, .04);
}

.ns-sel-sm {
	min-width: 52px;
}

.ns-sel-sm .ns-sel-btn {
	min-height: 28px;
	padding: 1px 22px 1px 8px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 20px;
}

.ns-sel-sm .ns-sel-caret {
	right: 5px;
	font-size: 13px;
	margin-top: -7px;
	line-height: 14px;
}

.ns-light .ns-sel-panel {
	position: fixed;
	z-index: 2000;
	display: none;
	max-height: 268px;
	min-width: 128px;
	max-width: 420px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius-sm);
	background: #fff;
	box-shadow: var(--ns-shadow-lg);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform-origin: top left;
	animation: ns-pop .16s var(--ns-ease);
}

.ns-light .ns-sel-panel.is-on {
	display: block;
}

.ns-light .ns-sel-panel.is-up {
	transform-origin: bottom left;
}

.ns-light .ns-sel-group {
	padding: 8px 10px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ns-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ns-light .ns-sel-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ns-body);
	cursor: pointer;
	user-select: none;
	transition: background .14s var(--ns-ease), color .14s var(--ns-ease);
}

.ns-light .ns-sel-opt:hover,
.ns-light .ns-sel-opt.is-active {
	background: rgba(37, 99, 235, .07);
	color: var(--ns-ink);
}

.ns-light .ns-sel-opt.is-sel {
	background: rgba(37, 99, 235, .1);
	color: var(--ns-primary);
	font-weight: 600;
}

.ns-light .ns-sel-opt.is-sel:hover,
.ns-light .ns-sel-opt.is-sel.is-active {
	background: rgba(37, 99, 235, .15);
	color: var(--ns-primary-strong);
}

.ns-light .ns-sel-opt-txt {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ns-light .ns-sel-tick {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 15px;
	color: var(--ns-primary);
	opacity: 0;
	transition: opacity .14s var(--ns-ease);
}

.ns-light .ns-sel-opt.is-sel .ns-sel-tick {
	opacity: 1;
}

.ns-light .ns-sel-opt.is-disabled {
	background: none;
	color: var(--ns-muted);
	cursor: not-allowed;
}

.ns-light .ns-sel-empty {
	padding: 14px 10px;
	font-size: 12.5px;
	text-align: center;
	color: var(--ns-muted);
}

/* ==========================================================================
   8. 登录 / 注册 / 找回密码
   ========================================================================== */

.ns-auth {
	position: relative;
	min-height: 100vh;
	padding: 34px 22px 44px;
	overflow: hidden;
	background:
		radial-gradient(1000px 620px at 8% -8%, rgba(37, 99, 235, .16), transparent 60%),
		radial-gradient(900px 600px at 100% 8%, rgba(6, 182, 212, .17), transparent 58%),
		radial-gradient(860px 620px at 60% 110%, rgba(129, 140, 248, .16), transparent 60%),
		#eef2f9;
}

.ns-auth-photo {
	position: absolute;
	inset: 0;
	opacity: .25;
	pointer-events: none;
}

.ns-auth-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ns-auth-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(238, 242, 249, .5), rgba(238, 242, 249, .92));
}

.ns-auth-inner {
	position: relative;
	z-index: 1;
	max-width: 1080px;
	margin: 0 auto;
}

.ns-auth-brand {
	display: inline-flex;
	align-items: center;
	margin-bottom: 26px;
	transition: opacity .2s var(--ns-ease), transform .2s var(--ns-ease);
}

.ns-auth-brand img {
	height: 34px;
	width: auto;
	max-width: 230px;
	object-fit: contain;
	object-position: left center;
}

.ns-auth-brand:hover {
	opacity: .8;
	transform: translateY(-1px);
}

.ns-auth-header-tip {
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--ns-body);
}

.ns-auth-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 34px;
	align-items: center;
}

.ns-auth-grid-narrow {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}

.ns-auth-aside {
	color: var(--ns-body);
	padding-right: 12px;
}

.ns-auth-aside-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ns-primary);
	background: rgba(37, 99, 235, .1);
	border-radius: 99px;
	padding: 5px 12px;
}

.ns-auth-aside-badge i {
	font-size: 14px;
}

.ns-auth-aside-title {
	margin: 18px 0 12px;
	font-size: 30px;
	line-height: 1.28;
	font-weight: 700;
	letter-spacing: -.02em;
	background: linear-gradient(120deg, #0f172a 20%, #2563eb 70%, #06b6d4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ns-auth-aside-desc {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.8;
	color: #64748b;
	max-width: 420px;
}

.ns-auth-aside-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.ns-auth-aside-list li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--ns-body);
}

.ns-auth-aside-list i {
	font-size: 16px;
	color: var(--ns-cyan);
}

.ns-auth-card {
	position: relative;
	padding: 30px 30px 24px;
	border-radius: var(--ns-radius-lg);
	background: rgba(255, 255, 255, .8);
	border: 1px solid rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: 0 26px 60px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
	animation: ns-rise .5s var(--ns-ease) both;
}

@keyframes ns-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ns-auth-card-head {
	margin-bottom: 20px;
}

.ns-auth-card-head h2 {
	margin: 0 0 5px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ns-ink);
}

.ns-auth-card-head p {
	margin: 0;
	font-size: 13px;
	color: var(--ns-muted);
}

.ns-auth-tabs {
	border: none;
	gap: 4px;
	background: rgba(148, 163, 184, .13);
	border-radius: 13px;
	padding: 4px;
	margin-bottom: 22px;
}

.ns-auth-tabs .nav-item {
	flex: 1 1 0;
}

.ns-auth-tabs .nav-link {
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--ns-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 8px;
	text-align: center;
	transition: all .24s var(--ns-ease);
}

.ns-auth-tabs .nav-link:hover {
	color: var(--ns-body);
	border: none;
}

.ns-auth-tabs .nav-link.active {
	background: #fff;
	color: var(--ns-primary);
	border: none;
	box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.ns-auth-body {
	padding: 0;
}

.ns-auth-body .tab-pane {
	animation: ns-fade-in .28s var(--ns-ease);
}

@keyframes ns-fade-in {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ns-auth .form-group {
	margin-bottom: 17px;
}

.ns-auth .form-control {
	height: 46px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, .32);
	background: rgba(255, 255, 255, .82);
	color: var(--ns-ink);
	font-size: 13.5px;
	padding: 0 14px;
	box-shadow: none;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease), background .2s var(--ns-ease);
}

.ns-auth .form-control::placeholder {
	color: #a9b4c4;
}

.ns-auth .form-control:focus {
	height: 46px;
	background: #fff;
	border-color: var(--ns-primary);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
	color: var(--ns-ink);
}

.ns-auth textarea.form-control {
	height: auto;
	padding: 11px 14px;
}

.ns-auth .input-group {
	align-items: stretch;
}

.ns-auth .input-group>.form-control {
	border-radius: 12px;
}

.ns-auth .input-group>.form-control:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.ns-auth .input-group-prepend .ns-tel-code {
	height: 46px;
	width: 96px;
	border-radius: 12px 0 0 12px;
	border: 1px solid rgba(148, 163, 184, .32);
	border-right: none;
	background-color: rgba(241, 245, 252, .9);
	background-position: right 8px center;
	background-size: 12px 12px;
	color: var(--ns-body);
	font-size: 13px;
	padding: 0 26px 0 10px;
}

.ns-auth .input-group-prepend .ns-tel-fixed {
	width: 66px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: none;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
	font-weight: 600;
	letter-spacing: .3px;
}

.ns-auth .input-group-prepend+.form-control {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left-color: rgba(148, 163, 184, .2);
}

.ns-auth .input-group-append {
	display: flex;
	align-items: stretch;
}

.ns-auth .input-group-append>.btn {
	height: 46px;
	border-radius: 0 12px 12px 0;
	border: 1px solid transparent;
	border-left: none;
	font-size: 13px;
	font-weight: 600;
	padding: 0 16px;
	white-space: nowrap;
}

.ns-auth .input-group-append>img {
	height: 46px;
	width: 118px;
	border-radius: 0 12px 12px 0;
	border: 1px solid rgba(148, 163, 184, .32);
	border-left: none;
	object-fit: cover;
	background: #fff;
	cursor: pointer;
	transition: opacity .2s var(--ns-ease);
}

.ns-auth .input-group-append>img:hover {
	opacity: .82;
}

.ns-code-btn {
	background: var(--ns-gradient) !important;
	border: none !important;
	color: #fff !important;
}

.ns-code-btn:disabled {
	opacity: .62;
	cursor: not-allowed;
}

.ns-auth .form-group>label {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ns-body);
}

.ns-pwd-wrap {
	position: relative;
}

.ns-pwd-wrap .form-control {
	padding-right: 44px;
}

.ns-pwd-toggle {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #9aa6b6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 9px;
	transition: color .2s var(--ns-ease), background .2s var(--ns-ease);
}

.ns-pwd-toggle:hover {
	color: var(--ns-primary);
	background: rgba(37, 99, 235, .08);
}

.ns-pwd-toggle i {
	font-size: 18px;
	line-height: 1;
}

.ns-pwd-wrap.is-shown .ns-pwd-toggle {
	color: var(--ns-primary);
}

.ns-btn-submit {
	background: var(--ns-gradient) !important;
	border: none !important;
	border-radius: 12px !important;
	height: 46px;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff !important;
	box-shadow: var(--ns-shadow-accent) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	letter-spacing: .02em;
	transition: transform .22s var(--ns-ease), box-shadow .22s var(--ns-ease), filter .22s var(--ns-ease) !important;
}

.ns-btn-submit i {
	font-size: 19px;
	transform: translateY(1px);
}

.ns-btn-submit:hover,
.ns-btn-submit:focus {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(37, 99, 235, .34) !important;
	filter: saturate(115%);
	color: #fff !important;
}

.ns-btn-submit:active {
	transform: translateY(0);
}

.ns-auth-divider {
	position: relative;
	text-align: center;
	margin: 22px 0 14px;
}

.ns-auth-divider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--ns-line);
}

.ns-auth-divider span {
	position: relative;
	display: inline-block;
	background: #fff;
	padding: 0 12px;
	font-size: 12px;
	color: var(--ns-muted);
}

.ns-oauth-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ns-oauth-item {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .8);
	border: 1px solid var(--ns-line);
	color: #fff;
	overflow: hidden;
	transition: all .24s var(--ns-ease);
}

.ns-oauth-item img,
.ns-oauth-item i {
	font-size: 20px;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.ns-oauth-item:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, .3);
	box-shadow: 0 10px 20px rgba(15, 23, 42, .1);
}

.ns-auth-agree {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ns-line);
}

.ns-agree {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
	margin: 0;
}

.ns-agree input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ns-agree-box {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 1px;
	border-radius: 6px;
	border: 1.5px solid rgba(148, 163, 184, .55);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .2s var(--ns-ease);
}

.ns-agree-box i {
	font-size: 13px;
	color: #fff;
	opacity: 0;
	transform: scale(.5);
	transition: all .2s var(--ns-ease);
}

.ns-agree input:checked+.ns-agree-box {
	background: var(--ns-gradient);
	border-color: transparent;
}

.ns-agree input:checked+.ns-agree-box i {
	opacity: 1;
	transform: none;
}

.ns-agree input:focus-visible+.ns-agree-box {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

.ns-agree-text {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ns-muted);
}

.ns-auth-foot {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ns-line);
	text-align: center;
}

.ns-auth-foot p {
	margin: 0;
	font-size: 13px;
	color: var(--ns-muted);
}

.ns-check-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ns-body);
	padding: 4px 0;
}

.ns-check-inline input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--ns-primary);
}

/* 表单实时校验状态 */
.ns-field-msg {
	display: none;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ns-danger);
}

.ns-auth .ns-f-err>.ns-field-msg {
	display: block;
	animation: ns-msg-in .18s var(--ns-ease);
}

.ns-auth .ns-f-err .form-control:not(.ns-tel-code) {
	border-color: rgba(239, 68, 68, .62);
	background-color: rgba(239, 68, 68, .045);
}

.ns-auth .ns-f-err .form-control:not(.ns-tel-code):focus {
	border-color: var(--ns-danger);
	box-shadow: 0 0 0 4px rgba(239, 68, 68, .13);
}

.ns-auth .ns-f-err .ns-sel-btn {
	border-color: rgba(239, 68, 68, .62);
	background-color: rgba(239, 68, 68, .045);
}

.ns-auth .ns-f-err .ns-agree-box {
	border-color: var(--ns-danger);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.ns-auth .form-control.ns-f-ok,
.ns-auth .form-control.ns-f-ok:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 15px 15px;
	padding-right: 36px;
}

.ns-auth .ns-pwd-wrap .form-control.ns-f-ok,
.ns-auth .ns-pwd-wrap .form-control.ns-f-ok:focus {
	background-position: right 44px center;
	padding-right: 76px;
}

.ns-auth .ns-sel.ns-f-ok .ns-sel-btn,
.ns-auth .ns-f-err .ns-sel.ns-f-ok .ns-sel-btn {
	border-color: rgba(16, 185, 129, .55);
}

.ns-light .ns-btn-submit.ns-btn-blocked,
.ns-light .ns-btn-submit.ns-btn-blocked:hover,
.ns-light .ns-btn-submit.ns-btn-blocked:focus {
	background: rgba(154, 166, 182, .55) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.ns-btn-submit.ns-btn-blocked i {
	opacity: .8;
}

@keyframes ns-msg-in {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
}

.ns-auth-footer-tip {
	margin-top: 22px;
	font-size: 12px;
	color: var(--ns-muted);
}

.ns-auth-footer-tip a {
	color: var(--ns-muted);
}

.ns-auth-footer-tip a:hover {
	color: var(--ns-primary);
}

.ns-auth-footer-tip img {
	max-width: 100%;
}

/* 图形验证码块（由 default/includes/verify.tpl 渲染） */
.form-group.allow_login_code_captcha {
	display: none;
}

/* 第三方绑定 / OAuth 回调登录：default 用的是 Skote 全屏分屏结构，这里并入同一套登录视觉 */
.ns-light .auth-full-bg {
	position: relative;
	background: linear-gradient(135deg, rgba(37, 99, 235, .1) 0%, rgba(6, 182, 212, .1) 100%), #eef3fb;
	min-height: 100vh;
	height: auto;
	display: flex;
	align-items: center;
}

.ns-light .auth-full-bg::before {
	content: none;
}

.ns-light .auth-full-bg .bg-overlay {
	background-color: transparent;
	background-size: cover;
	background-position: center;
	opacity: .18;
	-webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
}

.ns-light .auth-full-bg h1,
.ns-light .auth-full-bg .text-white {
	color: var(--ns-ink) !important;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.4px;
	line-height: 1.35;
	word-break: break-word;
}

.ns-light .auth-full-bg .text-white-50 {
	color: var(--ns-body) !important;
	font-size: 14.5px;
	line-height: 1.85;
	margin-top: 12px;
}

.ns-light .auth-review-carousel.owl-theme .owl-dots .owl-dot span {
	background: rgba(37, 99, 235, .18);
}

.ns-light .auth-review-carousel.owl-theme .owl-dots .owl-dot.active span,
.ns-light .auth-review-carousel.owl-theme .owl-dots .owl-dot:hover span {
	background: var(--ns-primary);
}

.ns-light .auth-full-page-content {
	background: transparent;
	min-height: 100vh;
	align-items: center;
}

.ns-light .login_right {
	width: 100% !important;
	max-width: 430px;
	margin: 40px auto !important;
	padding: 30px 28px 26px;
	border-radius: var(--ns-radius-lg);
	border: 1px solid rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	box-shadow: 0 26px 60px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.ns-light .login_right .logo img {
	height: 32px;
	width: auto;
}

.ns-light .login_right .input-group-prepend {
	width: auto;
}

.ns-light .login_right #getCodeBox {
	height: auto !important;
}

.ns-light .container-fluid > .text-center {
	font-size: 13px;
	color: var(--ns-muted);
	padding: 14px 0;
}

/* ==========================================================================
   9. 继承页面组件重绘
   ========================================================================== */

.ns-light .card {
	background: var(--ns-glass);
	border: 1px solid var(--ns-glass-border);
	border-radius: var(--ns-radius);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .85);
	color: var(--ns-body);
	transition: box-shadow .28s var(--ns-ease), transform .28s var(--ns-ease);
}

.ns-light .card-body {
	padding: 20px;
}

.ns-light .card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ns-ink);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ns-light .card-header {
	background: rgba(241, 245, 252, .6);
	border-bottom: 1px solid var(--ns-line);
	padding: 14px 20px;
	font-weight: 600;
	color: var(--ns-ink);
}

.ns-light .card-footer {
	background: rgba(248, 250, 252, .55);
	border-top: 1px solid var(--ns-line);
	padding: 14px 20px;
}

/* 表格 */
.ns-light .table {
	color: var(--ns-body);
	background: transparent;
	margin-bottom: 0;
}

.ns-light .table th,
.ns-light .table td {
	border-color: var(--ns-line);
	border-top-width: 1px;
	border-bottom: none;
	padding: 13px 16px;
	font-size: 13px;
	background: transparent;
}

.ns-light .table thead th {
	border-bottom: 1px solid var(--ns-line);
	color: var(--ns-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(241, 245, 252, .62);
	white-space: nowrap;
}

.ns-light .table thead.bg-light,
.ns-light .table thead.bg-light th {
	background: rgba(241, 245, 252, .62) !important;
}

.ns-light .table-bordered {
	border: 1px solid var(--ns-line);
}

.ns-light .table-bordered th,
.ns-light .table-bordered td {
	border-color: var(--ns-line);
}

.ns-light .table-hover tbody tr:hover,
.ns-light .table tbody tr:hover {
	background: rgba(37, 99, 235, .05);
}

.ns-light .table-responsive {
	background: transparent;
	border-radius: var(--ns-radius-sm);
	/* global.css 写死 min-height:calc(100vh - 650px)，高屏下会撑出一大片空白 */
	min-height: 0;
}

.ns-light .table-container {
	border-radius: var(--ns-radius);
}

.ns-light .table-striped tbody tr:nth-of-type(odd) {
	background: rgba(241, 245, 252, .45);
}

/* 按钮 */
.ns-light .btn {
	border-radius: var(--ns-radius-sm);
	font-size: 13.5px;
	font-weight: 500;
	padding: .53rem 1.05rem;
	transition: all .22s var(--ns-ease);
}

.ns-light .btn i {
	vertical-align: -.12em;
}

.ns-light .btn-primary,
.ns-light .btn-group-toggle .btn-primary,
.ns-light .layui-layer-btn0 {
	background: var(--ns-gradient) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}

.ns-light .btn-primary:hover,
.ns-light .btn-primary:focus,
.ns-light .btn-primary:not(:disabled):not(.disabled):active,
.ns-light .btn-primary:not(:disabled):not(.disabled).active,
.ns-light .show>.btn-primary.dropdown-toggle {
	background: linear-gradient(135deg, #1d4ed8, #0891b2) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 10px 22px rgba(37, 99, 235, .3);
}

.ns-light .btn-outline-primary {
	color: var(--ns-primary) !important;
	border-color: rgba(37, 99, 235, .32) !important;
	background: rgba(255, 255, 255, .6) !important;
}

.ns-light .btn-outline-primary:hover {
	background: var(--ns-gradient) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.ns-light .btn-secondary,
.ns-light .btn-default {
	background: #fff !important;
	border-color: var(--ns-line-strong) !important;
	color: var(--ns-body) !important;
}

.ns-light .btn-secondary:hover,
.ns-light .btn-default:hover {
	background: rgba(241, 245, 252, .9) !important;
	border-color: rgba(148, 163, 184, .45) !important;
	color: var(--ns-ink) !important;
}

.ns-light .btn-success {
	background: linear-gradient(135deg, #10b981, #34d399) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.ns-light .btn-warning {
	background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.ns-light .btn-danger {
	background: linear-gradient(135deg, #ef4444, #f87171) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.ns-light .btn-info {
	background: linear-gradient(135deg, #06b6d4, #22d3ee) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.ns-light .btn-light {
	background: rgba(255, 255, 255, .8) !important;
	border-color: var(--ns-line) !important;
	color: var(--ns-body) !important;
}

.ns-light .btn:hover {
	transform: translateY(-1px);
}

.ns-light .btn:disabled,
.ns-light .btn.disabled {
	opacity: .55;
	transform: none;
	cursor: not-allowed;
}

.ns-light .btn-sm {
	padding: .3rem .8rem;
	font-size: 12.5px;
	border-radius: 9px;
}

.ns-light .btn.focus,
.ns-light .btn:focus {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
}

.ns-light .btn:focus:not(:focus-visible) {
	box-shadow: none !important;
}

/* 表单 */
.ns-light .form-control,
.ns-light .custom-select {
	border-radius: var(--ns-radius-sm);
	border: 1px solid rgba(148, 163, 184, .35);
	background: rgba(255, 255, 255, .82);
	color: var(--ns-ink);
	font-size: 13.5px;
	padding: .53rem .85rem;
	box-shadow: none;
	transition: border-color .2s var(--ns-ease), box-shadow .2s var(--ns-ease), background .2s var(--ns-ease);
}

.ns-light .form-control:focus,
.ns-light .custom-select:focus {
	background: #fff;
	border-color: var(--ns-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
	color: var(--ns-ink);
}

.ns-light .form-control::placeholder {
	color: #a9b4c4;
}

.ns-light .form-control:disabled,
.ns-light .form-control[readonly] {
	background: rgba(241, 245, 252, .85);
	color: var(--ns-muted);
	cursor: not-allowed;
}

.ns-light .form-control-label,
.ns-light label {
	font-size: 13px;
	color: var(--ns-body);
	font-weight: 500;
}

.ns-light .form-group {
	margin-bottom: 18px;
}

.ns-light .input-group-prepend,
.ns-light .input-group-append {
	align-items: stretch;
}

.ns-light .input-group-text {
	background: rgba(241, 245, 252, .9);
	border: 1px solid rgba(148, 163, 184, .35);
	color: var(--ns-muted);
	border-radius: var(--ns-radius-sm);
	font-size: 13px;
}

.ns-light .input-group>.form-control:not(:first-child),
.ns-light .input-group>.custom-select:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ns-light .input-group>.form-control:not(:last-child),
.ns-light .input-group>.custom-select:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.ns-light .input-group-prepend .btn,
.ns-light .input-group-prepend .input-group-text {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.ns-light .input-group-append .btn,
.ns-light .input-group-append .input-group-text {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ns-light .input-group-append>img {
	border-radius: 0 var(--ns-radius-sm) var(--ns-radius-sm) 0;
	border: 1px solid rgba(148, 163, 184, .35);
	border-left: none;
	object-fit: cover;
	cursor: pointer;
	background: #fff;
}

.ns-light .invalid-feedback {
	font-size: 12px;
	color: var(--ns-danger);
}

.ns-light .custom-control-label::before {
	background-color: #fff;
	border-color: rgba(148, 163, 184, .5);
	border-radius: 5px;
}

.ns-light .custom-control-input:checked~.custom-control-label::before {
	background-color: var(--ns-primary);
	border-color: var(--ns-primary);
}

.ns-light .custom-control-input:focus~.custom-control-label::before {
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.ns-light .custom-checkbox .custom-control-label::before {
	border-radius: 6px;
}

.ns-light .custom-control-input:checked~.custom-control-label::after {
	background-size: 55%;
}

/* 徽章 / 状态 */
.ns-light .badge {
	font-weight: 600;
	font-size: 11px;
	padding: .32em .72em;
	border-radius: 99px;
	letter-spacing: .01em;
}

.ns-light .badge-primary {
	background: var(--ns-gradient) !important;
	color: #fff !important;
}

.ns-light .badge-success {
	background: rgba(16, 185, 129, .14) !important;
	color: #047857 !important;
}

.ns-light .badge-warning {
	background: rgba(245, 158, 11, .16) !important;
	color: #b45309 !important;
}

.ns-light .badge-danger {
	background: rgba(239, 68, 68, .13) !important;
	color: #b91c1c !important;
}

.ns-light .badge-info {
	background: rgba(6, 182, 212, .14) !important;
	color: #0e7490 !important;
}

.ns-light .badge-secondary,
.ns-light .badge-light {
	background: rgba(148, 163, 184, .16) !important;
	color: var(--ns-body) !important;
}

.ns-light .badge-pill {
	padding-right: .8em;
	padding-left: .8em;
}

.ns-light .status {
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 600;
	background: rgba(148, 163, 184, .16);
	color: #475569;
	white-space: nowrap;
}

.ns-light .status::before {
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor !important;
}

/* 与 service.tpl 的 status-{strtolower($list.domainstatus)} 保持同一套语义色 */
.ns-light .status-active,
.ns-light .status-paid,
.ns-light .status-success,
.ns-light .status-issue_active {
	background: rgba(16, 185, 129, .13);
	color: #047857;
}

.ns-light .status-pending,
.ns-light .status-unpaid,
.ns-light .status-verifiy_active {
	background: rgba(245, 158, 11, .15);
	color: #b45309;
}

.ns-light .status-suspended,
.ns-light .status-fraud {
	background: rgba(239, 68, 68, .12);
	color: #b91c1c;
}

.ns-light .status-cancelled,
.ns-light .status-refunded,
.ns-light .status-deleted,
.ns-light .status-terminated {
	background: rgba(100, 116, 139, .15);
	color: #475569;
}

.ns-light .status-overdue_active {
	background: rgba(37, 99, 235, .12);
	color: #1d4ed8;
}

/* 标签页 */
.ns-light .nav-tabs {
	border-bottom: 1px solid var(--ns-line);
	gap: 4px;
}

.ns-light .nav-tabs .nav-link {
	border: none;
	border-radius: 11px 11px 0 0;
	color: var(--ns-muted);
	font-size: 13.5px;
	font-weight: 500;
	padding: 10px 16px;
	position: relative;
	transition: all .2s var(--ns-ease);
}

.ns-light .nav-tabs .nav-link:hover {
	border: none;
	color: var(--ns-primary);
	background: rgba(37, 99, 235, .06);
}

.ns-light .nav-tabs .nav-link.active {
	border: none;
	background: transparent;
	color: var(--ns-primary);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 var(--ns-primary);
}

.ns-light .nav-tabs-custom {
	border-bottom: 1px solid var(--ns-line);
}

.ns-light .nav-pills .nav-link {
	border-radius: 10px;
	color: var(--ns-body);
	font-size: 13.5px;
}

.ns-light .nav-pills .nav-link.active {
	background: var(--ns-gradient);
	color: #fff;
}

.ns-light .tab-content {
	padding-top: 18px;
}

/* 弹窗 */
.ns-light .modal-content {
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: var(--ns-radius-lg);
	box-shadow: 0 30px 70px rgba(15, 23, 42, .22);
	color: var(--ns-body);
}

.ns-light .modal-header {
	border-bottom: 1px solid var(--ns-line);
	padding: 18px 22px;
	border-radius: var(--ns-radius-lg) var(--ns-radius-lg) 0 0;
}

.ns-light .modal-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ns-ink);
}

.ns-light .modal-body {
	padding: 22px;
}

.ns-light .modal-footer {
	border-top: 1px solid var(--ns-line);
	padding: 14px 22px;
	gap: 8px;
}

.ns-light .modal-footer>.btn {
	margin: 0;
}

.ns-light .close {
	text-shadow: none;
	opacity: .5;
	transition: opacity .2s var(--ns-ease);
}

.ns-light .close:hover {
	opacity: 1;
}

.ns-light .modal-dialog .modal-content .modal-body form {
	margin: 0;
}

/* 分页 */
.ns-light .pagination {
	gap: 4px;
}

.ns-light .page-link {
	border-radius: 9px;
	border: 1px solid var(--ns-line);
	background: rgba(255, 255, 255, .75);
	color: var(--ns-body);
	font-size: 13px;
	padding: .42rem .78rem;
	margin: 0;
	transition: all .2s var(--ns-ease);
}

.ns-light .page-link:hover {
	background: #fff;
	border-color: rgba(37, 99, 235, .3);
	color: var(--ns-primary);
}

.ns-light .page-item.active .page-link {
	background: var(--ns-gradient);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 14px rgba(37, 99, 235, .28);
}

.ns-light .page-item.disabled .page-link {
	background: transparent;
	color: #cbd5e1;
	border-color: var(--ns-line);
}

.ns-light .page-item:first-child .page-link,
.ns-light .page-item:last-child .page-link {
	border-radius: 9px;
}

.ns-pagination .page-link {
	min-width: 32px;
	text-align: center;
}

/* 通用列表容器 */
.ns-light .table-header,
.ns-light .table-footer {
	padding: 12px 16px;
	border-bottom: 1px solid var(--ns-line);
	background: rgba(248, 250, 252, .5);
	gap: 10px;
}

.ns-light .table-footer {
	border-bottom: none;
	border-top: 1px solid var(--ns-line);
}

.ns-light .table-responsive {
	border-radius: var(--ns-radius-sm);
}

.ns-light .no-data {
	min-height: 150px;
	color: var(--ns-muted);
	font-size: 13px;
	flex-direction: column;
	gap: 6px;
}

/* 提示条 */
.ns-light .alert {
	border-radius: var(--ns-radius-sm);
	border: 1px solid transparent;
	font-size: 13px;
	padding: 12px 16px;
}

.ns-light .alert-success {
	background: rgba(16, 185, 129, .1);
	border-color: rgba(16, 185, 129, .25);
	color: #047857;
}

.ns-light .alert-warning {
	background: rgba(245, 158, 11, .1);
	border-color: rgba(245, 158, 11, .26);
	color: #b45309;
}

.ns-light .alert-danger {
	background: rgba(239, 68, 68, .09);
	border-color: rgba(239, 68, 68, .24);
	color: #b91c1c;
}

.ns-light .alert-info {
	background: rgba(6, 182, 212, .1);
	border-color: rgba(6, 182, 212, .25);
	color: #0e7490;
}

/* 卡片式单选（支付方式 / 实名类型） */
.ns-light .addfunds-payment,
.ns-light .type-item {
	border: 1px solid var(--ns-line) !important;
	border-radius: var(--ns-radius) !important;
	background: rgba(255, 255, 255, .62) !important;
	transition: all .24s var(--ns-ease);
}

.ns-light .addfunds-payment:hover,
.ns-light .addfunds-payment.active {
	border-color: rgba(37, 99, 235, .45) !important;
	background: #fff !important;
	box-shadow: 0 10px 24px rgba(37, 99, 235, .12) !important;
	transform: translateY(-2px);
}

.ns-light .type-item:hover {
	border-color: rgba(37, 99, 235, .4) !important;
	box-shadow: var(--ns-shadow);
	transform: translateY(-2px);
}

.ns-light .type-title {
	color: var(--ns-ink);
}

.ns-light .type-desc,
.ns-light .not_certified_text {
	color: #64748b;
}

.ns-light .not_certified_title {
	color: var(--ns-ink);
}

/* 工单 / 知识库 / 新闻 */
.ns-light .ticket-item {
	border: 1px solid var(--ns-line) !important;
	border-radius: var(--ns-radius) !important;
	background: rgba(255, 255, 255, .64) !important;
	transition: all .24s var(--ns-ease);
}

.ns-light .ticket-item:hover {
	transform: translateY(-2px);
	border-color: rgba(37, 99, 235, .3) !important;
	box-shadow: var(--ns-shadow) !important;
}

.ns-light .ticket-item h4 {
	color: var(--ns-ink);
}

.ns-light .ticket-reply .post-by {
	background: rgba(241, 245, 252, .7);
	border-radius: var(--ns-radius-sm);
	padding: 10px 14px;
	color: var(--ns-body);
	font-size: 12.5px;
}

.ns-light .ticket-reply.admin .post-by {
	background: rgba(37, 99, 235, .08);
}

.ns-light .knowledgebase .card-title a,
.ns-light .kb-link,
.ns-light .news-item a {
	color: var(--ns-body);
}

.ns-light .knowledgebase .card-title a:hover,
.ns-light .kb-link:hover,
.ns-light .news-item a:hover {
	color: var(--ns-primary);
}

.ns-light .knowledgebase .card-title a {
	border-bottom: 1px solid var(--ns-line);
}

.ns-light .kb-item {
	border-bottom: 1px solid var(--ns-line);
}

.ns-light .kb-item .date,
.ns-light .notice_item_time,
.ns-light .kb-item:last-child .date {
	color: var(--ns-muted);
}

.ns-light .news-item {
	border-bottom: 1px solid var(--ns-line);
}

/* 安全中心 */
.ns-light .security-header {
	background: var(--ns-gradient) !important;
	border-radius: var(--ns-radius-lg) !important;
	box-shadow: var(--ns-shadow-accent) !important;
}

.ns-light .security-info {
	background: transparent !important;
}

.ns-light .security-label {
	color: rgba(255, 255, 255, .75) !important;
	opacity: 1;
}

.ns-light .security-item-title {
	color: var(--ns-ink) !important;
}

.ns-light .security-item-desc,
.ns-light .security-item-title small {
	color: var(--ns-muted) !important;
}

.ns-light .security-item {
	border-radius: var(--ns-radius) !important;
	transition: all .24s var(--ns-ease);
}

.ns-light .security-item:hover {
	background: rgba(255, 255, 255, .6);
	box-shadow: var(--ns-shadow) !important;
}

.ns-light .progress {
	background: rgba(148, 163, 184, .2);
	border-radius: 99px;
	overflow: hidden;
}

.ns-light .progress-bar {
	background: var(--ns-gradient);
}

/* 安全中心头部是渐变底，global.css 给的 2px 灰槽几乎看不见 */
.ns-light .security-header .progress {
	background: rgba(255, 255, 255, .28);
	height: 4px;
}

.ns-light .security-header .progress-bar {
	background: #fff !important;
}

/* .kb-item 的 >* 被 global.css 设成 flex:1，日期会和标题贴在一起 */
.ns-light .kb-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ns-light .kb-item .date {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

/* 下拉菜单（继承页面里的 bootstrap-select / 普通 dropdown） */
.ns-light .dropdown-menu:not(.ns-dropdown) {
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius);
	background: var(--ns-glass-strong);
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	box-shadow: var(--ns-shadow-lg);
	padding: 8px;
	font-size: 13px;
}

.ns-light .dropdown-menu:not(.ns-dropdown) .dropdown-item {
	border-radius: var(--ns-radius-sm);
	padding: 8px 12px;
	color: var(--ns-body);
	font-size: 13px;
}

.ns-light .dropdown-menu:not(.ns-dropdown) .dropdown-item:hover,
.ns-light .dropdown-menu:not(.ns-dropdown) .dropdown-item:focus,
.ns-light .dropdown-menu:not(.ns-dropdown) .dropdown-item.active {
	background: rgba(37, 99, 235, .09);
	color: var(--ns-primary);
}

.ns-light .dropdown-divider {
	border-top: 1px solid var(--ns-line);
}

/* 文本工具类纠偏 */
.ns-light .text-black-50 {
	color: #94a3b8 !important;
}

.ns-light .text-black-80,
.ns-light .text-dark {
	color: var(--ns-ink) !important;
}

.ns-light .text-primary {
	color: var(--ns-primary) !important;
}

.ns-light .text-muted {
	color: var(--ns-muted) !important;
}

.ns-light .text-success {
	color: var(--ns-success) !important;
}

.ns-light .text-warning {
	color: var(--ns-warning) !important;
}

.ns-light .text-danger {
	color: var(--ns-danger) !important;
}

.ns-light .bg-light,
.ns-light .bg-gray {
	background: rgba(241, 245, 252, .8) !important;
}

.ns-light .label-color {
	color: var(--ns-body) !important;
}

/* 用户中心旧类名兼容（业务页可能复用） */
.ns-light .user-center_header {
	background: var(--ns-gradient) !important;
	color: #fff !important;
	border-radius: 11px !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

.ns-light .user-center_safety {
	background: var(--ns-gradient) !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

.ns-light .user-center_product {
	background: rgba(255, 255, 255, .72) !important;
	border: 1px solid var(--ns-line) !important;
	border-radius: var(--ns-radius-sm) !important;
	transition: all .22s var(--ns-ease);
}

.ns-light .user-center_product:hover {
	border-color: rgba(37, 99, 235, .35) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(37, 99, 235, .12) !important;
}

.ns-light .aff-amo-num,
.ns-light .aff-item-num {
	color: var(--ns-ink);
}

/* 排序指示（app.min.css 未定义，global.css 走内联） */
.ns-light .tablelist th .text-black-50 i {
	color: rgba(100, 116, 139, .55);
}

/* 图片加载失败兜底（logo / 三方图标未配置时不留破框） */
.ns-light .ns-img-broken {
	visibility: hidden;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Toastr · head.tpl 里本文件先于 toastr.min.css 加载，
   同特异度会被 toastr 反超，故统一加 body 前缀抬到 (1,1,2) */
body #toast-container>div.toast {
	background-color: rgba(255, 255, 255, .92) !important;
	border: 1px solid var(--ns-glass-border) !important;
	border-radius: var(--ns-radius) !important;
	box-shadow: var(--ns-shadow-lg) !important;
	color: var(--ns-ink) !important;
	opacity: 1;
	max-width: calc(100vw - 24px);
	padding: 14px 42px 14px 52px;
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 22px 22px;
	-webkit-backdrop-filter: var(--ns-blur);
	backdrop-filter: var(--ns-blur);
	animation: ns-toast-in .34s var(--ns-ease);
}

/* 不能用 opacity:1 !important，也不要在这里动画 opacity：两者都会盖住
   jQuery fadeIn/fadeOut 写入的内联透明度，提示框于是瞬间出现、瞬间消失。
   淡入淡出留给 toastr，这里只补位移。静态 opacity 需写出来以盖过 toastr 的 .8 */
@keyframes ns-toast-in {
	from {
		transform: translate3d(34px, 0, 0) scale(.96);
	}

	to {
		transform: none;
	}
}

body #toast-container .toast-title {
	color: var(--ns-ink) !important;
	font-weight: 600;
	font-size: 13.5px;
}

body #toast-container .toast-message {
	color: var(--ns-body) !important;
	font-size: 12.5px;
	line-height: 1.6;
}

body #toast-container>div.toast-success {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 14.5l-3.6-3.6 1.4-1.4 2.2 2.2 4.9-4.9 1.4 1.4-6.3 6.3z'/></svg>") !important;
}

body #toast-container>div.toast-error {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/></svg>") !important;
}

body #toast-container>div.toast-warning {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'><path d='M12 2l10 18H2L12 2zm-1 7v5h2V9h-2zm0 7v2h2v-2h-2z'/></svg>") !important;
}

body #toast-container>div.toast-info {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2306b6d4'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>") !important;
}

body #toast-container.toast-top-center>div,
body #toast-container.toast-bottom-center>div {
	width: 340px;
	max-width: calc(100vw - 32px);
}

.toast-close-button {
	color: var(--ns-muted);
	font-size: 18px;
	opacity: .5;
}

.toast-close-button:hover {
	opacity: 1;
}

/* 光标跟随高光（由 nansai.js 写入 --ns-mx / --ns-my） */
.ns-kpi,
.ns-prod-cell {
	--ns-mx: 50%;
	--ns-my: 50%;
}

.ns-prod-cell {
	position: relative;
	overflow: hidden;
}

.ns-kpi::after,
.ns-prod-cell::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(200px circle at var(--ns-mx) var(--ns-my), rgba(37, 99, 235, .10), transparent 62%);
	opacity: 0;
	transition: opacity .32s var(--ns-ease);
}

.ns-kpi:hover::after,
.ns-prod-cell:hover::after {
	opacity: 1;
}

/* 入场动画只给首页两大块，不给所有 .card：
   业务页卡片数量多，逐张淡入既没有信息量，也会在 AJAX 片段注入时反复重播 */
.ns-hero,
.ns-kpi-row {
	animation: ns-fade-up .42s var(--ns-ease) both;
}

@keyframes ns-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   9b. 业务页细节补全
   default 的 .search-box 规则 (0,2,0) 与上面的 .ns-light .form-control 同特异性
   但加载更早，会被 padding 简写覆盖，导致放大镜压在占位文字上。
   ========================================================================== */

.ns-light .search-box .form-control {
	border-radius: 999px;
	padding-left: 40px;
	padding-right: 16px;
	background: rgba(255, 255, 255, .82);
}

.ns-light .search-box .search-icon {
	left: 15px;
	top: 0;
	line-height: 38px;
	font-size: 17px;
	color: var(--ns-muted);
	pointer-events: none;
}

.ns-light .table-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* service.tpl 的搜索框包在 .row > .col-sm-6 里；.table-search 变 flex 容器后
   .row 会按内容收缩成一条窄缝，必须让它重新撑满 */
.ns-light .table-search>.row,
.ns-light .table-search .row {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
}

.ns-light .search-box {
	min-width: 200px;
}

.ns-light .table-filter {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 这些类在 app.min.css / global.css / responsive.css 中均无定义，
   只是 default 模板留下的语义钩子，不补就会散版 */
.ns-light .dots {
	display: inline-block;
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
	color: var(--ns-ink);
	font-weight: 500;
}

.ns-light .iptd,
.ns-light .tablelist code {
	display: inline-block;
	font-family: "SFMono-Regular", Consolas, Menlo, monospace;
	font-size: 12px;
	color: var(--ns-muted);
}

.ns-light th.checkbox,
.ns-light td.checkbox {
	width: 34px;
	padding-right: 0 !important;
}

.ns-light .btn-rounded {
	border-radius: 999px;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}

.ns-light .beforecheck-box {
	margin-bottom: 4px;
}

.ns-light .security-strength {
	min-width: 150px;
}

.ns-light .ticket-actions {
	display: inline-flex;
	gap: 8px;
}

.ns-light .ticket-reply .post-by {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ns-light .ticket-reply .post-user {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ns-ink);
	font-weight: 500;
}

.ns-light .ticket-reply .post-date {
	font-size: 12px;
	color: var(--ns-muted);
	font-variant-numeric: tabular-nums;
}

.ns-light .ticket-reply .message {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ns-body);
	word-break: break-word;
}

.ns-light .filebox {
	gap: 10px;
	align-items: center;
}

.ns-light .filebox .form-control-file {
	font-size: 13px;
	color: var(--ns-body);
}

/* 原生文件选择框：虚线框 + 自绘按钮，去掉浏览器默认灰底 */
.ns-light input[type=file] {
	width: 100%;
	padding: 7px 10px;
	font-size: 12.5px;
	color: var(--ns-muted);
	background: rgba(255, 255, 255, .7);
	border: 1px dashed rgba(148, 163, 184, .55);
	border-radius: 10px;
}

.ns-light input[type=file]::file-selector-button {
	margin-right: 10px;
	padding: 5px 12px;
	border: none;
	border-radius: 8px;
	background: var(--ns-gradient-soft);
	color: var(--ns-primary);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s var(--ns-ease);
}

.ns-light input[type=file]:hover::file-selector-button {
	background: rgba(37, 99, 235, .16);
}

/* 批量操作下拉：未勾选时 default 加 .not-allowed，这里给出禁用观感 */
.ns-light .btn.not-allowed {
	opacity: .55;
	cursor: not-allowed;
}

/* 实例详情的监控图表区（includes/chart.tpl） */
.ns-light .chartbox {
	margin-bottom: 22px;
	padding: 18px 20px 12px;
	border-radius: var(--ns-radius);
	border: 1px solid var(--ns-line);
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(18px) saturate(165%);
	backdrop-filter: blur(18px) saturate(165%);
	box-shadow: var(--ns-shadow);
}

.ns-light .module_chart > div {
	overflow: hidden;
}

.ns-light .module_chart h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 60px;
	color: var(--ns-ink);
}

.ns-light .module_chart > div > div[style*="float: right"],
.ns-light .module_chart > div > div[style*="float:right"] {
	display: flex;
	align-items: center;
	height: 60px;
	width: 210px !important;
	margin-right: 0 !important;
}

.ns-light .module_chart_date {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 14px;
	font-size: 13px;
	color: var(--ns-muted);
}

.ns-light .module_chart_date .form-control {
	width: auto;
	flex: 0 1 auto;
	font-size: 13px;
	padding: .34rem .6rem;
}

.ns-light .chart_content_box {
	min-height: 320px;
}

/* ==========================================================================
   10. 响应式
   ========================================================================== */

@media (max-width: 1366px) {
	.ns-auth-grid {
		grid-template-columns: minmax(0, 1fr) 410px;
		gap: 26px;
	}

	.ns-auth-aside-title {
		font-size: 26px;
	}
}

@media (max-width: 1199.98px) {
	.ns-auth-grid {
		grid-template-columns: minmax(0, 560px);
		justify-content: center;
	}

	.ns-auth-aside {
		display: none;
	}

	.ns-kpi-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ns-hero-side {
		flex: 0 0 auto;
		width: 100%;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 24px;
		padding-top: 18px;
		border-top: 1px solid var(--ns-line);
	}

	.ns-side-sub {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		flex: 1 1 auto;
	}
}

@media (max-width: 991.98px) {
	.ns-hero {
		padding: 22px;
		gap: 18px;
	}

	.ns-hero-title {
		font-size: 20px;
	}

	.ns-pagehead {
		margin-bottom: 14px;
	}

	.ns-auth {
		padding: 24px 16px 32px;
	}

	.ns-auth-card {
		padding: 24px 20px 20px;
	}

	.ns-prod-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.ns-kpi {
		padding: 14px;
		gap: 10px;
	}

	.ns-kpi-icon {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
		border-radius: 12px;
		font-size: 19px;
	}

	.ns-kpi-value {
		font-size: 18px;
	}

	.ns-kpi-label {
		font-size: 11.5px;
	}

	.ns-hero-actions .btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 9px 12px !important;
		font-size: 13px !important;
	}

	.ns-light .card-body,
	.ns-light .modal-body {
		padding: 16px;
	}

	.ns-light .table th,
	.ns-light .table td {
		padding: 11px 12px;
	}

	.ns-table thead th,
	.ns-table tbody td {
		padding-left: 12px;
		padding-right: 12px;
	}

	.ns-table-foot,
	.ns-pageinfo {
		font-size: 12px;
	}

	.ns-footer-inner {
		justify-content: center;
		text-align: center;
	}

	.ns-backtop span {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.ns-kpi-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ns-hero-side {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ns-balance-value {
		font-size: 21px;
	}

	.ns-prod-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ns-auth-tabs .nav-link {
		font-size: 12.5px;
		padding: 8px 4px;
	}

	.ns-chip {
		font-size: 11px;
		padding: 3px 9px;
	}

	body #toast-container>div.toast {
		padding: 12px 12px 12px 46px;
		background-size: 20px;
	}

	body #toast-container.toast-top-right>div.toast+div.toast,
	body #toast-container.toast-top-left>div.toast+div.toast,
	body #toast-container.toast-bottom-right>div.toast+div.toast,
	body #toast-container.toast-bottom-left>div.toast+div.toast {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}
}

/* ==========================================================================
   11. 无障碍 / 降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.ns-aurora span {
		animation: none !important;
	}
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

	.ns-light .card,
	.ns-light .ns-panel,
	.ns-hero,
	.ns-kpi,
	.ns-auth-card,
	.ns-light .modal-content,
	.vertical-menu.ns-sidebar,
	#page-topbar,
	.ns-dropdown {
		background: #fff !important;
	}
}

.ns-light :focus-visible {
	outline: 2px solid rgba(37, 99, 235, .55);
	outline-offset: 2px;
}

.ns-light .btn:focus-visible,
.ns-light .form-control:focus-visible,
.ns-light .ns-sel-btn:focus-visible,
.ns-light .ns-pwd-toggle:focus-visible {
	outline: none;
}

@media print {

	.ns-aurora,
	#page-topbar,
	.vertical-menu,
	.ns-footer,
	.ns-backdrop,
	.ns-progress {
		display: none !important;
	}

	.main-content {
		margin-left: 0 !important;
	}

	.page-content {
		padding: 0 !important;
	}
}