* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--rose: #E11D48;
	--rose-light: #FFF1F2;
	--rose-100: #FFE4E6;
	--rose-700: #BE123C;
	--violet: #8B5CF6;
	--violet-light: #EDE9FE;
	--amber: #F59E0B;
	--amber-light: #FFFBEB;
	--emerald: #10B981;
	--emerald-light: #ECFDF5;
	--orange: #F97316;
	--orange-light: #FFEDD5;
	--blue: #3B82F6;
	--blue-light: #EFF6FF;
	--slate-900: #0F172A;
	--slate-700: #334155;
	--slate-500: #64748B;
	--slate-400: #94A3B8;
	--slate-300: #CBD5E1;
	--slate-200: #E2E8F0;
	--slate-100: #F1F5F9;
	--slate-50: #F8FAFC;
}

body {
	font-family: "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
	background: var(--slate-50);
	color: var(--slate-700);
	overflow: hidden;
}

.app {
	display: flex;
	height: 100vh;
}

/* 顶部锁定 */
.top_sticky {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Sidebar */
.sidebar {
	width: 220px;
	background: #fff;
	border-right: 1px solid var(--slate-200);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.brand {
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--slate-100);
}

.brand .logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--rose);
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand .logo svg {
	width: 18px;
	height: 18px;
	color: #fff;
}

/* B类业务隐藏时：图标爱心线条由白色改为黑色 */
.brand .logo.b-off svg {
	color: #000;
}

.brand .text .name {
	font-size: 14px;
	font-weight: 700;
	color: var(--slate-900);
	line-height: 1.2;
}

.brand .text .sub {
	font-size: 10px;
	color: var(--slate-400);
	line-height: 1.2;
}

.menu {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
	scrollbar-width: none;
}

.menu::-webkit-scrollbar {
	display: none;
}

.menu-group {
	margin-bottom: 2px;
}

.menu-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-500);
	cursor: pointer;
	user-select: none;
	transition: all .15s;
	border-radius: 8px;
}

.menu-group-title:hover {
	background: var(--slate-100);
	color: var(--slate-700);
}

.menu-group-title svg {
	width: 14px;
	height: 14px;
	transition: transform .2s;
	color: var(--slate-400);
	margin-left: auto;
	flex-shrink: 0;
}

.menu-group-title.collapsed svg {
	transform: rotate(-90deg);
}

.menu-group-children {
	display: block;
}

.menu-group-children.collapsed {
	display: none;
}

.menu-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 8px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--slate-500);
	transition: all .15s;
	text-align: left;
	font-family: inherit;
}

.menu-item:hover {
	background: var(--slate-100);
	color: var(--slate-700);
}

/* 隐藏的菜单项/菜单组：不在侧边栏显示（保留 DOM，去掉 menu-hidden 类即可恢复） */
.menu-item.menu-hidden,
.menu-group.menu-hidden {
	display: none !important;
}

.menu-item.active {
	background: var(--rose-light);
	color: var(--rose);
	font-weight: 600;
}

.menu-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.menu-item .arrow {
	margin-left: auto;
	width: 14px;
	height: 14px;
	transition: transform .2s;
	color: var(--slate-400);
}

.menu-item.expanded .arrow {
	transform: rotate(180deg);
}

.submenu {
	padding-left: 12px;
	margin-top: 2px;
	display: none;
}

.submenu.show {
	display: block;
	animation: fadeIn .2s ease;
}

.submenu .menu-item {
	padding: 7px 12px;
	font-size: 12px;
}

.sidebar-footer {
	padding: 10px;
	border-top: 1px solid var(--slate-100);
}

.sidebar-footer a {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--slate-500);
	font-family: inherit;
	transition: background .15s;
	text-decoration: none;
}

.sidebar-footer a:hover {
	background: var(--slate-100);
}

.sidebar-footer a svg {
	width: 16px;
	height: 16px;
}

/* Main area */
.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Content */
.content {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.content::-webkit-scrollbar {
	width: 6px;
}

.content::-webkit-scrollbar-thumb {
	background: var(--slate-300);
	border-radius: 3px;
}

.page {
	display: none;
	animation: fadeIn .3s ease;
}

.page.active {
	display: block;
}

/* Cards and stats */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.stat-card {
	background: #fff;
	border-radius: 12px;
	padding: 16px 14px;
	border: 1px solid var(--slate-200);
	cursor: pointer;
	transition: all .15s;
}

.stat-card:hover {
	border-color: var(--rose-300);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stat-card .label {
	font-size: 12px;
	color: var(--slate-500);
	margin-bottom: 8px;
}

.stat-card .value {
	font-size: 20px;
	font-weight: 700;
	color: var(--slate-900);
	margin-bottom: 4px;
}

.stat-card .sub {
	font-size: 11px;
	color: var(--slate-400);
	margin-top: 4px;
}

.stat-card .change {
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--emerald);
}

.stat-card .change.down {
	color: var(--rose);
}

.stat-card .change svg {
	width: 12px;
	height: 12px;
}

.section-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--slate-200);
	margin-bottom: 20px;
	overflow: hidden;
}

.section-card .header {
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--slate-100);
}

.section-card .body {
	padding: 16px;
}

.section-card .header h3 {
	font-size: 14px;
	font-weight: 600;
	color: var(--slate-900);
}

.section-card .header .actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	font-family: inherit;
	transition: all .15s;
}

.btn-primary {
	background: var(--rose);
	color: #fff;
}

.btn-primary:hover {
	background: var(--rose-700);
}

.btn-secondary {
	background: var(--slate-100);
	color: var(--slate-700);
}

.btn-secondary:hover {
	background: var(--slate-200);
}

.btn-sm {
	padding: 8px 12px;
	font-size: 12px;
}

.btn-outline {
	background: transparent;
	border: 1px solid var(--slate-200);
	color: var(--slate-700);
}

.btn-outline:hover {
	background: var(--slate-50);
	border-color: var(--slate-300);
}

/* Tables */
.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.table th {
	text-align: left;
	padding: 12px 16px;
	font-size: 11px;
	font-weight: 600;
	color: var(--slate-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--slate-50);
	border-bottom: 1px solid var(--slate-200);
	white-space: nowrap;
}

.table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--slate-100);
	color: var(--slate-700);
	vertical-align: middle;
}

.table tbody tr:hover {
	background: var(--slate-50);
}

.table .actions {
	display: flex;
	gap: 8px;
}

.table .actions button {
	background: none;
	border: none;
	color: var(--slate-400);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all .15s;
}

.table .actions button:hover {
	color: var(--rose);
	background: var(--rose-light);
}

