/* ============================================================
   犀牛传图 PC端商家后台 - 毛玻璃微拟物风格样式表
   版本：2026-05-30 重构版
   设计规范：背景图+暗色遮罩+backdrop-filter毛玻璃+紫色主题
   兼容：Chrome/Edge/Firefox/Safari 主流PC浏览器
   ============================================================ */

/* ---------- CSS变量系统（全局配色与视觉参数） ---------- */
:root {
  /* 紫色主题色（与登录页、项目原有配色完全统一） */
  --primary: #0EA5E9;
  --primary-hover: #0284C7;
  --primary-light: #7DD3FC;
  --primary-glow: rgba(14, 165, 233, 0.6);
  --primary-dark: #0369A1;

  /* 玻璃拟态核心参数 */
  --glass-bg: rgba(255, 255, 255, 0.08);        /* 玻璃面板默认背景 */
  --glass-bg-hover: rgba(255, 255, 255, 0.14);  /* 玻璃面板悬浮背景 */
  --glass-bg-active: rgba(255, 255, 255, 0.18); /* 玻璃面板激活背景 */
  --glass-border: rgba(255, 255, 255, 0.25);    /* 玻璃面板白色描边 */
  --glass-border-hover: rgba(255, 255, 255, 0.28); /* 悬浮时描边变亮 */
  --glass-border-strong: rgba(255, 255, 255, 0.35); /* 强描边 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
  --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
  --glass-blur: 18px;                           /* 主模糊半径 */
  --glass-blur-sm: 12px;                        /* 小模糊半径 */

  /* 文字颜色（深色背景体系） */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted: rgba(255, 255, 255, 0.50);
  --text-disabled: rgba(255, 255, 255, 0.30);

  /* 暗色遮罩 */
  --overlay-bg: rgba(10, 10, 30, 0.45);

  /* 功能色（在深色背景上适当提亮） */
  --success: #34D399;
  --success-bg: rgba(16, 185, 129, 0.15);
  --warning: #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.15);
  --danger: #F87171;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --info: #60A5FA;
  --info-bg: rgba(96, 165, 250, 0.15);

  /* 布局尺寸 */
  --navbar-height: 60px;
  --sidebar-width: 300px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 16px;

  /* 过渡动画 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 全局重置与基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* 页面整体不滚动，由内部区域滚动 */
}

/* ============================================================
   一、全屏背景层
   背景图居中铺满、固定不滚动，叠加暗色半透明遮罩
   ============================================================ */
.admin-bg-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -2;
  /* 后台管理界面背景图：background2.jpg */
  /* 备用背景：深紫色调，防止图片加载失败时显示灰色 */
  background: #1e1838 url('../assets/bg-admin.jpg') center/cover no-repeat fixed;
}

.admin-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: var(--overlay-bg);
}

/* ============================================================
   二、顶部导航栏（毛玻璃）
   固定顶部，backdrop-filter模糊，白色细描边，柔和阴影
   ============================================================ */
.admin-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-height);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  /* 毛玻璃导航栏：实色底 + blur 叠加 */
  background: rgba(20, 18, 45, 0.85);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* 导航栏左侧：Logo+品牌名 */
.admin-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.admin-navbar-brand:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-navbar-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.admin-navbar-brand span {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* 导航栏中间：占位 */
.admin-navbar-center { flex: 1; }

/* 导航栏右侧：套餐标签 */
/* 套餐彩色小药丸（紧凑、档位色区分） */
.nav-package-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: none;
}
.nav-package-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.nav-package-pill--free     { background: rgba(107,114,128,0.18); color: #9CA3AF; border: 1px solid rgba(107,114,128,0.28); }
.nav-package-pill--standard { background: rgba(14,165,233,0.16); color: #38BDF8; border: 1px solid rgba(14,165,233,0.30); }
.nav-package-pill--advanced { background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(168,85,247,0.16)); color: #C4B5FD; border: 1px solid rgba(139,92,246,0.35); }
.nav-package-pill--advanced:hover { box-shadow: 0 2px 14px rgba(139,92,246,0.25); }

/* 导航栏左侧：品牌名与套餐标签间距 */
.admin-navbar-left #nav-package-slot {
  margin-left: 10px;
}

/* 导航栏右侧：商家下拉菜单触发器 */
.admin-navbar-right {
  position: relative;
}

.admin-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  /* 毛玻璃触发器 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-user-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-user-trigger .arrow {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.admin-user-trigger.open .arrow {
  transform: rotate(180deg);
}

.admin-user-trigger span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- 商家下拉菜单（毛玻璃弹窗） ---------- */
.admin-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  border-radius: var(--radius-lg);
  padding: 8px 0;
  /* 毛玻璃下拉菜单 */
  background: rgba(20, 16, 45, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
}

.admin-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* 下拉菜单头部：商家名称+编号 */
.admin-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-dropdown-header .shop-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-dropdown-header .shop-id {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 下拉菜单分割线 */
.admin-dropdown-divider {
  height: 1px;
  margin: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
}

/* 下拉菜单选项 */
.admin-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.admin-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

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

.admin-dropdown-item.danger:hover {
  background: var(--danger-bg);
}

.admin-dropdown-item img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.7;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.admin-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.admin-dropdown-item .icon-heavy {
  /* 部分图标（拼图/网格）在 viewBox 内撑得太满，同尺寸下显大，统一压 10% 视觉权重 */
  transform: scale(0.9);
  transform-origin: center;
}

/* 下拉菜单分组标题（通用服务 / 账户） */
.admin-dropdown-group-label {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  opacity: 0.65;
}

/* ============================================================
   三、页面主体布局
   顶部留出导航栏高度，左右分栏（订单列表+照片区）
   ============================================================ */
.admin-page {
  padding-top: var(--navbar-height);
  height: 100vh;
  height: 100dvh;
}

.admin-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding: 16px;
}

/* 套餐信息卡片容器（已移到导航栏，此slot不再使用） */
#package-card-slot {
  display: none;
}

/* 套餐信息卡片（毛玻璃卡片样式） */
.package-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 18px;
  transition: all var(--transition-fast);
}
.package-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

/* 侧边栏+主内容区的横向包裹层 */
.admin-layout-row {
  display: flex;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

/* ============================================================
   四、左侧订单列表侧边栏（毛玻璃）
   ============================================================ */
.admin-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  /* 毛玻璃侧边栏：先铺一层实色底防止渲染异常 */
  background: rgba(30, 25, 60, 0.55);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: border-color var(--transition-normal);
}

.admin-sidebar:hover {
  border-color: var(--glass-border-hover);
}

/* 侧边栏头部：标题+搜索+筛选 */
.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  position: relative;
}

/* 订单列表日期筛选下拉 */
.order-date-filter {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.order-date-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 11px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.order-date-filter-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
}
.order-date-filter-arrow {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}
.order-date-filter-menu.show + .order-date-filter-trigger .order-date-filter-arrow,
.order-date-filter-menu.show ~ .order-date-filter-trigger .order-date-filter-arrow,
.order-date-filter:has(.order-date-filter-menu.show) .order-date-filter-arrow {
  transform: rotate(180deg);
}
.order-date-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 100;
  min-width: 100px;
  padding: 6px;
  background: rgba(18, 20, 46, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all var(--transition-fast);
}
.order-date-filter-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.order-date-filter-item {
  padding: 7px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.order-date-filter-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.order-date-filter-item.active {
  background: rgba(14, 165, 233, 0.18);
  color: #38BDF8;
}

.sidebar-title img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

/* 订单数标签（合并进筛选胶囊内：筛选文字右侧的内嵌小数字胶囊） */
.order-count-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  margin-left: 1px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  border: none;
  border-radius: 999px;
}

/* 搜索框 */
.sidebar-search {
  position: relative;
  margin-bottom: 12px;
}

.sidebar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.sidebar-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  /* 毛玻璃搜索框 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

.sidebar-search input::placeholder {
  color: var(--text-muted);
}

.sidebar-search input:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* 新建订单按钮 */
.btn-new-order {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  /* 紫色渐变微拟物按钮 */
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(2, 132, 199, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all var(--transition-bounce);
}

.btn-new-order img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.btn-new-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-new-order:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25), inset 0 2px 4px rgba(0,0,0,0.1);
}

/* 经营分析独立容器：侧边栏顶部，与订单区视觉分离 */
.analytics-entry-wrap {
  flex-shrink: 0;
  padding: 12px 16px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 经营分析入口卡片 */
.analytics-entry-card {
  margin: 0;
  padding: 9px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(14, 70, 120, 0.55), rgba(14, 45, 90, 0.55));
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

/* 第一行：图标+标题 与 查看数据按钮 横向排布 */
.analytics-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.analytics-entry-card:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* 免费版套餐门禁：锁定态 */
.analytics-entry-card.nav-locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.analytics-entry-card.nav-locked:hover {
  transform: none;
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}
.analytics-entry-title .lock-badge {
  font-size: 11px;
  margin-left: 5px;
}

.analytics-entry-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.analytics-entry-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #38BDF8;
}

.analytics-entry-icon svg {
  width: 16px;
  height: 16px;
}

.analytics-entry-text {
  min-width: 0;
}

.analytics-entry-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  line-height: 1.3;
}

.analytics-entry-subtitle {
  margin-top: 1px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics-entry-btn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.analytics-entry-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
}

