/* ============================================================
   admin-unified.css — 统一组件库
   目标：消除所有 JS 页面中的 inline 样式，提供可复用的 CSS 类
   设计原则：类名遵循 BEM-like 风格，唯一来源为 tokens.css
   ============================================================ */

@import url('tokens.css');

/* ============================================================
   1. 工具类（Utilities）
   ============================================================ */

/* Flex */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1           { gap: var(--space-1); }
.gap-2           { gap: var(--space-2); }
.gap-3           { gap: var(--space-3); }
.gap-4           { gap: var(--space-4); }
.gap-5           { gap: var(--space-5); }
.gap-6           { gap: var(--space-6); }

/* Grid */
.grid            { display: grid; }
.grid-cols-2     { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3     { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4     { grid-template-columns: repeat(4, 1fr); }

/* Spacing */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-auto { margin-left: auto; }

.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-auto { margin-right: auto; }

/* Text */
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }
.text-nowrap    { white-space: nowrap; }
.text-xs        { font-size: var(--fs-xs); }
.text-sm        { font-size: var(--fs-sm); }
.text-base      { font-size: var(--fs-base); }
.text-md        { font-size: var(--fs-md); }
.text-lg        { font-size: var(--fs-lg); }
.text-xl        { font-size: var(--fs-xl); }
.text-2xl       { font-size: var(--fs-2xl); }
.fw-medium      { font-weight: var(--fw-medium); }
.fw-semibold    { font-weight: var(--fw-semibold); }
.fw-bold        { font-weight: var(--fw-bold); }
.mono           { font-family: var(--font-mono); }

/* Colors */
.c-primary  { color: var(--primary); }
.c-success  { color: var(--success); }
.c-danger   { color: var(--danger); }
.c-warning  { color: var(--warning); }
.c-orange   { color: var(--orange); }
.c-gold     { color: var(--gold); }
.c-purple   { color: var(--purple); }
.c-text-1   { color: var(--text-1); }
.c-text-2   { color: var(--text-2); }
.c-text-3   { color: var(--text-3); }
.c-inverse  { color: var(--text-inverse); }

/* Backgrounds */
.bg-primary  { background: var(--primary); }
.bg-success  { background: var(--success); }
.bg-danger   { background: var(--danger); }
.bg-warning  { background: var(--warning); }
.bg-purple   { background: var(--purple); }
.bg-card     { background: var(--bg-card); }
.bg-input    { background: var(--bg-input); }
.bg-hover    { background: var(--bg-hover); }

.bg-primary-light  { background: var(--primary-light); }
.bg-success-light  { background: var(--success-light); }
.bg-danger-light   { background: var(--danger-light); }
.bg-warning-light  { background: var(--warning-light); }
.bg-orange-light   { background: var(--orange-light); }
.bg-purple-light   { background: var(--purple-light); }
.bg-gold-light     { background: var(--gold-light); }

/* Borders & Radius */
.border     { border: 1px solid var(--border); }
.border-0   { border: none; }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-danger  { border-color: var(--danger); }
.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow    { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Cursor */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

/* Width & Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }

/* Display */
.block   { display: block; }
.inline-block { display: inline-block; }
.hidden  { display: none; }

/* Opacity */
.op-60  { opacity: 0.6; }
.op-80  { opacity: 0.8; }
.op-90  { opacity: 0.9; }

/* Transition */
.tr      { transition: var(--tr); }
.tr-slow { transition: var(--tr-slow); }

/* ============================================================
   2. 卡片组件（Card System）
   ============================================================ */

/* 基础卡片 */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: var(--tr);
}

.card-sm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* 渐变卡片 - 模式 A1 */
.card-gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--purple-light));
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: var(--tr);
}

.card-gradient:hover {
  border-color: var(--primary-border-hov);
}

/* 可交互卡片 - 模式 C1 */
.card-interactive {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: var(--tr);
}