.table .actions button svg {
	width: 14px;
	height: 14px;
}

/* Thin Line Table */
.thin_table {
	border-collapse: collapse;
}
.thin_table td,
.thin_table th {
    border: 1px solid var(--slate-200);
}

/* Tags */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
}

.tag-rose {
	background: var(--rose-light);
	color: var(--rose-700);
}

.tag-emerald {
	background: var(--emerald-light);
	color: #047857;
}

.tag-amber {
	background: var(--amber-light);
	color: #B45309;
}

.tag-orange {
	background: var(--orange-light);
	color: #C2410C;
}

.tag-blue {
	background: var(--blue-light);
	color: #1D4ED8;
}

.tag-violet {
	background: var(--violet-light);
	color: #5B21B6;
}

.tag-slate {
	background: var(--slate-100);
	color: var(--slate-500);
}

/* Filters */
.filters {
	display: flex;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--slate-100);
	align-items: center;
	flex-wrap: wrap;
}

.filters input,
.filters select {
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
}

.filters input:focus,
.filters select:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.actions select {
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
}

.actions select:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

/* Pagination */
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
}

.pagination .info {
	font-size: 12px;
	color: var(--slate-500);
}

.pagination .pages {
	display: flex;
	gap: 4px;
}

.pagination .pages button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	background: #fff;
	color: var(--slate-700);
	font-size: 13px;
	cursor: pointer;
	transition: all .15s;
}

.pagination .pages button:hover {
	background: var(--slate-100);
}

.pagination .pages button.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

.pagination .pages button svg {
	width: 14px;
	height: 14px;
}

/* Drawers */
.drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	z-index: 60;
}

.drawer-overlay.show {
	opacity: 1;
	visibility: visible;
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 500px;
	height: 100vh;
	background: #fff;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
	transform: translateX(100%);
	transition: transform .3s ease;
	z-index: 61;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.drawer.show {
	transform: translateX(0);
}

.drawer-header {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 1px solid var(--slate-200);
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.drawer-header h2,
.drawer-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--slate-900);
}

.drawer-header button,
.drawer-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--slate-500);
	border-radius: 4px;
}

.drawer-header button:hover,
.drawer-close:hover {
	color: var(--slate-900);
	background: var(--slate-100);
}

.drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

.drawer-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--slate-100);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

/* Modals */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-overlay.show {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: #fff;
	border-radius: 16px;
	width: 560px;
	max-width: 90vw;
	max-height: 90vh;
	display: none;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	transition: opacity .3s ease;
	position: fixed;
	top: 5vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 201;
	opacity: 0;
}

.modal.show {
	display: flex;
	opacity: 1;
}

.modal-overlay.show .modal {
	transform: scale(1);
}

/* Detail Drawer Sections */
.drawer-section {
	margin-bottom: 24px;
}

.drawer-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--slate-100);
}

.drawer-field {
	margin-bottom: 16px;
}

.drawer-field label {
	display: block;
	font-size: 12px;
	color: var(--slate-500);
	margin-bottom: 4px;
}

.drawer-field .value {
	font-size: 14px;
	color: var(--slate-900);
	font-weight: 500;
}

.drawer-field input,
.drawer-field select,
.drawer-field textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
	transition: all .15s;
}

.drawer-field input:focus,
.drawer-field select:focus,
.drawer-field textarea:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.commission-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr auto;
	gap: 8px;
	align-items: center;
	background: var(--slate-50);
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 6px;
}

.commission-row .name {
	font-size: 13px;
	font-weight: 500;
}

.commission-row input {
	width: 80px;
	padding: 8px 12px;
	font-size: 13px;
	text-align: center;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	background: #fff;
	color: var(--slate-700);
	outline: none;
	font-family: inherit;
	transition: all .15s;
}

.commission-row input:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--slate-100);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-header h2 {
	font-size: 16px;
	font-weight: 600;
	color: var(--slate-900);
}

.modal-header button {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--slate-400);
	padding: 4px;
	border-radius: 4px;
}

.modal-header button:hover {
	color: var(--slate-700);
	background: var(--slate-100);
}

.modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 24px;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
	transition: all .15s;
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--slate-100);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.modal-footer .btn {
	padding: 8px 20px;
}

.modal-footer .btn.btn-danger {
	background: white;
	color: var(--rose);
	border: 1px solid var(--rose);
	margin-right: auto;
}

/* Form elements */
.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--slate-700);
	margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
	transition: all .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.form-group textarea {
	resize: vertical;
	min-height: 80px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.form-hint {
	font-size: 11px;
	color: var(--slate-400);
	margin-top: 4px;
}

/* Date filter chips */
.date-filter-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.date-filter-chip {
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid var(--slate-200);
	background: #fff;
	color: var(--slate-600);
	transition: all .15s;
	user-select: none;
}

.date-filter-chip:hover {
	border-color: var(--rose-300);
	color: var(--rose);
}

.date-filter-chip.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

.date-filter-custom {
	display: none;
	align-items: center;
	gap: 6px;
}

.date-filter-custom.show {
	display: flex;
}

.timeline {
	position: relative;
	padding-left: 24px;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 7px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--slate-200);
}

.timeline-item {
	position: relative;
	padding-bottom: 16px;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rose);
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--rose-light);
}

.timeline-item .time {
	font-size: 11px;
	color: var(--slate-400);
	margin-bottom: 2px;
}

.timeline-item .text {
	font-size: 13px;
	color: var(--slate-700);
}

/* Toast */
.toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.toast {
	background: #fff;
	border-radius: 10px;
	padding: 12px 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--slate-700);
	border-left: 3px solid var(--emerald);
	animation: slideIn .3s ease;
	min-width: 240px;
}

.toast.error {
	border-left-color: var(--rose);
}

.toast.warning {
	border-left-color: var(--amber);
}

.toast svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Tabs */
.tabs {
	display: flex;
	gap: 4px;
	padding: 0 20px;
	border-bottom: 1px solid var(--slate-100);
}

.tab {
	padding: 10px 16px;
	font-size: 13px;
	color: var(--slate-500);
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all .15s;
}

.tab:hover {
	color: var(--slate-700);
}

.tab.active {
	color: var(--rose);
	border-bottom-color: var(--rose);
	font-weight: 600;
}

.tab-content {
	display: none;
	padding: 20px;
}

.tab-content.active {
	display: block;
	animation: fadeIn .2s ease;
}

.tab-content.easy {
	padding: 0;
}

/* Light Weight Tabs */
.ez_tabs {
	display: flex;
	gap: 2px;
	padding: 0 4px;
}

