/* 后台：Spec 2.2 简约蓝 + 极简清爽 */
:root.admin-theme {
  --admin-primary: #1677FF;
  --admin-success: #52C41A;
  --admin-warning: #FF4D4F;
  --admin-text: #1F2329;
  --admin-text2: #6E7191;
  --admin-bg: #F7F8FA;
  --admin-card: #FFFFFF;
}
.admin-body {
  margin: 0;
  min-height: 100vh;
  background: #F7F8FA;
  color: #1F2329;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.admin-shell {
  display: grid;
  grid-template-columns: 240px 10px 1fr;
  min-height: 100vh;
}

/* 现代侧栏：精致阴影 + 渐变背景 */
.admin-sidebar {
  position: relative;
  width: 240px;
  min-width: 240px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  color: #475569;
  display: flex;
  flex-direction: column;
  z-index: 50;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

/* Logo区域容器：logo + 风格小太阳 */
.admin-logo-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.admin-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.admin-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(22, 119, 255, 0.3);
}

.admin-logo-text em {
  font-style: normal;
  font-weight: 400;
  color: #94a3b8;
  font-size: 13px;
  margin-left: 2px;
}

/* 风格设置按钮：logo右下角小太阳 */
.admin-theme-toggle {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #c0c8d4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.15s;
  padding: 0;
  opacity: 0.5;
}
.admin-theme-toggle:hover {
  color: #1677FF;
  opacity: 1;
}

