/* ════════════════════════════════════════════════════════════════
   theme-zitong.css — 控制台统一设计系统（浅色 · 紫瞳AI真实风格）
   基于从紫瞳AI BOS 实时抓取的设计令牌改写：
     主色 #E6397C  |  顶栏深色 #1F2227  |  正文浅色 #F2F3F5/#FFFFFF
     圆角 2px      |  字号 14px         |  紧凑按钮 4px 15px
   全部模块已令牌化（refactor_colors.js），改 :root 即可全局同步。
   ════════════════════════════════════════════════════════════════ */

:root {
  --font-sans: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* 背景层级：紫瞳AI是浅色 SaaS，卡片/侧边栏/内容区白/浅灰 */
  --bg-primary: #f2f3f5;        /* 页面底 */
  --bg-secondary: #ffffff;      /* 卡片 / 侧边栏 / 弹窗底 */
  --bg-tertiary: #f5f7fa;       /* 悬浮 / 交替行 / 表格头：对齐微盟表头 #F5F7FA */
  --bg-hover: #f4f0ff;          /* 主色浅底（紫瞳AI按钮 hover/选中态） */
  --bg-card: #ffffff;

  /* 边框：对齐微盟标准灰 #DFE2E6 */
  --border: #dfe2e6;
  --border-light: #ebeef2;
  /* 别名：兼容业务模块惯用命名，避免 var(--border-color)/var(--text-tertiary) 等死引用 */
  --border-color: var(--border);
  --text-tertiary: var(--text-muted);

  /* 文字 */
  --text-primary: #1e2226;
  --text-secondary: #626973;   /* 对齐微盟次级文字 rgb(98,105,115) */
  --text-muted: #8c939d;
  --text-white: #ffffff;

  /* 主色：青蓝科技（区别于微盟紫） */
  --accent: #E6397C;
  --accent-dim: #C22A64;
  --accent-glow: rgba(230, 57, 124, 0.12);
  --accent-text: #C22A64;

  /* 语义色（保持微信绿不变） */
  --danger: #f85149;
  --warning: #f5a623;
  --info: #58a6ff;
  --success: #07c160;
  --success-bg: rgba(7, 193, 96, 0.08);
  --danger-bg: rgba(248, 81, 73, 0.08);
  --warning-bg: rgba(245, 166, 35, 0.10);
  --info-bg: rgba(88, 166, 255, 0.08);
  /* 青蓝科技色（促销/会员等级等强调） */
  --purple: #E6397C;
  --purple-bg: rgba(230, 57, 124, 0.10);

  /* 圆角：紫瞳AI紧凑 2px */
  --radius: 6px;          /* 升级：2px 尖角 → 6px 现代圆角（高级感核心杠杆） */
  --radius-lg: 10px;       /* 升级：卡片/面板大圆角 */
  --radius-pill: 999px;    /* 升级：胶囊（标签/徽章/分段控件） */

  /* 阴影：浅色模式淡 */
  --shadow-sm: 0 1px 2px rgba(30, 34, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 34, 38, 0.08);
  --shadow-lg: 0 8px 24px rgba(30, 34, 38, 0.10);
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ 全局字体 ═══ */
body { font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--bg-primary); }

/* ═══ 顶栏：紫瞳AI同款深色 ═══ */
#tc-topbar {
  background: #1f2227;
  height: 58px;                /* 对齐微盟顶栏高度 */
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#tc-topbar .tc-topbar-logo,
#tc-topbar .tc-topbar-title,
#tc-topbar a,
#tc-topbar .tc-nav-link { color: rgba(255,255,255,0.9); }
#tc-topbar a:hover { color: #ffffff; }

/* ═══ 侧边栏：白色卡片感 ═══ */
#tc-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
}
.tc-nav-item,
#tc-sidebar-nav .nav-item {
  color: var(--text-secondary);
  border-radius: var(--radius);
  margin: 2px 8px;
  padding: 9px 12px;
  transition: all var(--transition);
}
.tc-nav-item:hover,
#tc-sidebar-nav .nav-item:hover {
  background: var(--bg-hover);
  color: var(--accent-text);
}
.tc-nav-item.active,
#tc-sidebar-nav .nav-item.active {
  background: var(--bg-hover);
  color: var(--accent-text);
  font-weight: 600;
}

#tc-content-area { background: var(--bg-primary); }
#tc-content { padding: 20px 24px; }

/* ═══ 按钮 ═══ */
/* 全局兜底：所有按钮（含未套类的裸按钮）统一紫瞳AI 2px 紧凑圆角 */
button {
  border-radius: var(--radius);
  font-family: var(--font-sans);
}
/* 按钮微交互基座：果冻弹性过渡 + 按下回弹（小龙「重量感」方法论） */
.btn { cursor: pointer; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px var(--accent-glow);
  border-radius: var(--radius);
}
.btn-primary:hover { background: var(--accent-dim); box-shadow: 0 6px 16px var(--accent-glow); transform: translateY(-1px); }
.btn-primary:active { box-shadow: 0 2px 6px var(--accent-glow); }
.btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.btn-secondary:active { box-shadow: none; }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(248,81,73,0.18); }
.btn-danger:hover { background: rgba(248,81,73,0.12); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(248,81,73,0.15); }