.ez_tab {
	padding: 6px 12px;
	font-size: 12px;
	color: var(--slate-500);
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
	border-radius: 6px;
	transition: all .15s;
	line-height: 1.4;
}

.ez_tab:hover {
	color: var(--slate-700);
	background: var(--slate-100);
}

.ez_tab.active {
	color: var(--rose);
	background: var(--rose-light);
	font-weight: 600;
}

/* Sigs: sigmented control */
.sigs {
	display: flex;
	gap: 4px;
	padding: 3px;
	background: var(--slate-100);
	border-radius: 10px;
	border: 1px solid var(--slate-200);
}

.sigs button {
	padding: 5px 14px;
	border-radius: 8px;
	border: none;
	background: transparent;
	font-size: 13px;
	color: var(--slate-500);
	cursor: pointer;
	transition: all .15s;
	font-family: inherit;
	font-weight: 500;
	white-space: nowrap;
}

.sigs button:hover {
	color: var(--slate-700);
}

.sigs button.active {
	background: #fff;
	color: var(--slate-900);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Light Weight sigmented control */
.ez_sigs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
}

.ez_sigs .ez_sigs_option {
    cursor: pointer;
    color: var(--slate-600);
    font-weight: 400;
    transition: all .15s;
    white-space: nowrap;
}

.ez_sigs .ez_sigs_option:hover {
    color: var(--violet);
}

.ez_sigs .ez_sigs_option.active {
    color: var(--violet);
    font-weight: 600;
}

.ez_sigs .ez_sigs_sep {
    color: var(--slate-300);
    pointer-events: none;
}

/* SOP nodes */
.sop-node {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
	padding: 16px;
	background: var(--slate-50);
	border-radius: 10px;
	border: 1px solid var(--slate-200);
}

.sop-node .node-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rose);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

.sop-node .node-body {
	flex: 1;
}

.sop-node .node-remove {
	color: var(--slate-400);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: all .15s;
}

.sop-node .node-remove:hover {
	color: var(--rose);
	background: var(--rose-light);
}

/* Member card */
.member-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--slate-50);
	border-radius: 10px;
	margin-bottom: 12px;
}

.member-card img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.member-card .info {
	flex: 1;
}

.member-card .info .name {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-900);
}

.member-card .info .phone {
	font-size: 12px;
	color: var(--slate-500);
}

.member-card .balance {
	text-align: right;
}

.member-card .balance .num {
	font-size: 16px;
	font-weight: 700;
	color: var(--rose);
}

.member-card .balance .label {
	font-size: 11px;
	color: var(--slate-400);
}

/* Campaign preview */
.campaign-preview {
	background: var(--slate-50);
	border-radius: 10px;
	padding: 16px;
	border: 1px solid var(--slate-200);
}

.campaign-preview .bubble {
	background: #fff;
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--slate-700);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.campaign-preview .meta {
	font-size: 11px;
	color: var(--slate-400);
}

/* RFM grid */
.rfm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.rfm-cell {
	background: var(--slate-50);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	border: 1px solid var(--slate-200);
	cursor: pointer;
	transition: all .15s;
}

.rfm-cell:hover {
	border-color: var(--rose);
	background: var(--rose-light);
}

.rfm-cell .segment {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 4px;
}

.rfm-cell .count {
	font-size: 20px;
	font-weight: 700;
	color: var(--rose);
}

.rfm-cell .label {
	font-size: 11px;
	color: var(--slate-500);
}

/* Progress ring */
.progress-ring {
	width: 80px;
	height: 80px;
}

.progress-ring-bg {
	fill: none;
	stroke: var(--slate-100);
	stroke-width: 6;
}

.progress-ring-bar {
	fill: none;
	stroke: var(--rose);
	stroke-width: 6;
	stroke-linecap: round;
	transition: stroke-dashoffset .5s ease;
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .6;
	}
}

.pulse {
	animation: pulse 2s infinite;
}

/* Responsive */
@media (max-width: 1200px) {
	.stats-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.rfm-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.sidebar {
		width: 180px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.drawer {
		width: 100%;
	}
}

/* Service items */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

/* Inventory */
.inv-alert {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
}

.inv-alert.normal {
	background: var(--emerald-light);
	color: var(--emerald);
}

.inv-alert.warning {
	background: var(--amber-light);
	color: var(--amber);
}

.inv-alert.danger {
	background: var(--rose-light);
	color: var(--rose);
}

.inv-row {
	padding: 12px 16px;
	border-bottom: 1px solid var(--slate-100);
	display: grid;
	grid-template-columns: 2fr 1fr 80px 100px 1fr 80px;
	gap: 12px;
	font-size: 11px;
	cursor: pointer;
	transition: background .15s;
}

.inv-row:hover {
	background: var(--slate-50);
}

.inv-row .name {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--slate-900);
}

.inv-row .spec {
	font-size: 11px;
	color: var(--slate-500);
	width: 100px;
}

.inv-row .stock {
	font-size: 13px;
	font-weight: 600;
	width: 60px;
}

.inv-row .bar {
	flex: 1;
	max-width: 120px;
	height: 8px;
	background: var(--slate-100);
	border-radius: 4px;
	overflow: hidden;
}

.inv-row .bar-fill {
	height: 100%;
	border-radius: 4px;
	transition: width .3s;
}

.inv-row .actions {
	display: flex;
	gap: 4px;
}

.svc-consumable-row {
	display: grid;
	grid-template-columns: 2fr 1fr 80px 40px;
	gap: 8px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid var(--slate-100);
}

.svc-consumable-row:last-child {
	border-bottom: none;
}

/* Checkbox Theme */
input[type="checkbox"] {
	accent-color: var(--rose);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

input[type="checkbox"]:checked {
	accent-color: var(--rose);
}

/* 隐藏上下箭头的显示, Chrome/Safari (WebKit) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
	-webkit-appearance: none; margin: 0;
}

/* Custom checkbox styling */
.custom-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid var(--slate-300);
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	transition: all .15s;
	flex-shrink: 0;
}

.custom-checkbox:checked {
	background: var(--rose);
	border-color: var(--rose);
}

.custom-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-checkbox:checked {
	background: var(--rose) !important;
	border-color: var(--rose) !important;
}

.stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
}

.stock-badge.ok {
	background: var(--emerald-light);
	color: var(--emerald);
}

.stock-badge.low {
	background: var(--amber-light);
	color: var(--amber);
}

.stock-badge.out {
	background: var(--rose-light);
	color: var(--rose);
}

.pos-item-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	background: #fff;
	transition: all .15s;
}

.pos-item-row:hover {
	background: var(--slate-50);
	border-color: var(--rose-200);
}