/* ---------- 订单列表滚动区 ---------- */
.order-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  /* 自定义美化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.order-list::-webkit-scrollbar {
  width: 6px;
}

.order-list::-webkit-scrollbar-track {
  background: transparent;
}

.order-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.order-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 统一暗色主题下的细滚动条：订单列表、弹窗内容区、品牌中心内容区、下拉选项区共用 */
.modal-content,
.brand-sidebar-body,
.custom-select-options {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.modal-content::-webkit-scrollbar,
.brand-sidebar-body::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar {
  width: 6px;
}
.modal-content::-webkit-scrollbar-track,
.brand-sidebar-body::-webkit-scrollbar-track,
.custom-select-options::-webkit-scrollbar-track {
  background: transparent;
}
.modal-content::-webkit-scrollbar-thumb,
.brand-sidebar-body::-webkit-scrollbar-thumb,
.custom-select-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.modal-content::-webkit-scrollbar-thumb:hover,
.brand-sidebar-body::-webkit-scrollbar-thumb:hover,
.custom-select-options::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- 双通道状态指示条 ---------- */
/* 侧边栏底部样式（已废弃，保留防回退） */
.dc-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
  flex-shrink: 0;
}
/* 导航栏内联样式（右上角详细版） */
.dc-status-bar.dc-navbar {
  padding: 3px 10px;
  border-top: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-size: 12px;
  height: 28px;
  gap: 5px;
}
.dc-status-bar.dc-navbar .dc-status-dot {
  font-size: 8px;
}
.dc-status-bar.dc-navbar .dc-status-text {
  font-size: 12px;
}
.dc-status-bar.dc-navbar .dc-status-ip {
  font-size: 10px;
  max-width: 140px;
}
.dc-status-dot {
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
}
.dc-status-dot.dc-on { animation: dc-pulse 2s ease-in-out infinite; }
.dc-status-dot.dc-warn { animation: dc-pulse 1s ease-in-out infinite; }
@keyframes dc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dc-status-text {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  white-space: nowrap;
}
.dc-status-ip {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ---------- 订单卡片 ---------- */
.order-card {
  position: relative;
  padding: 12px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  /* 毛玻璃订单卡片 */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; /* 裁切状态条，使其贴边贯穿且不超出圆角容器 */
}

/* 订单卡片左侧状态指示条（纯伪元素，无新增 DOM） */
.order-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0;
  background: #ff9547; /* 默认橙色：待补录 */
  pointer-events: none;
}
.order-card--green::before { background: #36c985; }
.order-card--orange::before { background: #ff9547; }
.order-card--gray::before { background: #828896; }

/* 侧边栏经营分析卡片下方的订单状态说明（浅灰小字） */
.order-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 2px 1px;
  margin-top: 1px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.4;
}
.osl-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.osl-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.osl-green { background: #36c985; }
.osl-orange { background: #ff9547; }

.order-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

.order-card.active {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.2), 0 4px 12px rgba(14, 165, 233, 0.1);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.order-card-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.order-card-no {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'SF Mono', Monaco, monospace;
  letter-spacing: 0.5px;
}

.order-card-name {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  text-align: right;
  user-select: none;
}

/* 订单名称编辑输入框 */
.order-name-edit-input {
  font-size: 12px;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 3px 8px;
  max-width: 45%;
  text-align: right;
  outline: none;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
  font-family: inherit;
}

.order-name-edit-input::placeholder {
  color: var(--text-muted);
  font-size: 11px;
}

.order-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.order-card-meta .photo-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.order-card-meta .photo-count img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.6;
}

/* 订单卡片上的双通道标签（纯前端文字，不暴露局域网/本地网络字眼） */
.order-card-meta .dc-order-tag {
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-card-meta .dc-order-tag.dc-on {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.order-card-meta .dc-order-tag.dc-off {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.12);
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.order-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: -10px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.oc-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
  white-space: nowrap;
}
.oc-badge-package {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(99, 102, 241, 0.35);
}
.oc-badge-amount {
  color: #fde68a;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.35);
}

/* 订单卡片 header 内的金额标签：弱化，与下方 meta 小字同色，无背景 */
.order-card-header .oc-badge-amount {
  padding: 0;
  font-size: 12px;
  border-radius: 0;
  margin: 0 6px;
  flex-shrink: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font-weight: 400;
}
.oc-badge-source {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.oc-phone {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.oc-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.oc-edit-btn:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(14, 165, 233, 0.45);
  color: #7dd3fc;
}

/* ============================================================
   五、右侧主内容区（照片展示区）
   ============================================================ */
.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-xl);
  /* 毛玻璃主内容区：先铺一层实色底防止渲染异常 */
  background: rgba(30, 25, 60, 0.55);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: border-color var(--transition-normal);
}

.admin-main:hover {
  border-color: var(--glass-border-hover);
}

/* ---------- 顶部工具栏 ---------- */
.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 8px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.toolbar-left {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 3px 0;
}

.toolbar-left::-webkit-scrollbar {
  display: none;
}

.toolbar-left .admin-btn-sm {
  height: 36px;
  padding: 0 12px;
  flex-shrink: 0;
}

/* 工具栏分割线 */
.toolbar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* 纯图标刷新按钮：圆角方形 + flex 完美居中 */
#btn-refresh {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#btn-refresh > svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.toolbar-order-info {
  font-size: 14px;
  color: var(--text-muted);
  margin-right: 8px;
}

.toolbar-order-info .mono {
  font-family: 'SF Mono', Monaco, monospace;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  transition: all var(--transition-fast);
}

.toolbar-order-info .mono:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
}

/* 仅手机端显示类：基础隐藏，避免共用 HTML 把手机端专属按钮泄漏到电脑端（严格区分两端） */
.mobile-only-btn { display: none !important; }
.desktop-only-btn { display: inline-flex; }

/* ---------- 通用按钮样式（微拟物） ---------- */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--transition-bounce);
  white-space: nowrap;
  user-select: none;
}

.admin-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.admin-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* 主按钮：紫色渐变 */
.admin-btn-primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(2, 132, 199, 0.9));
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.admin-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}

.admin-btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25), inset 0 2px 4px rgba(0,0,0,0.1);
}

/* 次要按钮：毛玻璃 */
.admin-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}

.admin-btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.admin-btn-secondary:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

/* 幽灵按钮：更透明 */
.admin-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.admin-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-secondary);
  transform: translateY(-1px);
}

.admin-btn-ghost:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

/* 危险按钮：红色 */
.admin-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--danger);
}

.admin-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

/* 小尺寸按钮 */
.admin-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.admin-btn-sm img {
  width: 13px;
  height: 13px;
}


/* ---------- 上传进度浮动栏（多订单并发上传时显示） ---------- */
.upload-floating-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 440px;
  max-height: 80vh;
  background: rgba(20, 25, 35, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  z-index: 10000;
  overflow: hidden;
  font-size: 13px;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.floating-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.floating-bar-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-bar-icon {
  width: 18px;
  height: 18px;
  color: #4096ff;
  animation: floating-upload-bounce 1.2s ease-in-out infinite;
}

@keyframes floating-upload-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.floating-bar-title-text {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  letter-spacing: 0.3px;
}

.floating-bar-badge {
  background: linear-gradient(135deg, #1677ff, #4096ff);
  color: #fff;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.35);
}

.floating-bar-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.floating-bar-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.floating-bar-body {
  flex: 1;
  overflow-y: visible;
  padding: 8px 0;
  max-height: none;
}

.floating-bar-body::-webkit-scrollbar {
  width: 5px;
}

.floating-bar-body::-webkit-scrollbar-track {
  background: transparent;
}

.floating-bar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* 每个订单独立卡片窗口 */
.floating-order-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin: 0 12px 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.floating-order-card-header {
  font-size: 11px;
  font-weight: 600;
  color: #4096ff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.floating-order-card-body {
  padding: 4px 0;
  max-height: 176px;
  overflow-y: auto;
}
.floating-order-card-body::-webkit-scrollbar {
  width: 6px;
}
.floating-order-card-body::-webkit-scrollbar-track {
  background: transparent;
}
.floating-order-card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.floating-order-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.floating-file-item.active {
  background: rgba(22,119,255,0.08);
  border-left: 2px solid #4096ff;
  border-radius: 0 8px 8px 0;
}
.floating-order-stats {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  text-transform: none;
  letter-spacing: 0;
}

/* 头部右侧：统计 + 取消/关闭按钮 */
.floating-order-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.floating-cancel-btn {
  flex-shrink: 0;
  border: 1px solid rgba(255, 77, 79, 0.5);
  background: rgba(255, 77, 79, 0.12);
  color: #ff7875;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.floating-cancel-btn:hover {
  background: rgba(255, 77, 79, 0.22);
  border-color: rgba(255, 77, 79, 0.8);
}
.floating-cancel-dismiss {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.65);
  padding: 4px 8px;
}
.floating-cancel-dismiss:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 每个文件的进度行 — 复用图二风格 */
.floating-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
  margin-bottom: 2px;
}

.floating-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.floating-file-name {
  width: 160px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-file-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.floating-file-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1677ff, #4096ff);
  border-radius: 3px;
  transition: width 0.25s ease;
  position: relative;
}

.floating-file-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: floating-shine 2s ease-in-out infinite;
}

@keyframes floating-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.floating-file-pct {
  width: 38px;
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.floating-file-item.done .floating-file-pct {
  color: #52c41a;
}

.floating-file-item.done .floating-file-bar-fill {
  background: linear-gradient(90deg, #52c41a, #73d13d);
}

.floating-file-item.done .floating-file-bar-fill::after {
  animation: none;
}

.floating-file-item.error .floating-file-pct {
  color: #ff4d4f;
}

.floating-file-item.error .floating-file-bar-fill {
  background: #ff4d4f;
}

.floating-file-item.error .floating-file-bar-fill::after {
  animation: none;
}

/* 已取消（保留已传）：灰色 + ✕ */
.floating-file-item.canceled .floating-file-pct {
  color: rgba(255, 255, 255, 0.4);
}
.floating-file-item.canceled .floating-file-bar-fill {
  background: rgba(255, 255, 255, 0.18);
}
.floating-file-item.canceled .floating-file-bar-fill::after {
  animation: none;
}
.floating-file-item.canceled .floating-file-name {
  color: rgba(255, 255, 255, 0.4);
}

/* 最小化状态 */
.upload-floating-bar.minimized {
  max-height: 48px;
}

.upload-floating-bar.minimized .floating-bar-body {
  display: none;
}

/* ---------- 拖拽上传区（紧凑版） ---------- */
.upload-drop-zone {
  margin: 16px 20px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(255, 255, 255, 0.12);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: rgba(255, 255, 255, 0.03);
}

.upload-drop-zone:hover {
  border-color: var(--primary-light);
  background: rgba(14, 165, 233, 0.06);
}

.upload-drop-zone.dragover {
  border-color: var(--primary);
  background: rgba(14, 165, 233, 0.1);
  transform: scale(1.01);
}

.upload-drop-zone img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.5;
  margin-bottom: 4px;
}

.upload-drop-zone p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0;
}

.upload-drop-zone p:last-child {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- 照片网格区 ---------- */
/* ---------- 照片滚动层（拖拽区 + 网格整体滚动，拖拽区随滚动消失） ---------- */
.photo-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
  /* 自定义美化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.photo-scroll::-webkit-scrollbar {
  width: 6px;
}

.photo-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.photo-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.photo-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- 照片网格区（不再自行滚动，作为 .photo-scroll 内的普通流） ---------- */
.photo-area {
  padding: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}


/* 照片网格布局 - 响应式自适应 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
}

/* 720P及以下：6张/行 */
@media (max-width: 1366px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .upload-drop-zone {
    margin: 12px 20px;
  }
}

/* 2K：10张/行 */
@media (min-width: 1921px) and (max-width: 2560px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* 4K及以上：12张/行 */
@media (min-width: 2561px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
  }
}

/* 照片项 */
.photo-item {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  /* 毛玻璃照片卡片 */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all var(--transition-bounce);
}

.photo-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.photo-item.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.5), 0 8px 24px rgba(14, 165, 233, 0.2);
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.photo-item:hover img {
  transform: scale(1.08);
}

