/* ==========================================================================
   Origin Mind Management Dashboard (原点心理 管理后台) - 1:1 对齐设计图样式系统
   ========================================================================== */

:root {
  --sidebar-bg: #1B3527;
  --sidebar-text: #A8C4B4;
  --sidebar-active-bg: #4F7A61;
  --sidebar-active-text: #FFFFFF;
  --sidebar-hover-bg: #274735;
  --bg-main: #F4F7F5;
  --card-bg: #FFFFFF;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border-color: #E2E8F0;
  --primary-green: #2E5E4E;
  --primary-hover: #234B3E;
  --accent-green: #27AE60;
  --accent-blue: #3B82F6;
  --accent-orange: #F97316;
  --accent-red: #EF4444;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* ==========================================================================
   1. 左侧深色侧边栏
   ========================================================================== */
.admin-sidebar {
  width: 230px;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 12px 14px 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.brand-icon-box {
  width: 36px;
  height: 36px;
  background: var(--accent-green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
}

.brand-text-col {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.brand-sub {
  font-size: 11px;
  color: #8BAE9A;
  margin-top: 2px;
}

/* 导航菜单列表 (独立自适应滚动区域) */
.sidebar-menu {
  list-style: none;
  margin-top: 14px;
  margin-bottom: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.menu-item:hover {
  background-color: var(--sidebar-hover-bg);
  color: #FFFFFF;
}

.menu-item.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-icon {
  font-size: 16px;
  width: 18px;
  display: flex;
  justify-content: center;
}

.menu-arrow {
  font-size: 10px;
  color: #8BAE9A;
  transition: transform 0.2s;
}

/* 侧边栏底部管理员 (固定置底，不随菜单滚动) */
.sidebar-footer {
  padding-top: 12px;
  padding-bottom: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background-color: var(--sidebar-bg);
  z-index: 2;
}

.admin-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #395E4A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.admin-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
}

.admin-role {
  font-size: 11px;
  color: #8BAE9A;
}

.logout-btn {
  color: #8BAE9A;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.15s;
}

.logout-btn:hover {
  color: #EF4444;
}

/* ==========================================================================
   2. 右侧主内容区域
   ========================================================================== */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 40px;
}

/* 顶部面包屑 */
.top-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.top-breadcrumb .crumb-active {
  color: var(--text-secondary);
  font-weight: 500;
}

/* 页面标题栏与操作按钮 */
.page-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.title-box h1 {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.3px;
}

.title-box p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

.btn-primary {
  background: #2D5A3D;
  border: 1px solid transparent;
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(45, 90, 61, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: #234730;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(45, 90, 61, 0.38);
}

/* ==========================================================================
   3. 核心统计卡片区 (严格剔除会员用户，3列大卡片)
   ========================================================================== */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 16px rgba(30, 41, 59, 0.02);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 41, 59, 0.05);
}

.stat-info-left {
  display: flex;
  flex-direction: column;
}

.stat-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-tooltip-icon {
  font-size: 12px;
  color: #94A3B8;
  cursor: help;
}

.stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  margin-top: 8px;
  letter-spacing: -0.5px;
}

.stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.stat-icon-wrapper.icon-green {
  background: #EBF7EE;
  color: #27AE60;
}

.stat-icon-wrapper.icon-blue {
  background: #EFF6FF;
  color: #2563EB;
}

.stat-icon-wrapper.icon-orange {
  background: #FFF7ED;
  color: #EA580C;
}

/* ==========================================================================
   4. 筛选过滤栏
   ========================================================================== */
.filter-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(30, 41, 59, 0.015);
}

.filter-inputs-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

.filter-input-wrap {
  position: relative;
  min-width: 220px;
}

.filter-input-wrap .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  font-size: 14px;
}

.filter-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.15s;
}

.filter-input:focus {
  border-color: var(--sidebar-active-bg);
}

.filter-select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background: #FFFFFF;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  min-width: 130px;
}

/* 表单内下拉：撑满容器，用于「关联来源内容」等选择项 */
.form-select {
  width: 100%;
  padding: 9px 28px 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  background-color: #FFFFFF;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.form-select:focus {
  border-color: var(--sidebar-active-bg);
}

.filter-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-filter-submit {
  background: var(--sidebar-active-bg);
  color: #FFFFFF;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-filter-submit:hover {
  background: #426752;
}