.pos-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.pos-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: all .12s;
}

.pos-item:hover {
	border-color: var(--rose-300);
	background: var(--rose-50);
}

.pos-item .name {
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-900);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pos-item .price {
	font-size: 12px;
	font-weight: 700;
	color: var(--rose);
}

.pos-item .member-price {
	font-size: 10px;
	color: var(--amber);
}

.pos-item .add-btn {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--rose);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.pos-item .add-btn:hover {
	background: #e11d48;
}

.pay-method-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid var(--slate-200);
	background: #fff;
	color: var(--slate-600);
	transition: all .15s;
}

.pay-method-btn:hover {
	border-color: var(--rose-300);
}

.pay-method-btn.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

.source-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 16px;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid var(--slate-200);
	background: #fff;
	color: var(--slate-600);
	transition: all .15s;
}

.source-tag:hover {
	border-color: var(--rose-300);
}

.source-tag.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

.tag-input-row {
	display: flex;
	gap: 6px;
}

.tag-input-row input {
	flex: 1;
}

.service-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--slate-200);
	overflow: hidden;
	transition: all .15s;
}

.service-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: var(--slate-300);
}

.service-card .body {
	padding: 12px;
}

.service-card .name {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 4px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
}

/* 名称完整展示：允许换行，不做省略号截断；状态图标始终贴第一行 */
.service-card .name .svc-name {
	min-width: 0;
	line-height: 18px;
	overflow-wrap: anywhere;
}

/* 小程序显示标记（服务项目列表）：仅在「小程序显示」时渲染，不显示时不出现任何图标 */
.mini-app-badge {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: -1px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--emerald-light);
	color: var(--emerald);
}

.mini-app-badge svg {
	width: 13px;
	height: 13px;
}

.service-card .price {
	font-size: 15px;
	font-weight: 700;
	color: var(--rose);
}

.service-card .member-price {
	font-size: 11px;
	color: var(--amber);
	margin-top: 2px;
}

.service-card .duration {
	font-size: 11px;
	color: var(--slate-400);
}

/* Package cards */
.package-card {
	background: var(--rose-light);
	border: 1px solid var(--rose-100);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
}

.package-card .name {
	font-size: 14px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 4px;
}

.package-card .desc {
	font-size: 12px;
	color: var(--slate-500);
	margin-bottom: 8px;
}

.package-card .price {
	font-size: 18px;
	font-weight: 700;
	color: var(--rose);
}

.package-card .badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	background: var(--rose);
	color: #fff;
	margin-left: 8px;
}

/* AI cards */
.ai-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.ai-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid var(--slate-200);
	cursor: pointer;
	transition: all .15s;
}

.ai-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: var(--violet);
}

.ai-card .icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 20px;
}

.ai-card .title {
	font-size: 14px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 4px;
}

.ai-card .desc {
	font-size: 12px;
	color: var(--slate-500);
	line-height: 1.5;
}

.ai-chat-bubble {
	background: var(--slate-50);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
	border: 1px solid var(--slate-200);
}

.ai-chat-bubble.ai {
	background: var(--violet-light);
	border-color: var(--violet-light);
}

.ai-chat-bubble .meta {
	font-size: 11px;
	color: var(--slate-400);
	margin-bottom: 6px;
}

.ai-chat-bubble .text {
	font-size: 13px;
	color: var(--slate-700);
	line-height: 1.6;
}

/* ====== 挂账管理样式 ====== */
.debt-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	background: #FEE2E2;
	color: #DC2626;
	white-space: nowrap;
}

.debt-badge::before {
	content: '!';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #DC2626;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.balance-negative {
	color: #DC2626 !important;
	font-weight: 700;
}

.balance-positive {
	color: #059669;
}

.debt-summary-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 12px 0;
	padding: 0 20px;
}

.debt-summary-card {
	background: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
}

.debt-summary-card .label {
	font-size: 10px;
	color: var(--slate-500);
	margin-bottom: 4px;
	letter-spacing: 0.3px;
}

.debt-summary-card .value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.debt-summary-card .value.danger {
	color: #DC2626;
}

.debt-summary-card .value.warning {
	color: #D97706;
}

.debt-summary-card .value.success {
	color: #059669;
}

.debt-row td:first-child {
	border-left: 3px solid #DC2626;
}

.debt-status-paid {
	color: #059669;
	font-weight: 600;
}

.debt-status-unpaid {
	color: #DC2626;
	font-weight: 600;
}

.debt-status-partial {
	color: #D97706;
	font-weight: 600;
}

/* 备注tooltip */
.debt-note-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--slate-400);
	transition: color 0.2s;
}

.debt-note-btn:hover {
	color: var(--accent);
}

.debt-note-btn svg {
	width: 16px;
	height: 16px;
}

/* 欠款用户列表弹窗 */
.debt-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
}

.debt-modal-overlay.show {
	display: flex;
}

.debt-modal {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	width: 640px;
	max-width: 90vw;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.debt-modal h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.debt-modal .close-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--slate-400);
	padding: 4px;
}

.repay-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
}

.repay-modal-overlay.show {
	display: flex;
}

.repay-modal {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	width: 420px;
	max-width: 90vw;
	max-height: 80vh;
	overflow-y: auto;
}

.toggle-switch {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--slate-300);
	border-radius: 12px;
	cursor: pointer;
	transition: background .2s;
	flex-shrink: 0;
}

.toggle-switch.active {
	background: var(--rose);
}

.toggle-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch.active::after {
	transform: translateX(20px);
}

.filter-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.filter-pill {
	padding: 6px 14px;
	border-radius: 20px;
	border: 1px solid var(--slate-200);
	background: #fff;
	font-size: 12px;
	color: var(--slate-600);
	cursor: pointer;
	transition: all .15s;
}

.filter-pill:hover {
	border-color: var(--rose);
	color: var(--rose);
}

.filter-pill.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
}

.filter-pill.sub {
	padding: 4px 10px;
	font-size: 11px;
	border-radius: 16px;
}

/* ===== ... ===== */
.type-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
}

.type-badge-a {
	background: var(--emerald-light);
	color: #047857;
}

.type-badge-b {
	background: var(--violet-light);
	color: #5B21B6;
}

/* ===== Orders Page ===== */
.order-row {
	transition: all .15s;
}

.order-row:hover {
	background: var(--slate-50);
}