/* 照片左上角复选框 */
.photo-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.photo-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  backdrop-filter: blur(4px);
}

.photo-check input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
}

.photo-check input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.photo-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 照片悬浮操作层：底部横排居中 */
.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  padding: 8px 8px 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity var(--transition-fast);
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.photo-item:hover .photo-overlay {
  opacity: 1;
}

.photo-overlay button {
  pointer-events: auto;
}

.photo-action-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
}

.photo-action-btn:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-2px);
}

.photo-action-btn svg {
  width: 20px;
  height: 20px;
}

.photo-action-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* 双面打印套号角标：淘宝主图式斜向缎带，置于右上角（正/背面共用同一背景，靠字母+正/反文字区分） */
.set-ribbon {
  position: absolute;
  top: 6px;
  right: -40px;
  width: 120px;
  padding: 4px 0;
  transform: rotate(45deg);
  transform-origin: center;
  z-index: 5;
  background: #7C5CFC;            /* 电光紫，正/背面共用 */
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* 双面模板漏传背面图：订单级红色提示横幅 */
/* 2026-09-05 用户反馈误报干扰，已改为照片网格右上角「双」标识，故此横幅强制隐藏 */
.back-warning-banner {
  display: none !important;
  margin: 0 0 14px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 600;
  color: #ffe3e3;
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.55);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18);
}

/* 顾客上传按钮：禁用态（无顾客照片）— 浅灰 */
#btn-customer-photos:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* 顾客上传按钮：有照片但未点击查看 — 浅白常态 */
#btn-customer-photos:not(:disabled):not(.customer-active) {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #e8eaed !important;
  box-shadow: none !important;
}
#btn-customer-photos:not(:disabled):not(.customer-active):hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
}

/* 顾客上传按钮：激活态（正在查看顾客照片）— 蓝色高亮 */
#btn-customer-photos.customer-active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 1), rgba(2, 132, 199, 1)) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* 顾客上传按钮：文字垂直居中修复（emoji+span基线对齐） */
#btn-customer-photos {
  line-height: 32px;
}
#btn-customer-photos #customer-count {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* 预览弹窗底部控制栏：所有按钮横向紧凑排列 */
.preview-info {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2002;
  user-select: none;
}

.preview-counter {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 6px;
}

/* 预览弹窗底部按钮：半透明磨砂天蓝 */
.preview-info-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.45);
  background: rgba(14, 165, 233, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.preview-info-btn:hover {
  background: rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}

.preview-info-btn.active {
  background: rgba(14, 165, 233, 0.6);
}

/* 预览弹窗底部下载按钮（半透明磨砂天蓝） */
.preview-dl-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(14, 165, 233, 0.45);
  background: rgba(14, 165, 233, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}

.preview-dl-btn:hover {
  background: rgba(14, 165, 233, 0.5);
  transform: translateY(-1px);
}

/* 预览图片：缩放+平移过渡，不可选中/拖拽 */
#preview-img {
  height: auto;
  max-width: min(1200px, 96vw);
  max-height: 90vh;
  object-fit: contain;
  transition: transform 0.15s ease, opacity 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   六、空状态与加载状态
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  flex: 1;
  min-height: 0;
}

.empty-state img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.3;
  margin-bottom: 16px;
}

.empty-state .title {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}

.empty-state .desc {
  font-size: 15px;
  color: var(--text-muted);
}

/* 加载动画 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.loading-dots {
  display: flex;
  gap: 6px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-light);
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-state .text {
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================================================
   七、Toast 提示（毛玻璃风格）
   ============================================================ */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  padding: 12px 22px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 20000;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 毛玻璃Toast */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* 图标样式 */
.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.toast-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.toast-text {
  flex: 1;
  line-height: 1.4;
}

.toast.success {
  background: #10B981;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.toast.error {
  background: rgba(239, 68, 68, 0.95);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.toast.warning {
  background: rgba(251, 191, 36, 0.95);
  color: #1F2937;
}

.toast.info {
  background: rgba(59, 130, 246, 0.95);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   八、Loading 全屏遮罩
   ============================================================ */
#loading-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 30, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

#loading-overlay .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   九、弹窗系统（毛玻璃风格）
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
  width: min(480px, 92vw);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  padding: 24px;
  /* 毛玻璃弹窗内容 */
  background: rgba(30, 25, 60, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

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

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header h3 img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

/* 弹窗关闭按钮（小型 × 按钮，用于下载进度弹窗等） */
.modal-close-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}
.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

/* 弹窗底部操作区 */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 弹窗按钮基础样式 */
.btn-primary, .btn-secondary, .btn-danger {
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(2, 132, 199, 0.9));
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
.btn-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

/* ---------- 表单组件 ---------- */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  /* 毛玻璃表单输入 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.form-group input:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* 自定义下拉框：完全替代原生 select，与深色弹窗风格统一 */
.custom-select {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.custom-select-trigger {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 14px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}

.custom-select-trigger:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}

.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  background: rgba(30, 24, 56, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 6px 0;
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-option {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.custom-select-option.active {
  color: var(--primary-light);
  background: rgba(14, 165, 233, 0.12);
}

.custom-select-option.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.custom-select-option.disabled:hover {
  background: transparent;
}

.custom-select[data-empty="true"] .custom-select-trigger {
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-group textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.form-group textarea:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.form-group label .required { color: #F87171; margin-left: 2px; }
.form-group label .optional { color: var(--text-muted); font-weight: 400; font-size: 12px; }

/* 表单字段 label 行：左侧标题 + 右侧可点击的跳转链接（如「+ 拍摄套餐库」） */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
a.field-jump, .field-jump {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #0EA5E9;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  margin-right: 12px;
}
.pkg-lib-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
a.field-jump:hover, .field-jump:hover { color: #38bdf8; text-decoration: underline; }
/* 客源渠道 label 右侧：灰色文字（设计稿风格，区别于胶囊按钮） */
.field-jump.field-jump-text { color: rgba(255, 255, 255, 0.45); margin-right: 0; }
.field-jump.field-jump-text:hover { color: rgba(255, 255, 255, 0.72); text-decoration: none; }

/* 表单字段 label 右侧胶囊按钮（拍摄套餐库入口，设计稿风格） */
a.field-jump.pill, .field-jump.pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 0;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #38bdf8;
}
a.field-jump.pill:hover, .field-jump.pill:hover { background: rgba(14, 165, 233, 0.22); color: #7dd3fc; text-decoration: none; }

/* 编辑顾客信息弹窗：标题栏右侧按钮组（标记作废 + 关闭） */
.modal-content-order .modal-header-actions { display: flex; align-items: center; gap: 10px; }
.btn-archive-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #F87171;
  background: none;
  border: none;
  white-space: nowrap;
}
.btn-archive-top:hover { color: #FCA5A5; }
/* 已作废订单：右上角按钮切换为恢复态（中性琥珀色） */
.btn-archive-top.is-restore { color: #FBBF24; }
.btn-archive-top.is-restore:hover { color: #FCD34D; }

/* 新建订单 / 编辑顾客弹窗（方案C：深色头部 + 浅色内容区，仅作用于订单类弹窗） */
/* 新建订单 / 编辑顾客 / 拍摄套餐库 弹窗（全深色统一风格，与品牌中心 .brand-modal-panel 一致） */
/* ===== 新建/编辑订单弹窗：Framer 极简黑卡风格（真实样式对标） ===== */
.modal-content-order {
  /* width 由具体弹窗控制，不再固定 540px */
  max-width: 92vw;
  /* 不再设 max-height/height——让内容自然决定高度 */
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 基础深色弹窗（编辑/新建订单共用，编辑弹窗不再叠加玻璃光效） */
  background: rgba(17, 19, 38, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  padding: 0;
}

/* 头部：固定顶部 */
.modal-content-order .modal-header {
  flex-shrink: 0;
  margin: 0;
  padding: 16px 24px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* 中间内容区：自然高度，超长时才滚动 */
.modal-content-order .modal-body {
  flex: 0 1 auto; /* 不强制撑满，由内容决定高度 */
  min-height: 0;
  overflow-y: auto;
  max-height: calc(85vh - 120px); /* 减去 header+actions 的预估高度，超长内容在此滚动 */
  padding: 20px 24px 0;
}

/* 底部操作区：固定底部 */
.modal-content-order .modal-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 6px 24px 8px;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 中间滚动条：细、暗色、贴边 */
.modal-content-order .modal-body::-webkit-scrollbar { width: 5px; }
.modal-content-order .modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-content-order .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.modal-content-order .modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }
.modal-content-order .modal-header h3 {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
}
.modal-content-order .modal-header h3 .icon,
.modal-content-order .modal-header h3 .confirm-title-icon {
  width: 20px; height: 20px;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}
.modal-content-order .modal-header h3 .modal-order-no {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.42);
  vertical-align: middle;
}
.modal-content-order .modal-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
}
.modal-content-order .modal-close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* 经营分析弹窗：屏幕自适应
   高度完全由视口决定(不要 min-height 兜底,否则小视口撑爆) */
#biz-modal-box {
  width: clamp(880px, 96vw, 1480px);
  max-width: calc(100vw - 48px);
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  align-self: center;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 32px;
  border: none; /* 覆盖 .modal-content-order 的 1px 浅边,使用 ::before 渐变描边 */
  background:
    linear-gradient(180deg, rgba(22, 20, 40, 0.97) 0%, rgba(16, 14, 32, 0.99) 100%);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
/* 渐变描边：上下方向(垂直)渐变,::before + mask 复合实现带圆角的渐变边框,无光晕 */
#biz-modal-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  padding: 1.5px;
  background: linear-gradient(180deg,
    #5274F3 0%,
    #2C2C36 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* 内容层在描边之上 */
#biz-modal-box > * { position: relative; z-index: 2; }
#biz-modal-box .modal-header,
#biz-modal-box .page-title-row,
#biz-modal-box .biz-stats-filter-row {
  flex-shrink: 0;
}
/* 注意:不要 display:flex + flex-direction:column,会导致 flex 容器内的
   overflow-y:auto 在某些情况下失效(scrollHeight 算不对,内容直接溢出)
   改为普通 block 容器,内容按文档流自然排版
   同时覆盖 .modal-content-order 的 max-height 限制 —— 否则经营分析被卡在
   calc(85vh - 120px) 高度内,内部表格被压扁成空白 */
#biz-modal-box .modal-body {
  padding: 16px 24px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
#biz-modal-box .modal-actions {
  flex-shrink: 0; /* 固定高度下保存按钮始终贴底 */
}
#biz-modal-box .page-title {
  font-size: 18px;
}
#biz-modal-box .metric-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
#biz-modal-box .metric-card {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
}
#biz-modal-box .metric-card .m-value {
  font-size: 26px;
}
#biz-modal-box .chart-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  margin-bottom: 0;
}
#biz-modal-box .chart-card h4 {
  font-size: 14px;
  margin: 0 0 10px;
}
/* 仪表盘网格：客源/套餐/时段/新客老客 2列并排，锁定卡整宽
   进阶版可能 2x2（4 卡），行高由内容决定（不让 SVG 被拉伸/压缩） */
#biz-modal-box .biz-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
  flex: 0 0 auto;
}
#biz-modal-box .biz-dash .chart-card.wide,
#biz-modal-box .biz-dash .wide {
  grid-column: 1 / -1;
}
/* 图表卡片内部：自然高度流式排列，让 SVG 按 width 100% + height auto 自然显示
   卡片加高到 460px，让柱状图 + 排行表都能完整显示（之前 340 太矮只露 1 行） */