.card-interactive:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.card-interactive-sm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: var(--tr);
}

.card-interactive-sm:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* 统计卡片 - 模式 A2 */
.stat-card {
  background: var(--primary-light);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
}

.stat-card--success {
  background: var(--success-light);
}

.stat-card--warning {
  background: var(--warning-light);
}

.stat-card--orange {
  background: var(--orange-light);
}

.stat-card.danger {
  background: var(--danger-light);
  border-color: var(--danger-border);
}

.stat-card-value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--primary);
  line-height: 1.2;
}

.stat-card-value--success { color: var(--success); }
.stat-card-value--orange  { color: var(--orange); }

.stat-card-label {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: var(--space-1);
}

/* 选中态卡片 */
.card-selected {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

/* 产品推荐卡片 */
.product-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.product-rank {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.product-rank--top3 {
  background: var(--gold);
  color: white;
}

.product-rank--other {
  background: var(--bg-card);
  color: var(--text-2);
}

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

.product-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

.product-meta {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.product-amount {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

.product-rate {
  font-size: var(--fs-xs);
  color: var(--text-2);
}

/* ============================================================
   3. 头像系统（Avatar System） - 模式 B1
   ============================================================ */

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.avatar--primary {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

.avatar--success {
  background: linear-gradient(135deg, var(--success), #66bb6a);
  box-shadow: 0 2px 8px rgba(52,168,83,0.3);
}

.avatar--danger {
  background: linear-gradient(135deg, var(--danger), var(--orange));
  box-shadow: 0 2px 8px rgba(234,67,53,0.3);
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: var(--fs-2xl);
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--fs-sm);
}

/* ============================================================
   4. 徽标/标签系统（Badge System） - 模式 B2
   ============================================================ */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.badge--primary {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.badge--success {
  background: var(--success-light);
  color: var(--success);
}

.badge--danger {
  background: var(--danger-light);
  color: var(--danger);
}

.badge--warning {
  background: var(--warning-light);
  color: var(--warning);
}

.badge--orange {
  background: var(--orange-light);
  color: var(--orange);
}

.badge--purple {
  background: var(--purple-light);
  color: var(--purple);
}

.badge--gold {
  background: var(--gold-light);
  color: var(--gold);
}

.badge--pill {
  border-radius: 12px;
  padding: 4px 12px;
}

.badge--solid-primary {
  background: var(--primary);
  color: var(--text-inverse);
}

.badge--solid-success {
  background: var(--success);
  color: var(--text-inverse);
}

.badge--solid-danger {
  background: var(--danger);
  color: var(--text-inverse);
}

/* 排名标签 */
.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* 最新标签 */
.badge-newest {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  background: var(--primary);
  color: var(--text-inverse);
  border-radius: 10px;
}

/* 缓存标签 */
.badge-cache {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--warning-light);
  color: var(--warning);
  border-radius: var(--radius-xs);
}

/* 报告类型标签 */
.rv-badge {
  font-size: var(--fs-xs);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: var(--fw-medium);
}

.rv-badge-detail {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.rv-badge-simple {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}

/* ============================================================
   5. 按钮系统（Button System） - 模式 C2
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 主按钮 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: var(--shadow-sm);
}

/* 危险按钮 */
.btn-danger {
  background: var(--danger);
  color: var(--text-inverse);
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

/* 次要按钮 */
.btn-secondary {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--primary);
}

/* 透明按钮 */
.btn-ghost {
  background: none;
  border: none;
  color: var(--text-2);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--primary);
  background: var(--bg-hover);
}

/* 关闭按钮 */
.btn-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--text-2);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.btn-close:hover {
  color: var(--text-1);
}

/* 图文关闭按钮 */
.btn-close--circle {
  width: 32px;
  height: 32px;
  background: var(--bg-input);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: var(--tr);
}

.btn-close--circle:hover {
  background: var(--danger-light);
  color: var(--danger);
}

/* 操作按钮行 */
.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 删除按钮（小型、danger 文字） */
.btn-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--fs-base);
  padding: 2px 6px;
}

/* 小标签按钮 */
.btn-tag {
  font-size: var(--fs-xs);
  padding: 3px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: var(--tr);
}

.btn-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ============================================================
   6. 模态框系统（Modal System） - 模式 E1-E3
   ============================================================ */

/* 覆盖层 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 模态框容器 */
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: modalIn 0.25s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-box--sm {
  width: 400px;
  max-width: 90vw;
}

.modal-box--md {
  width: 520px;
  max-width: 94vw;
}

.modal-box--lg {
  width: 700px;
  max-width: 96vw;
}

.modal-box--xl {
  width: 900px;
  max-width: 96vw;
}

/* 模态框头部 */
.modal-header {
  padding: var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, var(--primary-light), var(--purple-light));
  border-bottom: 1px solid var(--border);
  position: relative;
}

.modal-header--left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: none;
}