.order-status-draft {
	color: var(--emerald);
	font-weight: 500;
}
.order-status-pending {
	color: var(--emerald);
	font-weight: 500;
}
.order-status-paid {
	color: var(--emerald);
	font-weight: 500;
}
.order-status-part_paid {
	color: var(--amber);
	font-weight: 500;
}
.order-status-refunded {
	color: var(--rose);
	font-weight: 500;
}
.order-status-part_refunded {
	color: var(--rose);
	font-weight: 500;
}
.order-status-cancelled {
	color: var(--slate-400);
	text-decoration: line-through;
}
.order-status-bad {
	color: var(--slate-400);
	text-decoration: line-through;
}

.b-class-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	background: var(--violet-light);
	color: #5B21B6;
}

.perf-assign-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.perf-assign-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--slate-50);
	border-radius: 8px;
}

.perf-assign-item .name {
	flex: 1;
	font-size: 13px;
	color: var(--slate-700);
}

.perf-assign-item input {
	width: 80px;
	padding: 6px 8px;
	border: 1px solid var(--slate-200);
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
}
/* ===== 数据花哨相关 ===== */
.analytics-time-bar {
	display: flex;
	gap: 4px;
}

.analytics-time-bar button {
	padding: 6px 16px;
	border-radius: 8px;
	border: 1px solid var(--slate-200);
	background: #fff;
	font-size: 13px;
	color: var(--slate-600);
	cursor: pointer;
	transition: all .15s;
	font-family: inherit;
}

.analytics-time-bar button:hover {
	border-color: var(--rose);
	color: var(--rose);
}

.analytics-time-bar button.active {
	background: var(--rose);
	color: #fff;
	border-color: var(--rose);
	font-weight: 500;
}

.analytics-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.analytics-grid .analytics-card {
	cursor: pointer;
	transition: all .15s;
	position: relative;
}

.analytics-grid .analytics-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-color: var(--rose);
	transform: translateY(-2px);
}

.analytics-grid .analytics-card::after {
	content: '→';
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 11px;
	color: var(--slate-300);
}

.analytics-grid .analytics-card:hover::after {
	color: var(--rose);
}

.analytics-card {
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	border: 1px solid var(--slate-200);
}

.analytics-card .label {
	font-size: 12px;
	color: var(--slate-500);
	margin-bottom: 6px;
}

.analytics-card .value {
	font-size: 22px;
	font-weight: 700;
	color: var(--slate-900);
}

.analytics-card .sub {
	font-size: 11px;
	color: var(--slate-400);
	margin-top: 4px;
}

.analytics-card .change {
	font-size: 11px;
	color: var(--emerald);
	margin-top: 4px;
}

.analytics-card .change.down {
	color: var(--rose);
}

.analytics-charts-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

.analytics-chart-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--slate-200);
	padding: 20px;
}

.analytics-chart-card h4 {
	font-size: 14px;
	font-weight: 600;
	color: var(--slate-900);
	margin-bottom: 16px;
}

.pie-chart {
	display: flex;
	align-items: center;
	gap: 20px;
}

.pie-legend {
	flex: 1;
}

.pie-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	color: var(--slate-600);
}

.pie-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

/* Channel Health Matrix */
.channel-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.channel-table thead th {
	background: var(--slate-50);
	color: var(--slate-700);
	font-weight: 600;
	padding: 8px 10px;
	border-bottom: 2px solid var(--slate-200);
	text-align: center;
	white-space: nowrap;
}

.channel-table tbody td {
	padding: 10px;
	border-bottom: 1px solid var(--slate-100);
	text-align: center;
	color: var(--slate-700);
}

.channel-table tbody tr {
	cursor: pointer;
	transition: background 0.15s;
}

.channel-table tbody tr:hover {
	background: var(--blue-light);
}

.channel-table tbody tr.active-channel {
	background: var(--blue-light);
	border-left: 3px solid var(--blue);
}

.channel-table .channel-name {
	font-weight: 600;
	color: var(--slate-900);
	text-align: left;
}

.channel-bar {
	display: inline-block;
	height: 8px;
	border-radius: 4px;
	background: var(--emerald);
	vertical-align: middle;
	margin-right: 4px;
	min-width: 4px;
}

.channel-bar-red {
	background: var(--rose);
}

.channel-bar-yellow {
	background: var(--amber);
}

.channel-bar-green {
	background: var(--emerald);
}

.channel-cac-high {
	color: var(--rose);
	font-weight: 600;
}

.channel-cac-mid {
	color: var(--amber);
	font-weight: 600;
}

.channel-cac-low {
	color: var(--emerald);
	font-weight: 600;
}

.channel-retention-high {
	color: var(--emerald);
	font-weight: 600;
}

.channel-retention-low {
	color: var(--rose);
	font-weight: 600;
}

.channel-detail-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 20px;
}

.channel-funnel-bar {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.channel-funnel-label {
	width: 100px;
	font-size: 12px;
	color: var(--slate-600);
	text-align: right;
	padding-right: 10px;
	flex-shrink: 0;
}

.channel-funnel-track {
	flex: 1;
	height: 28px;
	background: var(--slate-100);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}

.channel-funnel-fill {
	height: 100%;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 8px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	transition: width 0.5s ease;
	min-width: 40px;
}

.channel-funnel-count {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--slate-500);
}

.channel-funnel-pct {
	font-size: 12px;
	color: var(--slate-600);
	margin-left: 8px;
	width: 45px;
	flex-shrink: 0;
}

.channel-input {
	width: 80px;
	padding: 4px 6px;
	border: 1px solid var(--slate-200);
	border-radius: 6px;
	font-size: 12px;
	color: var(--slate-700);
	text-align: right;
	background: #fff;
	transition: border-color 0.15s;
}

.channel-input:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 2px var(--blue-light);
}

.channel-input::placeholder {
	color: var(--slate-300);
}

/* ===== Ranking Lists ===== */
.rank-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--slate-100);
}

.rank-item:last-child {
	border-bottom: none;
}

.rank-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--slate-100);
	color: var(--slate-500);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rank-num.top {
	background: var(--slate-900);
	color: #fff;
}

.rank-info {
	flex: 1;
	min-width: 0;
}

.rank-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-800);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.rank-badge {
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 500;
}

.rank-badge.a {
	background: var(--emerald-light);
	color: var(--emerald);
}

.rank-badge.b {
	background: var(--violet-light);
	color: var(--violet);
}

.rank-bar-bg {
	height: 5px;
	background: var(--slate-100);
	border-radius: 3px;
	overflow: hidden;
}

.rank-bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease;
}

.rank-value {
	text-align: right;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-800);
	flex-shrink: 0;
	min-width: 56px;
}

/* ===== Analytics Detail Modal ===== */
.analytics-detail-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}

.analytics-detail-metric {
	background: var(--slate-50);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
}