.btn-filter-reset {
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-filter-reset:hover {
  background: #F8FAFC;
  color: #334155;
}

/* ==========================================================================
   5. 数据表格 (严格无编辑按钮，仅查看与禁用/启用)
   ========================================================================== */
.table-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 16px rgba(30, 41, 59, 0.02);
  overflow: hidden;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.custom-table th {
  background: #F8FAFC;
  padding: 13px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748B;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.custom-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}

.custom-table tr:hover td {
  background-color: #F8FAFB;
}

/* 用户信息单元格 */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.user-info-text {
  display: flex;
  flex-direction: column;
}

.user-nickname {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
}

.user-subtext {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 等级 Badge */
.level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
}

.level-1 { background: #F1F5F9; color: #475569; }
.level-2 { background: #FEF3C7; color: #D97706; }
.level-3 { background: #E0E7FF; color: #4F46E5; }
.level-4 { background: #ECFDF5; color: #059669; }
.level-5 { background: #F3E8FF; color: #9333EA; }
.level-6 { background: #FCE7F3; color: #DB2777; }
.level-7 { background: #FFEDD5; color: #EA580C; }

/* 状态 Badge */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-active {
  background: #ECFDF5;
  color: #059669;
}
.status-active .status-dot { background: #10B981; }

.status-pending {
  background: #FFFBEB;
  color: #D97706;
}
.status-pending .status-dot { background: #F59E0B; }

.status-disabled {
  background: #FEF2F2;
  color: #DC2626;
}
.status-disabled .status-dot { background: #EF4444; }

/* 操作按钮 (仅查看和禁用/启用，无编辑) */
.action-links {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.action-btn {
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.action-btn:hover {
  opacity: 0.75;
}

.action-btn.view {
  color: #059669;
}

.action-btn.disable {
  color: #EF4444;
}

.action-btn.enable {
  color: #2563EB;
}

/* 分页栏 */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  background: #FFFFFF;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #334155;
}

.page-btn.active {
  background: var(--sidebar-active-bg);
  color: #FFFFFF;
  border-color: var(--sidebar-active-bg);
  font-weight: 600;
}

/* ==========================================================================
   6. 用户详情抽屉 (查看统计 - 包含基础、测评、冥想、打卡4维数据)
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drawer-overlay.open {
  display: flex;
  opacity: 1;
}

.drawer-content {
  width: 540px;
  max-width: 90vw;
  height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-overlay.open .drawer-content {
  transform: translateX(0);
}

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

.drawer-user-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}

.drawer-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.drawer-user-meta h2 {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-user-meta p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.drawer-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.drawer-close-btn:hover {
  background: #F1F5F9;
  color: #334155;
}

/* 抽屉内四维度 Tab */
.drawer-tabs {
  display: flex;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
  background: #FAFAFA;
}

.drawer-tab-item {
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.drawer-tab-item:hover {
  color: var(--sidebar-active-bg);
}

.drawer-tab-item.active {
  color: var(--sidebar-active-bg);
  border-bottom-color: var(--sidebar-active-bg);
}

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

.drawer-pane {
  display: none;
}

.drawer-pane.active {
  display: block;
}

/* 基础资料网格 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  background: #F8FAFC;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid #F1F5F9;
}

.info-item .item-label {
  font-size: 11.5px;
  color: var(--text-muted);
}

.info-item .item-val {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  margin-top: 4px;
}

/* 测评 / 冥想 / 打卡 列表卡片 */
.record-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.record-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.record-score {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  background: #DCFCE7;
  padding: 2px 8px;
  border-radius: 10px;
}

.record-desc {
  font-size: 12.5px;
  color: #64748B;
  margin: 6px 0;
  line-height: 1.4;
}

.record-meta {
  font-size: 11.5px;
  color: #94A3B8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   7. 新增用户模态框
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open,
.modal-overlay.active {
  display: flex;
}

.modal-card {
  width: 440px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
}

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
}

.form-control:focus {
  border-color: var(--sidebar-active-bg);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ==========================================================================
   8. 高保真打卡日历 (1:1 对齐打卡日历参考图)
   ========================================================================== */
.checkin-calendar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

/* 顶部打卡汇总横幅 */
.checkin-summary-banner {
  background: linear-gradient(135deg, #27AE60 0%, #219653 100%);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(39, 174, 96, 0.25);
}

.summary-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.summary-text-col {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 11px;
  opacity: 0.88;
  letter-spacing: 0.5px;
}

.summary-num-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.summary-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.summary-unit {
  font-size: 12px;
  font-weight: 600;
}

.summary-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 打卡日历卡片 */
.checkin-calendar-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 16px 14px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.calendar-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 8px;
}

.calendar-nav-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94A3B8;
  font-size: 14px;
  user-select: none;
  transition: all 0.15s;
}

.calendar-nav-arrow:hover {
  background: #F1F5F9;
  color: #1E293B;
}

.calendar-month-title {
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.5px;
}

/* 星期头部 */
.calendar-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.calendar-week-row .weekend {
  color: #EF4444;
}

/* 日历日期网格 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
}

.calendar-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 4px 2px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.calendar-day-cell:hover:not(.empty):not(.future) {
  background: #F8FAFC;
}

.calendar-day-num {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.calendar-day-emoji {
  font-size: 15px;
  line-height: 1;
  height: 16px;
}

/* 当天 / 选中态样式 (对齐参考图：微绿圆角框，内部实心绿圆圈白字) */
.calendar-day-cell.selected {
  background: #E8F5E9;
}

.calendar-day-cell.selected .calendar-day-num {
  background: #27AE60;
  color: #FFFFFF;
  border-radius: 50%;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.35);
}

.calendar-day-cell.future .calendar-day-num {
  color: #94A3B8;
  font-weight: 400;
}

.calendar-day-cell.empty {
  cursor: default;
}

/* 日历下方图例行 */
.calendar-legend-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  font-size: 11px;
  color: #64748B;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 选定日期的打卡记录卡片 */
.checkin-detail-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.detail-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.detail-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
}

.detail-card-date {
  font-size: 11.5px;
  color: #94A3B8;
  font-weight: 500;
}

.detail-mood-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.mood-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mood-journal-badge {
  width: 34px;
  height: 34px;
  background: #FFEDD5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.mood-title-col {
  display: flex;
  flex-direction: column;
}

.mood-main-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1E293B;
}

.mood-sub-title {
  font-size: 11px;
  color: #64748B;
}

.mood-coins-badge {
  font-size: 11px;
  font-weight: 700;
  color: #D97706;
  background: #FEF3C7;
  padding: 3px 8px;
  border-radius: 10px;
}

/* 5 表情展示栏 */
.detail-emojis-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.detail-emoji-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 12px;
  transition: all 0.15s ease;
}

.detail-emoji-box.active {
  background: #E8F5E9;
  border: 1.5px solid #27AE60;
  transform: scale(1.05);
}

.detail-emoji-icon {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}

.detail-emoji-name {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
}

.detail-emoji-box.active .detail-emoji-name {
  color: #166534;
  font-weight: 700;
}

/* 心情日记/笔记 */
.detail-note-box {
  background: #F8FAFC;
  border-left: 3px solid #27AE60;
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.6;
}

.detail-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: #94A3B8;
}

/* ==========================================================================
   全新测评管理系统 & 极简 SVG 侧边栏子菜单样式系统 (1:1 复刻设计图)
   ========================================================================== */

/* 侧边栏 SVG 图标与子菜单 */
.menu-svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
}

.menu-chevron {
  transition: transform 0.2s ease;
  stroke: #8BAE9A;
}

.menu-item.has-submenu.open .menu-chevron {
  transform: rotate(180deg);
}

/* 父级菜单已展开且处于选中状态时采用柔和层次高亮，避免与子菜单形成两个突兀绿块冲突 */
.menu-item.has-submenu.open.active {
  background-color: rgba(79, 122, 97, 0.38);
  color: #FFFFFF;
  box-shadow: none;
}

.sidebar-submenu {
  list-style: none;
  padding: 4px 0 6px 16px;
  margin-left: 20px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.14);
  display: none;
}

.sidebar-submenu.open {
  display: block;
}

.submenu-item {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: #A8C4B4;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.submenu-item:last-child {
  margin-bottom: 6px;
}

.submenu-item:hover {
  background-color: var(--sidebar-hover-bg);
  color: #FFFFFF;
}

.submenu-item.active {
  background-color: #2F6F48;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 多主视图切换面板 */
.admin-view-panel {
  display: none;
}

.admin-view-panel.active {
  display: block;
  animation: fadeInView 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 顶部面包屑与铃铛栏 */
.breadcrumb-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.crumb-sep {
  color: #94A3B8;
  margin: 0 4px;
}

.header-bell-btn {
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.header-bell-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.bell-red-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: #EF4444;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
}

/* 高保真主操作按钮（原点森林绿） */
.btn-primary,
.btn-primary-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: #446E47;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(68, 110, 71, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-primary:hover,
.btn-primary-green:hover {
  background: #355E3B;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(68, 110, 71, 0.38);
  color: #FFFFFF;
}

.btn-primary:active,
.btn-primary-green:active {
  transform: translateY(0);
}

/* 次级线框按钮 */
.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-md);
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.btn-secondary-outline:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: #FFFFFF;
  border: 1px solid #FECACA;
  border-radius: var(--radius-md);
  color: #DC2626;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.04);
  transition: all 0.2s ease;
}

.btn-danger-outline:hover {
  background: #FEF2F2;
  border-color: #EF4444;
  color: #B91C1C;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.12);
}

/* 5格指标卡片响应式网格 (总数、已上架、未上架、总测评人次、总测评人数) */
.stat-cards-grid.grid-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* 4格指标卡片响应式网格 */
.stat-cards-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.icon-orange-light {
  background: #FFF7ED;
  color: #EA580C;
}

.icon-purple-light {
  background: #FAF5FF;
  color: #9333EA;
}

.icon-green-light {
  background: #ECFDF5;
  color: #16A34A;
}

.icon-gray-light {
  background: #F8FAFC;
  color: #64748B;
}

.icon-blue-light {
  background: #EFF6FF;
  color: #2563EB;
}

/* 测评分类管理专属样式 (1:1 对齐 UI 截图 2) */
.category-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
}

.category-bar {
  width: 3.5px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.category-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sort-col-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-arrow-btn {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s ease;
}

.sort-arrow-btn:hover {
  color: #0F172A;
  background: #E2E8F0;
}

.sort-num-badge {
  font-weight: 700;
  color: #1E293B;
  font-size: 14px;
  min-width: 18px;
  text-align: center;
}

/* 测评列表专属样式 (1:1 对齐 UI 截图 1) */
.tag-category-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.price-text-val {
  font-weight: 700;
  font-size: 14px;
}

.price-text-val.free {
  color: #16A34A;
}

.price-text-val.paid {
  color: #EF4444;
}

.action-btn.edit {
  color: #2563EB;
}

.action-btn.edit:hover {
  text-decoration: underline;
}

.action-btn.delete {
  color: #EF4444;
}

.action-btn.delete:hover {
  text-decoration: underline;
}

.action-btn.shelf-off {
  color: #EA580C;
}

.action-btn.shelf-on {
  color: #16A34A;
}

/* 测评封面缩略图与文字展示样式 */
.assess-cover-cell {
  width: 56px;
  text-align: center;
}

.assess-cover-thumb {
  width: 48px;
  height: 48px;
  min-width: 48px;
  max-width: 48px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.assess-cover-thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.assess-title-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 260px;
}

.assess-main-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.4;
}

.assess-subtitle {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assess-stat-val {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.assess-stat-val.users {
  color: #0284C7;
}

/* 图标/封面自定义上传组件 */
.upload-dropzone {
  border: 1.5px dashed #CBD5E1;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  background: #F8FAFC;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.upload-dropzone:hover {
  border-color: #446E47;
  background: #F0FDF4;
}

.upload-dropzone.has-file {
  border-style: solid;
  border-color: #86EFAC;
  background: #F0FDF4;
}

.upload-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.upload-dropzone-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}

.upload-dropzone:hover .upload-dropzone-icon {
  background: #DCFCE7;
  color: #16A34A;
}

.upload-dropzone-text {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.upload-dropzone-hint {
  font-size: 11.5px;
  color: #94A3B8;
}

.upload-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}

.upload-preview-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.upload-preview-img.circle {
  border-radius: 50%;
}

.upload-preview-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upload-preview-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1E293B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.upload-preview-reupload {
  font-size: 11.5px;
  color: #2563EB;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.upload-preview-remove {
  font-size: 11.5px;
  color: #EF4444;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

/* 移动端内置快捷图标备选 */
.mobile-icons-quick-picker {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
}

.mobile-icons-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-icon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mobile-icon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-icon-chip:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  color: #1E293B;
}

.mobile-icon-chip.active {
  border-color: #16A34A;
  background: #DCFCE7;
  color: #166534;
  font-weight: 600;
}

.mobile-icon-chip-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 查看分类只读弹窗专属样式 */
.modal-card.view-mode .form-control:disabled,
.modal-card.view-mode .form-control[readonly] {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
  cursor: default !important;
  font-weight: 500;
}

.modal-card.view-mode .upload-dropzone,
.modal-card.view-mode .mobile-icons-quick-picker,
.modal-card.view-mode #btnSubmitCategory,
.modal-card.view-mode .upload-preview-btn-row {
  display: none !important;
}

/* 上架/下架页面内专属确认弹窗 (1:1 现代设计，替代原生 confirm) */
.confirm-modal-card {
  width: 420px;
  max-width: 90vw;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}

.confirm-icon-warning {
  background: #FFF7ED;
  color: #EA580C;
  border: 1px solid #FED7AA;
}

.confirm-icon-success {
  background: #ECFDF5;
  color: #16A34A;
  border: 1px solid #A7F3D0;
}

.confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.confirm-desc {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.55;
  margin-bottom: 24px;
  padding: 0 6px;
}

.confirm-desc strong {
  color: #1E293B;
}

.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.confirm-actions button {
  flex: 1;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-confirm-off {
  background: #DC2626;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.btn-confirm-off:hover {
  background: #B91C1C;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.35);
}

.btn-confirm-on {
  background: #16A34A;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25);
}

.btn-confirm-on:hover {
  background: #15803D;
  box-shadow: 0 5px 14px rgba(22, 163, 74, 0.35);
}

.confirm-icon-danger {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.btn-confirm-danger {
  background: #DC2626;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.btn-confirm-danger:hover {
  background: #B91C1C;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.35);
}

.page-size-selector {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  outline: none;
  margin-left: 8px;
}

.page-size-selector:hover {
  border-color: #94A3B8;
}

/* ==========================================================================
   11. 新增 / 编辑 / 查看心理测评独立面板与表单组件设计
   ========================================================================== */
.assessment-editor-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.editor-title-bar {
  margin-bottom: 20px;
}

.btn-back-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-back-circle:hover {
  background: #F1F5F9;
  color: #1E293B;
  border-color: #CBD5E1;
  transform: translateX(-2px);
}

.view-mode-badge {
  display: inline-flex;
  align-items: center;
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* 步骤导航条 */
.editor-steps-bar {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 28px;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.step-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.25s;
  user-select: none;
}

.step-nav-item.active {
  opacity: 1;
}

.step-nav-item.completed {
  opacity: 0.85;
}

.step-num-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

.step-nav-item.active .step-num-circle {
  background: #2E5E4E;
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(46, 94, 78, 0.3);
}

.step-nav-item.completed .step-num-circle {
  background: #16A34A;
  color: #FFFFFF;
}

.step-label-title {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  display: block;
}

.step-label-sub {
  font-size: 12px;
  color: #94A3B8;
  display: block;
  margin-top: 1px;
}

.step-nav-connector {
  flex: 1;
  height: 2px;
  background: #E2E8F0;
  margin: 0 28px;
  transition: background 0.25s;
}

.step-nav-connector.active {
  background: #2E5E4E;
}

/* 统一编辑器卡片 */
.editor-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
  overflow: hidden;
}

.editor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #F1F5F9;
  background: #FAFCFA;
}

.editor-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title-icon {
  font-size: 16px;
}

.editor-card-tag {
  font-size: 11px;
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #DBEAFE;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.editor-card-body {
  padding: 24px;
}

.form-row-2 {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.required-star {
  color: #EF4444;
  font-weight: bold;
  margin-left: 2px;
}

/* 价格单选卡片组 */
.price-type-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.price-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.price-radio-card:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.price-radio-card.active {
  border-color: #2E5E4E;
  background: #F0FDF4;
  box-shadow: 0 0 0 2px rgba(46, 94, 78, 0.12);
}

.price-radio-card input[type="radio"] {
  display: none;
}

.price-radio-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}

.price-radio-card.active .price-radio-indicator {
  border-color: #2E5E4E;
  background: #2E5E4E;
}

.price-radio-card.active .price-radio-indicator::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  border-radius: 50%;
  top: 3px;
  left: 3px;
}

.price-radio-title {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 2px;
}

.price-radio-desc {
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}

.price-input-dynamic-box {
  padding: 12px 16px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  margin-top: 8px;
}

.price-input-subrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label-sub {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}

.input-with-affix {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  overflow: hidden;
  max-width: 240px;
}

.input-prefix, .input-suffix {
  padding: 8px 12px;
  background: #F1F5F9;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.input-with-affix input {
  border: none;
  outline: none;
  padding: 8px 10px;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
}

.form-sub-hint {
  font-size: 12px;
  color: #64748B;
}

/* 测评介绍切换模式与富文本 */
.intro-mode-tabs {
  display: inline-flex;
  background: #F1F5F9;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.mode-tab-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.mode-tab-btn.active {
  background: #FFFFFF;
  color: #2E5E4E;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.intro-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.rich-field-card {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #FFFFFF;
  transition: border-color 0.2s;
}

.rich-field-card:focus-within {
  border-color: #2E5E4E;
  box-shadow: 0 0 0 2px rgba(46, 94, 78, 0.08);
}

.rich-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rich-num-pill {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E0E7FF;
  color: #4338CA;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.rich-toolbar {
  display: flex;
  gap: 4px;
}

.rt-btn {
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.rt-btn:hover {
  background: #E2E8F0;
  color: #1E293B;
}

.rich-textarea {
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #1E293B;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: all 0.2s;
}

.rich-textarea:focus {
  border-color: #2E5E4E;
}

/* 多图画廊与上传样式 */
.multi-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 4px;
}

.multi-upload-tips {
  font-size: 13px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-counter {
  font-size: 12px;
  background: #F1F5F9;
  padding: 3px 8px;
  border-radius: 6px;
  color: #334155;
  font-weight: 500;
}

.multi-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-preview-phone {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #334155;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-preview-phone:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.gallery-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.gallery-card-index {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #FFF;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.gallery-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.85));
  display: flex;
  justify-content: space-around;
  padding: 8px 4px 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-card:hover .gallery-card-actions {
  opacity: 1;
}

.gallery-act-btn {
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #1E293B;
  cursor: pointer;
  transition: all 0.15s;
}

.gallery-act-btn:hover {
  background: #FFFFFF;
  transform: scale(1.1);
}

.gallery-act-btn.btn-del {
  color: #DC2626;
}

.empty-upload-box {
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #FAFCFA;
  margin-top: 10px;
}

.empty-upload-box:hover {
  border-color: #2E5E4E;
  background: #F0FDF4;
}

.empty-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  margin-top: 8px;
}

.empty-upload-hint {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 4px;
}

/* 底部操作底栏 */
.editor-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.btn-primary-large {
  background: #2E5E4E;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(46, 94, 78, 0.25);
  transition: all 0.2s;
}

.btn-primary-large:hover {
  background: #234B3E;
  box-shadow: 0 4px 10px rgba(46, 94, 78, 0.35);
  transform: translateY(-1px);
}

/* ==========================================================================
   12. Step 2: 题目配置控制台与题目卡片
   ========================================================================== */
.questions-toolbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.questions-stats-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.q-stat-item {
  font-size: 13px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 4px;
}

.q-stat-val {
  font-weight: 700;
  font-size: 15px;
}

.val-total { color: #2E5E4E; }
.val-single { color: #2563EB; }
.val-multi { color: #16A34A; }
.val-fill { color: #9333EA; }

.questions-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-tool-outline {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-tool-outline:hover {
  border-color: #2E5E4E;
  color: #2E5E4E;
  background: #F0FDF4;
}

.btn-group-add-q {
  display: inline-flex;
  gap: 6px;
}

.btn-add-q-type {
  border: 1px solid transparent;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-q-single {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.btn-q-single:hover {
  background: #DBEAFE;
}

.btn-q-multi {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.btn-q-multi:hover {
  background: #D1FAE5;
}

.btn-q-fill {
  background: #FAF5FF;
  color: #7E22CE;
  border-color: #E9D5FF;
}

.btn-q-fill:hover {
  background: #F3E8FF;
}

/* 单道题目卡片 */
.questions-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.question-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.question-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.q-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.q-badge-num {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.q-badge-type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.q-badge-single {
  background: #DBEAFE;
  color: #1E40AF;
}

.q-badge-multi {
  background: #DCFCE7;
  color: #15803D;
}

.q-badge-fill {
  background: #F3E8FF;
  color: #6B21A8;
}

.q-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.q-act-btn {
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: #64748B;
  transition: all 0.15s;
}

.q-act-btn:hover {
  background: #F1F5F9;
  color: #1E293B;
}

.q-act-btn.del:hover {
  background: #FEE2E2;
  color: #DC2626;
  border-color: #FECACA;
}

.q-title-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.q-stem-input {
  flex: 1;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.q-stem-input:focus {
  border-color: #2E5E4E;
  box-shadow: 0 0 0 2px rgba(46, 94, 78, 0.1);
}

.q-img-trigger {
  border: 1px dashed #CBD5E1;
  border-radius: 6px;
  padding: 7px 10px;
  background: #F8FAFC;
  font-size: 12px;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.q-img-trigger:hover {
  border-color: #2E5E4E;
  color: #2E5E4E;
  background: #F0FDF4;
}

.q-img-preview-box {
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #F8FAFC;
}

.q-img-preview-box img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.q-img-remove-btn {
  border: none;
  background: transparent;
  color: #DC2626;
  font-size: 12px;
  cursor: pointer;
}

/* 选项列表 */
.options-list-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #EDF2F7;
  transition: background 0.15s;
}

.option-row:hover {
  background: #F1F5F9;
}

.option-letter {
  font-size: 13px;
  font-weight: 700;
  color: #2E5E4E;
  width: 22px;
  text-align: center;
}

.option-input {
  flex: 1;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  background: #FFFFFF;
}

.option-input:focus {
  border-color: #2E5E4E;
}

.option-img-btn {
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #64748B;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.option-img-btn.has-img {
  background: #EFF6FF;
  color: #2563EB;
  border-color: #BFDBFE;
}

.option-score-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748B;
}

.option-score-input {
  width: 60px;
  text-align: center;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 600;
  background: #FFFFFF;
}

.option-del-btn {
  border: none;
  background: transparent;
  color: #94A3B8;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.option-del-btn:hover {
  color: #DC2626;
  background: #FEE2E2;
}

.btn-add-option {
  border: 1px dashed #2E5E4E;
  background: #F0FDF4;
  color: #2E5E4E;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  align-self: flex-start;
}

.btn-add-option:hover:not(:disabled) {
  background: #DCFCE7;
}

.btn-add-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #CBD5E1;
  color: #94A3B8;
  background: #F1F5F9;
}

/* 填空题配置 */
.fill-config-row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #FAF5FF;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #E9D5FF;
  margin-top: 8px;
}

.fill-config-label {
  font-size: 13px;
  font-weight: 600;
  color: #7E22CE;
}

/* 题目空态 */
.empty-questions-state {
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  background: #FFFFFF;
}

.empty-q-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.empty-q-title {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 6px;
}

.empty-q-desc {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 20px;
}

.empty-q-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================================
   13. 只读查看模式 (View Mode) 状态与受限行为
   ========================================================================== */
#viewAssessmentEditor.view-mode-active .editable-only {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active input,
#viewAssessmentEditor.view-mode-active textarea,
#viewAssessmentEditor.view-mode-active select {
  pointer-events: none !important;
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: default !important;
}

#viewAssessmentEditor.view-mode-active .price-radio-card {
  pointer-events: none !important;
  cursor: default !important;
}

#viewAssessmentEditor.view-mode-active #editorCoverDropzone,
#viewAssessmentEditor.view-mode-active #introImageEmpty,
#viewAssessmentEditor.view-mode-active #reportImageEmpty {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active #btnSaveAssessmentHeader,
#viewAssessmentEditor.view-mode-active #btnSaveAssessmentBottom {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active #btnSwitchToEditHeader {
  display: inline-flex !important;
}

#viewAssessmentEditor.view-mode-active #editorViewModeBadge {
  display: inline-flex !important;
}

/* ==========================================================================
   14. 手机端预览模拟器与全屏图片灯箱
   ========================================================================== */
.phone-mockup-wrapper {
  width: 360px;
  height: 640px;
  background: #0F172A;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-mockup-header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.phone-mockup-notch {
  width: 90px;
  height: 14px;
  background: #020617;
  border-radius: 0 0 10px 10px;
  margin: 0 auto;
}

.phone-mockup-screen {
  flex: 1;
  background: #FFFFFF;
  border-radius: 26px;
  overflow-y: auto;
  padding: 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
}

.phone-intro-flow-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2px;
  border-radius: 4px;
}

.phone-intro-card-box {
  background: #F8FAFC;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid #EDF2F7;
}

.phone-intro-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-intro-body {
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
  white-space: pre-line;
}

/* 图片放大灯箱 */
.image-zoom-box {
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  text-align: center;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-zoom-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(15, 23, 42, 0.7);
  color: #FFF;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.image-zoom-box img {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
}

.image-zoom-caption {
  font-size: 13px;
  color: #64748B;
  margin-top: 8px;
}

/* ==========================================================================
   15. 抑制浏览器扩展/翻译插件中译中双语重复显示与黄色字体
   ========================================================================== */
[data-immersive-translate-walked],
.immersive-translate-target-translation,
.immersive-translate-target-wrapper,
[data-immersive-translate-translation-element-mark],
font[color],
font[color="#d97706"],
font[color="#eab308"],
font[color="#e59866"] {
  display: none !important;
}

[data-immersive-translate-root] {
  color: inherit !important;
}

/* ==========================================================================
   16. 测评名称与分类横向分散全宽网格 + 30字计数
   ========================================================================== */
.editor-form-row-2 {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px;
  width: 100%;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .editor-form-row-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title-char-count-tag {
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 10px;
}

.title-char-count-tag.limit-warning {
  color: #EF4444;
  background: #FEE2E2;
}

.intro-active-mode-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 12px;
}

#viewAssessmentEditor.view-mode-active .intro-mode-tabs {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active #editorIntroViewModeBadge {
  display: inline-flex !important;
}

/* ==========================================================================
   17. 单列纵向排版与专业所见即所得富文本编辑器 (WYSIWYG)
   ========================================================================== */
.intro-fields-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.rich-field-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}

.rich-field-card:focus-within {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.rich-field-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rich-field-hint {
  font-size: 12px;
  color: #64748B;
  font-weight: normal;
}

.rich-editor-wrapper {
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}

/* 富文本工具栏 (对齐截图2设计) */
.rich-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  user-select: none;
}

.rt-select {
  height: 30px;
  padding: 2px 8px;
  font-size: 12px;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

.rt-select:hover {
  border-color: #94A3B8;
}

.rt-divider {
  width: 1px;
  height: 18px;
  background: #CBD5E1;
  margin: 0 4px;
}

.rt-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  color: #475569;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rt-icon-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.rt-icon-btn.active {
  background: #DCFCE7;
  color: #16A34A;
  border-color: #86EFAC;
}

.rt-color-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 12px;
  color: #334155;
  transition: all 0.15s;
}

.rt-color-btn:hover {
  background: #E2E8F0;
}

.rt-color-btn input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.rt-color-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  margin-top: 1px;
}

/* 富文本可编辑区域 */
.rich-editor-content {
  min-height: 140px;
  max-height: 360px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #1E293B;
  overflow-y: auto;
  outline: none;
  background: #FFFFFF;
}

.rich-editor-content:empty:before {
  content: attr(data-placeholder);
  color: #94A3B8;
  pointer-events: none;
  font-style: italic;
}

.rich-editor-content blockquote,
.rich-text-preview-box blockquote {
  margin: 10px 0;
  padding: 8px 16px;
  background: #F1F5F9;
  border-left: 4px solid #10B981;
  color: #475569;
  border-radius: 0 6px 6px 0;
  font-style: italic;
}

.rich-editor-content ul,
.rich-text-preview-box ul {
  padding-left: 24px;
  margin: 8px 0;
  list-style-type: disc;
}

.rich-editor-content ol,
.rich-text-preview-box ol {
  padding-left: 24px;
  margin: 8px 0;
  list-style-type: decimal;
}

.rich-editor-content h3,
.rich-text-preview-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 12px 0 6px 0;
}

.rich-editor-content h4,
.rich-text-preview-box h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin: 10px 0 4px 0;
}

/* 查看模式渲染视图 */
.rich-text-preview-box {
  padding: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: #334155;
  background: #F8FAFC;
  border-radius: 8px;
  min-height: 90px;
}

#viewAssessmentEditor.view-mode-active .rich-editor-toolbar {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active .rich-editor-content {
  display: none !important;
}

#viewAssessmentEditor.view-mode-active .rich-text-preview-box {
  display: block !important;
}

/* 查看模式图片放大悬浮提示 */
.zoomable-image-wrap {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zoomable-image-wrap:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.zoomable-image-wrap::after {
  content: '🔍 点击放大';
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #FFFFFF;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.zoomable-image-wrap:hover::after {
  opacity: 1;
}

/* 高保真大图灯箱 */
.image-lightbox-overlay {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  max-width: 900px;
  margin-bottom: 14px;
  color: #FFFFFF;
}

.lightbox-title {
  font-size: 15px;
  font-weight: 600;
  color: #F8FAFC;
}

.lightbox-btn-group {
  display: flex;
  gap: 8px;
}

.lb-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.lb-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lb-btn.lb-close {
  background: #EF4444;
  border-color: #DC2626;
}

.image-zoom-container {
  max-width: 90vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.image-zoom-container img {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 开屏页竖屏海报大图预览：固定 9:16 手机比例 + 居中裁切，
   与移动端开屏全屏效果一致（横图素材也按竖屏裁切展示） */
.image-zoom-container.is-splash-poster img {
  width: auto;
  height: 76vh;
  max-width: 56vw;
  max-height: 76vh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

/* ========================================================
   冥想管理模块高保真样式 (对齐参考图 1 与图 2)
   ======================================================== */

/* 1. 顶部 5 指标卡片网格自适应 */
.stat-cards-grid.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1400px) {
  .stat-cards-grid.grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .stat-cards-grid.grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .stat-cards-grid.grid-5 {
    grid-template-columns: 1fr;
  }
}

/* 问号小提示圈 */
.info-tip-bubble {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #64748B;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  line-height: 1;
}

/* 2. 弹窗内联防重错误提示框 (重点需求 3) */
.modal-inline-alert {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 500;
  animation: shakeAlert 0.35s ease-in-out;
}

@keyframes shakeAlert {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* 3. 分类左侧垂直专属色条 (严格还原图 2) */
.cat-color-bar {
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

.cat-name-cell {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #1E293B;
}

.cat-icon-badge {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}

/* 4. 排序上下移小按键 */
.sort-actions-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-sort-arrow {
  width: 26px;
  height: 26px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  border-radius: 6px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
}

.btn-sort-arrow:hover:not(:disabled) {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

.btn-sort-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 5. 冥想课程表格单元格 (重点需求 2: 收听人数) */
.med-course-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.med-cover-box {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}

.med-info-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: 320px;
}

.med-info-title {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.4;
}

.med-info-desc {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.med-listeners-badge {
  font-weight: 600;
  color: #D97706;
  font-size: 13px;
}

.med-duration-badge {
  color: #64748B;
  font-size: 13px;
}

.med-price-free {
  color: #16A34A;
  font-weight: 600;
  font-size: 13px;
}

.med-price-paid {
  color: #EA580C;
  font-weight: 700;
  font-size: 13px;
}

/* 图标快捷选择条 */
.icon-picker-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.icon-quick-select {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.icon-opt {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-opt:hover {
  background: #E2E8F0;
  transform: scale(1.1);
  border-color: #CBD5E1;
}

.color-picker-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ==========================================================================
   21. 冥想独立全页面编辑器与课节配置卡片体系
   ========================================================================== */
#viewMeditationEditor.view-mode-active .editable-only {
  display: none !important;
}

#viewMeditationEditor.view-mode-active input,
#viewMeditationEditor.view-mode-active select {
  pointer-events: none !important;
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: none !important;
  cursor: default !important;
}

#viewMeditationEditor.view-mode-active .price-radio-card {
  pointer-events: none !important;
  cursor: default !important;
}

#viewMeditationEditor.view-mode-active .upload-dropzone {
  display: none !important;
}

#viewMeditationEditor.view-mode-active .intro-mode-tabs {
  display: none !important;
}

#viewMeditationEditor.view-mode-active #medEditorIntroViewModeBadge {
  display: inline-flex !important;
}

#viewMeditationEditor.view-mode-active .rich-editor-toolbar {
  display: none !important;
}

#viewMeditationEditor.view-mode-active .rich-editor-content {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  pointer-events: none !important;
}

#viewMeditationEditor.view-mode-active .med-upload-box {
  pointer-events: none !important;
  background: #F8FAFC !important;
  border-style: solid !important;
}