#biz-modal-box .biz-dash > .chart-card { display: flex; flex-direction: column; max-height: 460px; overflow: hidden; }
#biz-modal-box .biz-dash > .chart-card > h4 { flex: 0 0 auto; }
/* 限制图表最大高度，避免 SVG 过高占用弹窗空间 */
#biz-modal-box .biz-dash > .chart-card > .chart-wrap {
  flex: 0 0 auto;
  max-height: 200px;
  overflow: hidden;
}
#biz-modal-box .biz-dash > .chart-card > .chart-wrap svg {
  display: block;
  margin: 0 auto;
}
/* rank-table 内部可滚动，避免数据多时把图表卡撑高挤掉订单表格
   加高到 200px 让前 5-7 个套餐完整展示出来 */
#biz-modal-box .biz-dash > .chart-card > .rank-table {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 8px;
}
#biz-modal-box .biz-dash > .chart-card > .rank-table thead,
#biz-modal-box .biz-dash > .chart-card > .rank-table tbody,
#biz-modal-box .biz-dash > .chart-card > .rank-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#biz-modal-box .biz-dash > .chart-card > .donut-wrap {
  align-items: center;
}
/* 锁定卡：品牌蓝描边 + 轻浮起，替代刺眼占位 */
#biz-modal-box .locked-card {
  min-height: 200px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.06);
}

/* ========== 经营分析：订单明细表格 ========== */
/* 表格容器占满弹窗剩余高度,内部独立滚动
   注意:这里不继承 .chart-card 样式,避免 padding/background 抢走 wrap 空间 */
#biz-modal-box .biz-tbl-card {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
#biz-modal-box .biz-tbl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#biz-modal-box .biz-tbl-head h4 { margin: 0; font-size: 14px; }
#biz-modal-box .biz-tbl-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
#biz-modal-box .biz-tbl-sub b {
  color: #fff;
  font-weight: 600;
  margin: 0 2px;
}
#biz-modal-box .biz-tbl-wrap {
  max-height: 360px; /* 卡片高度固定,内部独立滚动展示全部订单 */
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
#biz-modal-box .biz-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#biz-modal-box .biz-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(20, 18, 45, 0.95);
  backdrop-filter: blur(6px);
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
#biz-modal-box .biz-tbl tbody td {
  padding: 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
#biz-modal-box .biz-tbl tbody tr:last-child td { border-bottom: 0; }
#biz-modal-box .biz-tbl tbody tr:hover td { background: rgba(14, 165, 233, 0.05); }
#biz-modal-box .biz-tbl-row.archived td { color: rgba(255, 255, 255, 0.4); }
#biz-modal-box .biz-tbl-row.archived .biz-tbl-amt-val { text-decoration: line-through; }
#biz-modal-box .biz-tbl-th-time,
#biz-modal-box .biz-tbl-time { width: 110px; }
#biz-modal-box .biz-tbl-th-amt,
#biz-modal-box .biz-tbl-amt { width: 130px; }
#biz-modal-box .biz-tbl-th-num,
#biz-modal-box .biz-tbl-num { width: 70px; text-align: right; }
#biz-modal-box .biz-tbl-th-act { width: 70px; text-align: right; }
#biz-modal-box .biz-tbl-amt {
  display: flex;
  align-items: center;
  gap: 8px;
}
#biz-modal-box .biz-tbl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#biz-modal-box .biz-tbl-dot.ok { background: #5AD8A6; box-shadow: 0 0 6px rgba(90, 216, 166, 0.5); }
#biz-modal-box .biz-tbl-amt-val { font-weight: 600; }
#biz-modal-box .biz-tbl-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
#biz-modal-box .biz-tbl-tag.gray {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
}
#biz-modal-box .biz-tbl-tag.src {
  background: rgba(91, 143, 249, 0.15);
  color: #93b4ff;
}
#biz-modal-box .biz-tbl-act {
  background: transparent;
  border: 1px solid rgba(14, 165, 233, 0.4);
  color: #7dd3fc;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
#biz-modal-box .biz-tbl-act:hover {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.7);
  color: #bae6fd;
}
#biz-modal-box .biz-tbl-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
  gap: 8px;
}
#biz-modal-box .biz-tbl-more b {
  color: #fff;
  font-weight: 600;
  margin: 0 2px;
}
#biz-modal-box .btn-link {
  background: transparent;
  border: 0;
  color: #7dd3fc;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
#biz-modal-box .btn-link:hover { background: rgba(14, 165, 233, 0.1); color: #bae6fd; }