.modal-header-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.modal-header-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-top: var(--space-1);
}

/* 模态框内容体 */
.modal-body {
  padding: var(--space-5);
  overflow: auto;
  flex: 1;
}

/* 模态框底部 */
.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
}

/* 信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

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

.info-label {
  color: var(--text-2);
  font-size: var(--fs-base);
}

.info-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

/* 模态框过渡动画 */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================
   7. 表单控件（Form Controls） - 模式 D1-D2
   ============================================================ */

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 6px;
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: var(--tr);
  outline: none;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.form-input--sm {
  width: 46px;
  text-align: center;
}

.form-input--numeric {
  text-align: right;
  width: 100px;
}

.form-input--wide {
  width: 110px;
}

.form-input--full {
  width: 100%;
  padding: 6px 10px;
}

.form-input--hidden {
  display: none;
}

.form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--text-1);
  transition: var(--tr);
  outline: none;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--primary);
}

.form-checkbox,
.form-radio {
  margin-right: var(--space-1);
  cursor: pointer;
}

/* ============================================================
   8. 表格系统（Table System） - 模式 C3
   ============================================================ */

.table-row {
  border-bottom: 1px solid var(--border);
}

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

.table-cell {
  padding: var(--space-3);
  font-size: var(--fs-base);
}

.table-cell--sm {
  padding: var(--space-2);
}

.table-cell--numeric {
  text-align: right;
  font-weight: var(--fw-semibold);
}

.table-cell--center {
  text-align: center;
}

.table-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-3);
}

.table-error {
  text-align: center;
  padding: 40px;
  color: var(--danger);
}

/* 表格行内编辑 */
.edit-row {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   9. Tab 切换系统
   ============================================================ */

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.tab-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--tr);
  user-select: none;
}

.tab-item:hover {
  color: var(--primary);
}

.tab-item--active {
  color: var(--primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--primary);
}

.tab-content {
  display: none;
}

.tab-content--active {
  display: block;
}

/* ============================================================
   9.b. 统计卡片点击态（任务中心专用）
   ============================================================ */
.stat-card-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.stat-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.stat-card-clickable:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 统计卡片选中态（点击筛选后高亮） */
.stat-card-active {
  box-shadow: inset 0 0 0 2px var(--primary) !important;
}

/* ============================================================
   10. 跟进记录卡片（模式回溯）
   ============================================================ */

/* 跟进消息气泡 */
.fu-card {
  background: linear-gradient(135deg, var(--primary-light-2), var(--purple-light));
  border: 1px solid var(--primary-border);
  border-radius: 10px;
  padding: var(--space-3);
  min-height: 60px;
  cursor: pointer;
  transition: var(--tr);
}

.fu-card:hover {
  border-color: var(--primary-border-hov);
}

/* 下一跟卡片 */
.fu-next-card {
  background: var(--success-light);
  border: 1px solid var(--success-border);
  border-radius: 10px;
  padding: var(--space-3);
  cursor: pointer;
  transition: var(--tr);
}