#viewMeditationEditor.view-mode-active .med-upload-box .editable-only {
  display: none !important;
}

#viewMeditationEditor.view-mode-active .med-quick-tags-row {
  display: none !important;
}

/* 课节列表卡片体系 */
.med-lessons-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.med-lesson-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.med-lesson-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.med-lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.med-lesson-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.med-lesson-idx-badge {
  background: #ECFDF5;
  color: #059669;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid #A7F3D0;
  letter-spacing: 0.5px;
}

.med-lesson-name-input {
  font-weight: 600;
  color: #0F172A;
  max-width: 480px;
  font-size: 14px;
}

.med-lesson-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-sort-arrow {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sort-arrow:hover:not(:disabled) {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #CBD5E1;
}

.btn-sort-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.med-quick-tags-row {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.med-quick-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid #E2E8F0;
  user-select: none;
}

.med-quick-tag:hover {
  background: #E2E8F0;
  color: #1E293B;
  border-color: #CBD5E1;
}

.med-upload-box {
  cursor: pointer;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  padding: 10px;
  background: #F8FAFC;
  text-align: center;
  transition: all 0.2s ease;
}

.med-upload-box:hover {
  border-color: #10B981;
  background: #F0FDF4;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.radio-label input[type="radio"] {
  accent-color: #10B981;
  cursor: pointer;
}

/* 课节音频上传组件与自动读取时长标签 */
.med-lesson-audio-block {
  margin-top: 12px;
  margin-bottom: 14px;
}

.med-audio-duration-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
}