/* 风格选择面板：始终固定定位，独立于 sidebar */
.admin-theme-panel {
  display: none;
  position: fixed;
  top: 52px;
  left: 16px;
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 14px;
  z-index: 10000;
}
.admin-theme-panel.open { display: block; }
.admin-theme-section { margin-bottom: 14px; }
.admin-theme-section:last-child { margin-bottom: 0; }
.admin-theme-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}
.admin-theme-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.admin-theme-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.admin-theme-chip.active {
  border-color: #1677FF;
  background: rgba(22,119,255,0.08);
  color: #1677FF;
  font-weight: 600;
}
.admin-theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 主题变体 - 活力绿 */
[data-theme="green"] .admin-logo-icon {
  background: linear-gradient(135deg, #36CFC9, #0d9488);
  box-shadow: 0 4px 12px rgba(54,207,201,0.3);
}
[data-theme="green"] .admin-nav-item.active {
  color: #0d9488;
  background: rgba(54,207,201,0.15);
}
[data-theme="green"] .admin-nav-item:hover {
  background: rgba(54,207,201,0.08);
}
[data-theme="green"] .admin-nav-group-title {
  background: rgba(54,207,201,0.08);
}
[data-theme="green"] .admin-top-tab.active {
  color: #0d9488;
  background: rgba(54,207,201,0.12);
  box-shadow: 0 2px 8px rgba(54,207,201,0.15);
}
[data-theme="green"] .admin-top-tab:hover {
  background: rgba(54,207,201,0.1);
}
[data-theme="green"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #36CFC9, #0d9488);
  border-color: rgba(54,207,201,0.3);
  box-shadow: 0 2px 8px rgba(54,207,201,0.25);
}
[data-theme="green"] .admin-content .btn-primary:hover {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  box-shadow: 0 4px 12px rgba(54,207,201,0.35);
}
[data-theme="green"] .admin-content .input:focus,
[data-theme="green"] .admin-content .select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(54,207,201,0.1);
}
[data-theme="green"] .admin-table th {
  background: linear-gradient(180deg, rgba(54,207,201,0.06) 0%, rgba(54,207,201,0.12) 100%);
}
[data-theme="green"] .admin-table tbody tr:hover {
  background: rgba(54,207,201,0.08);
}
[data-theme="green"] .admin-topbar-user-name:hover { background: rgba(54,207,201,0.08); }
[data-theme="green"] .admin-stat-card:hover {
  border-color: #0d9488;
  box-shadow: 0 4px 12px rgba(54,207,201,0.2);
}
[data-theme="green"] .admin-stat-card .admin-stat-value { color: #0d9488; }
[data-theme="green"] .admin-theme-chip.active {
  border-color: #0d9488;
  background: rgba(54,207,201,0.06);
  color: #0d9488;
}
[data-theme="green"] .admin-theme-toggle:hover { color: #0d9488; }
[data-theme="green"] .admin-cat-tab.active { color: #0d9488; }
[data-theme="green"] .admin-user-tab.active { color: #0d9488; }
[data-theme="green"] .admin-content .btn-ghost.active {
  background: rgba(54,207,201,0.15);
  color: #0d9488;
  border-color: rgba(54,207,201,0.4);
}
[data-theme="green"] .admin-topbar-user-menu a:hover,
[data-theme="green"] .admin-topbar-user-menu button:hover {
  background: rgba(54,207,201,0.08);
  color: #0d9488;
}

/* 主题变体 - 沉稳灰 */
[data-theme="gray"] .admin-logo-icon {
  background: linear-gradient(135deg, #4E5969, #334155);
  box-shadow: 0 4px 12px rgba(78,89,105,0.3);
}
[data-theme="gray"] .admin-nav-item.active {
  color: #334155;
  background: rgba(78,89,105,0.15);
}
[data-theme="gray"] .admin-nav-item:hover {
  background: rgba(78,89,105,0.08);
}
[data-theme="gray"] .admin-nav-group-title {
  background: rgba(78,89,105,0.08);
}
[data-theme="gray"] .admin-top-tab.active {
  color: #334155;
  background: rgba(78,89,105,0.12);
  box-shadow: 0 2px 8px rgba(78,89,105,0.15);
}
[data-theme="gray"] .admin-top-tab:hover {
  background: rgba(78,89,105,0.1);
}
[data-theme="gray"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #4E5969, #334155);
  border-color: rgba(78,89,105,0.3);
  box-shadow: 0 2px 8px rgba(78,89,105,0.25);
}
[data-theme="gray"] .admin-content .btn-primary:hover {
  background: linear-gradient(135deg, #334155, #1e293b);
  box-shadow: 0 4px 12px rgba(78,89,105,0.35);
}
[data-theme="gray"] .admin-content .input:focus,
[data-theme="gray"] .admin-content .select:focus {
  border-color: #4E5969;
  box-shadow: 0 0 0 3px rgba(78,89,105,0.1);
}
[data-theme="gray"] .admin-table th {
  background: linear-gradient(180deg, rgba(78,89,105,0.06) 0%, rgba(78,89,105,0.12) 100%);
}
[data-theme="gray"] .admin-table tbody tr:hover {
  background: rgba(78,89,105,0.08);
}
[data-theme="gray"] .admin-topbar-user-name:hover { background: rgba(78,89,105,0.08); }
[data-theme="gray"] .admin-stat-card:hover {
  border-color: #4E5969;
  box-shadow: 0 4px 12px rgba(78,89,105,0.2);
}
[data-theme="gray"] .admin-stat-card .admin-stat-value { color: #4E5969; }
[data-theme="gray"] .admin-theme-chip.active {
  border-color: #4E5969;
  background: rgba(78,89,105,0.06);
  color: #4E5969;
}
[data-theme="gray"] .admin-theme-toggle:hover { color: #4E5969; }
[data-theme="gray"] .admin-cat-tab.active { color: #4E5969; }
[data-theme="gray"] .admin-user-tab.active { color: #4E5969; }
[data-theme="gray"] .admin-content .btn-ghost.active {
  background: rgba(78,89,105,0.15);
  color: #334155;
  border-color: rgba(78,89,105,0.4);
}
/* 布局方案切换 */
/* HTML结构: .admin-shell(grid) > .admin-sidebar + .admin-sidebar-resizer + .admin-main(flex-col) > .admin-topbar + .admin-content */

/* 经典侧栏布局（默认）: 左侧导航 240px + 分隔条 10px + 右侧主体 */
[data-layout="classic"] .admin-shell {
  grid-template-columns: 240px 10px 1fr;
}
[data-layout="classic"] .admin-sidebar {
  width: 240px;
  min-width: 240px;
}

/* 侧栏分隔条（含收缩按钮） */
.admin-sidebar-resizer {
  position: relative;
  width: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(55,65,81,0.03));
  border-right: 1px solid rgba(226, 232, 240, 0.6);
}
.admin-resizer-handle {
  position: sticky;
  top: calc(50vh - 16px);
  left: 50%;
  margin-left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  z-index: 100;
}
.admin-resizer-handle:hover {
  background: #1677FF;
  color: #fff;
  border-color: #1677FF;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.25);
}
.admin-collapse-icon {
  transition: transform 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   经典侧栏收缩功能（类似前台侧边栏）
   ═══════════════════════════════════════════════════════════════════════════ */

/* 经典侧栏收缩状态（支持默认布局和明确设置classic的情况） */
.admin-shell.sidebar-collapsed,
[data-layout="classic"] .admin-shell.sidebar-collapsed {
  grid-template-columns: 64px 10px 1fr;
}
.admin-shell.sidebar-collapsed .admin-sidebar,
[data-layout="classic"] .admin-shell.sidebar-collapsed .admin-sidebar {
  width: 64px;
  min-width: 64px;
  overflow: visible;
}
/* 收缩时隐藏文字内容 */
.admin-shell.sidebar-collapsed .admin-logo-text,
.admin-shell.sidebar-collapsed .admin-nav-group-title,
.admin-shell.sidebar-collapsed .admin-nav-text,
.admin-shell.sidebar-collapsed .admin-theme-toggle,
.admin-shell.sidebar-collapsed .admin-nav-children {
  display: none;
}
/* 收缩时 logo 区域居中 */
.admin-shell.sidebar-collapsed .admin-logo-area {
  justify-content: center;
  padding: 16px 8px 14px;
}
.admin-shell.sidebar-collapsed .admin-logo {
  justify-content: center;
}
.admin-shell.sidebar-collapsed .admin-logo-icon {
  margin: 0;
}
/* 收缩时导航项居中 */
.admin-shell.sidebar-collapsed .admin-nav {
  padding: 12px 8px;
}
.admin-shell.sidebar-collapsed .admin-nav-item {
  justify-content: center;
  padding: 10px 0;
  position: relative;
}
.admin-shell.sidebar-collapsed .admin-nav-item::before {
  content: attr(data-label);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  padding: 6px 12px;
  background: #1e293b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.admin-shell.sidebar-collapsed .admin-nav-item:hover::before {
  opacity: 1;
  visibility: visible;
}
/* 收缩时导航组间距 */
.admin-shell.sidebar-collapsed .admin-nav-group {
  margin: 6px 0;
}
/* 收缩时按钮箭头翻转 */
.admin-shell.sidebar-collapsed .admin-collapse-icon {
  transform: rotate(180deg);
}

/* 非经典布局隐藏分隔条 */
[data-layout="top-sub"] .admin-sidebar-resizer,
[data-layout="top-only"] .admin-sidebar-resizer,
[data-layout="drawer"] .admin-sidebar-resizer,
[data-layout="mixed"] .admin-sidebar-resizer {
  display: none;
}

/* 悬浮弹出菜单（收缩态下显示分组子菜单） */
.admin-nav-popup {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 8px;
  min-width: 180px;
  max-width: 240px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  z-index: 1000;
  animation: adminPopupIn 0.15s ease;
  /* 默认隐藏，收缩态悬停时显示 */
  display: none;
}
@keyframes adminPopupIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.admin-nav-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 13px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-nav-popup-item {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  color: #475569;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.admin-nav-popup-item:hover {
  background: rgba(22, 119, 255, 0.08);
  color: #1677FF;
}
.admin-nav-popup-item.active {
  color: #1677FF;
  font-weight: 600;
  background: rgba(22, 119, 255, 0.06);
}

/* 收缩态下导航组悬浮显示弹出菜单 */
.admin-shell.sidebar-collapsed .admin-nav-group {
  position: relative;
  overflow: visible; /* 允许弹出菜单超出边界 */
}
/* 收缩态下导航区域允许溢出 */
.admin-shell.sidebar-collapsed .admin-nav {
  overflow: visible;
}
/* 整个导航组悬停或点击打开时显示弹出菜单 */
.admin-shell.sidebar-collapsed .admin-nav-group:hover .admin-nav-popup,
.admin-shell.sidebar-collapsed .admin-nav-popup.open {
  display: block;
}
/* 收缩态下显示分组图标触发器 */
.admin-shell.sidebar-collapsed .admin-nav-group-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-shell.sidebar-collapsed .admin-nav-group-trigger:hover {
  background: rgba(22, 119, 255, 0.08);
  color: #1677FF;
}
/* 展开态下隐藏触发器 */
.admin-nav-group-trigger {
  display: none;
}
/* 收缩态下隐藏details的summary标记 */
.admin-shell.sidebar-collapsed .admin-nav-group summary {
  list-style: none;
  pointer-events: none;
}
.admin-shell.sidebar-collapsed .admin-nav-group summary::-webkit-details-marker {
  display: none;
}

/* 各主题收缩按钮适配 */
[data-theme="green"] .admin-resizer-handle:hover {
  background: #0d9488;
  border-color: #0d9488;
}
[data-theme="gray"] .admin-resizer-handle:hover {
  background: #4E5969;
  border-color: #4E5969;
}
[data-theme="purple"] .admin-resizer-handle:hover {
  background: #6200EE;
  border-color: #6200EE;
}
[data-theme="cyan"] .admin-resizer-handle:hover {
  background: #0096C7;
  border-color: #0096C7;
}
[data-theme="orange"] .admin-resizer-handle:hover {
  background: #FF6700;
  border-color: #FF6700;
}
[data-theme="black"] .admin-resizer-handle {
  background: #1a1a1a;
  border-color: #333;
  color: #666;
}
[data-theme="black"] .admin-resizer-handle:hover {
  background: #333;
  border-color: #444;
  color: #fff;
}
[data-theme="black"] .admin-sidebar-resizer {
  background: linear-gradient(180deg, #1a1a1a, #111);
  border-right-color: #2a2a2a;
}
[data-theme="black"] .admin-nav-popup {
  background: #1a1a1a;
  border-color: #333;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="black"] .admin-nav-popup-header {
  border-bottom-color: #2a2a2a;
  color: #888;
}
[data-theme="black"] .admin-nav-popup-item {
  color: #aaa;
}
[data-theme="black"] .admin-nav-popup-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
[data-theme="black"] .admin-nav-popup-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="black"] [data-layout="classic"] .admin-shell.sidebar-collapsed .admin-nav-item::before {
  background: #333;
}

/* 管理首页导航图标 */
.admin-nav-icon {
  display: none;
  flex-shrink: 0;
}
.admin-shell.sidebar-collapsed .admin-nav-icon {
  display: block;
}
.admin-shell.sidebar-collapsed .admin-nav-home {
  justify-content: center;
}
.admin-shell.sidebar-collapsed .admin-nav-home .admin-nav-text {
  display: none;
}

/* 顶部+子菜单布局: 无侧栏，Logo+父菜单+用户同行，子菜单换行，内容居中 */
[data-layout="top-sub"] .admin-shell {
  grid-template-columns: 1fr;
}
[data-layout="top-sub"] .admin-sidebar {
  display: none;
}
[data-layout="top-sub"] .admin-topbar {
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  /* 水平 padding 与内容区左对齐 */
  padding: 0 max(40px, calc(50% - 560px));
}
/* display:contents 让子元素直接参与 topbar flex */
[data-layout="top-sub"] .admin-topbar-main {
  display: contents;
}
/* 第一行各项：自己内部居中，明确 52px 高 */
[data-layout="top-sub"] .admin-topbar-logo {
  flex-shrink: 0;
  order: 0;
  display: flex;
  align-items: center;
  min-height: 52px;
}
[data-layout="top-sub"] .admin-topbar-nav {
  flex: 1;
  justify-content: flex-start;
  min-width: 0;
  margin-left: 16px;
  order: 1;
  display: flex;
  align-items: center;
  min-height: 52px;
}
[data-layout="top-sub"] .admin-topbar-right {
  margin-left: auto;
  flex-shrink: 0;
  order: 2;
  display: flex;
  align-items: center;
  min-height: 52px;
}
/* 第二行：子菜单独立区块，明确高度，内部居中 */
[data-layout="top-sub"] .admin-top-tabs-wrap {
  flex-basis: 100%;
  order: 10;
  min-height: 52px;
  margin-left: 0;
  display: flex;
  align-items: center;
}
[data-layout="top-sub"] .admin-top-tabs {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  padding: 0;
  min-height: 52px;
  border-top: none;
  box-sizing: border-box;
}
/* 分隔线充满页面宽度 */
[data-layout="top-sub"] .admin-topbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  height: 1px;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
}
[data-layout="top-sub"] .admin-top-tab {
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.4;
}
/* top-sub 布局不需要下拉菜单，子菜单已在第二行展示 */
[data-layout="top-sub"] .admin-topbar-dropdown-menu {
  display: none !important;
}
[data-layout="top-sub"] .admin-nav-chevron {
  display: none !important;
}
[data-layout="top-sub"] .admin-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 40px;
  width: 100%;
  box-sizing: border-box;
}

/* 顶部通栏布局: 无侧栏，IDE风格下拉菜单 */
[data-layout="top-only"] .admin-shell {
  grid-template-columns: 1fr;
}
[data-layout="top-only"] .admin-sidebar {
  display: none;
}
[data-layout="top-only"] .admin-top-tabs {
  display: none !important;
}
[data-layout="top-only"] .admin-top-tabs-wrap {
  display: none !important;
}
[data-layout="top-only"] .admin-content {
  padding: 24px 32px;
}

/* 下拉菜单容器 */
.admin-topbar-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.admin-nav-chevron {
  display: none;
  margin-left: 2px;
  opacity: 0.5;
  vertical-align: middle;
}
/* 只在顶部通栏布局显示下拉箭头和下拉菜单 */
[data-layout="top-only"] .admin-nav-chevron {
  display: inline;
}
.admin-topbar-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 4px 0;
  z-index: 100;
  margin-top: 4px;
}
/* 点击打开下拉菜单 */
.admin-topbar-nav-dropdown.open > .admin-topbar-dropdown-menu {
  display: block;
}
.admin-topbar-dropdown-menu a {
  display: block;
  padding: 9px 18px;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.15s;
  white-space: nowrap;
}
.admin-topbar-dropdown-menu a:hover {
  background: rgba(22,119,255,0.08);
  color: #1677FF;
}
.admin-topbar-dropdown-menu a.active {
  color: #1677FF;
  font-weight: 600;
  background: rgba(22,119,255,0.06);
}

/* 商务黑主题下拉 */
[data-theme="black"] .admin-topbar-dropdown-menu {
  background: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
[data-theme="black"] .admin-topbar-dropdown-menu a { color: #999; }
[data-theme="black"] .admin-topbar-dropdown-menu a:hover { color: #fff; background: rgba(255,255,255,0.06); }
[data-theme="black"] .admin-topbar-dropdown-menu a.active { color: #fff; background: rgba(255,255,255,0.08); }

/* 右侧抽屉布局: 侧栏在右侧推挤内容区，非悬浮 */
[data-layout="drawer"] .admin-shell {
  grid-template-columns: 1fr auto;
}
[data-layout="drawer"] .admin-sidebar {
  order: 2;
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-right: none;
  border-left: none;
  box-shadow: none;
  transition: width 0.25s ease, border-color 0.25s ease;
}
[data-layout="drawer"] .admin-main {
  order: 1;
}
[data-layout="drawer"] .admin-sidebar.drawer-open {
  width: 240px;
  min-width: 240px;
  overflow-y: auto;
  border-left: 1px solid #e2e8f0;
}
[data-layout="drawer"] .admin-logo-area {
  display: none;
}
/* 抽屉开关按钮（JS动态插入topbar最右侧） */
.admin-drawer-toggle {
  display: none;
}
[data-layout="drawer"] .admin-drawer-toggle {
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #e2e8f0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-left: 8px;
}
[data-layout="drawer"] .admin-drawer-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 混合布局: 侧栏变窄 + topbar 加宽 */
[data-layout="mixed"] .admin-shell {
  grid-template-columns: 200px 1fr;
}
[data-layout="mixed"] .admin-sidebar {
  width: 200px;
  min-width: 200px;
}
[data-layout="mixed"] .admin-logo-area {
  display: none;
}
[data-layout="mixed"] .admin-nav {
  padding-top: 12px;
}
[data-layout="mixed"] .admin-nav-group-title {
  font-size: 10px;
}
[data-layout="mixed"] .admin-content {
  padding: 20px 24px;
}

/* 右侧抽屉布局：父级菜单字体加大 */
[data-layout="drawer"] .admin-nav-group-title {
  font-size: 14px;
  padding: 12px 16px;
}
[data-layout="drawer"] .admin-nav-item {
  font-size: 15px;
  padding: 10px 16px;
}

/* Topbar内的Logo（非经典布局时显示） */
.admin-topbar-logo {
  display: none;
  align-items: center;
  margin-right: 8px;
}

/* 主题变体 - 科技紫 */
[data-theme="purple"] .admin-logo-icon {
  background: linear-gradient(135deg, #6200EE, #4a00c7);
  box-shadow: 0 2px 8px rgba(98,0,238,0.3);
}
[data-theme="purple"] .admin-nav-item.active { color: #6200EE; background: rgba(98,0,238,0.12); }
[data-theme="purple"] .admin-nav-item:hover { background: rgba(98,0,238,0.06); }
[data-theme="purple"] .admin-nav-group-title { background: rgba(98,0,238,0.06); }
[data-theme="purple"] .admin-top-tab.active { color: #6200EE; background: rgba(98,0,238,0.1); box-shadow: 0 2px 8px rgba(98,0,238,0.12); }
[data-theme="purple"] .admin-top-tab:hover { background: rgba(98,0,238,0.08); }
[data-theme="purple"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #7B1FA2, #6200EE);
  border-color: rgba(98,0,238,0.3);
  box-shadow: 0 2px 8px rgba(98,0,238,0.25);
}
[data-theme="purple"] .admin-content .btn-primary:hover { background: linear-gradient(135deg, #6200EE, #4a00c7); }
[data-theme="purple"] .admin-content .input:focus,
[data-theme="purple"] .admin-content .select:focus { border-color: #6200EE; box-shadow: 0 0 0 3px rgba(98,0,238,0.08); }
[data-theme="purple"] .admin-table th { background: linear-gradient(180deg, rgba(98,0,238,0.04) 0%, rgba(98,0,238,0.1) 100%); }
[data-theme="purple"] .admin-table tbody tr:hover { background: rgba(98,0,238,0.06); }
[data-theme="purple"] .admin-stat-card:hover { border-color: #6200EE; box-shadow: 0 4px 12px rgba(98,0,238,0.15); }
[data-theme="purple"] .admin-stat-card .admin-stat-value { color: #6200EE; }
[data-theme="purple"] .admin-theme-chip.active { border-color: #6200EE; background: rgba(98,0,238,0.06); color: #6200EE; }
[data-theme="purple"] .admin-theme-toggle:hover { color: #6200EE; }
[data-theme="purple"] .admin-topbar-user-name:hover { background: rgba(98,0,238,0.06); }
[data-theme="purple"] .admin-cat-tab.active { color: #6200EE; }
[data-theme="purple"] .admin-user-tab.active { color: #6200EE; }
[data-theme="purple"] .admin-content .btn-ghost.active { background: rgba(98,0,238,0.12); color: #6200EE; border-color: rgba(98,0,238,0.3); }
[data-theme="purple"] .admin-topbar-user-menu a:hover,
[data-theme="purple"] .admin-topbar-user-menu button:hover { background: rgba(98,0,238,0.06); color: #6200EE; }

/* 主题变体 - 医疗青 */
[data-theme="cyan"] .admin-logo-icon {
  background: linear-gradient(135deg, #00B4D8, #0096C7);
  box-shadow: 0 2px 8px rgba(0,180,216,0.3);
}
[data-theme="cyan"] .admin-nav-item.active { color: #0096C7; background: rgba(0,180,216,0.12); }
[data-theme="cyan"] .admin-nav-item:hover { background: rgba(0,180,216,0.06); }
[data-theme="cyan"] .admin-nav-group-title { background: rgba(0,180,216,0.06); }
[data-theme="cyan"] .admin-top-tab.active { color: #0096C7; background: rgba(0,180,216,0.1); box-shadow: 0 2px 8px rgba(0,180,216,0.12); }
[data-theme="cyan"] .admin-top-tab:hover { background: rgba(0,180,216,0.08); }
[data-theme="cyan"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #00B4D8, #0096C7);
  border-color: rgba(0,180,216,0.3);
  box-shadow: 0 2px 8px rgba(0,180,216,0.25);
}
[data-theme="cyan"] .admin-content .btn-primary:hover { background: linear-gradient(135deg, #0096C7, #0077B6); }
[data-theme="cyan"] .admin-content .input:focus,
[data-theme="cyan"] .admin-content .select:focus { border-color: #0096C7; box-shadow: 0 0 0 3px rgba(0,180,216,0.08); }
[data-theme="cyan"] .admin-table th { background: linear-gradient(180deg, rgba(0,180,216,0.04) 0%, rgba(0,180,216,0.1) 100%); }
[data-theme="cyan"] .admin-table tbody tr:hover { background: rgba(0,180,216,0.06); }
[data-theme="cyan"] .admin-stat-card:hover { border-color: #0096C7; box-shadow: 0 4px 12px rgba(0,180,216,0.15); }
[data-theme="cyan"] .admin-stat-card .admin-stat-value { color: #0096C7; }
[data-theme="cyan"] .admin-theme-chip.active { border-color: #0096C7; background: rgba(0,180,216,0.06); color: #0096C7; }
[data-theme="cyan"] .admin-theme-toggle:hover { color: #0096C7; }
[data-theme="cyan"] .admin-topbar-user-name:hover { background: rgba(0,180,216,0.06); }
[data-theme="cyan"] .admin-cat-tab.active { color: #0096C7; }
[data-theme="cyan"] .admin-user-tab.active { color: #0096C7; }
[data-theme="cyan"] .admin-content .btn-ghost.active { background: rgba(0,180,216,0.12); color: #0096C7; border-color: rgba(0,180,216,0.3); }
[data-theme="cyan"] .admin-topbar-user-menu a:hover,
[data-theme="cyan"] .admin-topbar-user-menu button:hover { background: rgba(0,180,216,0.06); color: #0096C7; }

/* 主题变体 - 工业橙 */
[data-theme="orange"] .admin-logo-icon {
  background: linear-gradient(135deg, #FF6700, #e55d00);
  box-shadow: 0 2px 8px rgba(255,103,0,0.3);
}
[data-theme="orange"] .admin-nav-item.active { color: #e55d00; background: rgba(255,103,0,0.12); }
[data-theme="orange"] .admin-nav-item:hover { background: rgba(255,103,0,0.06); }
[data-theme="orange"] .admin-nav-group-title { background: rgba(255,103,0,0.06); }
[data-theme="orange"] .admin-top-tab.active { color: #e55d00; background: rgba(255,103,0,0.1); box-shadow: 0 2px 8px rgba(255,103,0,0.12); }
[data-theme="orange"] .admin-top-tab:hover { background: rgba(255,103,0,0.08); }
[data-theme="orange"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #FF7849, #FF6700);
  border-color: rgba(255,103,0,0.3);
  box-shadow: 0 2px 8px rgba(255,103,0,0.25);
}
[data-theme="orange"] .admin-content .btn-primary:hover { background: linear-gradient(135deg, #FF6700, #e55d00); }
[data-theme="orange"] .admin-content .input:focus,
[data-theme="orange"] .admin-content .select:focus { border-color: #FF6700; box-shadow: 0 0 0 3px rgba(255,103,0,0.08); }
[data-theme="orange"] .admin-table th { background: linear-gradient(180deg, rgba(255,103,0,0.04) 0%, rgba(255,103,0,0.1) 100%); }
[data-theme="orange"] .admin-table tbody tr:hover { background: rgba(255,103,0,0.06); }
[data-theme="orange"] .admin-stat-card:hover { border-color: #FF6700; box-shadow: 0 4px 12px rgba(255,103,0,0.15); }
[data-theme="orange"] .admin-stat-card .admin-stat-value { color: #FF6700; }
[data-theme="orange"] .admin-theme-chip.active { border-color: #FF6700; background: rgba(255,103,0,0.06); color: #e55d00; }
[data-theme="orange"] .admin-theme-toggle:hover { color: #FF6700; }
[data-theme="orange"] .admin-topbar-user-name:hover { background: rgba(255,103,0,0.06); }
[data-theme="orange"] .admin-cat-tab.active { color: #e55d00; }
[data-theme="orange"] .admin-user-tab.active { color: #e55d00; }
[data-theme="orange"] .admin-content .btn-ghost.active { background: rgba(255,103,0,0.12); color: #e55d00; border-color: rgba(255,103,0,0.3); }
[data-theme="orange"] .admin-topbar-user-menu a:hover,
[data-theme="orange"] .admin-topbar-user-menu button:hover { background: rgba(255,103,0,0.06); color: #e55d00; }

/* 主题变体 - 商务黑 */
[data-theme="black"] .admin-body { background: #0a0a0a; color: #F5F5F5; }
[data-theme="black"] .admin-sidebar {
  background: linear-gradient(180deg, #1a1a1a 0%, #111 100%);
  border-right-color: #2a2a2a;
  color: #ccc;
}
[data-theme="black"] .admin-logo { color: #f5f5f5; }
[data-theme="black"] .admin-logo-icon {
  background: linear-gradient(135deg, #333, #141414);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
[data-theme="black"] .admin-logo-text em { color: #888; }
[data-theme="black"] .admin-nav-item { color: #aaa; }
[data-theme="black"] .admin-nav-item.active { color: #fff; background: rgba(255,255,255,0.08); }
[data-theme="black"] .admin-nav-item:hover { color: #ddd; background: rgba(255,255,255,0.04); }
[data-theme="black"] .admin-nav-group-title { color: #777; background: rgba(255,255,255,0.03); }
[data-theme="black"] .admin-nav-children { border-left-color: #333; }
[data-theme="black"] .admin-topbar { background: #141414; border-bottom-color: #2a2a2a; box-shadow: none; }
[data-theme="black"] .admin-page-title { color: #f5f5f5; }
[data-theme="black"] .admin-top-tab { color: #999; }
[data-theme="black"] .admin-top-tab.active { color: #fff; background: rgba(255,255,255,0.08); box-shadow: none; }
[data-theme="black"] .admin-top-tab:hover { color: #ddd; background: rgba(255,255,255,0.04); }
[data-theme="black"] .admin-content { background: #0a0a0a; }
[data-theme="black"] .admin-content .card {
  background: #1a1a1a;
  border-color: #2a2a2a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="black"] .admin-content .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.4); background: #1e1e1e; }
[data-theme="black"] .admin-content .btn-primary {
  background: linear-gradient(135deg, #333, #202020);
  border-color: #444;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: #f5f5f5;
}
[data-theme="black"] .admin-content .btn-primary:hover { background: linear-gradient(135deg, #444, #333); }
[data-theme="black"] .admin-content .input,
[data-theme="black"] .admin-content .select { background: #1a1a1a; border-color: #333; color: #f5f5f5; }
[data-theme="black"] .admin-content .input:focus,
[data-theme="black"] .admin-content .select:focus { border-color: #555; box-shadow: 0 0 0 3px rgba(255,255,255,0.05); }
[data-theme="black"] .admin-table { background: #1a1a1a; }
[data-theme="black"] .admin-table th { background: #202020; color: #999; border-bottom-color: #2a2a2a; }
[data-theme="black"] .admin-table td { color: #ccc; border-bottom-color: #2a2a2a; }
[data-theme="black"] .admin-table tbody tr:hover { background: rgba(255,255,255,0.04); }
[data-theme="black"] .admin-stat-card { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .admin-stat-card:hover { border-color: #444; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="black"] .admin-stat-card .admin-stat-value { color: #0066CC; }
[data-theme="black"] .admin-topbar-user-name { color: #ccc; }
[data-theme="black"] .admin-topbar-user-name:hover { background: rgba(255,255,255,0.06); }
[data-theme="black"] .admin-topbar-user-menu { background: #1a1a1a; border-color: #333; }
[data-theme="black"] .admin-topbar-user-menu a,
[data-theme="black"] .admin-topbar-user-menu button { color: #ccc; }
[data-theme="black"] .admin-topbar-user-menu a:hover,
[data-theme="black"] .admin-topbar-user-menu button:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="black"] .admin-theme-panel { background: #1a1a1a; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1); }
[data-theme="black"] .admin-theme-toggle { color: #444; opacity: 0.6; }
[data-theme="black"] .admin-theme-toggle:hover { color: #ccc; opacity: 1; }
[data-theme="black"] .admin-theme-chip { background: #222; border-color: #333; color: #ccc; }
[data-theme="black"] .admin-theme-chip:hover { border-color: #555; background: #2a2a2a; }
[data-theme="black"] .admin-theme-chip.active { border-color: #666; background: #333; color: #fff; }
[data-theme="black"] .admin-content .empty { border-color: #333; color: #888; }
[data-theme="black"] .admin-content .muted { color: #888; }
[data-theme="black"] .admin-cat-tab { color: #888; }
[data-theme="black"] .admin-cat-tab.active { color: #fff; background: #2a2a2a; }
[data-theme="black"] .admin-user-tab { color: #888; }
[data-theme="black"] .admin-user-tab.active { color: #fff; background: #2a2a2a; }
[data-theme="black"] .admin-content .btn-ghost { color: #999; border-color: #333; }
[data-theme="black"] .admin-content .btn-ghost:hover { background: rgba(255,255,255,0.04); color: #ddd; }
[data-theme="black"] .admin-content .btn-ghost.active { background: rgba(255,255,255,0.08); color: #fff; border-color: #555; }
[data-theme="black"] .admin-badge-buyer { background: #1a2744; color: #6ea8fe; }
[data-theme="black"] .admin-badge-supplier { background: #0f2922; color: #6ee7b7; }
[data-theme="black"] .admin-badge-admin { background: #2d2006; color: #fcd34d; }
[data-theme="black"] .admin-content .alert-error { background: #2d0f0f; border-color: #5c1a1a; color: #fca5a5; }

/* Topbar全局导航（顶部通栏/父子菜单/混合布局时显示） */
.admin-topbar-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 16px;
}
.admin-topbar-nav-item {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
}
.admin-topbar-nav-item:hover {
  color: #0f172a;
  background: rgba(22,119,255,0.08);
}
.admin-topbar-nav-item.active {
  color: #1677FF;
  background: rgba(22,119,255,0.12);
  font-weight: 600;
}

/* 顶部通栏布局 topbar 优化 */
[data-layout="mixed"] .admin-topbar-nav {
  margin-left: 8px;
}
[data-layout="mixed"] .admin-top-tabs-wrap {
  margin-left: 12px;
}
[data-layout="mixed"] .admin-top-tabs {
  margin-left: 0;
}

/* 用户菜单 icon 样式 */
.admin-topbar-user-menu svg {
  flex-shrink: 0;
  opacity: 0.55;
}
.admin-topbar-user-menu a:hover svg,
.admin-topbar-user-menu button:hover svg {
  opacity: 0.85;
}

/* 商务黑布局补丁 */
[data-theme="black"] .admin-logo-area { border-bottom-color: #2a2a2a; }
[data-theme="black"] .admin-theme-toggle { color: #555; }
[data-theme="black"] .admin-theme-toggle:hover { color: #ccc; }
[data-theme="black"] [data-layout="top-sub"] .admin-topbar::before { background: rgba(255,255,255,0.06); }
[data-theme="black"] .admin-drawer-toggle { border-color: #333; color: #888; }
[data-theme="black"] .admin-drawer-toggle:hover { background: rgba(255,255,255,0.06); color: #ddd; }
[data-theme="black"] .admin-sidebar-close-btn { color: #666; }
[data-theme="black"] .admin-sidebar-close-btn:hover { color: #ddd; background: rgba(255,255,255,0.06); }
[data-theme="black"] .admin-sidebar-user { border-top-color: #2a2a2a; }
[data-theme="black"] .admin-sidebar-user-avatar { background: rgba(255,255,255,0.08); color: #ccc; }
[data-theme="black"] .admin-sidebar-user-avatar:hover { background: rgba(255,255,255,0.12); color: #fff; }
[data-theme="black"] .admin-sidebar-user-name { color: #f5f5f5; }
[data-theme="black"] .admin-sidebar-user-action { color: #999; }
[data-theme="black"] .admin-sidebar-user-action:hover { color: #ddd; background: rgba(255,255,255,0.06); }
[data-theme="black"] [data-layout="drawer"] .admin-sidebar.drawer-open { border-left-color: #2a2a2a; }
[data-theme="black"] .admin-topbar-nav-item { color: #999; }
[data-theme="black"] .admin-topbar-nav-item:hover { color: #ddd; background: rgba(255,255,255,0.04); }
[data-theme="black"] .admin-topbar-nav-item.active { color: #fff; background: rgba(255,255,255,0.08); }

/* 各主题色调布局导航 active */
[data-theme="green"] .admin-topbar-nav-item.active { color: #0d9488; background: rgba(54,207,201,0.12); }
[data-theme="gray"] .admin-topbar-nav-item.active { color: #334155; background: rgba(78,89,105,0.12); }
[data-theme="purple"] .admin-topbar-nav-item.active { color: #6200EE; background: rgba(98,0,238,0.1); }
[data-theme="cyan"] .admin-topbar-nav-item.active { color: #0096C7; background: rgba(0,180,216,0.1); }
[data-theme="orange"] .admin-topbar-nav-item.active { color: #e55d00; background: rgba(255,103,0,0.1); }

/* 导航样式：参考 Ant Design Pro / Element Admin 标准 */
.admin-nav {
  flex: 1;
  padding: 12px 12px;
  overflow-y: auto;
}

.admin-nav-group {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
}

.admin-nav-group-title {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: rgba(22, 119, 255, 0.06);
  border-radius: 8px;
  margin-bottom: 4px;
}

.admin-nav-group-title::-webkit-details-marker { display: none; }

.admin-nav-group-title::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #94a3b8;
  margin-left: 5px;
  transition: transform .2s ease;
}

.admin-nav-group[open] .admin-nav-group-title::after {
  transform: rotate(180deg);
}

.admin-nav-children {
  padding: 4px 0 4px 14px;
  border-left: 2px solid rgba(22, 119, 255, 0.12);
  margin-left: 16px;
  margin-top: 4px;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  color: #475569;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  transition: color .15s, background .15s;
  margin-bottom: 2px;
}

.admin-nav-item:hover {
  color: #0f172a;
  background: rgba(22, 119, 255, 0.08);
}

.admin-nav-item.active {
  color: #1677FF;
  background: rgba(22, 119, 255, 0.15);
  font-weight: 600;
}

.admin-nav-item-outline {
  margin-top: 8px;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.admin-nav-item-outline:hover {
  border-color: #cbd5e1;
  background: rgba(22, 119, 255, 0.08);
  color: #0f172a;
}

.admin-nav-sep {
  height: 1px;
  background: #e2e8f0;
  margin: 10px 0;
}

.admin-sidebar-foot {
  padding: 14px;
  border-top: 1px solid #f1f5f9;
}

.admin-user {
  margin-bottom: 10px;
}

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

.admin-foot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-foot-link {
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
}

.admin-foot-link:hover {
  color: #0f172a;
}

.admin-foot-form {
  margin: 0;
}

.admin-logout {
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.admin-logout:hover {
  color: #0f172a;
}

/* 主内容区（grid 已预留侧栏列，无需 margin-left） */
.admin-main {
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.admin-topbar-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.admin-topbar-user {
  position: relative;
}

.admin-topbar-user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}

.admin-topbar-user-name:hover {
  background: rgba(22, 119, 255, 0.08);
}

.admin-topbar-user-name::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #94a3b8;
}

.admin-topbar-user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 140px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s;
  z-index: 100;
}

.admin-topbar-user:hover .admin-topbar-user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.admin-topbar-user-menu a,
.admin-topbar-user-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #475569;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 0.2s;
}

.admin-topbar-user-menu a:hover,
.admin-topbar-user-menu button:hover {
  background: rgba(22, 119, 255, 0.08);
  color: #1677FF;
}

.admin-page-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.3;
  white-space: nowrap;
}

.admin-top-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}

.admin-top-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  background: transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

.admin-top-tab:hover {
  color: #0f172a;
  background: rgba(22, 119, 255, 0.1);
}

.admin-top-tab.active {
  color: #1677FF;
  background: rgba(22, 119, 255, 0.12);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}

/* Tab滚动容器 */
.admin-top-tabs-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-left: 16px;
  position: relative;
}
.admin-top-tabs-wrap .admin-top-tabs {
  margin-left: 0;
}
.admin-tabs-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: #334155;
  cursor: pointer;
  color: #f8fafc;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.admin-tabs-arrow:hover {
  color: #ffffff;
  background: #1e293b;
}
.admin-tabs-arrow.hidden {
  visibility: hidden;
  pointer-events: none;
}

.admin-content {
  flex: 1;
  padding: 20px 24px;
  min-width: 0;
  overflow-x: hidden;
  background: #f8fafc;
}

/* 后台卡片：现代精致风格 */
.admin-content .card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 24px;
  margin-bottom: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-content .card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admin-content .card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.admin-content .card-head-row .card-title {
  margin-bottom: 0;
}

.admin-content .card-head-row .card-title::before {
  display: none;
}

.admin-user-strip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 12px;
  padding: 8px 0 4px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-bottom: 1px dashed #e2e8f0;
  overflow-x: auto;
}

.admin-user-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0d5dd9, #1677FF);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

.admin-user-label {
  max-width: 80px;
  font-size: 12px;
  color: #475569;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-time {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.2;
}

/* 服务日历：标题、说明、工具栏分区 */
.admin-service-calendar-card .admin-calendar-head {
  margin-bottom: 16px;
}
.admin-service-calendar-card .admin-calendar-head .card-title {
  margin-bottom: 10px;
}
.admin-calendar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 13px;
  color: #64748b;
}
.admin-calendar-service {
  font-weight: 600;
  color: #1e293b;
}
.admin-calendar-id {
  color: #94a3b8;
}
.admin-calendar-link {
  color: #1677FF;
  text-decoration: none;
}
.admin-calendar-link:hover {
  text-decoration: underline;
}

.admin-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 16px;
}
.admin-calendar-month {
  font-weight: 600;
  color: #475569;
  font-size: 14px;
}
.admin-calendar-nav {
  display: flex;
  gap: 8px;
}
.admin-calendar-form {
  margin-bottom: 20px;
}
.admin-slot-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}
.admin-calendar-table-wrap {
  margin-top: 8px;
}

.admin-slot-booking {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
}
.admin-slot-booking.admin-slot-part {
  background: rgba(22, 119, 255, 0.08);
  color: #4338ca;
}
.admin-slot-booking.admin-slot-full {
  background: #fecaca;
  color: #b91c1c;
}

.admin-content .grid2 {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}

.admin-content .form .label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-top: 16px;
  margin-bottom: 6px;
}

.admin-content .input,
.admin-content .select {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  font-size: 14px;
}

.admin-content .input:focus,
.admin-content .select:focus {
  outline: none;
  border-color: #1677FF;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
  background: #fff;
}

.admin-content .input,
.admin-content .select {
  transition: all 0.2s;
}

.admin-content .input:hover,
.admin-content .select:hover {
  border-color: #cbd5e1;
}

.admin-content .btn-primary {
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  border-color: rgba(79, 70, 229, 0.3);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25);
  transition: all 0.2s;
}

.admin-content .btn-primary:hover {
  background: linear-gradient(135deg, #0d5dd9, #0a47b3);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35);
}

.admin-content .btn-ghost {
  color: #64748b;
  border-color: #e2e8f0;
}

.admin-content .btn-ghost:hover {
  background: rgba(22, 119, 255, 0.08);
  color: #0f172a;
}

.admin-content .btn-ghost.active {
  background: rgba(22, 119, 255, 0.15);
  color: #1677FF;
  border-color: rgba(22, 119, 255, 0.4);
}

.admin-content .btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.admin-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  z-index: 1;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  background: #fff;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-table th,
.admin-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.admin-table th {
  font-weight: 600;
  color: #475569;
  background: linear-gradient(180deg, rgba(22,119,255,0.06) 0%, rgba(22,119,255,0.12) 100%);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-table tbody tr {
  transition: background 0.15s;
}

.admin-table tbody tr:hover {
  background: rgba(22, 119, 255, 0.08);
}

/* 确保操作列有足够的垂直空间 */
.admin-table td.admin-tree-actions {
  position: relative;
  overflow: visible;
  padding-top: 10px;
  padding-bottom: 10px;
}

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

.admin-table code {
  font-size: 13px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

.admin-content .empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  color: #64748b;
  font-size: 14px;
}

.admin-content .item-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  background: #fff;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.admin-content .item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.admin-content .item-title {
  font-weight: 600;
  font-size: 15px;
  color: #0f172a;
}

.admin-content .muted {
  color: #64748b;
}

.admin-content .alert-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
}

/* 用户管理：角色徽章 */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-badge-buyer {
  background: #dbeafe;
  color: #1e40af;
}
.admin-badge-supplier {
  background: #d1fae5;
  color: #065f46;
}
.admin-badge-admin {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

/* 分类管理：Tab样式 */
.admin-cat-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 16px 0 20px 0;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 12px;
}
.admin-cat-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.admin-cat-tab:hover { 
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}
.admin-cat-tab.active { 
  color: #1677FF; 
  background: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-cat-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-cat-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-cat-search { display: flex; gap: 8px; align-items: center; }
.admin-cat-search .input { width: 220px; }
.admin-tree-table .admin-tree-name { font-weight: 600; }
.admin-tree-actions { white-space: nowrap; }
.admin-tree-actions .btn { margin-right: 4px; }
.admin-tree-actions .link-danger { color: #b91c1c; font-size: 13px; }
.admin-tree-actions form { margin: 0; }

.admin-markdown-block .admin-markdown-textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  resize: vertical;
}
.admin-markdown-block .admin-markdown-textarea:focus {
  outline: none;
  border-color: #1677FF;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

.admin-markdown-split {
  display: block;
}
.admin-markdown-editor {
  min-width: 0;
}
.admin-markdown-preview {
  min-width: 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: none;
  flex-direction: column;
  max-height: 600px;
  margin-top: 14px;
}
.admin-markdown-preview-head {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.admin-markdown-preview-body {
  margin: 0;
  padding: 10px 12px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow: auto;
}

.admin-markdown-block.is-preview-open .admin-markdown-editor {
  display: none;
}
.admin-markdown-block.is-preview-open .admin-markdown-preview {
  display: flex;
}

.admin-md-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  padding: 2px;
}
.admin-md-tab {
  border: none;
  background: transparent;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
}
.admin-md-tab-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.admin-modal.open { display: flex; }
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.admin-modal-box {
  position: relative;
  width: 100%;
  max-width: 620px !important;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.8);
}
.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 15px;
}
.admin-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}
.admin-modal-close:hover { color: #0f172a; }
.admin-modal-box .form { padding: 16px 18px; }

/* Toggle 开关组件 */
.admin-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.admin-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.admin-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 22px;
  transition: background 0.2s;
}
.admin-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.admin-toggle input:checked + .admin-toggle-slider {
  background: var(--c1, #1677FF);
}
.admin-toggle input:checked + .admin-toggle-slider::before {
  transform: translateX(18px);
}
.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* 技师候选卡片 */
.tech-candidate-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tech-candidate-card:hover {
  background: rgba(22,119,255,0.04);
  border-color: #e2e8f0;
}
.tech-candidate-card.assigned {
  border-color: var(--admin-primary, #1677FF);
  background: rgba(22,119,255,0.06);
}
.tech-candidate-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  flex-shrink: 0;
  overflow: hidden;
}
.tech-candidate-info {
  flex: 1;
  min-width: 0;
}
[data-theme="black"] .tech-candidate-card:hover { background: rgba(22,119,255,0.08); border-color: #333; }
[data-theme="black"] .tech-candidate-card.assigned { background: rgba(22,119,255,0.12); border-color: var(--admin-primary, #1677FF); }
[data-theme="black"] .tech-candidate-avatar { background: #2a2a2a; }

/* 仪表盘 KPI 指标行 */
.admin-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.admin-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(22,119,255,0.04) 0%, rgba(22,119,255,0.08) 100%);
}
.admin-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.admin-kpi-label {
  font-size: 13px;
  color: #64748b;
}

/* 样本数据提示 */
.admin-sample-tip {
  font-size: 12px;
  color: #f59e0b;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 16px;
}

/* 图表双列布局 */
.admin-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .admin-chart-row { grid-template-columns: 1fr; }
}
.admin-chart-card {
  padding: 20px !important;
}
.admin-chart-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
}
.admin-chart-unit {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}
.admin-chart-wrap {
  position: relative;
  height: 220px;
}

/* 商务黑主题图表卡片 */
[data-theme="black"] .admin-kpi-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 100%);
}
[data-theme="black"] .admin-kpi-value { color: #f5f5f5; }
[data-theme="black"] .admin-sample-tip {
  background: #1a1a00;
  border-color: #333;
  color: #d4a017;
}
[data-theme="black"] .admin-chart-title { color: #e5e5e5; }

/* 仪表盘快捷入口 */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.admin-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.admin-dashboard-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-dashboard-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
}
.admin-dashboard-stat-label {
  font-size: 12px;
  color: #64748b;
}

.admin-stat-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-stat-card:hover {
  border-color: #1677FF;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
}
.admin-stat-card .admin-stat-value {
  color: #1677FF;
  font-weight: 700;
}

.admin-stat-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 4px;
}

.admin-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* 平台登录页（独立视图，与用户登录分离） */
.admin-auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.admin-auth-wrap {
  width: 100%;
  max-width: 420px;
}

.admin-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.admin-auth-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-auth-title {
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: -0.02em;
}

.admin-auth-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.admin-auth-heading {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.admin-auth-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}

.admin-auth-form {
  display: block;
}

.admin-auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin: 14px 0 6px;
}

.admin-auth-label:first-of-type {
  margin-top: 0;
}

.admin-auth-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}

.admin-auth-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-auth-btn {
  width: 100%;
  margin-top: 20px;
  height: 44px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.admin-auth-btn:hover {
  filter: brightness(1.05);
}

.admin-auth-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}

.admin-auth-links a {
  color: #64748b;
  text-decoration: none;
}

.admin-auth-links a:hover {
  color: #0f172a;
}

/* 用户管理：Tab样式 */
.admin-user-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 16px 0 20px 0;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 12px;
}

.admin-user-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.admin-user-tab:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}

.admin-user-tab.active {
  color: #1677FF;
  background: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 用户标签 */
.admin-user-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #1677FF;
  background: rgba(22, 119, 255, 0.1);
  border-radius: 4px;
}

/* 模拟用户标识 */
.mock-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 3px;
  vertical-align: middle;
}

/* 线索池沟通记录折叠行 */
.lead-detail-row > td { background: #f8fafc; }
.lead-records-wrap { border-top: 1px solid #e2e8f0; }
.lead-records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.lead-records-table th {
  text-align: left;
  font-weight: 600;
  color: #64748b;
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.lead-records-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.lead-records-table tr:last-child td { border-bottom: none; }
.lead-expand-btn {
  transition: transform 0.15s;
  font-size: 10px !important;
  color: #94a3b8;
}

/* 审核状态 */
.admin-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.admin-status.approved {
  background: #d1fae5;
  color: #065f46;
}

.admin-status.pending {
  background: #fef3c7;
  color: #92400e;
}

.admin-status.rejected {
  background: #fee2e2;
  color: #b91c1c;
}

@media (max-width: 1024px) {
  .admin-shell {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .admin-sidebar-resizer {
    display: none;
  }

  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s;
    z-index: 100;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15);
  }

  .admin-sidebar.mobile-open {
    transform: translateX(0);
  }

  .admin-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin-left: 0;
  }

  .admin-mobile-menu-btn {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    margin-right: 16px;
  }

  /* 顶导tabs滚动 */
  .admin-tabs-arrow {
    display: flex;
  }
  .admin-top-tabs-wrap {
    margin-left: 0;
  }
  .admin-top-tabs-wrap .admin-top-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
  }
  .admin-top-tabs-wrap .admin-top-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-topbar-main {
    flex: 1;
    min-width: 0;
  }

  .admin-content .grid2 {
    grid-template-columns: 1fr;
  }

  .admin-content {
    padding: 20px 16px;
  }

  .admin-topbar {
    padding: 0 16px;
  }

  .admin-user-tabs {
    flex-wrap: wrap;
  }

  .admin-cat-search .input {
    width: 160px;
    min-width: 0;
  }

  .admin-stats {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .admin-kpi-row {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* 移动端显示侧栏关闭按钮 */
  .admin-sidebar-close-btn {
    display: flex;
  }

  /* 移动端显示侧栏用户区 */
  .admin-sidebar-user {
    display: flex;
  }

  /* 移动端隐藏顶栏用户区 */
  .admin-topbar-user {
    display: none;
  }

  /* 移动端隐藏页面标题，让汉堡按钮更突出 */
  .admin-page-title {
    display: none;
  }
}

/* --- 小屏幕适配 (768px以下) --- */
@media (max-width: 768px) {
  .admin-content {
    padding: 16px 12px;
  }

  .admin-content .card {
    padding: 16px;
    border-radius: 12px;
  }

  .admin-topbar {
    padding: 0 12px;
    min-height: 48px;
  }

  .admin-cat-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .admin-cat-actions {
    margin-left: 0;
    justify-content: flex-start;
  }

  .admin-cat-search {
    flex-wrap: wrap;
  }

  .admin-cat-search .input {
    width: 100%;
    min-width: 0;
    flex: 1;
  }

  .admin-user-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .admin-user-tab {
    padding: 6px 12px;
    font-size: 13px;
  }

  .admin-table th,
  .admin-table td {
    padding: 10px 10px;
    font-size: 13px;
  }

  .admin-modal {
    padding: 12px;
  }

  .admin-modal-box {
    max-width: 100%;
    border-radius: 16px;
  }

  .admin-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .admin-stat-card {
    padding: 14px;
  }

  .admin-kpi-row {
    grid-template-columns: 1fr 1fr;
  }

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

  .admin-chart-row {
    grid-template-columns: 1fr;
  }

  /* 合同管理页面适配 */
  .admin-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .admin-filters-section .admin-search-form {
    flex-wrap: wrap;
  }

  .admin-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- 超小屏幕 (480px以下) --- */
@media (max-width: 480px) {
  .admin-content {
    padding: 12px 8px;
  }

  .admin-content .card {
    padding: 12px;
  }

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

  .admin-kpi-row {
    grid-template-columns: 1fr;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 8px;
    font-size: 12px;
  }

  .admin-tree-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .admin-tree-actions .btn {
    margin-right: 0;
  }
}

/* --- 全局溢出保护 --- */
.admin-content * {
  max-width: 100%;
  box-sizing: border-box;
}

.admin-content img,
.admin-content video,
.admin-content iframe {
  max-width: 100%;
  height: auto;
}

.admin-content .card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* 合同管理页面补充样式 */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.admin-stat-card .stat-content .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
}

.admin-stat-card .stat-content .stat-label {
  font-size: 12px;
  color: #64748b;
}

.admin-stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.admin-stat-card .stat-icon.contracts { background: rgba(22,119,255,0.1); color: #1677FF; }
.admin-stat-card .stat-icon.pending { background: rgba(245,158,11,0.1); color: #f59e0b; }
.admin-stat-card .stat-icon.active { background: rgba(16,185,129,0.1); color: #10b981; }
.admin-stat-card .stat-icon.revenue { background: rgba(139,92,246,0.1); color: #8b5cf6; }

.admin-filters-section {
  margin-bottom: 20px;
}

.admin-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-search-form .search-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 12px;
  flex: 1;
  min-width: 180px;
}

.admin-search-form .search-input-group input {
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  color: #1e293b;
  width: 100%;
}

.admin-search-form .admin-select {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  color: #1e293b;
  min-width: 100px;
}

.admin-search-form .admin-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}

.admin-search-form .admin-btn:hover {
  background: #f8fafc;
}

.admin-table-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.03);
  border: 1px solid rgba(226,232,240,0.9);
  overflow: hidden;
}

.admin-table-section .admin-table-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.admin-table-section .admin-table-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

.admin-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.admin-data-table th,
.admin-data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(226,232,240,0.6);
}

.admin-data-table th {
  font-weight: 600;
  color: #475569;
  background: rgba(248,250,252,0.8);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-data-table tbody tr {
  transition: background 0.15s;
}

.admin-data-table tbody tr:hover {
  background: rgba(22,119,255,0.04);
}

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

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.pagination-btn:hover {
  background: #f8fafc;
  color: #1677FF;
}

.pagination-info {
  font-size: 13px;
  color: #64748b;
}

/* 合同管理头部 */
.admin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-page-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.admin-page-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0;
}

.admin-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(22,119,255,0.3);
  transition: all 0.2s;
}

.admin-primary-btn:hover {
  box-shadow: 0 4px 12px rgba(22,119,255,0.4);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   属性编辑器组件 (替代JSON手工输入)
   ═══════════════════════════════════════════════════════════════════════════ */

.attr-editor {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #fafbfc;
  margin-top: 8px;
}

.attr-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.attr-editor-header .label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
}

.attr-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attr-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 90px 50px;
  gap: 8px;
  align-items: center;
}

.attr-row .input,
.attr-row .select {
  font-size: 13px;
  padding: 6px 10px;
  height: 34px;
}

.attr-row .attr-del-btn {
  padding: 4px 8px;
  font-size: 12px;
  color: #64748b;
}

.attr-row .attr-del-btn:hover {
  color: #ef4444;
}

.attr-editor-empty {
  text-align: center;
  padding: 16px;
  color: #94a3b8;
  font-size: 13px;
}

.attr-editor-sample {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.attr-editor-sample summary {
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  user-select: none;
}

.attr-editor-sample summary:hover {
  color: #1677FF;
}

.attr-editor-sample pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  color: #475569;
}

.attr-editor-sample code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   数据字典面板 (字段说明文档)
   ═══════════════════════════════════════════════════════════════════════════ */

.data-dictionary {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  background: #fafbfc;
  margin-top: 24px;
}

.data-dictionary summary {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-dictionary summary:hover {
  color: #1677FF;
}

.data-dictionary[open] summary {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

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

.dict-table th {
  background: #f1f5f9;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}

.dict-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

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

.dict-table tr:hover td {
  background: #f8fafc;
}

.dict-table td:nth-child(4) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f6f8fa;
  border-radius: 4px;
  font-size: 12px;
  color: #1677FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   表单验证样式
   ═══════════════════════════════════════════════════════════════════════════ */

.input-error {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.input-warning {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

.field-error,
.field-warning {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.field-error {
  background: #fef2f2;
  color: #dc2626;
  border-left: 3px solid #ef4444;
}

.field-warning {
  background: #fffbeb;
  color: #d97706;
  border-left: 3px solid #f59e0b;
}

/* 字段提示 */
.field-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.field-hint code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   右侧滑入面板 (用于复杂表单替代大型弹窗)
   ═══════════════════════════════════════════════════════════════════════════ */

.slide-panel {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}

.slide-panel.open {
  right: 0;
}

.slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #fafbfc;
}

.slide-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.slide-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-panel-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.slide-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.slide-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fafbfc;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.slide-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.slide-panel-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   Admin Tabs - Tab 导航组件
   ============================================ */

.admin-tabs {
  display: flex;
  gap: 0;
}

.admin-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}

.admin-tab:hover {
  color: #374151;
}

.admin-tab.active {
  color: var(--admin-primary, #1677FF);
  border-bottom-color: var(--admin-primary, #1677FF);
}

.admin-tab-panels {
  padding-top: 0;
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

/* Tab 主题适配 */
[data-theme="green"] .admin-tab.active {
  color: #059669;
  border-bottom-color: #059669;
}

[data-theme="gray"] .admin-tab.active {
  color: #4b5563;
  border-bottom-color: #4b5563;
}

[data-theme="purple"] .admin-tab.active {
  color: #7c3aed;
  border-bottom-color: #7c3aed;
}

[data-theme="cyan"] .admin-tab.active {
  color: #0891b2;
  border-bottom-color: #0891b2;
}

[data-theme="orange"] .admin-tab.active {
  color: #ea580c;
  border-bottom-color: #ea580c;
}

[data-theme="black"] .admin-tabs {
  border-bottom-color: #333;
}

[data-theme="black"] .admin-tab {
  color: #888;
}

[data-theme="black"] .admin-tab:hover {
  color: #ccc;
}

[data-theme="black"] .admin-tab.active {
  color: #fff;
  border-bottom-color: #fff;
}

/* admin-tab 链接样式适配 */
a.admin-tab {
  text-decoration: none;
  display: inline-block;
}

a.admin-tab:hover {
  text-decoration: none;
}

/* ─── 预约订单卡片布局 ─── */
.order-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.order-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.order-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.order-card-no {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--admin-primary, #1677FF);
  background: rgba(22, 119, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.order-card-tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.order-card-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.order-card-main {
  flex: 1;
  min-width: 0;
}
.order-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-card-buyer {
  font-size: 12px;
  color: #6e7191;
}
.order-card-finance {
  flex-shrink: 0;
  text-align: right;
}
.order-card-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--admin-primary, #1677FF);
  line-height: 1.2;
}
.order-card-method {
  font-size: 12px;
  color: #6e7191;
  margin-top: 2px;
}
.order-card-details {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid #f1f5f9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.order-card-detail-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.order-card-detail-item dt {
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-card-detail-item dd {
  margin: 0;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* 响应式 */
@media (max-width: 900px) {
  .order-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .order-card-body { flex-direction: column; gap: 8px; }
  .order-card-finance { text-align: left; }
  .order-card-details { grid-template-columns: 1fr; }
}

/* 商务黑主题适配 */
[data-theme="black"] .order-card { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .order-card:hover { border-color: #444; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="black"] .order-card-title { color: #e5e5e5; }
[data-theme="black"] .order-card-no { background: rgba(22,119,255,0.12); }
[data-theme="black"] .order-card-details { border-top-color: #2a2a2a; }
[data-theme="black"] .order-card-actions { border-top-color: #2a2a2a; }
[data-theme="black"] .order-card-detail-item dt { color: #666; }
[data-theme="black"] .order-card-detail-item dd { color: #aaa; }

/* 主题适配 - 活力绿 */
[data-theme="green"] .order-card-no { color: #0d9488; background: rgba(54,207,201,0.08); }
[data-theme="green"] .order-card-amount { color: #0d9488; }
[data-theme="green"] .order-card:hover { border-color: rgba(54,207,201,0.3); }

/* 主题适配 - 商务灰 */
[data-theme="gray"] .order-card-no { color: #4E5969; background: rgba(78,89,105,0.08); }
[data-theme="gray"] .order-card-amount { color: #4E5969; }
[data-theme="gray"] .order-card:hover { border-color: rgba(78,89,105,0.3); }

/* 主题适配 - 科技紫 */
[data-theme="purple"] .order-card-no { color: #6200EE; background: rgba(98,0,238,0.06); }
[data-theme="purple"] .order-card-amount { color: #6200EE; }
[data-theme="purple"] .order-card:hover { border-color: rgba(98,0,238,0.3); }

/* 主题适配 - 医疗青 */
[data-theme="cyan"] .order-card-no { color: #0096C7; background: rgba(0,180,216,0.08); }
[data-theme="cyan"] .order-card-amount { color: #0096C7; }
[data-theme="cyan"] .order-card:hover { border-color: rgba(0,180,216,0.3); }

/* 主题适配 - 工业橙 */
[data-theme="orange"] .order-card-no { color: #e55d00; background: rgba(255,103,0,0.08); }
[data-theme="orange"] .order-card-amount { color: #e55d00; }
[data-theme="orange"] .order-card:hover { border-color: rgba(255,103,0,0.3); }

/* ─── 订单卡片：技师信息行 ─── */
.order-card-tech-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-card-tech-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d5dd9, #1677FF);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.order-card-tech-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.order-card-tech-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 12px;
}
.order-card-tech-phone {
  font-size: 11px;
  color: #94a3b8;
}

/* ─── 订单卡片：佣金显示 ─── */
.order-card-commission {
  font-size: 11px;
  color: #f59e0b;
  margin-top: 2px;
  font-weight: 500;
}

/* 商务黑主题 - 技师行 + 佣金 */
[data-theme="black"] .order-card-tech-avatar { background: linear-gradient(135deg, #444, #333); }
[data-theme="black"] .order-card-tech-name { color: #e5e5e5; }
[data-theme="black"] .order-card-tech-phone { color: #666; }
[data-theme="black"] .order-card-commission { color: #d4a017; }

/* 活力绿 - 技师头像 */
[data-theme="green"] .order-card-tech-avatar { background: linear-gradient(135deg, #0d9488, #36CFC9); }
/* 商务灰 - 技师头像 */
[data-theme="gray"] .order-card-tech-avatar { background: linear-gradient(135deg, #334155, #4E5969); }
/* 科技紫 - 技师头像 */
[data-theme="purple"] .order-card-tech-avatar { background: linear-gradient(135deg, #4a00c7, #6200EE); }
/* 医疗青 - 技师头像 */
[data-theme="cyan"] .order-card-tech-avatar { background: linear-gradient(135deg, #0096C7, #00B4D8); }
/* 工业橙 - 技师头像 */
[data-theme="orange"] .order-card-tech-avatar { background: linear-gradient(135deg, #e55d00, #FF6700); }

/* ─── 订单技师分配标签 ─── */
.order-badge-assigned {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: #1677FF;
  color: #fff;
  margin-left: 6px;
}
.order-badge-applicant {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: #1677FF;
  color: #fff;
  margin-left: 6px;
}
.order-assigned-label {
  font-size: 12px;
  color: #1677FF;
  margin-bottom: 8px;
  font-weight: 600;
}
[data-theme="green"] .order-badge-assigned,
[data-theme="green"] .order-badge-applicant { background: #0d9488; }
[data-theme="green"] .order-assigned-label { color: #0d9488; }
[data-theme="gray"] .order-badge-assigned,
[data-theme="gray"] .order-badge-applicant { background: #4E5969; }
[data-theme="gray"] .order-assigned-label { color: #4E5969; }
[data-theme="purple"] .order-badge-assigned,
[data-theme="purple"] .order-badge-applicant { background: #6200EE; }
[data-theme="purple"] .order-assigned-label { color: #6200EE; }
[data-theme="cyan"] .order-badge-assigned,
[data-theme="cyan"] .order-badge-applicant { background: #0096C7; }
[data-theme="cyan"] .order-assigned-label { color: #0096C7; }
[data-theme="orange"] .order-badge-assigned,
[data-theme="orange"] .order-badge-applicant { background: #e55d00; }
[data-theme="orange"] .order-assigned-label { color: #e55d00; }
[data-theme="black"] .order-badge-assigned,
[data-theme="black"] .order-badge-applicant { background: #555; }
[data-theme="black"] .order-assigned-label { color: #ccc; }

/* ═══════════════════════════════════════════════════════════════════════════
   在线咨询三栏工作区 (IM-Style Chat Workspace)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 聊天页面：admin-content 不需要 padding */
.admin-content.chat-page {
  padding: 0;
  overflow: hidden;
  background: #f0f2f5;
}

/* 三栏容器 */
.chat-workspace {
  display: flex;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* ─── 左栏：会话列表 ─── */
.chat-sidebar {
  width: 280px;
  min-width: 280px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-sidebar-header {
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

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

.chat-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.chat-sidebar-actions {
  display: flex;
  gap: 6px;
}

.chat-sidebar-actions a,
.chat-sidebar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  font-size: 14px;
}

.chat-sidebar-actions a:hover,
.chat-sidebar-actions button:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.chat-search-wrap {
  position: relative;
}

.chat-search-wrap input {
  width: 100%;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 10px 0 30px;
  font-size: 13px;
  background: #f8fafc;
  color: #1f2329;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.chat-search-wrap input:focus {
  border-color: #1677FF;
  background: #fff;
}

.chat-search-wrap .chat-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

/* 筛选 tabs */
.chat-filter-tabs {
  display: flex;
  gap: 2px;
}

.chat-filter-tab {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-filter-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.chat-filter-tab.active {
  background: rgba(22, 119, 255, 0.1);
  color: #1677FF;
  font-weight: 600;
}

/* 会话列表 */
.chat-conv-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.chat-conv-item:hover {
  background: #f8fafc;
}

.chat-conv-item.active {
  background: rgba(22, 119, 255, 0.06);
}

/* 会话关闭按钮 */
.chat-conv-close-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.chat-conv-item:hover .chat-conv-close-btn {
  opacity: 1;
}

.chat-conv-close-btn:hover {
  background: #ef4444;
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.chat-conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-conv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.chat-conv-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-conv-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2329;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-conv-time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-conv-preview {
  font-size: 12px;
  color: #8c8c8c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  line-height: 1.3;
}

.chat-conv-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.chat-conv-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f0f0f0;
  color: #8c8c8c;
}

.chat-conv-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-conv-empty {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* ─── 中栏：消息区域 ─── */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f0f2f5;
}

.chat-main-header {
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

.chat-main-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-main-user-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
}

.chat-main-user-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f0f0f0;
  color: #8c8c8c;
}

.chat-main-status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 500;
}

.chat-main-status.active {
  background: #dcfce7;
  color: #16a34a;
}

.chat-main-status.closed {
  background: #f1f5f9;
  color: #94a3b8;
}

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

/* 消息列表 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 70%;
}

.chat-msg.msg-user {
  align-self: flex-start;
}

.chat-msg.msg-admin {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg.msg-system {
  align-self: center;
  max-width: 85%;
}

.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.chat-msg.msg-user .chat-msg-avatar {
  background: #e5e7eb;
  color: #6b7280;
}

.chat-msg.msg-admin .chat-msg-avatar {
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  color: #fff;
}

.chat-msg.msg-system .chat-msg-avatar {
  display: none;
}

.chat-msg-body {
  min-width: 0;
}

.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.chat-msg.msg-user .chat-msg-bubble {
  background: #fff;
  color: #1f2329;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.chat-msg.msg-admin .chat-msg-bubble {
  background: linear-gradient(135deg, #1677FF, #0d5dd9);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* 卡片消息气泡：去掉外层蓝色背景 */
.chat-msg-bubble:has(.chat-tech-card-msg),
.chat-msg-bubble:has(.chat-order-card-msg) {
  background: none !important;
  padding: 0;
  box-shadow: none;
  border-radius: 10px;
  overflow: visible;
}

.chat-msg.msg-system .chat-msg-bubble {
  background: rgba(0, 0, 0, 0.04);
  color: #8c8c8c;
  font-size: 12px;
  text-align: center;
  border-radius: 8px;
  padding: 6px 14px;
}

.chat-msg-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
}

.chat-msg.msg-admin .chat-msg-time {
  text-align: right;
}

.chat-msg-auto-tag {
  display: inline-block;
  font-size: 10px;
  color: #1677FF;
  margin-left: 4px;
}

/* 输入区域 - 企微风格 */
.chat-input-area {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 180px;
}

.chat-input-toolbar {
  display: flex;
  gap: 2px;
  padding: 6px 12px;
  flex-shrink: 0;
}

.chat-input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  width: 100%;
  border: 1px dashed #d9d9d9;
  box-sizing: border-box;
}

.chat-input-box textarea {
  width: 100%;
  flex: 1;
  border: none;
  padding: 4px 16px 36px;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  outline: none;
  font-family: inherit;
  color: #1f2329;
  background: transparent;
  box-sizing: border-box;
  overflow-y: auto;
}

.chat-input-box .chat-send-btn {
  position: absolute;
  right: 12px;
  bottom: 10px;
  height: 30px;
  padding: 0 20px;
  border: none;
  border-radius: 4px;
  background: #3370ff;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.chat-input-box .chat-send-btn:hover {
  background: #2860e1;
}

.chat-input-box .chat-send-btn:disabled {
  background: #94bfff;
  cursor: not-allowed;
}

/* 空态 */
.chat-main-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfbfbf;
  font-size: 14px;
}

/* ─── 右栏：用户/商品详情面板 ─── */
.chat-detail-panel {
  width: 300px;
  min-width: 300px;
  background: #fff;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.chat-detail-section {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.chat-detail-section:last-child {
  border-bottom: none;
}

.chat-detail-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* 用户信息卡片 */
.chat-user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.chat-user-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chat-user-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-user-name-lg {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}

.chat-user-email {
  font-size: 12px;
  color: #8c8c8c;
}

/* 详情信息列表 */
.chat-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.chat-detail-label {
  font-size: 12px;
  color: #8c8c8c;
  flex-shrink: 0;
}

.chat-detail-value {
  font-size: 13px;
  color: #1f2329;
  text-align: right;
  word-break: break-all;
  min-width: 0;
}

/* 商品卡片 */
.chat-item-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
}

.chat-item-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #e5e7eb;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.chat-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f2329;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #ef4444;
  margin-top: 4px;
}

.chat-item-cat {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ─── 右栏Tab导航 ─── */
.chat-panel-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  padding: 0 8px;
  flex-shrink: 0;
}

.chat-panel-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: none;
  font-size: 13px;
  color: #8c8c8c;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.chat-panel-tab:hover {
  color: #1677ff;
}

.chat-panel-tab.active {
  color: #1677ff;
  border-bottom-color: #1677ff;
  font-weight: 500;
}

.chat-panel-content {
  flex: 1;
  overflow-y: auto;
}

.chat-tab-pane {
  display: none;
}

.chat-tab-pane.active {
  display: block;
}

.chat-detail-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 40px 16px;
  font-size: 13px;
}

/* ─── 订单列表 ─── */
.chat-orders-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-orders-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 30px 16px;
  font-size: 13px;
}

.chat-order-item {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #f0f0f0;
}

.chat-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.chat-order-no {
  font-size: 12px;
  color: #8c8c8c;
  font-family: monospace;
}

.chat-order-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.chat-order-status.status-pending_pay { background: #fff7e6; color: #d46b08; }
.chat-order-status.status-paid { background: #e6f7ff; color: #1677ff; }
.chat-order-status.status-fulfilling { background: #f0f5ff; color: #2f54eb; }
.chat-order-status.status-completed { background: #f6ffed; color: #389e0d; }
.chat-order-status.status-cancelled { background: #f5f5f5; color: #8c8c8c; }
.chat-order-status.status-refund_pending,
.chat-order-status.status-refunded { background: #fff1f0; color: #cf1322; }

.chat-order-summary {
  font-size: 13px;
  color: #1f2329;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-order-price {
  font-size: 14px;
  font-weight: 600;
  color: #ef4444;
}

.chat-order-time {
  font-size: 11px;
  color: #94a3b8;
}

/* ─── 备注区域 ─── */
.chat-notes-input-area {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.chat-notes-input-area textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.chat-notes-input-area textarea:focus {
  border-color: #1677ff;
}

.chat-note-save-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px 0;
  background: #1677ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.chat-note-save-btn:hover {
  opacity: 0.9;
}

.chat-note-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-notes-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-notes-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 20px 16px;
  font-size: 13px;
}

.chat-note-item {
  background: #fffbe6;
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid #faad14;
}

.chat-note-content {
  font-size: 13px;
  color: #1f2329;
  line-height: 1.5;
  margin-bottom: 6px;
}

.chat-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #94a3b8;
}

/* ─── 快捷回复 ─── */
.chat-quick-replies {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-quick-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 30px 16px;
  font-size: 13px;
  line-height: 1.8;
}

.chat-quick-empty a {
  color: #1677ff;
  text-decoration: none;
}

.chat-quick-item {
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-quick-item:hover {
  background: #f0f7ff;
  border-color: #91caff;
}

.chat-quick-keyword {
  font-size: 12px;
  font-weight: 600;
  color: #1677ff;
  margin-bottom: 4px;
}

.chat-quick-content {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* ─── 用户标签管理 ─── */
.chat-tags-manager {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.chat-tags-placeholder {
  font-size: 12px;
  color: #bfbfbf;
}

.chat-tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #e6f7ff;
  border-radius: 12px;
  font-size: 12px;
  color: #1677ff;
}

.chat-tag-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #999;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-tag-remove:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #666;
}

.chat-tags-input-wrap {
  display: flex;
  gap: 8px;
}

.chat-tags-input-wrap input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
}

.chat-tags-input-wrap input:focus {
  border-color: #1677ff;
}

.chat-tags-save-btn {
  padding: 6px 12px;
  background: #1677ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.chat-tags-save-btn:hover {
  opacity: 0.9;
}

/* 加载状态 */
.chat-loading {
  text-align: center;
  color: #bfbfbf;
  padding: 30px 16px;
  font-size: 13px;
}

/* ─── 输入工具栏 ─── */

.chat-toolbar-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: #8c8c8c;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.chat-toolbar-btn:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.chat-toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── 表情选择器 ─── */
.chat-emoji-picker {
  position: absolute;
  bottom: 100%;
  left: 12px;
  width: 320px;
  max-height: 200px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 100;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.chat-emoji-item {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  transition: background 0.15s;
}

.chat-emoji-item:hover {
  background: #f0f0f0;
}

/* ─── 图片消息 ─── */
.chat-msg-bubble:has(.chat-msg-image) {
  background: none !important;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
  border-radius: 10px;
}

.chat-msg-image {
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  object-fit: cover;
  transition: transform 0.15s;
}

.chat-msg-image:hover {
  transform: scale(1.02);
}

/* ─── 图片灯箱 ─── */
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.chat-lightbox.show { opacity: 1; }

.chat-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 6px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.chat-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chat-lightbox-close:hover { background: rgba(255,255,255,0.3); }

.chat-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chat-lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.chat-lightbox-nav.prev { left: 20px; }
.chat-lightbox-nav.next { right: 20px; }
.chat-lightbox-nav:disabled { opacity: 0.3; cursor: default; }

.chat-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}

/* ─── 技师搜索区域 ─── */
.chat-tech-search {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.chat-tech-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.chat-tech-search input:focus {
  border-color: #1677ff;
}

/* ─── 技师列表 ─── */
.chat-tech-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.chat-tech-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 30px 16px;
  font-size: 13px;
}

.chat-tech-load-more {
  text-align: center;
  padding: 12px 0;
}

.chat-tech-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.chat-tech-card:hover {
  border-color: #91caff;
  background: #f0f7ff;
}

.chat-tech-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-tech-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.chat-tech-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2329;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-tech-gender {
  font-size: 12px;
  color: #f472b6;
}

.chat-tech-meta {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #8c8c8c;
}

.chat-tech-rating {
  color: #faad14;
}

.chat-tech-skills {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

.chat-tech-send-btn {
  padding: 6px 12px;
  background: #1677ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.chat-tech-send-btn:hover {
  opacity: 0.9;
}

/* 技师分组标题 */
.chat-tech-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 0 6px;
  margin-top: 4px;
}

.chat-tech-section-title:first-child {
  margin-top: 0;
}

.chat-tech-card.is-related {
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border-color: #bfdbfe;
}

.chat-tech-card.is-related:hover {
  border-color: #60a5fa;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}

/* ─── 技师卡片消息 ─── */
.chat-tech-card-msg {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  min-width: 200px;
  max-width: 280px;
}

.chat-tech-card-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-tech-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-tech-card-info {
  flex: 1;
  min-width: 0;
}

.chat-tech-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2329;
}

.chat-tech-card-meta {
  font-size: 11px;
  color: #8c8c8c;
  margin-top: 2px;
}

.chat-tech-card-bio {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* ─── 订单卡片消息 ─── */
.chat-order-card-msg {
  padding: 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  min-width: 200px;
  max-width: 280px;
}

.chat-order-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-order-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fde68a;
  padding: 1px 6px;
  border-radius: 3px;
}

.chat-order-card-no {
  font-size: 13px;
  font-weight: 600;
  color: #1f2329;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-order-card-status {
  font-size: 11px;
  font-weight: 500;
  color: #92400e;
  flex-shrink: 0;
}

.chat-order-card-summary {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

.chat-order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.chat-order-card-price {
  font-size: 14px;
  font-weight: 600;
  color: #dc2626;
}

.chat-order-card-time {
  font-size: 11px;
  color: #8c8c8c;
}

/* ─── 响应式 ─── */
@media (max-width: 1200px) {
  .chat-detail-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .chat-sidebar {
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
  }
  .chat-sidebar.mobile-open {
    transform: translateX(0);
  }
  .chat-mobile-toggle {
    display: inline-flex !important;
  }
}

.chat-mobile-toggle {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ─── 商务黑主题适配 ─── */
[data-theme="black"] .admin-content.chat-page { background: #0a0a0a; }
[data-theme="black"] .chat-sidebar { background: #141414; border-right-color: #2a2a2a; }
[data-theme="black"] .chat-sidebar-header { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-sidebar-title { color: #e5e5e5; }
[data-theme="black"] .chat-sidebar-actions a,
[data-theme="black"] .chat-sidebar-actions button { border-color: #333; color: #888; background: #1a1a1a; }
[data-theme="black"] .chat-sidebar-actions a:hover,
[data-theme="black"] .chat-sidebar-actions button:hover { background: #222; color: #ddd; }
[data-theme="black"] .chat-search-wrap input { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
[data-theme="black"] .chat-search-wrap input:focus { border-color: #555; background: #1e1e1e; }
[data-theme="black"] .chat-filter-tab { color: #888; }
[data-theme="black"] .chat-filter-tab:hover { background: rgba(255,255,255,0.04); color: #ccc; }
[data-theme="black"] .chat-filter-tab.active { background: rgba(255,255,255,0.08); color: #fff; }
[data-theme="black"] .chat-conv-item { border-bottom-color: #1e1e1e; }
[data-theme="black"] .chat-conv-item:hover { background: rgba(255,255,255,0.03); }
[data-theme="black"] .chat-conv-item.active { background: rgba(255,255,255,0.06); }
[data-theme="black"] .chat-conv-name { color: #e5e5e5; }
[data-theme="black"] .chat-conv-preview { color: #666; }
[data-theme="black"] .chat-conv-tag { background: #2a2a2a; color: #888; }
[data-theme="black"] .chat-main { background: #0a0a0a; }
[data-theme="black"] .chat-main-header { background: #141414; border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-main-user-name { color: #e5e5e5; }
[data-theme="black"] .chat-main-user-tag { background: #2a2a2a; color: #888; }
[data-theme="black"] .chat-msg.msg-user .chat-msg-bubble { background: #1a1a1a; color: #e5e5e5; box-shadow: none; }
[data-theme="black"] .chat-msg.msg-system .chat-msg-bubble { background: rgba(255,255,255,0.04); color: #666; }
[data-theme="black"] .chat-input-area { background: #141414; border-top-color: #2a2a2a; }
[data-theme="black"] .chat-input-box textarea { color: #e5e5e5; }
[data-theme="black"] .chat-input-toolbar { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-detail-panel { background: #141414; border-left-color: #2a2a2a; }
[data-theme="black"] .chat-detail-section { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-user-name-lg { color: #e5e5e5; }
[data-theme="black"] .chat-user-email { color: #666; }
[data-theme="black"] .chat-detail-value { color: #ccc; }
[data-theme="black"] .chat-item-card { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .chat-item-title { color: #e5e5e5; }
[data-theme="black"] .chat-item-cover { background: #2a2a2a; }
/* Tab导航黑色主题 */
[data-theme="black"] .chat-panel-tabs { background: #141414; border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-panel-tab { color: #666; }
[data-theme="black"] .chat-panel-tab:hover { color: #1677ff; }
[data-theme="black"] .chat-panel-tab.active { color: #1677ff; border-bottom-color: #1677ff; }
/* 订单列表黑色主题 */
[data-theme="black"] .chat-order-item { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .chat-order-no { color: #666; }
[data-theme="black"] .chat-order-summary { color: #ccc; }
[data-theme="black"] .chat-order-time { color: #555; }
/* 备注黑色主题 */
[data-theme="black"] .chat-notes-input-area { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-notes-input-area textarea { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
[data-theme="black"] .chat-notes-input-area textarea:focus { border-color: #1677ff; background: #1e1e1e; }
[data-theme="black"] .chat-note-item { background: #2a2a1a; border-left-color: #b8860b; }
[data-theme="black"] .chat-note-content { color: #ccc; }
[data-theme="black"] .chat-note-meta { color: #555; }
/* 快捷回复黑色主题 */
[data-theme="black"] .chat-quick-item { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .chat-quick-item:hover { background: #1e2a3a; border-color: #1677ff; }
[data-theme="black"] .chat-quick-content { color: #888; }
/* 标签管理黑色主题 */
[data-theme="black"] .chat-tag-item { background: #1a2a3a; color: #4da6ff; }
[data-theme="black"] .chat-tag-remove { background: rgba(255,255,255,0.1); color: #666; }
[data-theme="black"] .chat-tag-remove:hover { background: rgba(255,255,255,0.15); color: #999; }
[data-theme="black"] .chat-tags-input-wrap input { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
[data-theme="black"] .chat-tags-input-wrap input:focus { border-color: #1677ff; }
/* 输入工具栏黑色主题 */
[data-theme="black"] .chat-input-toolbar { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-toolbar-btn { color: #666; }
[data-theme="black"] .chat-toolbar-btn:hover { background: #2a2a2a; color: #1677ff; }
/* 表情选择器黑色主题 */
[data-theme="black"] .chat-emoji-picker { background: #1a1a1a; border-color: #333; }
[data-theme="black"] .chat-emoji-item:hover { background: #2a2a2a; }
/* 技师列表黑色主题 */
[data-theme="black"] .chat-tech-search { border-bottom-color: #2a2a2a; }
[data-theme="black"] .chat-tech-search input { background: #1a1a1a; border-color: #333; color: #e5e5e5; }
[data-theme="black"] .chat-tech-search input:focus { border-color: #1677ff; }
[data-theme="black"] .chat-tech-card { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="black"] .chat-tech-card:hover { background: #1e2a3a; border-color: #1677ff; }
[data-theme="black"] .chat-tech-name { color: #e5e5e5; }
[data-theme="black"] .chat-tech-meta { color: #666; }
/* 技师卡片消息黑色主题 */
[data-theme="black"] .chat-tech-card-msg { background: #1e1e1e; border-color: #333; }
[data-theme="black"] .chat-tech-card-name { color: #e5e5e5; }
[data-theme="black"] .chat-tech-card-bio { color: #888; }
[data-theme="black"] .chat-order-card-msg { background: #1e1e1e; border-color: #333; }
[data-theme="black"] .chat-order-card-label { background: #3a3a2a; color: #d4a520; }
[data-theme="black"] .chat-order-card-no { color: #e5e5e5; }
[data-theme="black"] .chat-order-card-status { color: #d4a520; }
[data-theme="black"] .chat-order-card-summary { color: #888; }
[data-theme="black"] .chat-order-card-price { color: #ef4444; }
/* 技师分组黑色主题 */
[data-theme="black"] .chat-tech-section-title { color: #666; }
[data-theme="black"] .chat-tech-card.is-related { background: linear-gradient(135deg, #1a2333, #1e2a3a); border-color: #2a4a6a; }
[data-theme="black"] .chat-tech-card.is-related:hover { background: linear-gradient(135deg, #1e2a3a, #243a4a); border-color: #3a6a9a; }

/* ========== 批量操作栏 ========== */
.batch-action-bar {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: linear-gradient(135deg, #1677FF 0%, #0d5dd9 100%);
  color: white;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
  border-radius: 12px;
  margin-top: 12px;
  animation: batchBarSlide 0.25s ease;
}
@keyframes batchBarSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.batch-action-info { font-size: 14px; font-weight: 500; }
.batch-action-info strong { font-size: 18px; font-weight: 700; margin: 0 4px; }
.batch-action-buttons { display: flex; gap: 8px; }

/* ========== 复选框 ========== */
.row-check, .row-check-item {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1677FF;
}

/* ========== 未读消息徽章 ========== */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, #FF4D4F, #ff7875);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(255, 77, 79, 0.4);
}

/* ========== 用户搜索下拉 ========== */
.user-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  margin-top: 4px;
}
.user-search-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.user-search-item:hover { background: #f8fafc; }
.user-search-item:last-child { border-bottom: none; }
.user-search-item strong { font-size: 13px; color: #0f172a; }

/* ========== 禁用提示条 ========== */
.disabled-banner {
  margin: 20px auto;
  max-width: 1200px;
  padding: 14px 20px;
  background: #fff7e6;
  border: 1px solid #ffd666;
  border-radius: 12px;
  color: #d46b08;
  font-size: 14px;
}

/* ===== 表格行操作下拉菜单 ===== */
.row-actions-wrap {
  position: relative;
  display: inline-block;
}
/* 仅当下拉菜单打开时提升层级，避免多行 wrap 互相遮挡 */
.row-actions-wrap.active {
  z-index: 1000;
}
.row-actions-toggle {
  cursor: pointer;
  white-space: nowrap;
}
.row-actions-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 10000;
  padding: 4px 0;
  /* 确保不被父容器裁剪 */
  transform: translateZ(0);
  will-change: transform;
}
.row-actions-dropdown.open {
  display: block;
}
/* 向上弹出 */
.row-actions-dropdown.dropup {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
  /* 向上弹出时的特殊样式 */
  transform: translateZ(0);
}
.row-action-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  color: #1F2329;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.6;
}
.row-action-item:hover {
  background: #f1f5f9;
}
.row-action-item.danger {
  color: #ef4444;
}
.row-action-item.danger:hover {
  background: #fef2f2;
}

/* ===== 用户统计概要栏 ===== */
.user-stats-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.user-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.user-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: #1F2329;
  line-height: 1.2;
}
.user-stat-label {
  font-size: 12px;
  color: #6E7191;
  margin-top: 2px;
}

/* ============================================
   Modal 内 Tab 微调
   ============================================ */
.admin-modal-box .admin-tabs {
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
}
.admin-modal-box .admin-tab {
  font-size: 13px;
  padding: 8px 14px;
}

/* ============================================
   报价明细编辑器
   ============================================ */
.pricing-editor { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; }
.pricing-row {
  display: grid;
  grid-template-columns: 80px 1fr 76px 28px;
  gap: 6px;
  align-items: center;
}
.pricing-row select,
.pricing-row input {
  padding: 7px 8px;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  outline: none;
}
.pricing-row select:focus,
.pricing-row input:focus { border-color: var(--admin-primary, #1677FF); }
.btn-remove-pricing {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-remove-pricing:hover { background: #fee2e2; }
.btn-add-pricing {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--admin-primary, #1677FF);
  border: 1px dashed #cbd5e1;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
}
.btn-add-pricing:hover { background: rgba(22,119,255,0.06); border-color: var(--admin-primary, #1677FF); }

.pricing-summary {
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
}
.pricing-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 6px;
}
.pricing-total-row .value { font-size: 15px; color: var(--admin-primary, #1677FF); }
.pricing-match {
  font-size: 11px; padding: 4px 8px; border-radius: 4px; margin-bottom: 6px;
}
.pricing-match.ok { background: #d1fae5; color: #065f46; }
.pricing-match.warn { background: #fee2e2; color: #b91c1c; }
.pricing-groups-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px;
}
.pricing-group-stat {
  display: flex; justify-content: space-between;
  padding: 3px 6px; background: #fff; border-radius: 4px;
}
.pricing-group-stat .pct { color: #64748b; font-weight: 600; }

.pricing-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-group-form {
  padding: 10px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  margin-top: 4px;
}
.custom-group-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-group-inner .input {
  font-size: 13px;
  padding: 6px 10px;
}

.pricing-header-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.pricing-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-field .label {
  font-size: 12px;
  margin: 0;
}
.pricing-field .input,
.pricing-field .select {
  font-size: 13px;
  padding: 6px 10px;
}

.item-toggle-btn {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.6;
  font-weight: 500;
}
.item-toggle-btn.is-on {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}
.item-toggle-btn.is-off {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.item-toggle-btn:hover {
  opacity: 0.8;
}

/* 技师推荐面板 */
.tech-recommend-panel {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 16px;
  min-height: 400px;
}
.tech-col {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.tech-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.tech-col-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.tech-col-header a.muted {
  font-size: 12px;
  color: #64748b;
  text-decoration: none;
}
.tech-col-header a.muted:hover {
  color: #2563eb;
  text-decoration: underline;
}
.tech-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  max-height: 360px;
}
.tech-col-footer {
  padding: 8px 14px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tech-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 6px;
  background: #fff;
}
.tech-card:hover {
  border-color: #1677FF;
}
.tech-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #6b7280;
}
.tech-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tech-info {
  flex: 1;
  min-width: 0;
}
.tech-name {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-stats {
  font-size: 11px;
}
.tech-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tech-featured-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #1677FF;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.tech-col-selected .tech-card {
  background: #f0f9ff;
  border-color: #bae6fd;
}

/* ========== ImagePicker 图片选择器 ========== */
.ip-container {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}
.ip-modes {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.ip-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}
.ip-mode input[type="radio"] {
  margin: 0;
  accent-color: #1677FF;
}
.ip-panel {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ip-panel-upload {
  flex-wrap: wrap;
}
.ip-file {
  display: none;
}
.ip-upload-btn {
  min-width: 90px;
}
.ip-upload-hint {
  width: 100%;
  margin-top: 4px;
}
.ip-url-input,
.ip-fetch-input {
  flex: 1;
  min-width: 200px;
}
.ip-preview-area {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ip-preview-placeholder {
  color: #94a3b8;
  font-size: 13px;
}
.ip-preview-img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 4px;
  object-fit: contain;
}
.ip-clear-btn {
  font-size: 12px;
  padding: 4px 12px;
}
.ip-status {
  margin-top: 8px;
  font-size: 12px;
  min-height: 18px;
}
.ip-status-success {
  color: #16a34a;
}
.ip-status-error {
  color: #dc2626;
}

/* ========== SMS Tab 切换 ========== */
.sms-provider-selector {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}
.sms-provider-selector label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #0369a1;
  cursor: pointer;
}
.sms-provider-selector input[type="radio"] {
  accent-color: #1677FF;
}
.sms-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.sms-tab {
  padding: 8px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.sms-tab:hover {
  color: #1677FF;
}
.sms-tab.active {
  color: #1677FF;
  border-bottom-color: #1677FF;
  font-weight: 500;
}
.sms-panel {
  display: none;
}
.sms-panel.active {
  display: block;
}

/* 云服务子标签页 */
.cloud-sub-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid #e2e8f0;
  overflow-x: auto;
}
.cloud-sub-tab {
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.cloud-sub-tab:hover {
  color: #1677FF;
  background: #f0f7ff;
}
.cloud-sub-tab.active {
  color: #1677FF;
  border-bottom-color: #1677FF;
  font-weight: 600;
}
.cloud-sub-panel {
  display: none;
}
.cloud-sub-panel.active {
  display: block;
}

/* ============================================================
   移动端响应式优化
   ============================================================ */

/* 统一头像样式类 */
.admin-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 表格内头像防变形 */
.admin-table td > div[style*="border-radius:50%"],
.admin-table td > div[style*="border-radius: 50%"] {
  flex-shrink: 0 !important;
  min-width: 32px !important;
  min-height: 32px !important;
}
.admin-table td > div[style*="border-radius:50%"] img,
.admin-table td > div[style*="border-radius: 50%"] img {
  object-fit: cover !important;
}

/* 表格容器横向滚动 */
.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 移动端汉堡菜单按钮 */
.admin-mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text, #0f172a);
  margin-right: 8px;
}

/* 移动端侧栏关闭按钮 */
.admin-sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
  border-radius: 8px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.admin-sidebar-close-btn:hover {
  color: #0f172a;
  background: rgba(0,0,0,0.06);
}

/* 移动端侧栏底部用户区 */
.admin-sidebar-user {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}
.admin-sidebar-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #475569;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.admin-sidebar-user-avatar:hover {
  background: rgba(0,0,0,0.1);
  color: #0f172a;
}
.admin-sidebar-user-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.admin-sidebar-user-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  padding: 0;
}
.admin-sidebar-user-action:hover {
  background: rgba(0,0,0,0.06);
  color: #0f172a;
}

/* 侧栏遮罩层 */
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.admin-sidebar-overlay.visible {
  display: block;
}

/* Tablet 适配 (sidebar visible but narrower) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .admin-shell {
    grid-template-columns: 200px 10px 1fr;
  }
  .admin-sidebar {
    width: 200px;
    min-width: 200px;
  }
  .admin-sidebar .admin-nav-text {
    font-size: 13px;
  }
}

/* Mobile 适配 (< 768px) */
@media (max-width: 767px) {
  .admin-content {
    padding: 12px;
  }
  .admin-content .card {
    padding: 16px;
    margin-bottom: 12px;
  }
  .admin-content .btn-sm {
    min-height: 44px;
    padding: 10px 16px;
  }
  .admin-content .input,
  .admin-content .select {
    min-height: 44px;
    font-size: 16px; /* 防止iOS自动缩放 */
  }
  .admin-topbar {
    padding: 0 12px;
  }
  .admin-topbar-title {
    font-size: 16px;
  }
  /* 表格横向滚动 */
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table th,
  .admin-table td {
    padding: 10px 8px;
  }
  /* tabs横向滚动 */
  .admin-top-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-top-tabs::-webkit-scrollbar {
    display: none;
  }
  /* 用户头像增大便于触摸 */
  .admin-user-avatar {
    width: 36px;
    height: 36px;
  }
}

/* Small Mobile 适配 (< 480px) */
@media (max-width: 479px) {
  .admin-topbar {
    padding: 0 8px;
    min-height: 48px;
  }
  .admin-content {
    padding: 8px;
  }
  .admin-content .card {
    padding: 12px;
    border-radius: 12px;
  }
  .admin-table th,
  .admin-table td {
    padding: 8px 6px;
    font-size: 13px;
  }
  .admin-page-title {
    font-size: 18px;
  }
  /* 隐藏部分表格列 */
  .admin-table .hide-mobile {
    display: none;
  }
}

/* iOS 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    .admin-topbar {
      padding-top: env(safe-area-inset-top);
    }
    .admin-sidebar {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .admin-content {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* 防止整页横向滚动 */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  .admin-shell {
    overflow-x: hidden;
  }
}

/* ===== 用户详情页样式 ===== */
.ud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
.ud-info-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}
.ud-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ud-table {
  width: 100%;
  border-collapse: collapse;
}
.ud-table td {
  padding: 8px 0;
}
.ud-table-label {
  color: #64748b;
  width: 100px;
}

@media (max-width: 1024px) {
  .ud-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ud-info-card {
    padding: 16px;
  }
  .ud-table-label {
    width: 80px;
    white-space: nowrap;
  }
  /* 强制覆盖内联 width 样式 */
  .ud-table td[style*="width"] {
    width: auto !important;
    min-width: 80px;
    white-space: nowrap;
  }
  /* 资质证书图片自适应 */
  .card img[style*="object-fit:cover"] {
    max-width: 100% !important;
    height: auto !important;
  }
  .card a[style*="width:100px"] {
    width: 80px !important;
    height: 60px !important;
  }
  /* 编辑资料弹框 */
  .pe-modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh;
    border-radius: 0;
  }
  .pe-form-grid {
    grid-template-columns: 1fr;
  }
  .pe-form-row.pe-full {
    grid-column: span 1;
  }
  .pe-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pe-tab-btn {
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 13px;
  }
  .pe-tab-content {
    padding: 16px;
  }
  .pe-payment-row.three-col {
    grid-template-columns: 1fr;
  }
  .pe-payment-row {
    grid-template-columns: 1fr;
  }
}

/* Password visibility toggle */
.pwd-wrap{position:relative;display:block}
.pwd-wrap>input{padding-right:36px !important}
.pwd-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:2px;color:#9ca3af;display:flex;align-items:center;justify-content:center;z-index:1}
.pwd-toggle:hover{color:#6b7280}

/* 移动端组件显隐（必须在基础定义之后） */
@media (max-width: 1024px) {
  .admin-mobile-menu-btn {
    display: flex;
  }
  .admin-sidebar-close-btn {
    display: flex;
  }
  .admin-sidebar-user {
    display: flex;
  }
  .admin-topbar-user {
    display: none;
  }
  .admin-page-title {
    display: none;
  }
}