.fu-next-card:hover {
  background: rgba(52,168,83,0.15);
}

/* ============================================================
   11. 历史记录卡片
   ============================================================ */

.history-card {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: var(--space-3);
}

.history-card--latest {
  border: 2px solid var(--primary);
}

.history-stat {
  text-align: center;
}

.history-stat-value {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.history-stat-label {
  font-size: 10px;
  color: var(--text-3);
}

/* 历史记录数据来源标签 */
.history-source {
  font-size: var(--fs-xs);
  color: var(--text-2);
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: var(--radius-xs);
  margin-top: var(--space-2);
}

/* ============================================================
   12. 评分/等级色（辅助类）
   ============================================================ */

.grade-a-plus { color: #34a853; }
.grade-a      { color: #667eea; }
.grade-b-plus { color: #ff6b35; }
.grade-b      { color: #f4b942; }
.grade-c      { color: #8b949e; }
.grade-d      { color: #ea4335; }

/* ============================================================
   13. 匹配分析区域
   ============================================================ */

.match-analysis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ============================================================
   14. 产品列表（匹配结果）
   ============================================================ */

.match-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ============================================================
   15. 团队管理（性能排行）
   ============================================================ */

.perf-medal {
  font-size: 18px;
}

.perf-rank-num {
  font-size: 14px;
  color: var(--text-2);
}

/* ==========================================================
   16. 微动画（Micro-Interactions）
   ========================================================== */

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in      { animation: fadeIn 0.3s ease both; }

/* 从下方淡入 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up   { animation: fadeInUp 0.35s ease both; }

/* 下拉菜单入场 */
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-in  { animation: dropdownIn 0.2s ease both; }

/* 旋转（Loading） */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin         { animation: spin 1s linear infinite; }

/* 脉冲（吸引注意力） */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.pulse        { animation: pulse 2s ease-in-out infinite; }

/* 滑入左侧 */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in-left { animation: slideInLeft 0.3s ease both; }

/* 滑入右侧 */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.slide-in-right { animation: slideInRight 0.3s ease both; }

/* 弹入（弹簧感） */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.bounce-in    { animation: bounceIn 0.6s ease both; }

/* ============================================================
   17. 动画应用场景（Animation Applications）
   ============================================================ */

/* 页面主内容区域 - 加载时淡入向上 */
.main-content {
  animation: fadeInUp 0.4s ease both;
}

/* 卡片 - 加载时依次淡入 */
.card {
  animation: fadeInUp 0.35s ease both;
}

/* 统计卡片 - 加载时依次淡入，有延迟效果 */
.stat-card {
  animation: fadeInUp 0.35s ease both;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }

/* 内联下拉菜单（宽度自适应文字内容） */
.cust-inline-menu {
  min-width: auto !important;
  width: max-content;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 120px;
  padding: 4px 0;
  animation: dropdownIn 0.2s ease both;
}

/* 下拉菜单项 */
.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background 0.12s ease;
}
.dropdown-item:hover {
  background: var(--bg-hover);
}
.dropdown-item.c-success { color: var(--success); }
.dropdown-item.c-danger  { color: var(--danger); }

/* 图标按钮（统一尺寸） */
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: all 0.15s ease;
}
.icon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* 模态框 - 显示时弹入 */
.modal-content {
  animation: bounceIn 0.4s ease both;
}

/* 按钮 - 点击时微妙缩放反馈 */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* 卡片悬停 - 微妙上浮 */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

/* 侧边栏导航项 - 悬停时背景过渡（增强） */
.nav-item {
  transition: all 0.15s ease;
}

.nav-item:hover {
  transform: translateX(2px);
}

/* 表格行 - 悬停时背景过渡 */
.table tbody tr {
  transition: background-color 0.15s ease;
}

/* 提示框/弹出框 - 显示时淡入 */
.tooltip,
.popover {
  animation: fadeIn 0.2s ease both;
}

/* 加载 spinner - 旋转动画 */
.spinner,
.loading-spinner {
  animation: spin 1s linear infinite;
}

/* 成功/完成图标 - 弹入动画 */
.success-icon,
.complete-icon {
  animation: bounceIn 0.5s ease both;
}

/* 通知条目 - 滑入动画 */
.notification-item {
  animation: slideInRight 0.3s ease both;
}

/* 空状态/欢迎语 - 淡入 */
.empty-state,
.welcome-message {
  animation: fadeIn 0.5s ease both;
}

/* ============================================================
   18. 暗色主题优化（Dark Theme Refinements）
   ============================================================ */

[data-theme="dark"] {
  /* 全局优化 */
  color-scheme: dark;
}

/* 暗色主题 - 卡片优化 */
[data-theme="dark"] .card {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow);
}

/* 暗色主题 - 按钮优化 */
[data-theme="dark"] .btn-primary {
  box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}

/* 暗色主题 - 输入框优化 */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* 暗色主题 - 表格优化 */
[data-theme="dark"] .table {
  --table-border: var(--border);
}

[data-theme="dark"] .table th {
  background: var(--bg-elevated);
  color: var(--text-2);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .table td {
  border-bottom-color: var(--border-light);
}

[data-theme="dark"] .table tbody tr:hover {
  background: var(--bg-hover);
}

/* 暗色主题 - 下拉菜单优化 */
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item:hover {
  background: var(--bg-hover);
}

/* 暗色主题 - 模态框优化 */
[data-theme="dark"] .modal-content {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--border);
}

/* 暗色主题 - 侧边栏优化 */
[data-theme="dark"] .sidebar {
  background: var(--bg-elevated);
  border-right-color: var(--border);
}

[data-theme="dark"] .nav-item:hover {
  background: var(--bg-hover);
}

[data-theme="dark"] .nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
}

/* 暗色主题 - 顶部栏优化 */
[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--border);
}

/* 暗色主题 - 滚动条优化 */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-base);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--border-dark);
}