.med-audio-dropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1.5px dashed #10B981;
  background: #F0FDF4;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.med-audio-dropzone:hover {
  background: #DCFCE7;
  border-color: #059669;
  transform: translateY(-1px);
}

.med-audio-dropzone-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}

.med-audio-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.med-audio-primary-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #065F46;
}

.med-audio-sub-text {
  font-size: 12px;
  color: #047857;
  opacity: 0.9;
}

.med-audio-preview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.med-audio-preview-card:hover {
  border-color: #94A3B8;
  background: #F1F5F9;
}

.med-audio-info-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.med-audio-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.med-audio-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ECFDF5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
}

.med-audio-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.med-audio-filename {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 480px;
}

.med-audio-submeta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748B;
  flex-wrap: wrap;
}

.meta-duration {
  color: #059669;
  font-weight: 700;
}

.meta-badge-auto {
  background: #E0E7FF;
  color: #4338CA;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.med-audio-player-box {
  margin-top: 2px;
}

.med-audio-player-box audio {
  height: 32px;
  width: 100%;
  max-width: 380px;
  outline: none;
}

.med-audio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#viewMeditationEditor.view-mode-active .med-audio-dropzone {
  display: none !important;
}

#viewMeditationEditor.view-mode-active .med-audio-actions {
  display: none !important;
}

/* ===================================================
   课节图片上传/未上传与尺寸规范专属组件样式
   =================================================== */
.med-lesson-upload-box {
  border: 1.5px dashed #CBD5E1;
  border-radius: 10px;
  background: #F8FAFC;
  overflow: hidden;
  transition: all 0.2s ease;
}

.med-lesson-upload-box:hover {
  border-color: #059669;
  background: #F0FDF4;
}

.med-lesson-empty-dropzone {
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.med-lesson-empty-icon {
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
}

.med-lesson-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 3px;
}

.med-lesson-empty-hint {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.4;
}

.med-lesson-preview-container {
  position: relative;
  width: 100%;
  height: 110px;
  background: #0F172A;
  border-radius: 8px;
  overflow: hidden;
}

.med-lesson-img-tag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.med-lesson-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.med-lesson-preview-container:hover .med-lesson-preview-overlay {
  opacity: 1;
}

.btn-med-img-action {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #1E293B;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
}

.btn-med-img-action:hover {
  background: #FFFFFF;
  transform: translateY(-1px);
}

.btn-med-img-del {
  background: rgba(239, 68, 68, 0.9);
  color: #FFFFFF;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-med-img-del:hover {
  background: #DC2626;
  color: #FFFFFF;
}

/* 步骤校验高亮震动警示 */
.input-field-highlight-warn {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  animation: shakeWarn 0.35s ease-in-out;
}

/* ==========================================================================
   Banner 管理模块高保真样式系统 (1:1 对齐UI设计图与弹窗交互)
   ========================================================================== */

/* 1. 顶部 4 个分类切换标签栏 (对齐UI设计图绿底胶囊) */
.banner-pill-tabs-bar {
  margin: 16px 0 20px;
}

.banner-pill-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  padding: 5px;
  border-radius: 24px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.banner-pill-btn {
  border: none;
  background: transparent;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  user-select: none;
}

.banner-pill-btn:hover {
  color: #1E293B;
  background: #F8FAFC;
}

.banner-pill-btn.active {
  background: #2E5E4E !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(46, 94, 78, 0.25);
}

/* 2. 开屏页配置条 (不常驻大表单，精巧卡片) */
.splash-overview-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.splash-overview-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.splash-icon-symbol {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.splash-overview-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
}

.splash-overview-desc {
  font-size: 12.5px;
  color: #64748B;
  margin-top: 3px;
}

/* 开屏页竖版海报缩略图（9:16，与移动端开屏海报比例一致） */
.banner-thumb-splash {
  width: 54px;
  height: 96px;
  border-radius: 5px;
}
.banner-thumb-splash .banner-thumb-img {
  object-fit: cover;
  object-position: center top;
}

/* 默认开屏页（品牌欢迎页）缩略图：系统内置，无真实图片，用品牌色块示意 */
.banner-thumb-brand {
  background: linear-gradient(160deg, #1B3527 0%, #2E5E4E 55%, #4A7C59 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.banner-thumb-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  text-align: center;
}
.btb-title {
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.btb-slogan {
  font-size: 5.5px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.35;
}

/* 「默认开屏页」徽章与排序占位 */
.brand-default-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #065F46;
  background: #D1FAE5;
  border: 1px solid #A7F3D0;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.5;
}
.brand-default-mark {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 5px;
  padding: 3px 6px;
  min-width: 34px;
  text-align: center;
}

.splash-overview-right {
  display: flex;
  align-items: center;
}

.splash-status-item {
  display: flex;
  align-items: center;
}

.splash-status-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  margin-right: 6px;
}

.splash-duration-badge {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

.btn-secondary-sm {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary-sm:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
}

/* 3. Banner 表格卡片与设计图对齐 */
.banner-table-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 24px;
}

.banner-table-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #F1F5F9;
}

.banner-table-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-indicator {
  width: 4px;
  height: 16px;
  background: #2E5E4E;
  border-radius: 2px;
  display: inline-block;
}

.banner-table-title-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.banner-table-right-tips {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748B;
}