.analytics-detail-metric .label {
	font-size: 11px;
	color: var(--slate-500);
	margin-bottom: 4px;
}

.analytics-detail-metric .value {
	font-size: 20px;
	font-weight: 700;
	color: var(--slate-900);
}

.analytics-detail-metric .change {
	font-size: 11px;
	margin-top: 2px;
}

.analytics-detail-metric .change.up {
	color: var(--emerald);
}

.analytics-detail-metric .change.down {
	color: var(--rose);
}

.analytics-trend-chart {
	width: 100%;
	height: 180px;
}

.analytics-trend-chart .svg-line-chart {
	height: 100%;
}

/* ===== Employee Stats ===== */
.emp-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.emp-stat-card {
	background: var(--slate-50);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
}

.emp-stat-card .label {
	font-size: 11px;
	color: var(--slate-500);
	margin-bottom: 4px;
}

.emp-stat-card .value {
	font-size: 18px;
	font-weight: 700;
	color: var(--slate-900);
}

.emp-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

.emp-rank-1 {
	background: #FFD700;
	color: #B45309;
}

.emp-rank-2 {
	background: #C0C0C0;
	color: #475569;
}

.emp-rank-3 {
	background: #CD7F32;
	color: #fff;
}

.emp-rank-other {
	background: var(--slate-200);
	color: var(--slate-600);
}

/* SVG Line Chart */
.svg-line-chart {
	width: 100%;
	height: 180px;
	position: relative;
}

.svg-line-chart svg {
	width: 100%;
	height: 100%;
	display: block;
}

.svg-line-chart .grid-line {
	stroke: var(--slate-200);
	stroke-width: 1;
	stroke-dasharray: 3, 3;
}

.svg-line-chart .axis-text {
	font-size: 11px;
	fill: var(--slate-500);
	font-family: "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
}

.svg-line-chart .axis-text.y-label {
	font-size: 10px;
	fill: var(--slate-400);
}

.svg-line-chart .chart-line {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.svg-line-chart .chart-dot {
	r: 3.5;
	stroke-width: 2.5;
	transition: r 0.15s;
	cursor: pointer;
}

.svg-line-chart .chart-dot:hover {
	r: 5.5;
}

.svg-line-chart .chart-area {
	opacity: 0.06;
}

/* Legend */
.chart-legend {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.chart-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--slate-600);
}

.chart-legend-line {
	width: 16px;
	height: 3px;
	border-radius: 2px;
}

.chart-legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

/* SVG Pie Chart */
.svg-pie-chart {
	display: flex;
	align-items: center;
	gap: 20px;
}

.svg-pie-chart svg {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
}

.svg-pie-label {
	font-size: 10px;
	fill: #fff;
	font-weight: 600;
	text-anchor: middle;
}

@media (max-width: 1200px) {
	.analytics-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.analytics-charts-row {
		grid-template-columns: 1fr;
	}

	.analytics-detail-metrics {
		grid-template-columns: repeat(2, 1fr);
	}

	.emp-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.analytics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.analytics-detail-metrics {
		grid-template-columns: 1fr;
	}
}

/* Tree Node Styles for Category Management */
.tree-node {
	border-bottom: 1px solid var(--slate-100);
}

.tree-node:last-child {
	border-bottom: none;
}

.tree-children {
	padding-left: 20px;
}

.form-readonly {
 	display: inline-block;
 	padding: 6px 12px;
 	background: var(--slate-50);
 	border-radius: 6px;
 	font-size: 13px;
 	color: var(--slate-700);
 }

 /* Settings Nav */
 .settings-nav {
 	display: flex;
 	gap: 4px;
 	padding: 0 20px;
 	border-bottom: 1px solid var(--slate-100);
 	margin-bottom: 20px;
 }

 .settings-nav-item {
 	padding: 10px 16px;
 	font-size: 13px;
 	color: var(--slate-500);
 	cursor: pointer;
 	border: none;
 	background: none;
 	font-family: inherit;
 	border-bottom: 2px solid transparent;
 	margin-bottom: -1px;
 	transition: all .15s;
 }

 .settings-nav-item:hover {
 	color: var(--slate-700);
 }

 .settings-nav-item.active {
 	color: var(--rose);
 	border-bottom-color: var(--rose);
 	font-weight: 600;
 }

 .settings-section {
 	display: none;
 }

 .settings-section.active {
 	display: block;
 	animation: fadeIn .2s ease;
 }

/* ========== NEW ORDER CHIP (checkout page) ========== */
.new-order-chip {
	flex: 0 0 auto;
	min-width: 140px;
	max-width: 220px;
	height: 55px;
	border: 1px solid var(--rose);
	border-radius: 12px;
	padding: 8px 12px;
	background: #fff;
	cursor: pointer;
}
.new-order-chip div:first-child {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-order-chip div:last-child {
	display:block;
	font-size: 12px;
	color: var(--slate-500);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========== DRAFT ORDER CHIPS (checkout page) ========== */
#order-chips-box {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	flex: 1;
	min-width: 0;
	padding: 2px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#order-chips-box:empty {
	display: none;
}

#order-chips-box::-webkit-scrollbar {
	display: none;
}

.order-chip {
	flex: 0 0 auto;
	min-width: 140px;
	max-width: 220px;
	border: 1px solid var(--slate-200);
	border-radius: 12px;
	padding: 8px 12px;
	background: #fff;
	cursor: pointer;
	transition: all .15s ease;
}

.order-chip span {
	line-height: 18px;
}

.order-chip:hover {
	border-color: var(--rose);
}

.order-chip.active {
	border-color: var(--rose);
	background: var(--rose);
	color: #fff;
	box-shadow: 0 2px 10px rgba(225, 29, 72, .3);
}

.order-chip-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.order-chip-no {
	font-family: monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-500);
}