/* 经营分析：顶部控件(标题 + 时段/作废) + 底部说明 */
.biz-stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.biz-stats-title .page-title { margin: 0 0 2px; }
.biz-stats-title .page-sub { margin: 0; }
.biz-stats-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.biz-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.biz-archived-toggle input { width: 15px; height: 15px; accent-color: #0ea5e9; cursor: pointer; }
.biz-export-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.custom-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.custom-date-range input[type="date"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  color-scheme: dark;
}
.biz-stats-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
}
.biz-legend-note {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}
.biz-legend-note span { display: inline-flex; align-items: center; gap: 6px; }
.bl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.bl-green { background: #34c759; }
.bl-orange { background: #ff9f0a; }
.bl-gray { background: #828896; }
.biz-export-btn { white-space: nowrap; }

/* 指标卡同比涨跌 */
.m-delta { margin-top: 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-delta.up { color: #34c759; }
.m-delta.down { color: #ff453a; }

/* 排行表格 */
.rank-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.rank-table th {
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.rank-table td {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.rank-table tbody tr:last-child td { border-bottom: none; }
.rank-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* 进阶版锁定占位卡 */
.locked-card { position: relative; min-height: 220px; overflow: hidden; }
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(15, 20, 40, 0.55);
}
.lock-icon { font-size: 34px; }
.lock-text { font-size: 14px; color: var(--text-secondary); text-align: center; padding: 0 20px; }

/* 副标题（编辑顾客弹窗） */
.modal-content-order .modal-subtitle { color: rgba(255, 255, 255, 0.6); }

/* 分区小标题（如编辑弹窗）：白字降透明度 + 蓝渐变竖条 */
.modal-content-order .form-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 16px;
}
.modal-content-order .form-section-title::before {
  content: "";
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #0EA5E9, #6366F1);
}
.modal-content-order .form-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
}

/* 标签：玻璃底上恢复可读对比度 */
.modal-content-order .form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.75);
}
.modal-content-order .form-group label .optional { color: rgba(255, 255, 255, 0.5); }

/* 输入框 / 下拉 / 金额：玻璃底上用深色底+白边框，避免融进背景 */
.modal-content-order input[type="text"],
.modal-content-order input[type="tel"],
.modal-content-order input[type="number"],
.modal-content-order input[type="password"],
.modal-content-order input[type="email"],
.modal-content-order input[type="url"],
.modal-content-order .form-group input,
.modal-content-order .amount-input-wrap input,
.modal-content-order .custom-select-trigger {
  width: 100%;
  height: 46px;
  background: rgba(10, 12, 22, 0.95);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.4;
  transition: all .3s cubic-bezier(.44, 0, .56, 1);
}
.modal-content-order input[type="text"],
.modal-content-order input[type="tel"],
.modal-content-order input[type="number"],
.modal-content-order input[type="password"],
.modal-content-order input[type="email"],
.modal-content-order input[type="url"],
.modal-content-order .form-group input,
.modal-content-order .amount-input-wrap input {
  padding: 12px 14px;
}
.modal-content-order .custom-select-trigger {
  padding: 0 38px 0 14px;
}
.modal-content-order .amount-input-wrap .amount-prefix { color: rgba(255, 255, 255, 0.6); }
.modal-content-order textarea,
.modal-content-order textarea.remark-compact {
  width: 100%;
  padding: 12px 14px;
  background: rgba(10, 12, 22, 0.95);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  transition: all .3s cubic-bezier(.44, 0, .56, 1);
}
.modal-content-order textarea.remark-compact {
  height: 42px;
  min-height: 42px;
  padding: 10px 14px;
  resize: none;
  line-height: 1.4;
}

/* 占位符：深色底上保持可读 */
.modal-content-order input::placeholder,
.modal-content-order textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* 聚焦：Framer 蓝色光晕 */
.modal-content-order input[type="text"]:focus,
.modal-content-order input[type="tel"]:focus,
.modal-content-order input[type="number"]:focus,
.modal-content-order input[type="password"]:focus,
.modal-content-order input[type="email"]:focus,
.modal-content-order input[type="url"]:focus,
.modal-content-order .form-group input:focus,
.modal-content-order .amount-input-wrap input:focus,
.modal-content-order .custom-select-trigger:focus-within,
.modal-content-order textarea:focus {
  border-color: rgba(0, 153, 255, 0.8);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.18);
  outline: none;
}

/* 字段间距：Framer 分组感（label↔input 8px，字段间 20px） */
.modal-content-order .form-group { margin-bottom: 20px; }
.modal-content-order .form-row { gap: 14px; }

/* 下拉选项弹层：套用同款玻璃磨砂 */
.modal-content-order .custom-select-options {
  background: rgba(20, 22, 50, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.modal-content-order .custom-select-option {
  color: rgba(255, 255, 255, 0.85);
}
.modal-content-order .custom-select-option:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* 订单号徽章：深色 */
.modal-content-order .order-no-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
}

/* 提示文字 / 表单分隔 */
.modal-content-order .form-tip { color: rgba(255, 255, 255, 0.55); }
.modal-content-order .form-divider { background: rgba(255, 255, 255, 0.08); }

/* 订单关联模板「入口容器」：套用弹窗 input 风格（与"请选择拍摄套餐"完全一致），按钮内嵌右侧 */
.modal-content-order .tpl-entry,
.modal-content-order .form-group .tpl-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 8px 0 14px;
  background: rgba(10, 12, 22, 0.95);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  transition: border-color .3s, box-shadow .3s;
}
.modal-content-order .tpl-entry:hover { border-color: rgba(255, 255, 255, 0.22); }
.modal-content-order .tpl-entry-info {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);          /* placeholder 同色 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-content-order .tpl-entry-info.has-value { color: rgba(255, 255, 255, 0.92); }
.modal-content-order .tpl-entry-info.tpl-entry-none { color: #FBBF24; }
.tpl-entry-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.95));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s;
}
.tpl-entry-btn:hover { filter: brightness(1.12); }

/* 订单关联模板「多选」组件（单行列表式，用于子弹窗内） */
.tpl-multiselect {
  padding: 4px 0 0;
}
.tpl-multiselect-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tpl-ms-search { margin: 0 0 10px; }
.tpl-ms-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 12px 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 12, 22, 0.95);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  outline: none;
  transition: all .3s cubic-bezier(.44, 0, .56, 1);
}
.tpl-ms-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.tpl-ms-search-input:focus { border-color: #0EA5E9; background: rgba(14, 165, 233, 0.08); }
.tpl-ms-count { color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.tpl-ms-count b { color: #38BDF8; font-weight: 700; }
.tpl-ms-actions { display: flex; gap: 12px; }
.tpl-ms-link { color: rgba(255, 255, 255, 0.5); font-size: 12px; cursor: pointer; text-decoration: none; }
.tpl-ms-link:hover { color: #38BDF8; }
.tpl-multiselect-list {
  height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpl-ms-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.4;
  transition: background 0.15s;
}
.tpl-ms-item:hover { background: rgba(255, 255, 255, 0.06); }
.tpl-ms-item.is-checked { background: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.35); }
.tpl-ms-item.is-checked .tpl-ms-name { color: #fff; }
/* 覆盖弹窗内 .form-group input 对 checkbox 的统一样式 */
.modal-content-order .form-group .tpl-multiselect input[type="checkbox"].tpl-ms-check,
.modal-content-order .tpl-ms-check {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  display: inline-block;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
}
.tpl-ms-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.tpl-ms-check:hover { border-color: rgba(255, 255, 255, 0.55); }
.tpl-ms-check:checked {
  background: #0EA5E9;
  border-color: #0EA5E9;
}
.tpl-ms-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tpl-ms-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  position: relative;
}
.tpl-ms-cover-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.tpl-ms-cover-grad {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  text-align: center;
  z-index: 1;
  border-radius: 8px;
}
.tpl-ms-cover-en {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpl-ms-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
}
.tpl-ms-cover--empty { color: rgba(255, 255, 255, 0.35); }
/* 订单卡片：关联模板计数标签 */
.tpl-count-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.10);
  color: #7DD3FC;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid rgba(14, 165, 233, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.tpl-count-tag--none {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.14);
}
/* 按钮样式 */
.modal-content-order .admin-btn { height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 600; letter-spacing: 0.3px; }
.modal-content-order .admin-btn-primary {
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  border-color: rgba(2,132,199,0.4);
  color: #fff;
  box-shadow: 0 6px 18px rgba(14,165,233,0.35);
  border-radius: 12px;
  padding: 0 24px;
  font-size: 14px;
  letter-spacing: 0.5px;
}
/* 单按钮时保持大胶囊居中（如新建订单） */
.modal-content-order .modal-actions .admin-btn-primary:only-child {
  border-radius: 999px;
  padding: 0 44px;
}
.modal-content-order .modal-actions.modal-actions--right {
  justify-content: center;
}
.modal-content-order .admin-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14,165,233,0.5);
}
.modal-content-order .admin-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}
.modal-content-order .admin-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* 二次确认弹窗按钮：复用订单弹窗的 pill 胶囊样式（与"复制订单号"/"下载提取码"视觉一致） */
.modal-confirm-dialog .confirm-actions .admin-btn { height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 600; letter-spacing: 0.3px; }
.modal-confirm-dialog .confirm-actions .admin-btn-primary {
  background: linear-gradient(135deg, #0EA5E9, #0284C7);
  border-color: rgba(2,132,199,0.4);
  color: #fff;
  box-shadow: 0 6px 18px rgba(14,165,233,0.35);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.modal-confirm-dialog .confirm-actions .admin-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14,165,233,0.5);
}
.modal-confirm-dialog .confirm-actions .admin-btn-ghost {
  /* 与 .qrcode-actions "下载提取码" 一致：细描边 + 几乎透明背景 */
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.modal-confirm-dialog .confirm-actions .admin-btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 细滚动条（深色） */
.modal-content-order::-webkit-scrollbar { width: 6px; }
.modal-content-order::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.modal-content-order::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ========== 确认弹窗（showConfirm）专用样式 ========== */
.modal-confirm-dialog {
  width: 480px;
  max-width: 92vw;
  border-radius: 30px;
  padding: 28px;
  /* 与 .modal-content-order 统一：深色磨砂玻璃 */
  background: rgba(18, 20, 46, 0.82);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.modal-confirm-dialog .confirm-body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.modal-confirm-dialog .confirm-body.confirm-body-icon {
  padding-left: 0;
}
.modal-confirm-dialog .modal-header h3 {
  padding-left: 16px;
}
.modal-confirm-dialog .confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ========== 升级公告弹窗（顾客自助拼图排版上线） ========== */
/* 升级公告弹窗：浅色 Apple 风格（白卡片 + 深绿点缀） */
#upgrade-modal-overlay.modal-overlay {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.upgrade-modal-content {
  width: min(460px, 92vw);
  border-radius: 24px;
  padding: 30px 30px 24px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  color: #111827;
  text-align: left;
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.upgrade-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  margin-bottom: 16px;
}
.upgrade-modal-badge .ver {
  color: #6b7280;
  font-weight: 500;
}
.upgrade-modal-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #111827;
}
.upgrade-modal-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 20px;
  line-height: 1.6;
}
.upgrade-modal-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upgrade-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #374151;
}
.upgrade-modal-list li .dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.upgrade-modal-gotemplate {
  width: 100%;
  height: 46px;
  margin-bottom: 12px;
  border: none;
  border-radius: 12px;
  background: #0f766e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.upgrade-modal-gotemplate:hover { background: #115e59; }
.upgrade-modal-ok {
  width: 100%;
  height: 44px;
  border: 1px solid #0f766e;
  border-radius: 12px;
  background: #fff;
  color: #0f766e;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.upgrade-modal-ok:hover { background: #ecfdf5; }
.upgrade-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.upgrade-modal-never {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.upgrade-modal-never input { accent-color: #0f766e; cursor: pointer; }
.upgrade-modal-hint {
  font-size: 12px;
  color: #9ca3af;
}

/* 危险操作按钮（删除等） */
.admin-btn-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fff;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
.admin-btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #F87171, #EF4444);
  box-shadow: 0 8px 26px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}
.admin-btn-danger:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.form-section { margin-bottom: 4px; }
.form-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0 18px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-row .form-group { margin-bottom: 14px; }
.order-no-preview .order-no-badge {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.amount-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.amount-input-wrap .amount-prefix {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}
.amount-input-wrap input {
  padding-left: 28px !important;
}
.form-tip {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
/* 模板字段下方的黄色小字提示（小程序内顾客自助拼图/排版） */
.tpl-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #FFC247;
  line-height: 1.5;
}
.tpl-hint-inline {
  margin-left: 8px;
  font-size: 12px;
  color: #FFC247;
  font-weight: normal;
}
.modal-subtitle {
  margin: -8px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 拍摄套餐库 */
.pkg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; overflow-y: auto; }
/* 经营分析弹窗内套餐库：撑满剩余空间，不浪费 */
#biz-modal-box .pkg-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  gap: 14px;
}
#biz-modal-box .pkg-row input {
  height: 46px;
}
.pkg-row {
  display: grid;
  grid-template-columns: 1fr 140px 36px;
  gap: 12px;
  align-items: center;
}
.pkg-row input {
  height: 40px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.pkg-row input:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
}
.pkg-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.pkg-price-wrap:focus-within {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.1);
}
.pkg-price-wrap span { color: var(--text-muted); font-size: 13px; }
.pkg-row .pkg-price-wrap input.pkg-price {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}
.pkg-row .pkg-price-wrap input.pkg-price:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  outline: none;
}
.pkg-delete {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #F87171;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pkg-delete:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); }

/* 下载设置弹窗：统一圆角 + 底部双按钮等分铺满 */
.modal-content-download {
  border-radius: 30px;
}
.modal-content-download .modal-header {
  border-radius: 30px 30px 0 0;
}
.modal-content-download .modal-body {
  padding-bottom: 16px;
}
.modal-content-download .brand-input {
  border-radius: 12px;
}
.modal-content-download .btn-download-picker {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.modal-content-download .btn-download-picker:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.92);
}
.modal-content-download .modal-actions {
  padding: 16px 24px 20px;
  gap: 12px;
}
.modal-content-download .modal-actions button {
  flex: 1 1 0;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
/* 取消：对齐基准 .btn-secondary */
.modal-content-download .modal-actions .btn-download-cancel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}
.modal-content-download .modal-actions .btn-download-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
/* 保存设置：对齐基准 .btn-primary（复制订单号按钮同款） */
.modal-content-download .modal-actions .btn-download-save {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(2, 132, 199, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.modal-content-download .modal-actions .btn-download-save:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 1), rgba(2, 132, 199, 1));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5);
}
.modal-content-download .modal-actions .btn-download-save:focus,
.modal-content-download .modal-actions .btn-download-save:focus-visible,
.modal-content-download .modal-actions .btn-download-save:active {
  outline: none;
  box-shadow: none;
}