.banner-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.banner-table th {
  background: #F8FAFC !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
  border-bottom: 1px solid #E2E8F0 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

.banner-table td {
  padding: 16px 16px !important;
  font-size: 13px !important;
  color: #334155 !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
  text-align: left !important;
}

.banner-table tr:hover td {
  background-color: #F8FAFB !important;
}

.banner-time-text {
  font-size: 13px;
  color: #475569;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}

.status-ended {
  background: #F1F5F9 !important;
  color: #64748B !important;
}
.status-ended .status-dot {
  background: #94A3B8 !important;
}

.meditation-table th:nth-child(8),
.meditation-table td:nth-child(8) {
  width: 110px !important;
  min-width: 100px !important;
  white-space: nowrap !important;
}

/* 排序拖拽与箭头 */
.sort-handle-box {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94A3B8;
}

.sort-drag-icon {
  font-size: 14px;
  cursor: grab;
  user-select: none;
  color: #94A3B8;
}

.sort-order-num {
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  width: 18px;
  text-align: center;
}

.sort-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sort-arrow-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 9px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
}

.sort-arrow-btn:hover {
  color: #2E5E4E;
}

/* Banner 缩略图 */
.banner-thumb-wrapper {
  width: 96px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.banner-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Banner 名称与ID */
.banner-info-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.banner-cell-title {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.banner-cell-id {
  font-size: 11.5px;
  color: #94A3B8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 跳转类型 Tag 胶囊 (对齐设计图色彩) */
.jump-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.jump-tag-none {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.jump-tag-link {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.jump-tag-rich {
  background: #F3E8FF;
  color: #9333EA;
  border: 1px solid #E9D5FF;
}

.jump-tag-activity {
  background: #EFF6FF;
  color: #3B82F6;
  border: 1px solid #DBEAFE;
}

.jump-tag-member {
  background: #FAF5FF;
  color: #A855F7;
  border: 1px solid #F3E8FF;
}

.jump-tag-meditation {
  background: #F0FDF4;
  color: #16A34A;
  border: 1px solid #DCFCE7;
}

.jump-tag-orange {
  background: #FFF7ED;
  color: #EA580C;
  border: 1px solid #FFEDD5;
}

/* 状态徽章 (展示中、待开始、已结束、已下线) */
.banner-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.status-dot-active {
  color: #16A34A;
  background: #F0FDF4;
}

.status-dot-pending {
  color: #D97706;
  background: #FFFBEB;
}

.status-dot-ended {
  color: #64748B;
  background: #F8FAFC;
}

.status-dot-disabled {
  color: #DC2626;
  background: #FEF2F2;
}

/* 操作按键 */
.table-action-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-link-btn {
  background: transparent;
  border: none;
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px 4px;
  transition: opacity 0.15s ease;
}

.action-link-btn:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.action-btn-view { color: #2E5E4E; font-weight: 500; }
.action-btn-edit { color: #2563EB; font-weight: 500; }
.action-btn-del { color: #EF4444; font-weight: 500; }

/* 4. Banner 弹窗专属样式 (以弹窗形式展示，不在页面上方常驻) */
/* 4. Banner 弹窗专属样式 (以弹窗形式展示，不在页面上方常驻) */
.modal-dialog,
.banner-modal-dialog {
  background: #FFFFFF !important;
  border-radius: 16px;
  max-width: 680px;
  width: 95vw;
  max-height: 86vh !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalCardZoom 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.banner-modal-dialog form,
#formBannerEditor {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

@keyframes modalCardZoom {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.banner-modal-dialog .modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  flex-shrink: 0 !important;
}

.modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.modal-subtitle {
  font-size: 12.5px;
  color: #64748B;
  margin-top: 2px;
}

.modal-close-btn {
  background: #F1F5F9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 28px;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.banner-modal-dialog .modal-footer,
#formBannerEditor .modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
}

.banner-modal-body,
.banner-view-modal-body,
#formBannerEditor .banner-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(86vh - 140px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 20px 24px;
  background: #FFFFFF;
}

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

.banner-img-picker-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* 默认横版 Banner 预览框 */
.banner-img-preview-box {
  width: 140px;
  height: 80px;
  border-radius: 8px;
  border: 1.5px dashed #CBD5E1;
  background: #F8FAFC;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.banner-img-preview-box:hover {
  border-color: #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* 开屏页专属全屏手机比例 9:16 竖版预览框 */
.banner-img-preview-box.is-splash {
  width: 100px !important;
  height: 178px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 12px !important;
  border: 2px solid #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.banner-img-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-hover-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
  user-select: none;
}

.banner-img-preview-box:hover .preview-hover-mask {
  opacity: 1;
}

.banner-img-inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-upload-btn-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-upload-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #2E5E4E;
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(46, 94, 78, 0.2);
}

.btn-upload-trigger:hover {
  background: #1B3527;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(46, 94, 78, 0.3);
}

.btn-view-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #FFFFFF;
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid #CBD5E1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-view-preview-btn:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

.upload-tip-text {
  font-size: 12px;
  color: #64748B;
}

.banner-preset-img-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.preset-title {
  font-size: 12px;
  color: #64748B;
}

.preset-chip {
  font-size: 11.5px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #334155;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-chip:hover {
  background: #E2E8F0;
  border-color: #CBD5E1;
  color: #0F172A;
}

/* 5. 跳转类型选择卡片组 (无 / 链接 / 富文本) */
.jump-type-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.jump-type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.jump-type-card:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
}

.jump-type-card.active {
  border-color: #2E5E4E !important;
  background: #F2F7F4 !important;
  box-shadow: 0 0 0 1px #2E5E4E;
}

.jump-type-card input[type="radio"] {
  display: none;
}

.jump-card-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.jump-type-card.active .jump-card-indicator {
  border-color: #2E5E4E;
}

.jump-type-card.active .jump-card-indicator::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E5E4E;
}

.jump-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
}

.jump-card-desc {
  font-size: 11.5px;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.35;
}

/* 6. 动态展开区域 (无 / 链接 / 富文本) */
.dynamic-jump-box {
  margin-top: 14px;
  padding: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.jump-none-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #475569;
}

.jump-none-info strong {
  font-size: 13px;
  color: #1E293B;
  display: block;
  margin-bottom: 2px;
}

.jump-none-info p {
  font-size: 12px;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

/* 链接快捷填入条 */
.quick-links-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.quick-title {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.quick-link-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #2563EB;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-link-btn:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
}

/* 可视化富文本编辑容器与排版工具栏 (免输入HTML) */
.rich-wysiwyg-box {
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.rich-wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.wysiwyg-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.wysiwyg-btn:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}

.wysiwyg-divider {
  width: 1px;
  height: 18px;
  background: #CBD5E1;
  margin: 0 4px;
}

.wysiwyg-template-btn {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wysiwyg-template-btn:hover {
  background: #DBEAFE;
  border-color: #93C5FD;
}

.rich-wysiwyg-editor {
  padding: 12px 14px;
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1E293B;
  outline: none;
}

.rich-wysiwyg-editor:empty:before {
  content: attr(placeholder);
  color: #94A3B8;
  pointer-events: none;
}

.rich-wysiwyg-editor h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
}

.rich-wysiwyg-editor p {
  margin-bottom: 6px;
}

.rich-wysiwyg-editor ul,
.rich-wysiwyg-editor ol {
  padding-left: 20px;
  margin-bottom: 6px;
}

.rich-wysiwyg-editor blockquote {
  border-left: 3px solid #2E5E4E;
  background: #F0FDF4;
  padding: 6px 12px;
  margin: 6px 0;
  border-radius: 0 6px 6px 0;
  color: #166534;
}

/* 富文本移动端实时预览卡片 */
.rich-preview-card {
  margin-top: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
}

.rich-preview-header {
  background: #F1F5F9;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #E2E8F0;
}

.preview-tag {
  background: #DCFCE7;
  color: #16A34A;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 8px;
}

.rich-preview-body {
  padding: 14px 16px;
  min-height: 80px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1E293B;
}

.rich-preview-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0F172A;
}

.rich-preview-body p {
  margin-bottom: 8px;
}

.rich-preview-body ul, .rich-preview-body ol {
  padding-left: 20px;
  margin-bottom: 8px;
}

.rich-preview-body blockquote {
  border-left: 3px solid #2E5E4E;
  background: #F0FDF4;
  padding: 6px 12px;
  margin: 8px 0;
  border-radius: 0 6px 6px 0;
  color: #166534;
}

.preview-empty-hint {
  color: #94A3B8;
  font-size: 12.5px;
  text-align: center;
  padding: 24px 0;
}

/* Banner 查看详情弹窗 (限制合理高度，超出框内自适应上下滚动) */
.banner-view-modal-dialog {
  max-height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.banner-view-modal-body {
  flex: 1 1 auto !important;
  max-height: calc(86vh - 130px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 20px 24px;
}

/* 横版海报卡片 */
.banner-view-hero-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: #F8FAFC;
  text-align: center;
}

.banner-view-poster-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}

.banner-view-poster-img:hover {
  opacity: 0.92;
}

/* 开屏页专属全屏手机比例 9:16 居中精巧海报 */
.banner-view-hero-card.is-splash {
  background: #F1F5F9;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.banner-view-hero-card.is-splash .banner-view-poster-img {
  width: auto !important;
  height: 230px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16) !important;
  border: 2px solid #FFFFFF !important;
}

.banner-view-props-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #F8FAFC;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  margin-bottom: 16px;
}

.banner-prop-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.banner-prop-label {
  font-size: 12px;
  color: #64748B;
}

.banner-prop-val {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
}

/* 列表操作栏下线与展示专属色彩 */
.action-btn.disable {
  color: #D97706 !important;
  font-weight: 500;
}

.action-btn.disable:hover {
  color: #B45309 !important;
}

.action-btn.enable {
  color: #059669 !important;
  font-weight: 500;
}

.action-btn.enable:hover {
  color: #047857 !important;
}

/* ==========================================================================
   开屏页全局设置全新卡片策略弹窗 (高质感现代卡片交互)
   ========================================================================== */
.splash-modal-dialog {
  max-width: 600px;
  width: 92%;
  border-radius: 16px;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  background: #FFFFFF;
}

.splash-icon-badge {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 策略双卡片单选容器 */
.splash-strategy-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.splash-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 2px solid #E2E8F0;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.splash-card:hover {
  border-color: #94A3B8;
  background: #F8FAFC;
  transform: translateY(-1px);
}

.splash-card.active {
  border-color: #10B981;
  background: #F0FDF4;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}

.splash-card-radio {
  margin-top: 2px;
}

.splash-card-radio input[type="radio"] {
  cursor: pointer;
  accent-color: #10B981;
  width: 16px;
  height: 16px;
}

.splash-card-content {
  flex: 1;
}

.splash-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.splash-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F172A;
}

.splash-card-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  line-height: 1.2;
}

.splash-card-pill.recommend {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

.splash-card-pill.fast {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}

.splash-card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: #64748B;
}

/* 倒计时时长控制面板 */
.splash-duration-panel {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  transition: all 0.22s ease;
}

.splash-duration-panel.disabled {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.7);
}

.splash-duration-chips {
  display: flex;
  gap: 10px;
}

.splash-dur-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #334155;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.splash-dur-chip:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.splash-dur-chip.active {
  border-color: #10B981;
  background: #ECFDF5;
  color: #065F46;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.16);
}

.splash-dur-chip .dur-num {
  font-size: 18px;
  font-weight: 800;
}

.splash-dur-chip .dur-tag {
  font-size: 11px;
  font-weight: 500;
  color: #059669;
  margin-top: 2px;
}

/* 自定义时长步进器 */
.splash-custom-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 8px 14px;
}

.stepper-label {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}

.stepper-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #F1F5F9;
  color: #334155;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.stepper-btn:hover {
  background: #E2E8F0;
  border-color: #94A3B8;
  color: #0F172A;
}

.stepper-input {
  width: 48px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px;
  outline: none;
}

.stepper-input:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.stepper-unit {
  font-size: 12px;
  color: #64748B;
}

/* 允许跳过配置行 */
.splash-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #E2E8F0;
  margin-top: 12px;
}

.splash-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.splash-option-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
}

.splash-option-desc {
  font-size: 12px;
  color: #64748B;
}

/* 提示规则框 */
.splash-info-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  color: #92400E;
  font-size: 12px;
  line-height: 1.55;
}

.tip-icon-cell {
  font-size: 16px;
  line-height: 1;
}

.splash-status-summary {
  font-size: 12.5px;
  color: #475569;
}

.splash-status-summary strong {
  font-weight: 700;
}

/* Switch Toggle 通用开关样式 */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E1;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-toggle .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-toggle input:checked + .slider {
  background-color: #10B981;
}

.switch-toggle input:focus + .slider {
  box-shadow: 0 0 1px #10B981;
}

.switch-toggle input:checked + .slider:before {
  transform: translateX(20px);
}

.switch-toggle .slider.round {
  border-radius: 24px;
}

.switch-toggle .slider.round:before {
  border-radius: 50%;
}

/* ==========================================================================
   每日打卡与积分兑换模块 (打卡概览、兑换商品、兑换记录)
   ========================================================================== */

/* 1. 概览核心指标卡微排版 */
.checkin-metrics-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.checkin-metric-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.checkin-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.stat-sub-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 8px;
}

.trend-up {
  color: #10B981;
}

.trend-down {
  color: #EF4444;
}

.trend-diff-pill {
  background: #ECFDF5;
  color: #059669;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.trend-pill-down {
  background: #FEF2F2;
  color: #DC2626;
}

/* 2. 双栏分析卡片网格 */
.checkin-analytics-row,
.checkin-charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.analytics-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-title-box h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.analytics-badge-tag {
  background: #EFF6FF;
  color: #2563EB;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.analytics-sub-tip {
  font-size: 12px;
  color: #94A3B8;
}

/* 3. 环形消耗分布图 */
.donut-chart-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
}

.donut-visual-box {
  position: relative;
  width: 170px;
  height: 170px;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-segment {
  transition: stroke-dasharray 0.5s ease;
}

.donut-center-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.donut-center-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.donut-center-lbl {
  display: block;
  font-size: 11px;
  color: #64748B;
  margin-top: 2px;
}

.donut-legend-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 180px;
}

.donut-legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-name {
  color: #334155;
  font-weight: 500;
}

.legend-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-val {
  font-weight: 600;
  color: #1E293B;
}

.legend-pct {
  color: #64748B;
  font-size: 12px;
  width: 32px;
  text-align: right;
}

/* 3.1 阳光币消耗分布 - 下半区三大品类核心指标矩阵卡片与洞察标签 (消除空旷感) */
.category-stat-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.category-matrix-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.category-matrix-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.category-matrix-card.card-assessment {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
  border-color: #DBEAFE;
}

.category-matrix-card.card-meditation {
  background: linear-gradient(180deg, #F8FAFC 0%, #ECFDF5 100%);
  border-color: #D1FAE5;
}

.category-matrix-card.card-wallpaper {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFBEB 100%);
  border-color: #FEF3C7;
}

.mat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mat-icon {
  font-size: 14px;
  margin-right: 4px;
}