.order-chip-cust {
	font-size: 13px;
	font-weight: 600;
	color: var(--slate-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-chip-name {
	font-size: 12px;
	color: var(--slate-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-chip-staff {
	font-size: 12px;
	color: var(--slate-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-chip.active .order-chip-no,
.order-chip.active .order-chip-cust,
.order-chip.active .order-chip-name,
.order-chip.active .order-chip-staff {
	color: rgba(255, 255, 255, .85);
}
 /* 默认的 select 的原始样式不十分受 css 控制, 这段儿取消其默认效果 */
.filters select,
.actions select,
.drawer-field select,
.modal-body select,
.form-group select {
	/* 去掉浏览器默认下拉样式 */
	appearance: none;
	-webkit-appearance: none;

	/* 右侧留出空间给箭头 */
	padding-right: 36px;

	/* 自定义 SVG 箭头（向下小三角） */
	background-image: url("icons/select_down_arrow.svg");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}

/* 添加员工: 按钮 + 透明 select 叠加 */
#perfAddBtnContainer .perf-add-btn {
	background: var(--emerald);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}
#perfAddBtnContainer .perf-add-btn:hover {
	background: #0da271;
}
#perfAddBtnContainer .perf-add-select-hidden {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
 }

 /* ===== 经营指标层级面板（统计口径见《新系统相关资料》） ===== */
.biz-section {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--slate-200);
	margin-bottom: 16px;
	overflow: hidden;
}

.biz-section-header {
	padding: 12px 20px;
	border-bottom: 1px solid var(--slate-100);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--slate-50);
}

.biz-section-no {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--rose);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.biz-section-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--slate-900);
}

.biz-section-formula {
	font-size: 11px;
	color: var(--slate-400);
}

.biz-body {
	padding: 16px 20px;
}

.biz-parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--rose) 0%, #F43F5E 100%);
	color: #fff;
}

.biz-parent--emerald {
	background: linear-gradient(135deg, #059669 0%, #10B981 100%);
}

.biz-parent--blue {
	background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
}

.biz-parent--amber {
	background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
}

.biz-parent.clickable {
	cursor: pointer;
	transition: all .15s;
}

.biz-parent.clickable:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
}

.biz-parent-title {
	font-size: 14px;
	font-weight: 700;
}

.biz-parent-formula {
	font-size: 11px;
	opacity: .88;
	margin-top: 3px;
}

.biz-parent-value {
	font-size: 26px;
	font-weight: 700;
	white-space: nowrap;
}

.biz-parent-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* ⑤ 交叉购买率系列 ①~⑥：横向排列的块（2026-10-09 用户要求）。
   6 个比率类统计项排成 3 列（全部视图 = 2 行 × 3；生美/医美视图 = 1 行 × 3）；
   ⑦ 品类级交叉率的有序对列表体量大，不进本网格、单独占整行。 */
.biz-cross-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
}

/* 窄列里让左侧「标题 + 公式」优先展示、数值不被压缩到换行 */
.biz-cross-grid .biz-parent {
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
}

.biz-cross-grid .biz-parent > div:first-child {
	min-width: 0;
}

.biz-cross-grid .biz-parent-title {
	font-size: 13px;
}

.biz-cross-grid .biz-parent-formula {
	font-size: 10.5px;
	line-height: 1.45;
}

.biz-cross-grid .biz-parent-value {
	font-size: 22px;
}

@media (max-width: 1200px) {
	.biz-cross-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.biz-cross-grid {
		grid-template-columns: 1fr;
	}
}

.biz-tree {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 2px dashed var(--rose-100);
	margin-top: 10px;
}

.biz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}

/* ⑦ 品类级交叉率的有序对：固定 6 列 → 「全部」视图 12 条 = **2 行 × 6 平均排列**
   （2026-10-09 17:30 用户要求；窄屏逐级降列）。 */
.biz-pair-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.biz-pair-grid .biz-card {
	padding: 10px 12px;
	min-width: 0;
}

.biz-pair-grid .biz-card-label {
	font-size: 11.5px;
	line-height: 1.35;
	word-break: break-word;
}

.biz-pair-grid .biz-card-value {
	font-size: 17px;
}

.biz-pair-grid .biz-card-formula {
	font-size: 9.5px;
	line-height: 1.45;
}

@media (max-width: 1280px) {
	.biz-pair-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.biz-pair-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.biz-pair-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


.biz-card {
	background: var(--slate-50);
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	padding: 12px 14px;
	transition: all .15s;
}

.biz-card.clickable {
	cursor: pointer;
}

.biz-card.clickable:hover {
	border-color: var(--rose);
	background: var(--rose-light);
}

.biz-card-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-700);
}

.biz-card-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--slate-900);
	margin: 4px 0 3px;
}

.biz-card-formula {
	font-size: 10px;
	color: var(--slate-400);
	line-height: 1.5;
}

.biz-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.biz-pill {
	font-size: 10px;
	background: #fff;
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	padding: 2px 8px;
	color: var(--slate-600);
	white-space: nowrap;
}

.biz-sumstrip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.biz-sumitem {
	background: var(--blue-light);
	border: 1px solid #DBEAFE;
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.biz-sum-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-700);
}

.biz-sum-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--blue);
}

.biz-sum-formula {
	font-size: 10px;
	color: var(--slate-400);
}

.biz-sumitem.warn {
	background: var(--rose-light);
	border-color: var(--rose-100);
}

.biz-sumitem.warn .biz-sum-value {
	color: var(--rose);
}

.biz-sumitem.expanded {
	grid-column: 1 / -1;
}

.biz-sub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.biz-sub-cell {
	background: #fff;
	border: 1px solid #DBEAFE;
	border-radius: 8px;
	padding: 8px 12px;
}

.biz-sub-cell .n {
	font-size: 11px;
	font-weight: 600;
	color: var(--slate-600);
}

.biz-sub-cell .v {
	font-size: 15px;
	font-weight: 700;
	color: var(--blue);
	margin: 2px 0;
}

.biz-sub-cell .f {
	font-size: 10px;
	color: var(--slate-400);
}

.biz-pen-bar {
	height: 5px;
	background: var(--slate-200);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 8px;
}

.biz-pen-fill {
	height: 100%;
	border-radius: 3px;
	background: var(--rose);
}

@media (max-width: 900px) {
	.biz-parent-row {
		grid-template-columns: 1fr;
	}

	.biz-tree {
		margin-left: 6px;
		padding-left: 10px;
	}
}

/* ===== 树型下拉选择器 (Tree Select) =====
   用于卡项「服务列表 / 子项目列表」里选择服务或商品项目：
   一级分类 > 二级分类 > 三级分类 > 具体项目，只有叶子项目可选。
   浮层挂在 body 上，避免被 modal-body 的 overflow 裁剪。 */
.tree-select {
	position: relative;
	flex: 1;
	min-width: 0;
}

.tree-select .ts-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	font-size: 13px;
	color: var(--slate-700);
	background: #fff;
	outline: none;
	font-family: inherit;
	cursor: pointer;
	user-select: none;
	transition: all .15s;
}

.tree-select .ts-trigger:hover {
	border-color: var(--slate-300);
}

.tree-select.open .ts-trigger {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 3px var(--rose-light);
}

.tree-select .ts-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tree-select .ts-arrow {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--slate-400);
	transition: transform .2s;
}

.tree-select.open .ts-arrow {
	transform: rotate(180deg);
}