/* 店铺工具弹窗：底部「下载二维码」按钮（居中，暗调品牌蓝，12px 圆角） */
.modal-content-order .modal-actions.modal-actions--center {
  justify-content: center;
  padding: 12px 24px 14px;
}
.modal-content-order .modal-actions.modal-actions--center .tools-download-btn {
  padding: 8px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-content-order .modal-actions.modal-actions--center .tools-download-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}
.modal-content-order .modal-actions.modal-actions--center .tools-download-btn:focus,
.modal-content-order .modal-actions.modal-actions--center .tools-download-btn:focus-visible,
.modal-content-order .modal-actions.modal-actions--center .tools-download-btn:active {
  outline: none;
  box-shadow: none;
}

/* 店铺工具弹窗：新手引导入口（从下载设置弹窗迁移过来） */
.modal-content-order .tools-guide-row {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.modal-content-order .tools-guide-link {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  border-radius: 12px;
  transition: color 0.2s ease;
}
.modal-content-order .tools-guide-link:hover {
  color: rgba(255, 255, 255, 0.60);
}
.modal-content-order .tools-guide-link:focus,
.modal-content-order .tools-guide-link:focus-visible,
.modal-content-order .tools-guide-link:active {
  outline: none;
  box-shadow: none;
}

/* 门店设置弹窗底部按钮：与小程序提取码弹窗按钮统一样式 + 居中位置 */
.modal-content-order .modal-actions.shop-brand-actions {
  justify-content: center;
  gap: 10px;
  padding: 12px 24px 14px;
}

/* 编辑顾客信息弹窗底部按钮：与小程序提取码弹窗按钮统一样式 + 居中位置 */
.modal-content-order .modal-actions.customer-edit-actions {
  justify-content: center;
  gap: 10px;
  padding: 12px 24px 14px;
}

/* 创建订单弹窗底部按钮：居中 */
.modal-content-order .modal-actions.create-order-actions {
  justify-content: center;
  padding: 12px 24px 14px;
}

/* 大号弹窗变体（经营分析 / 顾客档案）；头部固定，内容区内部滚动 */
.modal-content-lg {
  width: clamp(880px, 96vw, 1480px);
  max-width: calc(100vw - 48px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.modal-content-lg > .modal-header {
  margin-bottom: 0;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.modal-content-lg > .modal-header h3 { font-size: 17px; }
.modal-content-lg > .modal-header.biz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.biz-tabs { display: flex; align-items: center; gap: 6px; }
.biz-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.biz-tab:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); }
.biz-tab.active {
  color: #fff;
  background: rgba(14, 165, 233, 0.18);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.4);
}
.modal-content-lg .modal-body-scroll {
  padding: 22px 24px 26px;
  overflow-y: auto;
  flex: 1;
}

/* 信息卡片网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* ========== 头像区域 ========== */
.avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.avatar-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.15s ease;
}
.avatar-preview:hover {
  transform: scale(1.05);
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary, #0EA5E9);
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(30, 30, 46, 0.8);
}
.avatar-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avatar-hint span {
  font-size: 14px;
  color: var(--text, #CDD6F4);
}
.avatar-hint-sub {
  font-size: 12px !important;
  color: var(--text-muted, #6C7086) !important;
}

.info-card {
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-card label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.info-card .value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 弹窗底部操作按钮区 */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   十、照片预览弹窗
   ============================================================ */
.preview-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5, 5, 15, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.preview-modal img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.preview-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 2001;
}

.preview-close:hover {
  background: rgba(14, 165, 233, 0.5);
  transform: scale(1.1);
}

.preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(14, 165, 233, 0.45);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 2001;
}

.preview-nav:hover:not(:disabled) {
  background: rgba(14, 165, 233, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.preview-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.preview-nav.prev { left: 20px; }
.preview-nav.next { right: 20px; }


/* ============================================================
   十一、浏览器兼容性降级
   不支持 backdrop-filter 的浏览器使用实色背景替代
   ============================================================ */
@supports not (backdrop-filter: blur(1px)) {
  .admin-navbar {
    background: rgba(20, 18, 45, 0.95);
  }
  .admin-sidebar,
  .admin-main {
    background: rgba(30, 25, 60, 0.92);
  }
  .admin-dropdown {
    background: rgba(30, 25, 60, 0.98);
  }
  .modal-content {
    background: rgba(30, 25, 60, 0.95);
  }
  .toast {
    backdrop-filter: none;
  }
  .toast.success { background: #10B981; }
  .toast.error   { background: #EF4444; }
  .toast.warning { background: #FBC02D; }
  .toast.info    { background: #3B82F6; }
  .login-card {
    background: rgba(30, 25, 60, 0.92);
  }
  .captcha-modal {
    background: rgba(30, 25, 60, 0.95);
  }
}

/* ---------- 额外兜底：若 backdrop-filter 被系统/浏览器强制关闭 ---------- */
@media (prefers-reduced-transparency: reduce) {
  .admin-navbar { background: rgba(20, 18, 45, 0.95) !important; }
  .admin-sidebar,
  .admin-main { background: rgba(30, 25, 60, 0.92) !important; }
}

/* ============================================================
   十二、响应式适配
   ============================================================ */
@media (max-width: 1024px) and (pointer: coarse) {
  .admin-layout {
    gap: 0;
  }

  .admin-layout-row {
    flex-direction: column;
    gap: 12px;
  }

  .admin-sidebar {
    width: 100%;
    min-width: auto;
    height: 280px;
    min-height: 280px;
  }

  .order-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
  }

  .order-card {
    min-width: 220px;
    margin-bottom: 0;
  }

  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .upload-drop-zone {
    margin: 14px 20px;
  }
}

@media (max-width: 640px) {
  .photo-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .toolbar-left,
  .toolbar-right {
    justify-content: center;
  }

  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
  }

  .upload-drop-zone {
    margin: 12px 20px;
  }

  .modal-content {
    padding: 0;
  }
}

/* ===== 电脑竖屏 + 窄横窗（鼠标端）：还原桌面左右分栏，工具栏两行全可见；不影响宽横屏与手机端 =====
   命中条件二选一：① 鼠标 + 窗口竖向(宽<高) ② 鼠标 + 窗口宽 ≤1280px
   阈值取 1280px 的依据：左侧 sidebar 固定 280px 不参与压缩，右侧主区还要放下 9 按钮+订单号+上传+刷新，
   viewport 1240px 时主区仅剩约 930px 已装不下（订单号 span 被挤成两行遮挡按钮），故需在 1280px 就提前切两行方案 */
@media (pointer: fine) and (orientation: portrait),
       (pointer: fine) and (max-width: 1280px) {
  .admin-layout-row {
    flex-direction: row;
  }
  .admin-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: auto;
    max-height: none;
  }
  .order-list {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .order-card {
    width: auto;
    min-width: auto;
    margin-bottom: 8px;
  }

  /* 工具栏分两行（方案Ⅱ）：右组（上传+刷新）置顶独占一行右对齐；左组 7 个功能按钮 flex-wrap 自然换行排，保留带文字观感与横屏一致 */
  .photo-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-bottom: 10px;
  }
  .toolbar-right {
    order: -1;
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
  }
  .toolbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: visible;
  }
  .toolbar-left .admin-btn-sm {
    height: 36px;
    padding: 0 12px;
    flex-shrink: 0;
  }
  /* 订单号/引导文字：保留显示，但窄窗下不逐字竖排（单行省略号），避免占据工具栏高度 */
  .toolbar-order-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
  }
  /* 上传按钮保持带文字（与横屏观感一致） */
  #btn-upload {
    width: auto;
    height: 36px;
    padding: 0 16px;
    justify-content: center;
  }
  #btn-upload .btn-label { display: inline-block !important; }
}

/* 返回按钮 / 顶栏：默认隐藏，仅在手机端全屏详情时显示 */
.mobile-back-btn { display: none; }
.mobile-detail-header { display: none; }

/* ===== 手机端商家后台适配（全部在媒体查询内，不影响电脑端） ===== */
@media (max-width: 768px) and (pointer: coarse) {
  .admin-layout { padding: 10px; }
  .admin-layout-row { flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
  .admin-sidebar { width: 100%; min-width: auto; height: auto; max-height: none; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .order-list { flex: 1 1 auto; min-height: 0; display: block; overflow-y: auto; overflow-x: hidden; padding: 8px; }
  .order-card { width: 100%; min-width: auto; margin-bottom: 8px; }
  .admin-navbar { flex-wrap: wrap; }
}

@media (max-width: 640px) and (pointer: coarse) {
  .admin-navbar { padding: 10px 14px; gap: 8px; flex-wrap: nowrap; }
  .admin-navbar-brand { padding: 4px 8px; }
  .admin-navbar-brand span { display: none; }
  .admin-navbar-right { gap: 6px; }
  #nav-shop-name { display: none; }
  .admin-nav-btn { padding: 6px 10px; font-size: 13px; }

  /* 方案 A（用户 19:50 确认）：手机端 admin-sidebar 强制撑满全屏高度
     - admin-page / admin-layout 保持基础 100vh / 100%
     - admin-layout-row 继承 768px 的 flex: 1 1 auto（撑满父级）
     - order-list 继承 768px 的 flex: 1 1 auto（撑满 admin-sidebar 剩余）
     - 只需解锁 admin-sidebar 高度限制即可（去掉任何 max-height）
     - 订单少时 admin-sidebar 内部 order-list 下方会留空白（用户接受，外容器到屏幕底） */
  .admin-sidebar { max-height: none; height: 100%; background: #140e29; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* 主内容区默认隐藏，选中订单后全屏覆盖 */
  .admin-main {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    border-radius: 0;
    overflow-y: auto;
    padding: 0;
    /* 手机端用实色背景，去掉毛玻璃模糊，背景更干净 */
    background: #140e29;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .admin-main.mobile-open { display: flex; }

  /* 顶栏：仅手机端选中订单时显示，吸顶固定；返回图标 + 订单号并排（方案 A） */
  .admin-main.mobile-open .mobile-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 11px 16px;
    background: #120e26;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }
  .mobile-detail-header .mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    height: 34px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
  }
  .mobile-detail-header .mobile-back-btn svg { width: 16px; height: 16px; }
  .mobile-detail-header .toolbar-order-info {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-detail-header .toolbar-cust-name {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
  }

  /* 工具栏：手机端重新排布为清爽纵向结构（铁规矩：仅 pointer:coarse，不碰基础样式） */
  .photo-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-bottom: none;  /* 手机端用下方 .photo-area border-top 作分割线，避免基础 8% 透明线看不见 */
  }
  .btn-label { display: none; }       /* 工具图标默认隐藏文字 */
  .toolbar-divider { display: none; } /* 去掉竖向分割线 */

  /* 右侧块（上传 + 刷新）置顶，紧贴订单号顶栏下方 */
  .toolbar-right {
    order: -1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  /* 与下方 .toolbar-left 网格按钮统一 40px 高度（之前被内容撑高到 ~60px，视觉割裂） */
  #btn-upload {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1.2;
    width: auto;
  }
  #btn-upload .btn-label { display: inline-block !important; } /* 主按钮保留文字 */
  #btn-refresh {
    order: 3;
    flex: 0 0 46px;
    width: 46px;
    justify-content: center;
    padding: 0;
  }

  /* 左侧 7 个工具图标排成 4 列网格（4+3），均匀铺开为可点方块 */
  .toolbar-left {
    order: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
  }
  /* 修复图标网格按钮居中：基础 .admin-btn-sm height:32px + 全局 box-sizing:border-box，
     原 padding:12px 0 会被高度压缩，导致 16px svg 在过矮内容区里溢出偏左下。
     显式 height:40px + padding:0 让 svg 完美居中于方框（仅限 coarse 手机端，按用户反馈压缩） */
  .toolbar-left .admin-btn {
    width: 100%;
    height: 40px;
    padding: 0;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
  }
  /* 复制单号按钮：仅手机端显示（4+4 网格第8格），电脑端隐藏保持原样 */
  .mobile-only-btn { display: flex !important; }
  /* 桌面端专属按钮（如 toolbar-right 里的刷新）：手机端隐藏，避免与图标网格里的刷新重复 */
  .desktop-only-btn { display: none !important; }
  /* 电脑端订单号 span：手机端隐藏（手机端订单号在顶栏 #toolbar-info，避免重复一行） */
  .toolbar-order-info-pc { display: none !important; }

  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* 上传卡片已隐藏(需求9): 不再需要 .photo-scroll flex 居中;
     改为普通块流, 照片网格从顶部开始紧跟功能栏(20px 间距+分割线), 避免内容多时 flex center 溢出顶部被工具栏挡住 */
  .upload-drop-zone {
    display: none !important;   /* 手机端隐藏拖拽框：触屏无法拖入，仅保留工具栏"上传照片"按钮交互 */
  }
  /* 分割线固定在滚动容器顶部：滚动照片网格时分割线不跟着上滑（border 属于 .photo-scroll 容器本身，不随内部内容滚动） */
  .photo-scroll {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }
  .photo-area {
    flex-shrink: 0;
    padding-top: 20px;        /* 网格与固定分割线之间拉开 20px，避免卡片贴线 */
    padding-bottom: 20px;     /* 最后一排照片与容器底部边框保持距离 */
  }

  /* 弹窗全系手机端适配：居中显示(不撑满屏宽, 留屏边空白 + 内部 padding 让内容不贴边框); 去掉 min-width:320px 以免窄屏溢出偏左 */
  .modal-content { width: calc(100vw - 24px) !important; max-width: 380px !important; padding: 24px !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; }
  /* 弹窗内图片(二维码等) 自适应缩放：按容器宽缩放、取消写死 300px，避免窄屏撑出弹窗 */
  .modal-content img { width: auto !important; max-width: 100% !important; height: auto !important; }
  .modal-content-lg { width: auto !important; max-width: calc(100vw - 16px) !important; max-height: 92vh !important; }
  .brand-modal-panel { width: calc(100vw - 24px) !important; max-width: 460px !important; }
  .modal-content-order { width: calc(100vw - 24px) !important; max-width: 540px !important; }

  /* 确认弹窗：宽度自适应，不放大 */
  .modal-confirm-dialog {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    padding: 22px !important;
  }

  /* 弹窗遮罩：强制水平垂直居中（基础 flex center 在 mobile 端可能被某规则压住，!important 兜底） */
  .modal-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    inset: 0 !important;
  }

  /* 上传浮窗：手机端铺满屏幕宽（电脑端固定右下 440px 在 mobile 端溢出左侧；铁规矩仅改手机端） */
  .upload-floating-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 弹窗内表单单列 */
  .modal-content-order .form-row, .modal-content .form-row { flex-direction: column; }
  .modal-content-order .form-group, .modal-content .form-group { flex: 1 1 100%; width: 100% !important; }
}

/* ==================== 上传完成通知（毛玻璃风格，1秒自动消失） ==================== */
.upload-completion-notice {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  background: rgba(30, 30, 50, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* ==================== 个人信息侧边栏（品牌化功能） ==================== */
/* 侧边栏遮罩层 */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 30, 0.5);
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn 0.2s ease;
}

/* 侧边栏面板 */
.sidebar-panel {
  width: 420px;
  max-width: 90vw;
  height: 100%;
  background: rgba(25, 25, 50, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease;
  overflow: hidden;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 品牌中心「居中弹窗」（替代原右侧抽屉），复用 brand-sidebar-* 内部结构 */
.brand-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 30, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.brand-modal-panel {
  width: clamp(440px, 92vw, 720px);
  max-width: 92vw;
  max-height: 88vh;
  background: rgba(25, 25, 50, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 门店信息侧边栏头部（加brand前缀避免与订单列表侧边栏冲突） */
.brand-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 门店信息侧边栏内容区（可滚动） */
.brand-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* 门店信息侧边栏底部 */
.brand-sidebar-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 15, 35, 0.5);
}

.brand-sidebar-footer .admin-btn {
  flex: 1;
}

/* 品牌化分区 */
.brand-section {
  margin-bottom: 20px;
}

.brand-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* 门店编号固定值 */
.brand-value-id {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-light);
  letter-spacing: 2px;
}

/* 品牌化输入框 */
.brand-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.brand-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
  background: rgba(255, 255, 255, 0.10);
}

/* 免费版只读输入框样式 */
.brand-input.readonly {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: not-allowed;
}

.brand-input.readonly:focus {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* 字段提示（免费版升级提示） */
.field-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--primary);
  opacity: 0.8;
}

/* 品牌化分隔线 */
.brand-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 20px 0;
}