.mat-title {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  flex: 1;
}

.mat-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.mat-badge.badge-blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.mat-badge.badge-green {
  background: #D1FAE5;
  color: #047857;
}

.mat-badge.badge-amber {
  background: #FEF3C7;
  color: #B45309;
}

.mat-coins-num {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin: 4px 0 2px 0;
  line-height: 1.2;
}

.mat-coins-unit {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.mat-sub-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748B;
  margin-bottom: 8px;
}

.mat-dot {
  color: #CBD5E1;
}

.mat-progress-bar {
  width: 100%;
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.mat-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.mat-progress-fill.fill-blue {
  background: #3B82F6;
}

.mat-progress-fill.fill-green {
  background: #10B981;
}

.mat-progress-fill.fill-amber {
  background: #F59E0B;
}

.category-insight-tip-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #3B82F6;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}

.insight-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.insight-text strong {
  color: #1E293B;
}

/* 4. Top 5 兑换排行榜 */
.top-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rank-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  transition: background 0.15s ease;
}

.rank-item-row:hover {
  background: #F1F5F9;
}

.rank-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}

.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.rank-badge-1 {
  background: #FEF3C7;
  color: #B45309;
}

.rank-badge-2 {
  background: #E2E8F0;
  color: #475569;
}

.rank-badge-3 {
  background: #FFEDD5;
  color: #C2410C;
}

.rank-badge-other {
  background: #F1F5F9;
  color: #94A3B8;
}

.rank-prod-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #E2E8F0;
  background: #E2E8F0;
}

.rank-prod-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rank-prod-title {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-prod-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #64748B;
  margin-top: 3px;
}

.rank-type-pill {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.rank-type-assessment {
  background: #EFF6FF;
  color: #2563EB;
}

.rank-type-meditation {
  background: #ECFDF5;
  color: #059669;
}

.rank-type-wallpaper {
  background: #FFFBEB;
  color: #D97706;
}

.rank-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
}

.rank-count-val {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.rank-count-lbl {
  font-size: 10px;
  color: #94A3B8;
}

/* 5. SVG 动态折线与柱状图容器 */
.line-chart-wrapper,
.bar-chart-wrapper {
  width: 100%;
  height: 220px;
  position: relative;
}

.chart-legend-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-legend-row .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}

.legend-line-dot {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.legend-bar-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* 5.1 走势与柱状图悬浮跟随交互浮窗 */
.chart-interactive-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.94);
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 100;
  transform: translate(-50%, -100%);
  margin-top: -12px;
  transition: opacity 0.12s ease;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.chart-interactive-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.94) transparent transparent;
}

.tooltip-date-head {
  font-weight: 700;
  font-size: 13px;
  color: #F8FAFC;
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tooltip-badge-day {
  font-size: 10px;
  font-weight: normal;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0;
}

.tooltip-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #CBD5E1;
  font-size: 12px;
}

.tooltip-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.tooltip-item-val {
  font-weight: 600;
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

/* 6. 兑换商品统计四项条 (Image 3) */
.checkin-products-stat-bar {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.prod-mini-stat-card {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
}

.prod-stat-cell {
  display: flex;
  flex-direction: column;
}

.prod-stat-label {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.prod-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 4px;
}

.prod-stat-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-success {
  color: #10B981 !important;
}

.text-amber {
  color: #F59E0B !important;
}

/* 7. 兑换商品与流水表格：左右滑动、单行展示、右侧粘滞操作列 */
.exchange-table-scroll-wrap {
  overflow-x: auto;
  position: relative;
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.exchange-table {
  min-width: 1400px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0 !important;
}

.exchange-table th,
.exchange-table td {
  vertical-align: middle;
  white-space: nowrap !important;
  padding: 12px 14px;
}

.exchange-table tbody tr {
  background: #FFFFFF;
  transition: background 0.15s ease;
}

.exchange-table tbody tr:hover {
  background: #F8FAFC;
}

/* 粘滞固定在右侧的操作列 */
.sticky-action-col {
  position: sticky !important;
  right: 0;
  z-index: 5;
  background: #FFFFFF;
  box-shadow: -5px 0 10px -2px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.exchange-table th.sticky-action-col {
  background: #F8FAFC !important;
  z-index: 6;
}

.exchange-table tbody tr:hover td.sticky-action-col {
  background: #F8FAFC !important;
}

.exchange-cover-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
  display: block;
}

.prod-type-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap !important;
}

.prod-type-assessment {
  background: #EFF6FF;
  color: #2563EB;
}

.prod-type-meditation {
  background: #ECFDF5;
  color: #059669;
}

.prod-type-wallpaper {
  background: #FFFBEB;
  color: #D97706;
}

.coin-price-tag {
  color: #D97706;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap !important;
}

.badge-active {
  background: #ECFDF5;
  color: #059669;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap !important;
}

.badge-inactive {
  background: #F1F5F9;
  color: #64748B;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap !important;
}

/* 表格操作按钮列：单行不换行 */
.exchange-table .table-action-btns {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap !important;
}

.exchange-table .table-action-btns .btn-action-text {
  white-space: nowrap !important;
  display: inline-block !important;
  flex-shrink: 0;
}

.btn-action-text {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.btn-action-text.btn-detail {
  color: #2563EB;
}

.btn-action-text.btn-detail:hover {
  background: #EFF6FF;
}

.btn-action-text.btn-edit {
  color: #059669;
}

.btn-action-text.btn-edit:hover {
  background: #ECFDF5;
}

.btn-action-text.btn-offline {
  color: #D97706;
}

.btn-action-text.btn-offline:hover {
  background: #FEF3C7;
}

.btn-action-text.btn-online {
  color: #10B981;
}

.btn-action-text.btn-online:hover {
  background: #ECFDF5;
}

.btn-action-text.btn-delete {
  color: #EF4444;
}

.btn-action-text.btn-delete:hover {
  background: #FEF2F2;
}

/* 订单流水表格单行展示 */
#recordsDataTable {
  min-width: 1050px;
  border-collapse: separate;
  border-spacing: 0;
}

#recordsDataTable th,
#recordsDataTable td {
  white-space: nowrap !important;
  vertical-align: middle;
}

.modal-exchange-editor {
  width: 580px;
  max-width: 94vw;
  max-height: min(650px, 82vh);
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  background: #FFFFFF;
}

.modal-exchange-editor .modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 14px 24px;
  margin-bottom: 0;
  border-bottom: 1px solid #F1F5F9;
  background: #FFFFFF;
}

.modal-exchange-editor .modal-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.modal-exchange-editor #exchangeProductForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-exchange-editor .modal-body-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(650px, 82vh) - 120px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 18px 24px 14px 24px;
}

/* 优雅精致的滚动条 */
.modal-exchange-editor .modal-body-scroll::-webkit-scrollbar {
  width: 6px;
}

.modal-exchange-editor .modal-body-scroll::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}

.modal-exchange-editor .modal-body-scroll::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 4px;
}

.modal-exchange-editor .modal-body-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748B;
}

.modal-exchange-editor .modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  margin-top: 0 !important;
}

.exchange-type-segmented {
  display: flex;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}

.segmented-option {
  flex: 1;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

.segmented-option input[type="radio"] {
  display: none;
}

.segmented-btn {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  transition: all 0.15s ease;
}

.segmented-option input[type="radio"]:checked + .segmented-btn {
  background: #FFFFFF;
  color: #2E5E4E;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.product-picker-trigger-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.btn-picker-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px dashed #2E5E4E;
  background: #F4F9F6;
  color: #2E5E4E;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-picker-select:hover {
  background: #E8F3ED;
  border-color: #244C3F;
}

.picker-tip-text {
  font-size: 12px;
  color: #94A3B8;
}

.selected-product-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  margin-top: 10px;
  position: relative;
}

.selected-prod-cover {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #CBD5E1;
}

.selected-prod-meta {
  flex: 1;
  overflow: hidden;
}

.selected-prod-title {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-prod-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
}

.badge-type-pill {
  background: #EFF6FF;
  color: #2563EB;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.preview-prod-price {
  color: #D97706;
  font-weight: 600;
}

.btn-remove-selection {
  background: #F1F5F9;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #64748B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.btn-remove-selection:hover {
  background: #E2E8F0;
  color: #0F172A;
}

/* 8.1 批量多选商品芯片与容器 */
.batch-selected-count-badge {
  font-size: 12px;
  color: #2E5E4E;
  background: #E8F3ED;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.batch-selected-products-container {
  margin-top: 10px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  background: #F8FAFC;
  max-height: 180px;
  overflow-y: auto;
}

.batch-selected-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.batch-selected-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow-y: auto;
  padding: 6px 2px;
}

.batch-prod-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.batch-prod-chip-thumb,
.chip-cover {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.batch-prod-chip-title,
.chip-title {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #1E293B;
}

.batch-prod-chip-price,
.chip-price {
  font-size: 11px;
  color: #D97706;
  font-weight: 500;
}

.batch-prod-chip-remove,
.btn-chip-remove {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.batch-prod-chip-remove:hover,
.btn-chip-remove:hover {
  color: #EF4444;
}

/* 电子壁纸上传与预览组件 */
.wallpaper-upload-container {
  margin-top: 4px;
}

.wallpaper-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #F8FAFC;
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.wallpaper-upload-dropzone:hover {
  background: #F0FDF4;
  border-color: #10B981;
}

.upload-dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #DCFCE7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: transform 0.2s ease;
}

.wallpaper-upload-dropzone:hover .upload-dropzone-icon {
  transform: scale(1.08);
}

.upload-dropzone-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 4px;
}

.upload-dropzone-desc {
  font-size: 12px;
  color: #94A3B8;
}

/* 已上传壁纸预览卡片 */
.wallpaper-preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wallpaper-preview-thumb-wrap {
  position: relative;
  width: 110px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #E2E8F0;
}

.wallpaper-preview-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wallpaper-preview-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.7);
  color: #FFFFFF;
  font-size: 10px;
  text-align: center;
  padding: 2px 0;
  backdrop-filter: blur(2px);
}

.wallpaper-preview-meta {
  flex: 1;
  min-width: 0;
}

.wallpaper-preview-filename {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallpaper-preview-filesize {
  font-size: 11.5px;
  color: #64748B;
  margin-top: 2px;
}

.wallpaper-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.btn-wp-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-wp-change:hover {
  background: #D1FAE5;
  color: #047857;
}

.btn-wp-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-wp-remove:hover {
  background: #FEE2E2;
  color: #B91C1C;
}

/* 单位数字输入框 */
.input-unit-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-unit-badge {
  position: absolute;
  right: 12px;
  font-size: 12px;
  color: #94A3B8;
  pointer-events: none;
}

.input-unit-group input {
  padding-right: 32px;
}

.modal-system-selector {
  width: 720px;
  max-width: 95vw;
  max-height: min(720px, 86vh);
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}

.modal-system-selector .modal-header {
  flex-shrink: 0;
  padding: 18px 24px 14px 24px;
  margin-bottom: 0;
  border-bottom: 1px solid #F1F5F9;
}

.modal-system-selector .selector-filter-bar {
  flex-shrink: 0;
  padding: 14px 24px 10px 24px;
  margin-bottom: 0;
}

.modal-system-selector .modal-footer {
  flex-shrink: 0;
  padding: 14px 24px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  margin-top: 0 !important;
}

.selector-count-badge {
  font-size: 12px;
  color: #2E5E4E;
  background: #E8F3ED;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.selector-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.selector-quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.btn-text-action {
  background: none;
  border: none;
  color: #2563EB;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-weight: 500;
}

.btn-text-action:hover {
  text-decoration: underline;
}

.system-product-scroll-list {
  max-height: 380px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 2px;
}

.sys-candidate-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.sys-candidate-card:hover {
  border-color: #2E5E4E;
  background: #F4F9F6;
}

.sys-candidate-card.selected {
  border-color: #2E5E4E;
  background: #ECFDF5;
  box-shadow: 0 0 0 1px #2E5E4E;
}

.sys-candidate-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s ease;
  background: #FFFFFF;
}