.ts-panel {
	position: fixed;
	z-index: 210;
	background: #fff;
	border: 1px solid var(--slate-200);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
	overflow: hidden;
}

.ts-search-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-bottom: 1px solid var(--slate-100);
	background: #fff;
}

.ts-search-row input {
	flex: 1;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid var(--slate-200);
	border-radius: 6px;
	font-size: 12px;
	color: var(--slate-700);
	outline: none;
	font-family: inherit;
}

.ts-search-row input:focus {
	border-color: #FDA4AF;
	box-shadow: 0 0 0 2px var(--rose-light);
}

.ts-tree {
	max-height: 300px;
	overflow-y: auto;
	padding: 4px 0;
}

.ts-node-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--slate-50);
}

.ts-node-cat {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: var(--slate-900);
	background: #fff;
}

.ts-node-cat:hover {
	background: var(--slate-50);
}

/* 层级主要靠左缩进体现（见 JS 里的 TS_INDENT_*），这里只做字号/字重的轻微区分 */
.ts-node-cat.depth1 {
	color: var(--slate-700);
}

.ts-node-cat.depth2,
.ts-node-cat.depth3 {
	color: var(--slate-500);
	font-weight: 500;
}

.ts-node-cat .ts-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ts-caret,
.ts-caret-space {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ts-caret svg {
	width: 12px;
	height: 12px;
	color: var(--slate-400);
	transition: transform .18s;
}

.ts-caret.open svg {
	transform: rotate(90deg);
}

.ts-count {
	font-size: 10px;
	font-weight: 500;
	color: var(--slate-400);
	flex-shrink: 0;
}

.ts-item-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--slate-700);
	cursor: pointer;
}

.ts-item-row:hover {
	background: var(--rose-light);
	color: var(--rose);
}

.ts-item-row.selected {
	background: var(--rose-light);
	color: var(--rose);
	font-weight: 600;
}

.ts-item-row.disabled {
	opacity: .4;
	cursor: not-allowed;
	background: transparent;
}

.ts-item-row.disabled:hover {
	background: transparent;
	color: var(--slate-700);
}

.ts-item-row .ts-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ts-item-row .ts-path {
	font-size: 10px;
	font-weight: 400;
	color: var(--slate-400);
	flex-shrink: 0;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ts-item-row .ts-price {
	font-size: 11px;
	font-weight: 400;
	color: var(--slate-400);
	flex-shrink: 0;
}

.ts-item-row.selected .ts-price {
	color: var(--rose);
}

.ts-item-row .ts-check {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ts-item-row .ts-check svg {
	width: 14px;
	height: 14px;
	color: var(--rose);
}

.ts-empty {
	padding: 20px 12px;
	text-align: center;
	color: var(--slate-400);
	font-size: 12px;
}

/* ---- 多选树型选择器（优惠券：适用服务品类 / 适用商品品类）---- */
/* 行首的三态复选框：未选 / 全选(on) / 部分下级被选(partial) */
.tsm-check {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 1.5px solid var(--slate-300);
	border-radius: 3px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-sizing: border-box;
}

.tsm-check.on,
.tsm-check.partial {
	background: var(--emerald);
	border-color: var(--emerald);
}

.tsm-check svg {
	width: 10px;
	height: 10px;
}

/* 半选：中间一条横杠 */
.tsm-check.partial::after {
	content: '';
	width: 7px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}

.tsm-row .ts-path {
	font-size: 10px;
	font-weight: 400;
	color: var(--slate-400);
	flex-shrink: 0;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tsm-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-top: 1px solid var(--slate-100);
	font-size: 12px;
	color: var(--slate-500);
}

.tsm-clear {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--rose);
	font-size: 12px;
	padding: 0;
}

/* 勾了「全部服务 / 全部商品」之后，下面的树就不再起作用，置灰提示 */
.tsm-box.disabled {
	opacity: .5;
	pointer-events: none;
}

/* 特异性要压过 .form-group label（后者是 display:block，会把 align-items/gap 全废掉，
   复选框退回基线对齐、和文字对不齐），所以这里写成 .form-group label.scope-all-check */
.form-group label.scope-all-check {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	margin-bottom: 10px;
}

/* 抵消 .form-group input 的 padding/边框/圆角 —— 否则原生勾选框会被撑成带边框的圆角方块 */
.form-group label.scope-all-check input[type="checkbox"] {
	width: 15px;
	height: 15px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 3px;
	flex-shrink: 0;
	accent-color: var(--rose);
	cursor: pointer;
}

/* 优惠券「优惠规则」的横排行：换购券第一行只放换购项目，第二行放价格/门槛/业绩方式 */
.cr-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.cr-row > .form-group {
	flex: 1 1 150px;
	min-width: 0;
}

/* 「服务 / 商品」类型选择：固定窄宽，不跟其它项抢空间 */
.cr-row > .cr-type {
	flex: 0 0 96px;
}

/* 树型选择器所在列：优先拿剩余宽度 */
.cr-row > .cr-grow {
	flex: 2 1 240px;
}

/* ============================================================
   业务线 / 页签切换：先淡出旧内容 → 再淡入新内容（2026-10-07 第 2 版）
   ------------------------------------------------------------
   用户口径原话：「先灰掉之前的，再出现现在新的」+「再慢一些」。
   → 由「交叉淡入（新旧交叠渐变）」改为**两段式顺序淡入淡出**：
     ① 整块内容淡出（灰掉）  →  ② 换成新内容  →  ③ 新内容淡入出现
     两段之间**没有交叠**，所以不需要覆盖层，也不会出现两层文字重影；
     内容在第 ② 步替换时容器已经全透明，行数/高度怎么变都看不见。
   🔴 时长只在 CSS 里定义（--switch-fade-out / --switch-fade-in），JS 用
      _xFadeOutMs() / _xFadeInMs() 读回来，别再写第二份。
   ============================================================ */
:root {
	--switch-fade-out: .1s;
	--switch-fade-in: .2s;
}

/* 只是「可淡入淡出切换」区域的标记类；真正的 opacity/transition 由 JS 写 inline，
   因为两段式切换需要「淡出播完再换内容」的时序，纯 CSS 做不到。 */
.x-fade-host {
	will-change: opacity;
}

/* 页签选中态：显式只过渡「颜色 / 下划线 / 底色」。
   原来 .tab 的 transition:all .15s 会连带背景等未定义属性一起抖。 */
.tabs .tab {
	transition: color .25s ease, border-bottom-color .25s ease, background-color .25s ease;
}

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

	.tabs .tab {
		transition: none;
	}
}