/* 禁用态：对齐微盟（bg #F0F2F5 / 文字 #B6BACF / 虚线 #DFE2E6） */
button:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  background: #f0f2f5 !important;
  color: #b6bacf !important;
  border: 1px dashed var(--border) !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* 裸按钮兜底 */
#tc-main-layout button:not([class]) {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 15px;
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition);
}
#tc-main-layout button:not([class]):hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--bg-hover);
}

/* ═══ 卡片 / 面板 ═══ */
.card, .panel, .module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  transition: box-shadow .25s ease, border-color .2s ease;
}
/* 高级感：hover 仅加深阴影 + 强调描边（无位移，零 reflow 抖动） */
.card:hover, .panel:hover, .module-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.card-title, .panel-title, .section-title {
  font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px;
}

/* ═══ 统计卡片 ═══ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card .stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.stat-card .stat-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-card.accent-positive .stat-value { color: var(--success); }
.stat-card.accent-warn .stat-value { color: var(--warning); }
.stat-card.accent-info .stat-value { color: var(--info); }
.stat-card.accent-danger .stat-value { color: var(--danger); }

/* ═══ 表格 ═══ */
.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-container table { border-collapse: collapse; width: 100%; }
.table-container thead th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .3px;
  padding: 12px 16px;
  white-space: nowrap;
}
.table-container tbody td { color: var(--text-primary); border-bottom: 1px solid var(--border-light); padding: 11px 16px; font-size: 13px; }
.table-container tbody tr { transition: background .15s ease; }
.table-container tbody tr:nth-child(even) { background: var(--bg-tertiary); }
.table-container tbody tr:hover { background: var(--bg-hover); }
.table-container tbody tr:last-child td { border-bottom: none; }

/* 裸表格兜底 */
#tc-content table:not([class]) {
  width: 100%; border-collapse: collapse;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
#tc-content table:not([class]) th {
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-size: 12px; font-weight: 600; text-align: left; letter-spacing: .3px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#tc-content table:not([class]) td {
  padding: 11px 16px; font-size: 13px; color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
#tc-content table:not([class]) tbody tr { transition: background .15s ease; }
#tc-content table:not([class]) tbody tr:nth-child(even) { background: var(--bg-tertiary); }
#tc-content table:not([class]) tbody tr:hover { background: var(--bg-hover); }
#tc-content table:not([class]) tr:last-child td { border-bottom: none; }

/* ═══ 表单 ═══ */
.form-input, .form-select, .tc-form-input, .search-input {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus, .form-select:focus, .tc-form-input:focus, .search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}
.form-input::placeholder, .tc-form-input::placeholder, .search-input::placeholder { color: var(--text-muted); }

/* 裸输入框兜底 */
#tc-content input:not([class]):not([type=radio]):not([type=checkbox]),
#tc-content select:not([class]),
#tc-content textarea:not([class]) {
  width: 100%; padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px; font-family: var(--font-sans);
  transition: border-color var(--transition);
}
#tc-content input:not([class]):focus,
#tc-content select:not([class]):focus,
#tc-content textarea:not([class]):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ═══ 标签页：蓝色下划线 ═══ */
.tc-tabs, .module-tabs, .tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tc-tab, .module-tab, .tab {
  padding: 10px 16px; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer; border: none;
  border-bottom: 2px solid transparent; background: none;
  font-family: var(--font-sans);
  transition: all var(--transition); margin-bottom: -1px;
}
.tc-tab:hover, .module-tab:hover, .tab:hover { color: var(--accent-text); }
.tc-tab.active, .module-tab.active, .tab.active {
  color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600;
}

/* ═══ 标题层级 ═══ */
#tc-content h1 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; }
#tc-content h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 18px 0 12px; }
#tc-content h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 14px 0 10px; }
#tc-content h4 { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 12px 0 8px; }
#tc-content p { color: var(--text-secondary); line-height: 1.6; }

/* ═══ Badge ═══ */
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

/* ═══ 滚动条 ═══ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cacc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a6a9ad; }

/* ═══ 空状态 ═══ */
.empty-state { color: var(--text-muted); }

/* ═══ 登录页：浅色紫瞳AI风 ═══ */
#tc-login-overlay { background: #f2f3f5; }
.tc-login-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}
.tc-login-title { color: var(--text-primary); }
.tc-btn-login {
  background: var(--accent);
  border-radius: var(--radius);
  box-shadow: none;
  color: #fff;
}
.tc-btn-login:hover:not(:disabled) { background: var(--accent-dim); box-shadow: none; }

/* ═══ 背景视频：登录页 + 首页(store-home) ═══ */
.tc-login-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #0a0f1c;
}
.tc-login-bg-dim {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(8,12,28,0.50) 0%, rgba(8,12,28,0.72) 100%);
}
#tc-login-overlay > .tc-login-card { position: relative; z-index: 1; }
.tc-login-card {
  background: rgba(20, 26, 44, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10) !important;
}
#tc-home-bg-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  z-index: 0;
  display: none;
  pointer-events: none;
  background: #0a0f1c;
}
#tc-home-bg-dim {
  position: fixed; inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,28,0.55) 0%, rgba(8,12,28,0.78) 100%);
}
body.is-home-page #tc-home-bg-video,
body.is-home-page #tc-home-bg-dim { display: block; }
body.is-home-page #tc-main-layout { position: relative; z-index: 1; background: transparent; }
body.is-home-page #tc-content-area { background: transparent; }