.sys-candidate-card.selected .sys-candidate-checkbox {
  background: #2E5E4E;
  border-color: #2E5E4E;
  color: #FFFFFF;
  font-weight: 700;
}

.sys-candidate-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.sys-candidate-info {
  flex: 1;
  overflow: hidden;
}

.sys-candidate-name {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-candidate-sub {
  font-size: 11px;
  color: #64748B;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-status-ready {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-block;
}

/* 10. 商品详情模态框 (高保真全景卡片) */
/* 10. 商品详情模态框 (高保真全新重构) */
.modal-exchange-detail {
  width: 720px;
  max-width: 95vw;
  max-height: min(720px, 86vh);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 0 !important;
  overflow: hidden;
  background: #FFFFFF;
}

.modal-exchange-detail .modal-header {
  flex-shrink: 0;
  padding: 18px 28px 14px 28px;
  margin-bottom: 0;
  border-bottom: 1px solid #F1F5F9;
}

.modal-exchange-detail .detail-body-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(min(720px, 86vh) - 120px);
  overflow-y: auto;
  padding: 20px 28px;
}

.modal-exchange-detail .modal-footer {
  flex-shrink: 0;
  padding: 14px 28px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  margin-top: 0 !important;
}

.detail-profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.detail-profile-cover {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.detail-profile-main {
  flex: 1;
  min-width: 0;
}

.detail-profile-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.detail-prod-no-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #E2E8F0;
  color: #475569;
  border-radius: 4px;
  font-size: 11.5px;
  font-family: monospace;
  font-weight: 500;
}

.detail-profile-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-profile-sub {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: #64748B;
  flex-wrap: wrap;
}

.detail-profile-sub span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 四大核心指标卡片 */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.detail-stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.detail-stat-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.detail-stat-label {
  font-size: 11.5px;
  color: #64748B;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-stat-val {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.detail-stat-val.val-coins {
  color: #D97706;
}

.detail-stat-val.val-stock {
  color: #0F172A;
}

.detail-stat-val.val-exchange {
  color: #059669;
}

.detail-stat-val.val-price {
  color: #334155;
}

.detail-stat-hint {
  font-size: 11px;
  color: #94A3B8;
}

/* 基础档案与状态说明面板 */
.detail-meta-panel {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.detail-meta-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-meta-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}

.detail-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px dashed #E2E8F0;
}

.detail-meta-item:nth-last-child(1),
.detail-meta-item:nth-last-child(2) {
  border-bottom: none;
}

.detail-meta-item .meta-label {
  color: #64748B;
}

.detail-meta-item .meta-value {
  color: #1E293B;
  font-weight: 500;
}

/* 11. 商品上下架专属确认与配置弹窗 (告别丑陋原生confirm) */
.modal-shelf-action {
  width: 480px;
  max-width: 92vw;
}

.shelf-action-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.shelf-action-icon-badge.icon-offline {
  background: #FEF3C7;
  color: #D97706;
}

.shelf-action-icon-badge.icon-online {
  background: #ECFDF5;
  color: #059669;
}

.shelf-action-body {
  padding: 12px 0 6px 0;
}

.shelf-prod-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  margin-bottom: 14px;
}

.shelf-prod-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #CBD5E1;
}

.shelf-prod-meta {
  flex: 1;
  overflow: hidden;
}

.shelf-prod-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.shelf-prod-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.shelf-notice-box {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}

.shelf-notice-box.notice-warning {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.shelf-notice-box.notice-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.notice-title {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 13px;
}

.notice-text {
  margin: 0;
}

.btn-danger-action {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.btn-danger-action:hover {
  background: #B91C1C !important;
}

/* ========================================================
   解忧树洞 (Treehole) 样式模块
   ======================================================== */

/* 胶囊 Tab 内角标与切换效果 */
.banner-pill-btn .tab-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #64748B;
  font-weight: 500;
  margin-left: 6px;
  line-height: 1.3;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.banner-pill-btn.active .tab-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-weight: 600;
}

.treehole-tabs-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 2px;
}

.treehole-tabs-bar .banner-tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #64748B;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
}

.treehole-tabs-bar .banner-tab-item:hover {
  color: #2E5E4E;
  background: #F8FAFC;
}

.treehole-tabs-bar .banner-tab-item.active {
  color: #2E5E4E;
  font-weight: 600;
  border-bottom-color: #2E5E4E;
  background: rgba(46, 94, 78, 0.05);
}

.treehole-tabs-bar .tab-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #64748B;
  font-weight: 500;
}

.treehole-tabs-bar .banner-tab-item.active .tab-badge {
  background: #E8F3ED;
  color: #2E5E4E;
  font-weight: 600;
}

.treehole-sub-panel {
  display: block;
}

.treehole-sub-panel.hidden {
  display: none !important;
}

.treehole-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.05);
}

.treehole-notice-banner .notice-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.treehole-notice-banner .notice-text {
  font-size: 13px;
  line-height: 1.65;
  color: #166534;
}

.treehole-notice-banner code {
  background: rgba(22, 101, 52, 0.12);
  color: #14532D;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  font-size: 12px;
}