/* 头像上传区域 */
.avatar-upload-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 大号头像预览 */
.avatar-preview-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  background: #fff;
  /* 透明PNG头像背景纯白兜底，避免透出底层元素 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.avatar-preview-lg.editable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.avatar-preview-lg.editable:hover {
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.3);
  transform: scale(1.05);
}

.avatar-preview-lg.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(0.5);
}

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

/* 编辑角标 */
.avatar-edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  border: 2px solid rgba(25, 25, 50, 0.9);
}

/* 锁定角标（免费版） */
.avatar-lock-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: rgba(100, 100, 120, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid rgba(25, 25, 50, 0.9);
}

/* 头像提示文字 */
.avatar-hint {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.avatar-hint span {
  font-size: 13px;
  color: var(--text-secondary);
}

.avatar-hint-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.hint-disabled {
  color: var(--primary) !important;
  font-size: 12px !important;
  opacity: 0.8;
}

/* 专属小程序码区域 */
.qrcode-area {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  margin-bottom: 12px;
}

.qrcode-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.qrcode-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
  font-size: 14px;
}

/* 小程序码操作按钮 */
.qrcode-actions {
  display: flex;
  gap: 10px;
}

.qrcode-actions .admin-btn {
  flex: 1;
  font-size: 13px;
}

.btn-sm {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

/* ============================================================
   十、通知系统
   ============================================================ */

/* 通知铃铛按钮 */
.notif-bell { position: relative; display: none; } /* 2026-08-20 起临时隐藏右上角通知按钮 */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* 通知下拉面板 */
.notif-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 360px;
  max-height: 480px;
  background: rgba(30, 30, 50, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifFadeIn 0.2s ease;
}

/* ==================== 地址下拉列表（独立滚动条，不依赖侧边栏） ==================== */
.address-input-wrapper {
    position: relative;
}

.address-suggestions {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 30, 60, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    max-height: 160px;
    overflow-y: auto !important;
    display: none;
}

.address-suggestions::-webkit-scrollbar {
    width: 5px;
}
.address-suggestions::-webkit-scrollbar-track {
    background: transparent;
}
.address-suggestions::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
.address-suggestions::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.address-suggestions.active {
    display: block !important;
}

.address-suggestions .suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

.address-suggestions .suggestion-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.address-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.address-suggestions .suggestion-item .suggestion-name {
    font-weight: 500;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.9);
}