/* 暗色主题 - 选择文本优化 */
[data-theme="dark"] ::selection {
  background: rgba(102,126,234,0.3);
  color: var(--text);
}

/* ============================================================
   19. 数据表格内容样式规范（Data Table Cell Specifications）
   ============================================================ */

/* --- 19.1 表格单元格类型 --- */

/* 名称列：粗体主信息 + 灰色副信息 */
.cell-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.cell-name .sub {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* 手机号/证件号列：等宽字体 */
.cell-phone,
.cell-id-number {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 13px;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

/* 金额/数字列 */
.cell-number {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cell-amount {
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.cell-amount-overdue {
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

/* 居中列 */
.cell-center {
  text-align: center;
  vertical-align: middle;
}

/* 灰色小字元信息 */
.cell-meta {
  font-size: 12px;
  color: var(--text-3);
}

/* 日期/时间列 */
.cell-date {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

/* 操作列：按钮组 */
.cell-actions {
  white-space: nowrap;
  text-align: center;
}

.cell-actions .btn {
  margin: 0 2px;
}

/* --- 19.2 语义化文本颜色 --- */

/* 评分高/中/低 */
.text-score-high { color: var(--success); font-weight: 600; }
.text-score-mid  { color: var(--warning); font-weight: 600; }
.text-score-low  { color: var(--danger);  font-weight: 600; }

/* 金额 */
.text-amount       { color: var(--success); font-weight: 700; font-variant-numeric: tabular-nums; }
.text-amount-overdue { color: var(--danger);  font-weight: 700; font-variant-numeric: tabular-nums; }
.text-amount-refund  { color: var(--warning); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 逾期/风险 */
.text-overdue  { color: var(--danger);  font-weight: 600; }
.text-risk-high { color: var(--danger);  font-weight: 700; }
.text-risk-mid  { color: var(--warning); font-weight: 600; }
.text-risk-low  { color: var(--success); font-weight: 600; }

/* 阶段颜色（统一5色系） */
.text-stage-1 { color: #3b82f6; }  /* 蓝色 - 初步沟通 */
.text-stage-2 { color: #8b5cf6; }  /* 紫色 - 需求确认 */
.text-stage-3 { color: #f59e0b; }  /* 橙色 - 方案报价 */
.text-stage-4 { color: #ef4444; }  /* 红色 - 谈判/犹豫 */
.text-stage-5 { color: #22c55e; }  /* 绿色 - 成交 */

/* 通用状态色 */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger);  }
.text-info    { color: var(--info);    }

/* 次要文本 */
.text-muted  { color: var(--text-3); font-size: 12px; }
.text-small { font-size: 12px; }
.text-bold  { font-weight: 600; }

/* --- 19.3 统一标签/徽章系统 --- */

/* 基础标签样式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

/* 状态标签（成功/警告/危险/信息） */
.tag-status-success { background: rgba(34,197,94,0.12); color: #22c55e; }
.tag-status-warning { background: rgba(245,158,11,0.12); color: #f59e0b; }
.tag-status-danger  { background: rgba(239,68,68,0.12); color: #ef4444; }
.tag-status-info    { background: rgba(59,130,246,0.12); color: #3b82f6; }
.tag-status-default { background: rgba(108,117,125,0.10); color: var(--text-2); }

/* 类型标签 */
.tag-type-lead     { background: rgba(59,130,246,0.12); color: #3b82f6; }
.tag-type-customer  { background: rgba(34,197,94,0.12); color: #22c55e; }
.tag-type-opportunity{ background: rgba(139,92,246,0.12); color: #8b5cf6; }
.tag-type-task      { background: rgba(245,158,11,0.12); color: #f59e0b; }
.tag-type-meeting   { background: rgba(6,182,212,0.12); color: #06b6d4; }

/* 阶段标签（统一5色系） */
.tag-stage-1 { background: rgba(59,130,246,0.12); color: #3b82f6; }  /* 初步沟通 */
.tag-stage-2 { background: rgba(139,92,246,0.12); color: #8b5cf6; }  /* 需求确认 */
.tag-stage-3 { background: rgba(245,158,11,0.12); color: #f59e0b; }  /* 方案报价 */
.tag-stage-4 { background: rgba(239,68,68,0.12); color: #ef4444; }  /* 谈判/犹豫 */
.tag-stage-5 { background: rgba(34,197,94,0.12); color: #22c55e; }  /* 成交 */

/* 来源标签 */
.tag-source { background: rgba(6,182,212,0.12); color: #06b6d4; }

/* 评分徽章 */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.score-badge-high   { background: rgba(34,197,94,0.15); color: #22c55e; }
.score-badge-mid    { background: rgba(245,158,11,0.15); color: #f59e0b; }
.score-badge-low    { background: rgba(239,68,68,0.15); color: #ef4444; }
.score-badge-none   { background: rgba(108,117,125,0.10); color: var(--text-3); }

/* --- 19.4 统一操作按钮（小尺寸） --- */

.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.btn-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-outline-sm {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}

.btn-outline-sm:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--text-3);
  color: var(--text);
}

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

.btn-primary-sm:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 2px 6px rgba(102,126,234,0.3);
}

.btn-danger-sm {
  background: transparent;
  border-color: var(--danger-border);
  color: var(--danger);
}

.btn-danger-sm:hover:not(:disabled) {
  background: var(--danger-light);
  border-color: var(--danger);
}

.btn-ghost-sm {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  padding: 3px 6px;
}

.btn-ghost-sm:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}

/* 危险按钮（小号） */
.btn-danger-sm {
  padding: 3px 7px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid var(--danger-border);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  transition: var(--tr);
}

/* --- 任务中心：截止时间逾期突出显示 --- */
.cell-date-overdue {
  color: #ea4335 !important;
  font-weight: 600 !important;
}
.cell-date-overdue::before {
  content: '⚠️ ';
  font-size: 12px;
}

.cell-date-today {
  color: #fb8c00 !important;
  font-weight: 600 !important;
}
.cell-date-today::before {
  content: '📅 ';
  font-size: 12px;
}

/* --- 任务行：逾期背景提示 --- */
.tr-overdue {
  background: rgba(234, 67, 53, 0.04) !important;
}
.tr-overdue:hover {
  background: rgba(234, 67, 53, 0.08) !important;
}

.tr-today {
  background: rgba(251, 140, 0, 0.04) !important;
}
.tr-today:hover {
  background: rgba(251, 140, 0, 0.08) !important;
}

/* --- 已完成任务行淡化 --- */
.tr-done td {
  opacity: 0.6;
}
.tr-done .task-title {
  text-decoration: line-through;
  color: var(--text-3) !important;
}

/* --- 操作列图标按钮（紧凑型） --- */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s ease;
}
.btn-icon-sm:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border);
}
.btn-icon-sm.btn-done:hover {
  background: rgba(52, 168, 83, 0.1);
  color: var(--success);
  border-color: rgba(52, 168, 83, 0.3);
}
.btn-icon-sm.btn-edit:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary);
  border-color: rgba(102, 126, 234, 0.3);
}
.btn-icon-sm.btn-delete:hover {
  background: rgba(234, 67, 53, 0.1);
  color: var(--danger);
  border-color: rgba(234, 67, 53, 0.3);
}

/* --- 18. 空状态/无数据样式 --- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  animation: fadeIn 0.5s ease both;
}

.empty-state .empty-icon {
  font-size: 64px;
  color: var(--text-4);
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-state .empty-icon.material-icons {
  font-size: 72px;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.empty-state p {
  font-size: 14px;
  color: var(--text-3);
  margin: 0 0 20px;
  max-width: 400px;
}

.empty-state .btn {
  margin-top: 8px;
}

/* 无数据单元格 */
.cell-empty {
  color: var(--text-4);
  font-size: 12px;
  font-style: italic;
}

/* 表格占位提示行（加载中/空数据/错误） */
.table-placeholder {
  text-align: center;
  padding: 40px 16px !important;
  color: var(--text-3);
  font-size: 14px;
}

.table-placeholder.table-error {
  color: var(--danger);
  font-weight: 500;
}

/* 加载中动画 */
.table-placeholder.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

/* 表格行 hover 效果 */
.table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.table-row:hover {
  background: var(--bg-input);
}
/* ========== 任务中心表格额外样式 (tasks.js) ========== */

/* 复选框单元格 */
.cell-checkbox {
  padding: 10px 14px;
  width: 40px;
}

.checkbox-input {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

/* 徽章单元格 */
.cell-badges {
  padding: 8px 14px;
  min-width: 90px;
}

.badge-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

/* 任务标题单元格 */
.cell-title {
  padding: 10px 14px;
}

.title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.task-title {
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}

.task-title.done {
  text-decoration: line-through;
  color: var(--text-3);
}

.task-title:not(.done):hover {
  color: var(--primary);
}

/* 任务详情 */
.task-detail {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.8;
}

/* 客户名称单元格 */
.cell-customer {
  padding: 10px 14px;
  color: var(--text-2);
  font-size: 12px;
}

/* 截止时间单元格 */
.cell-date {
  padding: 10px 14px;
  font-size: 12px;
}

.text-date {
  /* 具体颜色由内联样式动态设置 */
}

/* 负责人单元格 */
.cell-assignee {
  padding: 10px 14px;
  color: var(--text-2);
  font-size: 12px;
}

/* 操作按钮单元格 */
.cell-actions {
  padding: 10px 10px;
  text-align: center;
  white-space: nowrap;
}

/* 成功按钮（小号） */
.btn-success-sm {
  padding: 3px 7px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid rgba(52, 168, 83, 0.3);
  background: transparent;
  color: #34a853;
  cursor: pointer;
  transition: var(--tr);
}

.btn-success-sm:hover {
  background: rgba(52, 168, 83, 0.08);
}

/* 紧急程度徽章 */
.urgency-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  /* 背景色和颜色由内联样式动态设置 */
}

/* 任务详情内容样式 */
.detail-content {
  margin-bottom: 6px;
  color: var(--text);
  line-height: 1.6;
}

.detail-empty {
  color: var(--text-3);
  font-style: italic;
}

.detail-label {
  color: var(--text-3);
  font-size: 12px;
  margin-right: 4px;
}

.detail-value {
  color: var(--text-2);
  font-size: 12px;
}

/* 操作按钮组 */
.actions-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}

/* 客户名称可点击链接 */
.cell-customer-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  border-bottom: 1px dashed transparent;
}
.cell-customer-link:hover {
  color: var(--primary-hover);
  border-bottom-color: var(--primary);
}

/* ========== 任务中心增强样式 —— 语义化单元格格式 ========== */

/* --- 行状态背景（替换 inline style） --- */
.row-overdue { background: rgba(234,67,53,0.05); }
.row-today   { background: rgba(251,140,0,0.05); }
.row-tomorrow { background: rgba(249,171,0,0.04); }
.row-done    { background: var(--bg-input); }

/* --- 优先级标签（语义色） --- */
.tag-priority-high   { background: rgba(239,68,68,0.12);   color: #dc2626; }
.tag-priority-normal { background: rgba(234,179,8,0.12);  color: #b45309; }
.tag-priority-low    { background: rgba(107,114,128,0.12); color: #4b5563; }

/* --- 任务状态标签（替换 inline style） --- */
.tag-status-pending     { background: rgba(234,179,8,0.12);   color: #b45309; }
.tag-status-progress    { background: rgba(59,130,246,0.12);  color: #1d4ed8; }
.tag-status-completed   { background: rgba(34,197,94,0.12);   color: #15803d; }
.tag-status-cancelled   { background: rgba(107,114,128,0.12); color: #4b5563; }

/* --- 任务类型标签（每种类型独立色系） --- */
.tag-type-followup  { background: rgba(13,148,136,0.12);  color: #0d9488; }
.tag-type-meeting   { background: rgba(124,58,237,0.12);  color: #7c3aed; }
.tag-type-quote     { background: rgba(234,88,12,0.12);   color: #ea580c; }
.tag-type-contract  { background: rgba(37,99,235,0.12);   color: #2563eb; }
.tag-type-material  { background: rgba(217,119,6,0.12);   color: #d97706; }
.tag-type-loan      { background: rgba(22,163,74,0.12);   color: #16a34a; }
.tag-type-other     { background: rgba(107,114,128,0.12); color: #4b5563; }

/* --- 紧急度徽章（实心色，高可见性） --- */
.urgency-overdue  { background: #ea4335; color: #fff; }
.urgency-today    { background: #fb8c00; color: #fff; }
.urgency-tomorrow { background: #f9ab00; color: #fff; }
.urgency-normal   { background: rgba(0,0,0,0.06); color: var(--text-3); }
.urgency-none     { background: rgba(0,0,0,0.05); color: var(--text-3); }

/* --- 截止日期文本色（替换 inline style） --- */
.date-overdue  { color: #ea4335; }
.date-today    { color: #fb8c00; }
.date-tomorrow { color: #f9ab00; }
.date-normal   { color: var(--text-2); }
.date-none     { color: var(--text-3); }

/* --- 标签页激活态（替换 inline style） --- */
.tab-active {
  border-bottom-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}