/* 等级标识胶囊 */
.level-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.level-badge-1 { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.level-badge-2 { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.level-badge-3 { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
.level-badge-4 { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.level-badge-5 { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.level-badge-6 { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.level-badge-7 { background: #FFFBEB; color: #B45309; border: 1px solid #FCD34D; box-shadow: 0 0 6px rgba(245, 158, 11, 0.25); }

.fruit-tag-pill {
  display: inline-block;
  padding: 2px 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
  margin: 2px 4px 2px 0;
}

.quote-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.quote-cat-healing { background: #ECFDF5; color: #059669; }
.quote-cat-growth { background: #EFF6FF; color: #2563EB; }
.quote-cat-lonely { background: #F5F3FF; color: #7C3AED; }
.quote-cat-tired { background: #FFFBEB; color: #D97706; }
.quote-cat-anxiety { background: #FEF2F2; color: #DC2626; }
.quote-cat-happiness { background: #ECFEFF; color: #0891B2; }

.quote-content-preview {
  font-size: 13.5px;
  line-height: 1.6;
  color: #1E293B;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  max-width: 520px;
}

.quote-author-tag {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 等级规则编辑按钮 */
.btn-level-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.btn-level-edit:hover {
  background: #DCFCE7;
  border-color: #86EFAC;
  color: #14532D;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(22, 101, 52, 0.12);
}

/* 寄语状态切换开关按钮 */
.btn-toggle-switch {
  width: 38px;
  height: 22px;
  background: #CBD5E1;
  border-radius: 20px;
  border: none;
  padding: 2px 3px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.25s ease;
  vertical-align: middle;
  outline: none;
  display: inline-flex;
  align-items: center;
}

.btn-toggle-switch.active {
  background: #10B981;
}

.btn-toggle-switch .switch-ball {
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
}

.btn-toggle-switch.active .switch-ball {
  transform: translateX(16px);
}

/* 表格内通用按钮备用 */
.btn-table-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-table-action:hover {
  background: #F8FAFC;
  border-color: #2E5E4E;
  color: #2E5E4E;
}

.btn-table-action.btn-action-danger {
  border-color: #FECDD3;
  color: #E11D48;
}

.btn-table-action.btn-action-danger:hover {
  background: #FFF1F2;
  border-color: #E11D48;
}

/* 模态弹窗特定尺寸与滚动限制 */
.modal-treehole-quote {
  width: 640px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 14px;
}

.modal-treehole-quote .modal-body-scroll {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(88vh - 140px);
}

.modal-listener-level {
  width: 600px;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 14px;
}

.modal-listener-level .modal-body-scroll {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(88vh - 140px);
}

/* ========================================================
   数据概览 (Dashboard Overview) 样式模块 (1:1 还原设计图)
   ======================================================== */

.overview-title-bar {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overview-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.overview-update-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.overview-update-time strong {
  color: #1E293B;
  font-weight: 600;
}

.btn-overview-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  user-select: none;
}

.btn-overview-refresh:hover {
  background: #F8FAFC;
  border-color: #5C7C58;
  color: #5C7C58;
  box-shadow: 0 2px 8px rgba(92, 124, 88, 0.15);
  transform: translateY(-1px);
}

.btn-overview-refresh .refresh-icon {
  transition: transform 0.2s ease;
}

.btn-overview-refresh .refresh-icon.spinning {
  animation: spinRefresh 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes spinRefresh {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.stat-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.overview-stat-tip {
  font-size: 11px;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.overview-title {
  font-size: 22px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: -0.3px;
  margin: 0 0 6px 0;
}

.overview-subtitle {
  font-size: 13.5px;
  color: #64748B;
  margin: 0;
}

/* 1. 核心四统计卡片网格 */
.overview-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.overview-stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.overview-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.overview-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.overview-stat-label {
  font-size: 13.5px;
  color: #64748B;
  font-weight: 500;
}

.overview-stat-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-user-green { background: #ECFDF5; }
.icon-user-blue { background: #EFF6FF; }
.icon-user-orange { background: #FFFBEB; }
.icon-user-purple { background: #F5F3FF; }

.overview-stat-num {
  font-size: 30px;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.overview-stat-trend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.trend-green { background: #ECFDF5; color: #059669; }
.trend-blue { background: #EFF6FF; color: #2563EB; }
.trend-orange { background: #FFFBEB; color: #D97706; }
.trend-purple { background: #F5F3FF; color: #7C3AED; }

.trend-text {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 400;
}

/* 2. 中层两列: 增长趋势 (65%) 与 功能使用占比 (35%) */
.overview-middle-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.overview-panel-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.overview-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.overview-card-title-col h3.overview-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px 0;
}

.overview-card-subtitle {
  font-size: 12.5px;
  color: #94A3B8;
}

.overview-time-tabs {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.overview-time-btn {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  color: #64748B;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.overview-time-btn.active {
  background: #4D6B53;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(77, 107, 83, 0.3);
}

.overview-chart-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #64748B;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-new-user { background: #5C7C58; }
.dot-active-user { background: #3B82F6; }

.overview-line-chart-box {
  width: 100%;
  height: 230px;
  position: relative;
}

/* 阳光币与打卡统计专用卡片 (替换原心理状态分布) */
.overview-coin-stats-card {
  display: flex;
  flex-direction: column;
}

.coin-stats-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: space-between;
}

.coin-stat-item-card {
  background: #F8FAFC;
  border: 1px solid #EDF2F7;
  border-radius: 12px;
  padding: 13px 16px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.coin-stat-item-card:hover {
  background: #F1F5F9;
  border-color: #E2E8F0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.coin-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.coin-stat-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.coin-stat-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-sun-gold {
  background: #FEF3C7;
  color: #D97706;
}

.icon-gift-blue {
  background: #DBEAFE;
  color: #2563EB;
}

.icon-checkin-green {
  background: #D1FAE5;
  color: #059669;
}

.coin-stat-text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.coin-stat-name {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
}

.coin-stat-desc {
  font-size: 11.5px;
  color: #94A3B8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-stat-item-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.coin-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: #1E293B;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.coin-unit {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  margin-left: 2px;
}

.coin-stat-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.badge-amber {
  background: #FEF3C7;
  color: #B45309;
}

.badge-blue {
  background: #EFF6FF;
  color: #2563EB;
}

.badge-green {
  background: #ECFDF5;
  color: #059669;
}

.coin-progress-wrap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #E2E8F0;
}

.coin-progress-track {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.coin-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3B82F6, #2563EB);
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.coin-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94A3B8;
  margin-top: 5px;
}

/* 兼容旧版环形图类名 */
.overview-donut-chart-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  position: relative;
}

.overview-donut-legend-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.donut-legend-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.donut-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-health-peace { background: #10B981; }
.dot-health-mild { background: #3B82F6; }
.dot-health-anxious { background: #F97316; }
.dot-health-care { background: #F43F5E; }
.donut-label { color: #64748B; font-weight: 500; }
.donut-val { color: #1E293B; font-weight: 700; font-size: 13.5px; }

/* 3. 底层两列: 业务排行 (50% : 50%) */
.overview-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.overview-view-all-link {
  font-size: 13px;
  color: #5C7C58;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.overview-view-all-link:hover {
  color: #2E5E4E;
  text-decoration: underline;
}

.overview-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.overview-rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.overview-rank-item:hover {
  background: #F8FAFC;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.rank-1 { background: #5C7C58; color: #FFFFFF; }
.rank-2 { background: #7B9B77; color: #FFFFFF; }
.rank-3 { background: #95B291; color: #FFFFFF; }
.rank-4, .rank-5 { background: #F1F5F9; color: #64748B; }

.rank-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.rank-title {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-meta {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 3px;
}

.rank-stats-col {
  text-align: right;
  flex-shrink: 0;
  width: 100px;
}

.rank-stats-num {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-bottom: 5px;
}

.rank-progress-track {
  width: 100%;
  height: 5px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.rank-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-green { background: #5C7C58; }
.progress-purple { background: #8B5CF6; }

/* SVG 折线图交互提示框 */
.chart-tooltip-box {
  position: absolute;
  pointer-events: none;
  background: rgba(30, 41, 59, 0.92);
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -120%);
}

/* ========================================================
   测评管理向导扩展: 步骤3(等级与维度) & 步骤4(报告模块设置)
   ======================================================== */

/* 4步导航条自适应 */
.editor-steps-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editor-steps-bar .step-nav-connector {
  flex: 1;
  height: 2px;
  background: #E2E8F0;
  margin: 0 12px;
  min-width: 14px;
  transition: background 0.25s ease;
}
.editor-steps-bar .step-nav-connector.active {
  background: #2E5E4E;
}

/* 理论分值汇总与覆盖统计面板 */
.score-calc-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.score-calc-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.score-calc-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}
.score-calc-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.score-calc-stat-val.highlight {
  color: #2E5E4E;
}

/* 全分值覆盖可视化进度条与警示 */
.coverage-panel {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
.coverage-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.coverage-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.coverage-track-outer {
  height: 12px;
  background: #F1F5F9;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  border: 1px solid #CBD5E1;
  position: relative;
}
.coverage-segment {
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
}
.coverage-segment:hover {
  filter: brightness(1.1);
}
.coverage-alert-box {
  margin-top: 10px;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.coverage-alert-box.success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}
.coverage-alert-box.warning {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

/* 综合等级卡片与子指标卡片 */
.level-card-item, .dimension-card-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.level-card-item:hover, .dimension-card-item:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.level-card-header, .dimension-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}
.level-card-badge {
  background: #E8F5E9;
  color: #2E5E4E;
  border: 1px solid #C8E6C9;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.level-grid-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.level-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.level-range-inputs input {
  width: 90px;
  text-align: center;
}

/* 分行全宽富文本编辑器容器体系 */
.level-stacked-field-group, .dim-stacked-field-group {
  margin-top: 14px;
  width: 100%;
}
.rich-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rich-header-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}
.char-count-pill {
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
}
.char-count-pill strong {
  color: #2E5E4E;
}
.rich-box-wrapper {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rich-box-wrapper:focus-within {
  border-color: #2E5E4E;
  box-shadow: 0 0 0 3px rgba(46, 94, 78, 0.12);
}
.rich-toolbar-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}
.rt-btn-mini {
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #475569;
  transition: all 0.15s ease;
  user-select: none;
}
.rt-btn-mini:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #CBD5E1;
}
.rt-divider-mini {
  width: 1px;
  height: 16px;
  background: #E2E8F0;
  margin: 0 4px;
}
.rich-editable-area {
  min-height: 72px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 12px;
  outline: none;
  font-size: 13px;
  line-height: 1.6;
  color: #1E293B;
  box-sizing: border-box;
}
.rich-editable-area:empty:before {
  content: attr(data-placeholder);
  color: #94A3B8;
  pointer-events: none;
}

/* 子指标题目多选药丸 (Question Pills) */
.dim-questions-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px 0;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.q-pill-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.q-pill-item:hover {
  border-color: #2E5E4E;
  background: #F0FDF4;
}
.q-pill-item.selected {
  background: #2E5E4E;
  color: #FFFFFF;
  border-color: #2E5E4E;
}
.q-pill-item input[type="checkbox"] {
  display: none;
}

/* ==========================================================================
   步骤 4: 双栏实时预览与个性化自定义代码配置体系
   ========================================================================== */
.step4-layout-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.step4-config-col {
  flex: 1;
  min-width: 0;
}
.step4-preview-col {
  width: 380px;
  flex-shrink: 0;
  position: sticky;
  top: 16px;
}

/* 顶部模式切换选项卡 */
.report-mode-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 6px 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.btn-mode-tab {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-mode-tab:hover {
  color: #1E293B;
  background: #F1F5F9;
}
.btn-mode-tab.active {
  background: #2E5E4E !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(46, 94, 78, 0.2);
}

/* 变量快捷插入药丸 */
.btn-tag-insert {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.btn-tag-insert:hover {
  background: #E2E8F0;
  color: #0F172A;
  border-color: #94A3B8;
  transform: translateY(-1px);
}

/* 报告模块卡片 */
.report-modules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.report-module-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.report-module-card.active {
  border-color: #2E5E4E;
  box-shadow: 0 4px 14px rgba(46, 94, 78, 0.08);
}
.report-module-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.report-module-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.report-module-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #F0FDF4;
  color: #2E5E4E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.report-module-name {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 3px;
}
.report-module-desc {
  font-size: 12px;
  color: #64748B;
  line-height: 1.5;
}
.report-module-extra {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
}

/* 手机端实时预览模型框 */
.mobile-preview-frame {
  background: #FFFFFF;
  border: 8px solid #0F172A;
  border-radius: 36px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  height: 700px;
  display: flex;
  flex-direction: column;
}
.mobile-notch {
  background: #FFFFFF;
  padding-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #F1F5F9;
}
.mobile-island {
  width: 80px;
  height: 16px;
  background: #0F172A;
  border-radius: 16px;
}
.mobile-capsule-bar {
  background: #FFFFFF;
  padding: 6px 14px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
}
.mobile-report-viewport {
  flex: 1;
  overflow-y: auto;
  background: #F8FAFC;
  padding: 12px 10px 24px 10px;
}

/* ========================================================
   子指标已关联题目全新高颜值设计 (融入系统墨绿色与卡片质感)
   ======================================================== */
.dim-assigned-q-container {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}
.dim-assigned-q-container:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}
.dim-assigned-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dim-assigned-q-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
}
.dim-assigned-q-title .dim-title-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.btn-dim-manage-q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1E3A2F;
  color: #FFFFFF;
  border: 1px solid #1E3A2F;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(30, 58, 47, 0.12);
}
.btn-dim-manage-q:hover {
  background: #2D5A47;
  border-color: #2D5A47;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 58, 47, 0.2);
}
.btn-dim-manage-q:active {
  transform: translateY(0);
}
.dim-assigned-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 4px 0;
}
.dim-q-num-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  padding: 5px 10px 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.dim-q-num-pill:hover {
  border-color: #10B981;
  background: #F0FDF4;
  color: #065F46;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  transform: translateY(-1px);
}
.dim-q-num-pill .pill-q-badge {
  color: #059669;
  font-weight: 800;
}
.dim-q-num-pill .pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 2px;
}
.dim-q-num-pill .pill-remove:hover {
  background: #EF4444;
  color: #FFFFFF;
}
.dim-q-quick-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px dashed #94A3B8;
  color: #64748B;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dim-q-quick-add-btn:hover {
  border-color: #10B981;
  color: #059669;
  background: #F0FDF4;
}
.dim-q-empty-tip {
  font-size: 12.5px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

/* ========================================================
   子指标关联题目选择弹窗 (Executive Grade 高级设计)
   ======================================================== */
.modal-dim-question-selector {
  max-width: 720px;
  width: 94%;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

/* 头部 */
.dim-modal-header {
  padding: 20px 24px 18px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dim-modal-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dim-modal-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  flex-shrink: 0;
}
.dim-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dim-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}
.dim-modal-target-badge {
  display: inline-flex;
  align-items: center;
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.dim-modal-subtitle {
  font-size: 12.5px;
  color: #64748B;
  margin: 4px 0 0 0;
  line-height: 1.4;
}
.dim-modal-close-btn {
  background: #F1F5F9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.dim-modal-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

/* 筛选与搜索工具条 */
.dim-modal-toolbar {
  padding: 12px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dim-modal-search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.dim-modal-search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.dim-search-input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 13px;
  color: #1E293B;
  background: #F8FAFC;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.dim-search-input:focus {
  border-color: #10B981;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.dim-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #CBD5E1;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #FFFFFF;
  cursor: pointer;
}
.dim-modal-filters-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dim-filter-tab-group {
  display: flex;
  background: #F1F5F9;
  padding: 3px;
  border-radius: 10px;
  gap: 2px;
}
.dim-tab-btn {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dim-tab-btn:hover {
  color: #1E293B;
}
.dim-tab-btn.active {
  background: #FFFFFF;
  color: #1E3A2F;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  font-weight: 700;
}
.dim-tab-btn span {
  font-size: 11px;
  opacity: 0.8;
}
.dim-batch-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dim-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dim-action-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
}
.dim-action-btn.text-muted {
  color: #64748B;
}

/* 题目卡片列表区域 */
.dim-modal-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 16px 24px;
  background: #F8FAFC;
}
.dim-q-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 题目卡片 */
.dim-q-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  position: relative;
}
.dim-q-card:hover {
  border-color: #94A3B8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.dim-q-card.selected {
  background: #F0FDF4;
  border-color: #10B981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}

/* 自定义复选框 */
.dim-q-card-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.dim-q-card:hover .dim-q-card-checkbox {
  border-color: #94A3B8;
}
.dim-q-card.selected .dim-q-card-checkbox {
  background: #10B981;
  border-color: #10B981;
}
.dim-q-card-checkbox svg {
  display: none;
  stroke: #FFFFFF;
}
.dim-q-card.selected .dim-q-card-checkbox svg {
  display: block;
}

/* 卡片内容区 */
.dim-q-card-content {
  flex: 1;
  min-width: 0;
}
.dim-q-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dim-q-no-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: #1E293B;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.dim-q-card.selected .dim-q-no-badge {
  background: #DCFCE7;
  color: #065F46;
}
.dim-q-type-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.dim-q-type-tag.single {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #DBEAFE;
}
.dim-q-type-tag.multi {
  background: #FAF5FF;
  color: #7E22CE;
  border: 1px solid #F3E8FF;
}
.dim-q-type-tag.scale {
  background: #FFFBEB;
  color: #B45309;
  border: 1px solid #FEF3C7;
}
.dim-q-type-tag.fill {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}
.dim-q-score-tag {
  font-size: 11px;
  font-weight: 600;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.dim-q-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.5;
  margin: 6px 0 4px 0;
  word-break: break-word;
}
.dim-q-card-options-snippet {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(241, 245, 249, 0.6);
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* 底部操作与统计 */
.dim-modal-footer {
  padding: 16px 24px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dim-footer-stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dim-footer-stats-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
}
.dim-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.dim-score-divider {
  color: #CBD5E1;
}
.dim-footer-stats-main b {
  color: #1E3A2F;
  font-weight: 800;
}
.dim-footer-stats-hint {
  font-size: 11px;
  color: #94A3B8;
}
.dim-footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-dim-cancel {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #475569;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-dim-cancel:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}
.btn-dim-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1E3A2F;
  border: 1px solid #1E3A2F;
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(30, 58, 47, 0.25);
}
.btn-dim-confirm:hover {
  background: #2D5A47;
  border-color: #2D5A47;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 47, 0.3);
}
.btn-dim-confirm:active {
  transform: translateY(0);
}

/* ==========================================================================
   子指标各等级细分诊断与处方配置容器体系
   ========================================================================== */
.dim-levels-container {
  margin-top: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
}
.dim-level-subcard {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: all 0.2s ease;
}
.dim-level-subcard:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dim-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}