.address-suggestions .suggestion-item .suggestion-address {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
}
@keyframes notifFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.notif-panel-action {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.notif-panel-action:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.notif-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  max-height: 380px;
}
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.notif-item:hover { background: rgba(255,255,255,0.05); }
.notif-item.unread {
  background: rgba(22,119,255,0.08);
}
.notif-item.unread::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 10px;
  width: 6px;
  height: 6px;
  background: #1677ff;
  border-radius: 50%;
}
.notif-item .notif-item-time {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.notif-item .notif-item-title {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
  padding-left: 12px;
}
.notif-item .notif-item-body {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  padding-left: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-panel-footer {
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* 浮动通知（右下角弹窗）- iOS风格 */
.floating-notif {
  position: fixed;
  bottom: -300px;
  right: 24px;
  width: 340px;
  background: rgba(44,44,46,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 10002;
  overflow: hidden;
  transition: bottom 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  opacity: 0;
}
.floating-notif.show {
  bottom: 24px;
  opacity: 1;
}
.floating-notif.hiding {
  bottom: -300px;
  opacity: 0;
}
.floating-notif-body-wrap {
  padding: 18px 18px 14px;
}
.floating-notif-inner {
  display: flex;
  gap: 12px;
}
.floating-notif-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  font-family: -apple-system, 'SF Pro', sans-serif;
}
.floating-notif-text {
  flex: 1;
  min-width: 0;
}
.floating-notif-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.floating-notif-body {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.floating-notif-actions {
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.06);
  min-height: 32px;
}
.floating-notif-actions .floating-notif-btn {
  height: 32px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-family: -apple-system, 'SF Pro', sans-serif;
  cursor: pointer;
  outline: none;
}
.floating-notif-actions .floating-notif-btn:active { opacity: 0.6; }
.floating-notif-btn.secondary { color: rgba(255,255,255,0.35); font-weight: 400; }
.floating-notif-divider {
  width: 1px;
  background: rgba(255,255,255,0.06);
}

/* 右上角圆形叉叉 */
.floating-notif-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  transition: all 0.15s;
  line-height: 1;
}
.floating-notif-close:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   客户端下载按钮（导航栏中间）
   ============================================================ */
.nav-client-download {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(22,119,255,0.15);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.nav-client-download:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

/* 客户端下载弹窗 */
.client-download-modal {
  max-width: 480px !important;
}
.client-download-body {
  padding: 8px 0 4px;
}
.client-download-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* 双版本下载卡片 */
.client-download-versions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.client-download-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.client-download-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(22,119,255,0.3);
}
.client-download-card-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.client-download-card-info {
  flex: 1;
  min-width: 0;
}
.client-download-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.client-download-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.client-download-btn {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1677ff, #4096ff);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.client-download-card:hover .client-download-btn {
  box-shadow: 0 4px 12px rgba(22,119,255,0.3);
  transform: scale(1.04);
}

/* 使用说明 */
.client-download-guide {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.client-download-guide-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.client-download-guide-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 2;
}
.client-download-guide-steps li::marker {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}



/* ============================================================
   十三、移动端引导页（iOS 简白风）
   ============================================================ */
.mobile-prompt-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:none;flex-direction:column;align-items:center;background:#f2f4f7;padding:36px 28px 32px;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.mobile-prompt-overlay::-webkit-scrollbar{display:none}
.mobile-prompt-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;max-width:340px;width:100%}
.mobile-prompt-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px}
.mobile-prompt-logo{width:72px;height:72px;object-fit:contain;border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.mobile-prompt-brand{font-size:20px;font-weight:700;color:#1d1d1f;letter-spacing:0.5px}
/* 新商家试用 banner 样式（已临时隐藏，保留代码备用）
.mobile-prompt-trial-banner{width:100%;background:linear-gradient(135deg,#fff9e6 0%,#fff3cc 100%);border:1px solid rgba(255,149,0,0.15);border-radius:14px;padding:14px 18px;margin-bottom:20px}
.mobile-prompt-trial-main{font-size:16px;font-weight:700;color:#cc7a00;letter-spacing:0.3px}
.mobile-prompt-trial-sub{font-size:12px;color:rgba(180,110,0,0.6);margin-top:5px}
*/
.mobile-prompt-leading{margin-bottom:22px}
.mobile-prompt-heading{font-size:22px;font-weight:700;color:#1d1d1f;line-height:1.3;letter-spacing:-0.3px}
.mobile-prompt-subtitle{font-size:13px;color:#86868b;margin-top:8px;line-height:1.5}
.mobile-prompt-url-section{width:100%;margin-bottom:24px}
.mobile-prompt-url-card{display:flex;align-items:center;justify-content:center;gap:10px;background:#ffffff;border:1px solid rgba(0,122,255,0.22);border-radius:14px;padding:16px 22px;cursor:pointer;transition:all 0.2s;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,122,255,0.08)}
.mobile-prompt-url-card:active{background:#f5f8ff;transform:scale(0.98)}
.mobile-prompt-url-icon{width:20px;height:20px;color:#0071e3}
.mobile-prompt-url-icon svg{width:20px;height:20px}
.mobile-prompt-url-text{font-size:20px;font-weight:700;color:#0071e3;letter-spacing:1px}
.mobile-prompt-url-action{font-size:12px;color:#aeaeb2;margin-top:10px}
.mobile-prompt-copy-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:#fff;font-size:14px;padding:10px 24px;border-radius:20px;z-index:999999;pointer-events:none;opacity:0;transition:opacity 0.25s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mobile-prompt-copy-toast.show{opacity:1}
.mobile-prompt-value-section{width:100%;margin-bottom:20px}
.mobile-prompt-value-title{font-size:11px;font-weight:600;color:#aeaeb2;letter-spacing:2px;margin-bottom:10px}
.mobile-prompt-value-grid{display:flex;flex-direction:column;gap:8px}
.mobile-prompt-value-item{display:flex;align-items:flex-start;gap:12px;background:#ffffff;border:1px solid rgba(0,0,0,0.06);border-radius:12px;padding:14px 16px;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.mobile-prompt-value-icon{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:#86868b}
.mobile-prompt-value-icon svg{width:22px;height:22px}
.mobile-prompt-value-body{flex:1;min-width:0}
.mobile-prompt-value-heading{font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:3px}
.mobile-prompt-value-desc{font-size:12px;color:#86868b;line-height:1.4}
.mobile-prompt-miniapp{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fafbfc;border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:24px 32px;margin-bottom:20px;width:100%;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.mobile-prompt-miniapp-label{font-size:13px;color:#aeaeb2;letter-spacing:0.5px;display:flex;align-items:center;gap:6px}
.mobile-prompt-miniapp-label svg{width:14px;height:14px;color:#aeaeb2}
.mobile-prompt-qr-image{width:160px;height:160px;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.mobile-prompt-miniapp-save{font-size:11px;color:#aeaeb2}
.mobile-prompt-miniapp-tip{font-size:13px;color:#86868b}
.mobile-prompt-dismiss-btn{width:100%;padding:14px 0;border:none;border-radius:14px;background:linear-gradient(135deg,rgba(14,165,233,0.95),rgba(2,132,199,0.95));color:#fff;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 6px 18px rgba(14,165,233,0.25);margin-bottom:16px}
.mobile-prompt-dismiss-btn:active{transform:scale(0.98)}
.mobile-prompt-footer{font-size:11px;color:#aeaeb2;letter-spacing:0.5px}

/* ============================================================
   十四、数据看板 & 顾客档案（方案B 新增页面）
   ============================================================ */
/* 导航栏常驻入口按钮 */
.admin-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.admin-nav-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.admin-nav-btn.active { background: rgba(14, 165, 233, 0.22); border-color: rgba(56, 189, 248, 0.5); color: #fff; }
/* 套餐门禁：免费版不开放经营分析 → 置灰 + 锁标 */
.admin-nav-btn.nav-locked { opacity: 0.5; }
.admin-nav-btn.nav-locked:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); cursor: not-allowed; }
.admin-nav-btn .lock-badge { font-size: 10px; line-height: 1; margin-left: 1px; }

/* 经营下拉子菜单 */
.admin-nav-dropdown { position: relative; }
.admin-nav-btn-split { display: inline-flex; align-items: center; gap: 4px; }
.admin-nav-btn-split .arrow { width: 14px; height: 14px; transition: transform 0.2s; }
.admin-nav-dropdown.open .admin-nav-btn-split .arrow { transform: rotate(180deg); }
.admin-nav-dropdown.open .admin-nav-btn-split { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.admin-nav-dropdown.active .admin-nav-btn-split { background: rgba(14, 165, 233, 0.22); border-color: rgba(56, 189, 248, 0.5); color: #fff; }
.admin-nav-submenu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 8px 0; border-radius: var(--radius-lg); background: rgba(20, 16, 45, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); z-index: 200; overflow: hidden; }
.admin-nav-dropdown.open .admin-nav-submenu { display: block; animation: navSubFadeIn 0.15s ease; }
@keyframes navSubFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.admin-nav-subitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); text-align: left; border: none; background: transparent; font-family: inherit; }
.admin-nav-subitem:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.nav-sub-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.nav-sub-icon svg { width: 18px; height: 18px; display: block; }
.nav-btn-ic { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* 页面通用滚动容器 */
.page-scroll { overflow-y: auto; height: 100%; padding: 28px 32px 48px; }
.page-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 5px 12px; border-radius: var(--radius-md); cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); font-size: 13px; font-weight: 500; font-family: inherit; transition: all var(--transition-fast); }
.page-back:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.page-title { font-size: 22px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.page-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }

/* 时间维度分段控件 */
.seg-control { display: inline-flex; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-control button { border: none; background: transparent; color: var(--text-secondary); font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.seg-control button.active { background: rgba(14, 165, 233, 0.9); color: #fff; }

/* 指标卡 */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 20px 0; }
.metric-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 18px 20px; }
.metric-card .m-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.metric-card .m-value { font-size: 26px; font-weight: 700; color: var(--text-primary); }
.metric-card .m-value small { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-left: 2px; }
.metric-card.accent .m-value { color: #38bdf8; }

/* 图表卡片 */
.chart-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 20px; }
.chart-card h4 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 14px; }
.chart-wrap { width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; }

/* 来源渠道环形图 + 图例 */
.donut-wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.donut-box { flex: 0 0 220px; max-width: 220px; }
.donut-svg { width: 220px; height: 220px; display: block; }
.donut-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.lg-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.lg-name { flex: 1; color: var(--text-secondary); }
.lg-val { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-val small { color: var(--text-muted); font-weight: 400; margin-left: 2px; }

/* 顾客档案 */
.cust-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cust-table { width: 100%; border-collapse: collapse; }
.cust-table th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; }
.cust-table td { font-size: 13px; color: var(--text-secondary); padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cust-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.cust-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.9; }
.badge-src { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
.sample-tag { display: inline-block; margin-left: 10px; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(250, 204, 21, 0.18); color: #fde68a; vertical-align: middle; }

/* ============ 编辑顾客信息弹窗：背景光晕层 + 弹窗半透明（不模糊，弱白色内发光） ============ */
/* 仅作用于编辑弹窗 overlay，弹窗本体圆角/边框/按钮布局等 ui 参数不变 */
.modal-overlay-edit-glow {
  background: rgba(5, 6, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 弹窗：半透明背景（透出后方光晕），不模糊，高亮边框+四周内发光，无紫/黑色外发光 */
.modal-overlay-edit-glow .modal-content-order {
  position: relative;
  z-index: 1;
  background: rgba(18, 22, 46, 0.90);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    inset 0 0 18px rgb(255 255 255 / 0%),
    inset 0 0 7px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============ 编辑顾客信息弹窗：与「新建订单」弹窗统一样式（.modal-content-order 基础框体 + 全局表单/按钮样式） ============ */

/* 顶部黄色提示文案（编辑弹窗特有） */
.modal-content-order .modal-subtitle {
  font-size: 12px;
  line-height: 1.6;
  color: #FBBF24;
  margin-bottom: 18px;
}

/* 分区标题：顾客与套餐信息（编辑弹窗特有） */
.modal-content-order .form-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 16px;
}
.modal-content-order .form-section-title::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--primary-light, #0EA5E9);
}
.modal-content-order .form-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* 拍摄套餐下拉 trigger 内嵌的「+ 拍摄套餐库 ›」链接（编辑弹窗特有） */
.modal-content-order .trigger-pkg-jump {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.modal-content-order .trigger-pkg-jump:hover { color: #fff; }

/* 拍摄套餐库入口使用全局 .field-jump 文字链接样式（青色），与新建订单一致，不单独定义 */
/* 标记作废按钮 / 订单编号 / 客源渠道当前值 均沿用全局 .btn-archive-top / .modal-order-no / .field-jump.field-jump-text 样式 */