:root {
  --sidebar-bg: #1a2b4b;
  --sidebar-active: #243a5e;
  --sidebar-hover: #223656;
  --page-bg: #f0f2f5;
  --card-bg: #fff;
  --primary: #1890ff;
  --primary-dark: #096dd9;
  --text: #333;
  --text-secondary: #666;
  --text-muted: #999;
  --border: #e8e8e8;
  --success: #52c41a;
  --danger: #ff4d4f;
  --warning: #faad14;
  --purple: #722ed1;
  --sidebar-w: 220px;
  --sidebar-collapsed: 64px;
  --topbar-h: 50px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --radius: 4px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

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

html { font-size: 14px; }

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text);
  line-height: 1.5715;
  overflow-x: hidden;
}

.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  transition: width 0.2s ease;
  overflow: hidden;
}

.app.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
.app.sidebar-collapsed .brand-text,
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .sidebar-search input { opacity: 0; width: 0; overflow: hidden; }
.app.sidebar-collapsed .sidebar-search { justify-content: center; padding: 0 12px; }
.app.sidebar-collapsed .nav-item { justify-content: center; padding: 12px; }
.app.sidebar-collapsed .nav-icon { margin: 0; }
.app.sidebar-collapsed .sidebar-issue { display: none; }
.app.sidebar-collapsed .sidebar-collapse-btn .nav-label { opacity: 0; width: 0; overflow: hidden; }
.app.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: 12px; margin: 8px auto; width: 40px; }
.app.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.app.sidebar-collapsed .nav-children { display: none !important; }
.app.sidebar-collapsed .nav-arrow { display: none; }
.app.sidebar-collapsed .nav-group.expanded .nav-children { display: none !important; }

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  flex-shrink: 0;
  transition: background 0.15s, width 0.2s;
}

.sidebar-collapse-btn:hover { background: var(--sidebar-hover); }
.sidebar-collapse-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo svg { width: 32px; height: 32px; display: block; }

.brand-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.brand-text em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 4px;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
}

.sidebar-search svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
  flex-shrink: 0;
}

.sidebar-search input {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: opacity 0.2s;
}

.sidebar-search input::placeholder { color: rgba(255, 255, 255, 0.45); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 16px;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 13px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover { background: var(--sidebar-hover); color: #fff; }

.nav-item.active {
  background: var(--sidebar-active);
  color: #fff;
}

.nav-item.hidden { display: none; }

.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.nav-label { white-space: nowrap; transition: opacity 0.2s; }

.sidebar-issue {
  margin: 8px 12px 12px;
  padding: 8px 10px;
  background: rgba(255, 77, 79, 0.15);
  border: 1px solid rgba(255, 77, 79, 0.35);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-issue.hidden { display: none; }

.issue-badge {
  font-size: 12px;
  color: #ff7875;
  font-weight: 500;
}

.issue-close {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
}

.issue-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Main */
.main-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}

.app.sidebar-collapsed .main-wrap { margin-left: var(--sidebar-collapsed); }

.topbar {
  height: var(--topbar-h);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

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

.breadcrumb { font-size: 14px; color: var(--text-secondary); font-weight: 500; }

.sidebar-toggle-btn {
  position: relative;
}

.sidebar-toggle-btn .icon-expand { display: none; }
.sidebar-toggle-btn .icon-menu { display: block; }

.app.sidebar-collapsed .sidebar-toggle-btn .icon-menu { display: none; }
.app.sidebar-collapsed .sidebar-toggle-btn .icon-expand { display: block; }

.sidebar-toggle-btn svg {
  width: 20px;
  height: 20px;
}

.topbar-right { display: flex; align-items: center; gap: 4px; }

.top-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: color 0.15s;
}

.top-link:hover { color: var(--primary); }

.btn-icon {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s, color 0.15s;
}

.btn-icon svg { width: 18px; height: 18px; }
.btn-icon:hover { background: #f5f5f5; color: var(--primary); }

.btn-icon .dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
}

.user-dropdown { position: relative; margin-left: 8px; }

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-family: inherit;
  transition: background 0.15s;
}

.user-trigger:hover { background: #f5f5f5; }

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}

.user-name { font-size: 13px; color: var(--text); }

.chevron { width: 12px; height: 12px; color: var(--text-muted); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border);
  padding: 4px 0;
  z-index: 300;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.dropdown-menu a:hover { background: #f5f5f5; color: var(--primary); }

.dropdown-menu .dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu .dropdown-item:hover { background: #f5f5f5; color: var(--danger); }

.dropdown-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

.hidden { display: none !important; }

/* Content */
.content { padding: 16px; flex: 1; }

/* Welcome */
.welcome-card {
  background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 50%, #fff 100%);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #d6e8ff;
}

.welcome-left { display: flex; align-items: center; gap: 20px; z-index: 1; }

.avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.35);
}

.welcome-text h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.welcome-text p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.status-tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  border-radius: 12px;
}

.welcome-chart {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  opacity: 0.8;
}

.welcome-chart svg { width: 100%; height: 100%; }

/* Grid rows */
.row-3 {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 16px;
  margin-bottom: 16px;
}

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

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

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

.card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.calendar-header { justify-content: center; gap: 16px; }
.calendar-header h3 { font-size: 14px; min-width: 100px; text-align: center; }

.cal-nav {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
}

.cal-nav:hover { border-color: var(--primary); color: var(--primary); }

/* Metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

.metric-item {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: default;
  transition: box-shadow 0.15s;
}

.metric-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.metric-item.alert {
  background: #fff2f0;
  border-color: #ffccc7;
}

.metric-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.metric-trend {
  font-size: 11px;
}

.metric-trend.up { color: var(--success); }
.metric-trend.down { color: var(--danger); }

/* Quick nav */
.quick-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
}

.quick-item:hover {
  border-color: var(--primary);
  background: #e6f7ff;
  color: var(--primary);
}

.quick-item.active {
  border-color: var(--primary);
  background: #e6f7ff;
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.quick-icon { font-size: 22px; }

/* Calendar */
.calendar { padding: 8px 12px 12px; }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: none;
  background: transparent;
  font-family: inherit;
  color: var(--text);
  max-width: 36px;
  margin: 0 auto;
  width: 100%;
}

.cal-day:hover:not(.empty) { background: #e6f7ff; }

.cal-day.empty { cursor: default; }
.cal-day.today { background: var(--primary); color: #fff; font-weight: 600; }
.cal-day.selected:not(.today) { border: 1px solid var(--primary); color: var(--primary); }

.cal-dots {
  display: flex;
  gap: 2px;
  position: absolute;
  bottom: 2px;
}

.cal-dot { width: 4px; height: 4px; border-radius: 50%; }
.cal-dot.green { background: var(--success); }
.cal-dot.red { background: var(--danger); }
.cal-dot.yellow { background: var(--warning); }
.cal-dot.blue { background: var(--primary); }
.cal-dot.purple { background: var(--purple); }

/* Table */
.table-wrap { overflow-x: auto; }

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

.data-table th {
  text-align: left;
  padding: 10px 16px;
  background: #fafafa;
  color: var(--text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.data-table th:hover { color: var(--primary); }
.data-table th.sorted-asc .sort-icon,
.data-table th.sorted-desc .sort-icon { color: var(--primary); }

.sort-icon { font-size: 10px; opacity: 0.5; margin-left: 2px; }

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

.data-table tbody tr:hover { background: #fafafa; }
.data-table tbody tr.selected { background: #e6f7ff; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.done { background: #e6f4ff; color: var(--primary); }
.status-badge.progress { background: #f6ffed; color: var(--success); }
.status-badge.overdue { background: #fff2f0; color: var(--danger); }
.status-badge.pending { background: #f9f0ff; color: var(--purple); }

.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }

.progress-bar {
  flex: 1;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.progress-fill.done { background: var(--primary); }
.progress-fill.progress { background: var(--success); }
.progress-fill.overdue { background: var(--danger); }
.progress-fill.pending { background: #d9d9d9; }

.progress-pct { font-size: 12px; color: var(--text-muted); min-width: 32px; }

.action-btns { display: flex; gap: 8px; }

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.action-btn:hover { background: #f0f0f0; color: var(--primary); }
.action-btn.delete:hover { color: var(--danger); }

/* Timeline */
.tabs-header { border-bottom: 1px solid var(--border); }

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

.tab {
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}

.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

.btn-primary-sm {
  padding: 4px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.btn-primary-sm:hover { background: var(--primary-dark); }

.timeline-wrap {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px 12px 12px;
}

.timeline-wrap::-webkit-scrollbar { width: 4px; }
.timeline-wrap::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 2px; }

.timeline { position: relative; padding-left: 20px; }

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e8e8e8;
}

.timeline-item {
  position: relative;
  margin-bottom: 14px;
  padding-left: 12px;
  cursor: pointer;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--primary);
}

.timeline-card {
  padding: 10px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.timeline-card.blue { background: #e6f4ff; border-left-color: var(--primary); }
.timeline-card.purple { background: #f9f0ff; border-left-color: var(--purple); }
.timeline-card.yellow { background: #fffbe6; border-left-color: var(--warning); }

.timeline-card h5 { font-size: 13px; font-weight: 500; margin-bottom: 4px; }

.timeline-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.timeline-card-head h5 { margin: 0; flex: 1; line-height: 1.4; }

.timeline-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 8px;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.timeline-meta-sub { margin-bottom: 6px; }

.timeline-meta-item {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.activity-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.timeline-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
  font-size: 11px;
}

.activity-type-badge {
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(24, 144, 255, 0.12);
  color: var(--primary);
}

.activity-status {
  flex-shrink: 0;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.activity-status.planned { background: #f0f0f0; color: var(--text-secondary); }
.activity-status.ongoing { background: #e6f7ff; color: var(--primary); }
.activity-status.done { background: #f6ffed; color: var(--success); }
.activity-status.cancelled { background: #fff2f0; color: var(--danger); }

.activity-priority.high { color: var(--danger); }
.activity-priority.medium { color: var(--warning); }
.activity-priority.low { color: var(--text-muted); }

.timeline-budget { color: var(--text-secondary); }

.activity-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.activity-summary b { color: var(--primary); font-weight: 600; }
.activity-summary .dot { opacity: 0.5; }

.activity-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 8px;
}

.activity-detail { font-size: 13px; }
.activity-detail-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.activity-detail-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.activity-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 14px;
}
.activity-detail-body h4 { font-size: 13px; margin-bottom: 8px; color: var(--text); }
.activity-detail-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.activity-detail-tags { margin-bottom: 12px; }

.modal.activity-modal .modal-box { max-width: 520px; }
.activity-form .form-row-2 { margin-bottom: 0; }

/* Announcement */
.announcement {
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.announcement * {
  pointer-events: none;
}

.announcement:hover { background: #fafafa; }
.announcement.unread { background: #f6fbff; }
.announcement.collapsed .ann-body,
.announcement.collapsed .ann-meta,
.announcement.collapsed .ann-hint { display: none; }

.ann-hint {
  font-size: 12px;
  color: var(--primary);
  margin-top: 8px;
  opacity: 0.85;
}

.ann-tags { margin-bottom: 10px; display: flex; gap: 6px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 2px;
}

.tag-pin { background: #fff7e6; color: #d46b08; border: 1px solid #ffd591; }
.tag-important { background: #fff2f0; color: var(--danger); border: 1px solid #ffccc7; }

.announcement h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.announcement p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 8px;
}

.ann-meta { font-size: 12px; color: var(--text-muted); }

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

.announcement-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.announcement-detail-body {
  max-height: 50vh;
  overflow-y: auto;
}

.modal.news-modal .modal-body {
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

/* News */
.link-btn {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

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

.news-list { list-style: none; padding: 0 16px 12px; }

.news-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.1s;
  pointer-events: auto;
}

.news-item * {
  pointer-events: none;
}

.news-item:last-child { border-bottom: none; }
.news-item:hover { background: #fafafa; }
.news-item.unread { background: #f6fbff; }
.news-item.unread .news-title { font-weight: 600; }
.news-item:hover .news-title { color: var(--primary); }

.news-item-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.news-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
  margin-top: 5px;
}

.news-unread-label {
  font-size: 11px;
  color: var(--danger);
  padding: 0 6px;
  border: 1px solid #ffccc7;
  border-radius: 10px;
  background: #fff2f0;
}

.news-unread-badge {
  font-size: 11px;
  font-weight: normal;
  color: #fff;
  background: var(--danger);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.news-unread-badge.hidden { display: none; }

.tag-unread {
  background: #fff2f0;
  color: var(--danger);
  border: 1px solid #ffccc7;
}

.modal.news-modal { max-width: 560px; width: 94vw; }

.news-detail-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

.news-detail-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.news-detail-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-height: 50vh;
  overflow-y: auto;
}

.news-detail-tags { margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.news-title {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  transition: color 0.15s;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.news-date { font-size: 12px; color: var(--text-muted); }

.news-cat {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  background: #f0f0f0;
  color: var(--text-secondary);
}

.news-cat.activity { background: #e6f4ff; color: var(--primary); }
.news-cat.notice { background: #fff7e6; color: #d46b08; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-overlay:not(.hidden) {
  display: flex !important;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

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

.modal-header h3 { font-size: 16px; font-weight: 600; }

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius);
}

.modal-close:hover { background: #f5f5f5; color: var(--text); }

.modal-body { padding: 20px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.btn-default {
  padding: 6px 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

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

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 400;
  display: flex;
  justify-content: flex-end;
}

.drawer {
  width: 360px;
  max-width: 90vw;
  background: var(--card-bg);
  height: 100%;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

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

.drawer-header h3 { font-size: 16px; }

.notify-list { list-style: none; overflow-y: auto; flex: 1; }

.notify-item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.notify-item:hover { background: #fafafa; }
.notify-item.unread { background: #e6f7ff; }
.notify-item h5 { font-size: 13px; margin-bottom: 4px; }
.notify-item p { font-size: 12px; color: var(--text-secondary); }
.notify-item time { font-size: 11px; color: var(--text-muted); }

/* Toast */
.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 600;
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Placeholder page */
.page-placeholder {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 60px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}

.page-placeholder h2 { font-size: 18px; margin-bottom: 8px; }
.page-placeholder p { color: var(--text-muted); font-size: 13px; }

@media (max-width: 1200px) {
  .row-3 { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
}

/* Login */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a2b4b 0%, #243a5e 50%, #1a2b4b 100%);
  padding: 20px;
}

.login-page.hidden { display: none; }

.login-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.login-brand {
  text-align: center;
  padding: 32px 24px 20px;
  background: linear-gradient(180deg, #e6f4ff 0%, #fff 100%);
}

.login-logo svg { width: 48px; height: 48px; margin: 0 auto 12px; display: block; }
.login-brand h1 { font-size: 22px; margin-bottom: 6px; color: var(--text); }
.login-brand p { font-size: 13px; color: var(--text-muted); }

.login-form { padding: 24px 28px 28px; }

.login-error {
  color: var(--danger);
  font-size: 13px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #fff2f0;
  border-radius: var(--radius);
}

.btn-login {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
}

.btn-login:hover { background: var(--primary-dark); }

.login-tip {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Sub menu */
.nav-group { margin-bottom: 2px; }

.nav-parent {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-parent .nav-arrow {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.2s;
  opacity: 0.6;
}

.nav-group.expanded .nav-arrow { transform: rotate(90deg); }

.nav-children {
  display: none;
  padding-left: 8px;
  margin-bottom: 4px;
}

.nav-group.expanded .nav-children { display: block; }

.nav-sub-item {
  display: block;
  width: 100%;
  padding: 8px 12px 8px 38px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 1px;
}

.nav-sub-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-sub-item.active {
  background: var(--sidebar-active);
  color: #fff;
}

.nav-sub-group { margin-bottom: 1px; }

.nav-sub-parent {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px 8px 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  border-radius: var(--radius);
  cursor: pointer;
  gap: 6px;
}

.nav-sub-parent:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-sub-parent .nav-sub-label { flex: 1; }

.nav-sub-arrow {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
  transition: transform 0.2s;
}

.nav-sub-group.expanded .nav-sub-arrow { transform: rotate(90deg); }

.nav-sub-children {
  display: none;
  padding-left: 4px;
}

.nav-sub-group.expanded .nav-sub-children { display: block; }

.nav-sub-deep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 44px !important;
}

.nav-sub-dot {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-sub-deep.active .nav-sub-dot {
  background: #fff;
  border-color: #fff;
}

.nav-sub-text { flex: 1; }

.nav-group-leaf .nav-leaf { width: 100%; }

.nav-leaf .nav-arrow { display: none; }

.nav-leaf.active {
  background: var(--sidebar-active);
  color: #fff;
}

.inline-metric-brief {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.inline-metric-value {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

.inline-metric-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.issue-badge-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #ff7875;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.search-bar input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
}

.search-hint { font-size: 12px; color: var(--text-muted); }

/* Clickable */
.metric-item {
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}

.clickable-row { cursor: pointer; }

.dashboard-only.hidden { display: none !important; }

.card.flash {
  animation: flashCard 1.5s ease;
  box-shadow: 0 0 0 2px var(--primary);
}

@keyframes flashCard {
  0%, 100% { box-shadow: 0 0 0 2px transparent; }
  50% { box-shadow: 0 0 0 3px var(--primary); }
}

/* Calendar events */
.cal-events-panel {
  border-top: 1px solid var(--border);
  padding: 8px 12px 10px;
  max-height: 320px;
  overflow-y: auto;
}

.cal-events-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
  position: relative;
  z-index: 2;
}

.cal-events-head .link-btn {
  cursor: pointer;
  pointer-events: auto;
  flex-shrink: 0;
}

.cal-events-list { list-style: none; }

.cal-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
}

.cal-event-card {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cal-event-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.08);
}

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

.cal-event-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: #fff;
  line-height: 18px;
}

.cal-event-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}

.cal-event-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}

.cal-event-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cal-event-remind {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.cal-event-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.link-btn.danger { color: var(--danger); }

.cal-event-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

.cal-event-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-event-info li {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.cal-event-info-label {
  flex-shrink: 0;
  width: 32px;
  color: var(--text-muted);
}

.cal-event-info-value {
  flex: 1;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cal-event-more {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 4px;
  list-style: none;
}

.schedule-detail-date {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}

.schedule-detail-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-detail-info li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.schedule-detail-info li span {
  font-size: 12px;
  color: var(--text-muted);
}

.schedule-detail-info li b {
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
}

.cal-event-tag.inline-tag {
  vertical-align: middle;
  margin-left: 4px;
}

/* Schedule modal */
.modal.schedule-modal { max-width: 520px; width: 92vw; }

.schedule-form-date {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

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

.form-group .req { color: var(--danger); }

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

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

.tag-color-btn.active {
  border-color: var(--tag-color, var(--primary));
  background: color-mix(in srgb, var(--tag-color, var(--primary)) 12%, white);
  color: var(--text);
  font-weight: 500;
}

.tag-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tag-color, var(--primary));
  flex-shrink: 0;
}

.tag-color-btn { --tag-color: #1890ff; }
.tag-color-btn[data-tag-id="blue"] { --tag-color: #1890ff; }
.tag-color-btn[data-tag-id="green"] { --tag-color: #52c41a; }
.tag-color-btn[data-tag-id="red"] { --tag-color: #ff4d4f; }
.tag-color-btn[data-tag-id="yellow"] { --tag-color: #faad14; }
.tag-color-btn[data-tag-id="purple"] { --tag-color: #722ed1; }
.tag-color-btn[data-tag-id="orange"] { --tag-color: #fa8c16; }
.tag-color-btn[data-tag-id="cyan"] { --tag-color: #13c2c2; }

.timeline-actions { margin-top: 6px; display: flex; gap: 8px; }

/* Side panel */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 92vw;
  height: 100%;
  background: #fff;
  z-index: 450;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

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

.side-panel.side-panel-wide { width: 480px; max-width: 95vw; }

.side-panel-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
}

.metric-panel-top { margin-bottom: 4px; }

.metric-detail-desc { color: var(--text-secondary); font-size: 13px; margin-top: 8px; }

.metric-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.signed-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}

.signed-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.signed-stat {
  font-size: 13px;
  color: var(--text-secondary);
  background: #f5f5f5;
  padding: 6px 12px;
  border-radius: var(--radius);
}

.signed-stat b { color: var(--primary); font-size: 16px; margin-right: 4px; }

.signed-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: 320px;
}

.signed-table-wrap.compact { max-height: 200px; }

.signed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.signed-table th {
  background: #fafafa;
  padding: 10px 12px;
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.signed-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.signed-table tbody tr:hover { background: #fafafa; }

.contract-link {
  border: none;
  background: #e6f7ff;
  color: var(--primary);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
}

.contract-link:hover {
  background: var(--primary);
  color: #fff;
}

.signed-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
}

.signed-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px;
  text-align: center;
}

.metric-signed-panel {
  border-top: 1px solid var(--border);
  padding: 12px 16px 16px;
  background: #fafafa;
}

.metric-signed-panel.hidden { display: none; }

.signed-inline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}

.metric-item.active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.25);
  background: #e6f7ff !important;
}

.side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 440;
}

.metric-detail-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 12px;
}

.detail-pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: var(--radius);
  font-size: 12px;
  overflow: auto;
}

.module-card { margin-bottom: 16px; }

.module-empty {
  padding: 48px 24px;
  text-align: center;
}

.module-empty .muted { color: var(--text-muted); font-size: 13px; margin: 12px 0 20px; }

.drawer-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.drawer-count { font-size: 13px; color: var(--primary); font-weight: normal; }

.ann-body.hidden { display: none; }

.status-tag {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.status-tag:hover { opacity: 0.9; }

/* Project progress */
#project-table { font-size: 12px; }
#project-table .col-code { color: var(--text-muted); white-space: nowrap; }
#project-table .col-name { min-width: 140px; }
#project-table .col-period { white-space: nowrap; color: var(--text-secondary); font-size: 11px; }

.project-name-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
}

.project-name-link:hover { text-decoration: underline; }

.project-type-tag {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.priority-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 18px;
}

.priority-badge.high { background: #fff2f0; color: #cf1322; }
.priority-badge.medium { background: #fff7e6; color: #d46b08; }
.priority-badge.low { background: #f6ffed; color: #389e0d; }

.modal.project-modal { max-width: 640px; width: 94vw; }
.modal.project-modal .modal-body { max-height: 70vh; overflow-y: auto; }

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

.project-detail-code {
  font-size: 12px;
  color: var(--text-muted);
}

.project-detail-name {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.project-detail-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.project-detail-progress .progress-bar { flex: 1; }

.project-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.project-detail-grid .detail-item {
  font-size: 13px;
}

.project-detail-grid .detail-item span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 2px;
}

.project-detail-grid .detail-item b { font-weight: 500; color: var(--text); }
.project-detail-grid .detail-item.full { grid-column: 1 / -1; }
.project-detail-grid .detail-item p { margin: 4px 0 0; line-height: 1.5; color: var(--text-secondary); }

.project-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.project-form .form-row-2 { margin-bottom: 0; }

/* —— 活动管理（市场营销） —— */
.content:has(.activity-mgmt-page) {
  padding-left: 8px;
  padding-right: 8px;
}

#module-view:has(.activity-mgmt-page) {
  padding: 0 0 20px;
  width: 100%;
}

.activity-mgmt-page {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.act-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1a2b4b 0%, #243a5e 48%, #2f4f7a 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(26, 43, 75, 0.18);
}

.act-hero-text { flex: 1; min-width: 0; }

.act-hero-badge {
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.act-page-hero .act-mgmt-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.act-page-hero .act-mgmt-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  max-width: 560px;
}

.act-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 4px;
}

.act-hero-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.act-hero-btn:active { transform: scale(0.98); }

.act-hero-btn.outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.act-hero-btn.outline:hover { background: rgba(255, 255, 255, 0.16); }

.act-hero-btn.primary {
  background: #52c41a;
  border-color: #52c41a;
  color: #fff;
  font-weight: 500;
}

.act-hero-btn.primary:hover { background: #73d13d; border-color: #73d13d; }

.act-hero-btn.sm {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

.act-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.act-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}

.act-stat-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.act-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.act-stat-icon.blue { background: #e6f4ff; color: #1890ff; }
.act-stat-icon.green { background: #f6ffed; color: #52c41a; }
.act-stat-icon.gray { background: #f5f5f5; color: #8c8c8c; }
.act-stat-icon.purple { background: #f9f0ff; color: #722ed1; }

.act-stat-body { min-width: 0; }

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

.act-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.act-stat-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.act-mgmt-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(90deg, #fffbe6 0%, #fff 40%);
  border: 1px solid #ffe58f;
  border-left: 4px solid #faad14;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: #595959;
  line-height: 1.6;
}

.act-notice-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #faad14;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.act-mgmt-notice strong {
  display: block;
  color: #262626;
  font-weight: 600;
  margin-bottom: 4px;
}

.act-mgmt-notice p { margin: 0; }

.act-notice-tip {
  margin-top: 6px !important;
  font-size: 12px;
  color: #8c8c8c !important;
}

.act-panel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.act-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.act-panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.act-panel-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.act-mgmt-tabs {
  display: inline-flex;
  background: #f0f2f5;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.act-filter-tab {
  border: none;
  background: transparent;
  padding: 7px 16px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.act-filter-tab:hover { color: #262626; }

.act-filter-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-weight: 500;
}

.act-tab-count {
  font-style: normal;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-weight: 500;
}

.act-filter-tab.active .act-tab-count {
  background: #e6f4ff;
  color: var(--primary);
}

.act-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

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

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

.act-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  height: 34px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.1s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.act-tool:hover { filter: brightness(1.08); }
.act-tool:active { transform: scale(0.98); }
.act-tool svg { width: 15px; height: 15px; flex-shrink: 0; }

.act-tool-refresh {
  width: 34px;
  padding: 0;
  background: #5b4b8a;
}

.act-tool-add { background: #52c41a; }
.act-tool-edit { background: #13c2c2; }
.act-tool-del { background: #fa541c; }
.act-tool-copy { background: #f5222d; }

.act-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  min-width: 240px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.act-search-box:focus-within {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12);
}

.act-search-box svg {
  width: 16px;
  height: 16px;
  color: #bfbfbf;
  flex-shrink: 0;
}

.act-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  font-size: 13px;
  background: transparent;
}

.act-search-scope {
  height: 34px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: #595959;
}

.act-search-btn {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.act-search-btn:hover { background: var(--primary-dark); }

.act-table-wrap {
  overflow-x: auto;
  padding: 0 4px;
}

.act-mgmt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 1100px;
}

.act-mgmt-table thead th {
  background: #f7f9fc;
  color: #434343;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}

.act-mgmt-table tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  color: #595959;
}

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

.act-mgmt-table tbody tr:hover { background: #fafafa; }

.act-mgmt-table tbody tr.is-selected {
  background: linear-gradient(90deg, #e6f7ff 0%, #f0f9ff 100%);
}

.act-mgmt-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

.act-mgmt-table .col-check { width: 44px; text-align: center; }
.act-mgmt-table .col-name { min-width: 320px; }
.act-mgmt-table .col-capacity { width: 110px; white-space: nowrap; }
.act-mgmt-table .col-status { width: 90px; }
.act-mgmt-table .col-start,
.act-mgmt-table .col-end { width: 150px; }
.act-mgmt-table .col-color { width: 120px; }
.act-mgmt-table .col-ops { min-width: 280px; }

.act-name-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.act-cover-wrap {
  position: relative;
  flex-shrink: 0;
}

.act-cover {
  width: 88px;
  height: 60px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.act-cover-img {
  display: block;
  width: 88px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: #f5f5f5;
}

.act-mgmt-row.is-offline .act-cover-img {
  filter: grayscale(0.65);
  opacity: 0.82;
}

.act-cover-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
}

.act-cover-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.act-cover-2 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.act-cover-3 { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.act-cover-4 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.act-cover-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.act-detail-hero.act-cover-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.act-detail-hero.act-cover-2 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.act-detail-hero.act-cover-3 { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.act-detail-hero.act-cover-4 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.act-detail-hero.act-cover-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.act-name-body { min-width: 0; flex: 1; }

.act-title-link {
  display: block;
  color: #1890ff;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
}

.act-title-link:hover { text-decoration: underline; color: #40a9ff; }

.act-meta-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.act-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}

.act-meta-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #bfbfbf;
}

.act-mgmt-row.is-offline .act-title-link { color: #bfbfbf; }
.act-mgmt-row.is-offline .act-meta-chip { color: #d9d9d9; }

.act-capacity-cell { min-width: 100px; }

.act-capacity-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.act-capacity-num strong { color: var(--primary); font-size: 15px; }

.act-capacity-unit { font-size: 12px; color: var(--text-muted); }

.act-capacity-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.act-capacity-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #69c0ff, #1890ff);
  transition: width 0.3s ease;
}

.act-mgmt-row.is-offline .act-capacity-bar span {
  background: #d9d9d9;
}

.act-status-badge,
.act-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.act-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.act-status-badge.normal,
.act-status-pill.normal {
  color: #389e0d;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.act-status-badge.normal .act-status-dot,
.act-status-pill.normal .act-status-dot { background: #52c41a; }

.act-status-badge.offline,
.act-status-pill.offline {
  color: #8c8c8c;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}

.act-status-badge.offline .act-status-dot,
.act-status-pill.offline .act-status-dot { background: #bfbfbf; }

.act-time-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
}

.act-time-pill.start {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #389e0d;
}

.act-time-pill.end {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #096dd9;
}

.act-mgmt-row.is-offline .act-time-pill {
  background: #fafafa;
  border-color: #f0f0f0;
  color: #8c8c8c;
}

.act-color-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.act-color-block {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.act-color-block.inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.act-color-hex {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: #595959;
}

.act-row-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.act-op {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.1s;
}

.act-op svg { width: 13px; height: 13px; }
.act-op:hover { filter: brightness(1.08); }
.act-op:active { transform: scale(0.97); }

.act-op-more { background: #5b4b8a; }
.act-op-edit { background: #13c2c2; }
.act-op-sign { background: #52c41a; }

.act-op .caret { font-size: 10px; opacity: 0.85; }

.act-empty-row { padding: 48px 20px !important; }

.act-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #8c8c8c;
}

.act-empty-icon { font-size: 36px; opacity: 0.7; }

.act-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  font-size: 13px;
  color: #8c8c8c;
}

.act-footer-meta b { color: var(--primary); font-weight: 600; }

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

.act-page-btn,
.act-page-num {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #595959;
  cursor: pointer;
}

.act-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.act-page-num.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.modal.activity-mgmt-modal { max-width: 540px; }

.modal.signin-stat-modal { max-width: 680px; width: 94vw; }
.modal.signin-stat-modal .modal-body { max-height: 70vh; overflow-y: auto; }
.signin-stat-trend-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.signin-stat-trend-note.up {
  color: #389e0d;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}
.signin-stat-trend-note.down {
  color: #cf1322;
  background: #fff1f0;
  border: 1px solid #ffa39e;
}
.signin-stat-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.signin-stat-summary-item {
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signin-stat-summary-item span { font-size: 12px; color: #8c8c8c; }
.signin-stat-summary-item strong { font-size: 18px; color: #262626; }
.signin-stat-summary-item em { font-size: 11px; color: #bfbfbf; font-style: normal; }
.signin-stat-desc { margin: 0 0 12px; font-size: 13px; color: #595959; line-height: 1.5; }
.signin-stat-table-wrap { overflow-x: auto; border: 1px solid #f0f0f0; border-radius: 6px; }
.signin-stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.signin-stat-table th,
.signin-stat-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.signin-stat-table th { background: #fafafa; font-weight: 500; color: #262626; }
.signin-stat-empty { text-align: center; color: #bfbfbf; padding: 16px !important; }
.signin-stat-list { margin: 0; padding-left: 18px; font-size: 13px; color: #595959; line-height: 1.8; }
.signin-stat-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 8px 4px 22px;
  border-bottom: 1px solid #f0f0f0;
}
.signin-stat-bar {
  flex: 1;
  min-width: 0;
  max-width: 36px;
  margin: 0 auto;
  background: linear-gradient(180deg, #69c0ff 0%, #1890ff 100%) !important;
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.signin-stat-bar span {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #8c8c8c;
  white-space: nowrap;
}
.signin-stat-progress {
  height: 8px;
  background: #f0f0f0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.signin-stat-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #36cfc9, #1890ff);
  border-radius: 999px;
}
.signin-stat-progress.arrival span { background: linear-gradient(90deg, #95de64, #52c41a); }

.act-detail-hero {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  position: relative;
  margin-bottom: 4px;
  overflow: hidden;
}

.act-detail-hero.has-image {
  background: #f0f0f0;
}

.act-detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.act-image-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
}

.act-upload-label {
  font-size: 13px;
  font-weight: 500;
  color: #262626;
  width: 100%;
}

.act-upload-hint {
  width: 100%;
  margin: -6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.act-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.act-upload-btn:hover { background: var(--primary-dark); }

.act-upload-reset {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
}

.act-upload-reset:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* 列表 / 卡片切换 */
.act-view-switch {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.act-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #595959;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.act-view-btn svg { width: 15px; height: 15px; }

.act-view-btn:hover { color: #262626; background: #f5f5f5; }

.act-view-btn.active { background: var(--primary); color: #fff; }

.act-view-btn.active:hover { background: var(--primary-dark); color: #fff; }

.act-view-body { width: 100%; }

.act-card-panel { padding: 0 16px 16px; }

.act-card-bar {
  display: flex;
  align-items: center;
  padding: 12px 4px 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 14px;
}

.act-card-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  user-select: none;
}

.act-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.act-mgmt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.act-mgmt-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.act-mgmt-card.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12), 0 4px 12px rgba(24, 144, 255, 0.08);
}

.act-mgmt-card.is-offline { opacity: 0.92; }

.act-card-check-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.act-card-media {
  position: relative;
  height: 168px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.act-card-media .act-cover-tag { left: 10px; bottom: 10px; }

.act-card-img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
  background: #f5f5f5;
}

.act-mgmt-card.is-offline .act-card-img { filter: grayscale(0.65); }

.act-card-media.act-cover-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.act-card-media.act-cover-2 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.act-card-media.act-cover-3 { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.act-card-media.act-cover-4 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.act-card-media.act-cover-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.act-card-body {
  padding: 14px 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.act-card-title a { color: #262626; text-decoration: none; }

.act-card-title a:hover { color: var(--primary); }

.act-mgmt-card.is-offline .act-card-title a { color: #8c8c8c; }

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

.act-card-capacity { font-size: 12px; color: #8c8c8c; }

.act-card-capacity strong { color: var(--primary); font-size: 14px; }

.act-card-times { display: flex; flex-wrap: wrap; gap: 6px; }

.act-card-color { display: flex; align-items: center; gap: 8px; font-size: 12px; }

.act-card-foot {
  display: flex;
  gap: 6px;
  padding: 10px 14px 14px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.act-card-foot .act-op { flex: 1; justify-content: center; }

.act-card-empty { padding: 48px 20px; grid-column: 1 / -1; }

.act-detail-cat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
}

.act-detail-title {
  margin: 12px 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.act-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.act-detail-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f0f5ff;
  color: var(--primary);
  border: 1px solid #d6e4ff;
}

.act-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.act-detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.act-detail-list li span { color: #8c8c8c; }
.act-detail-list li b { font-weight: 500; color: #262626; text-align: right; }

/* —— 活动签到数据页 —— */
#module-view:has(.activity-signin-page) {
  padding: 0 0 24px;
}

.activity-signin-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.signin-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.signin-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color 0.15s, border-color 0.15s;
}

.signin-back-btn svg {
  width: 16px;
  height: 16px;
}

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

.signin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8c8c8c;
}

.signin-breadcrumb i {
  font-style: normal;
  color: #d9d9d9;
}

.signin-breadcrumb .current {
  color: #262626;
  font-weight: 500;
}

.signin-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signin-id-badge {
  font-size: 12px;
  color: #595959;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

.signin-live-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.signin-live-badge.live {
  color: #389e0d;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.signin-live-badge.off {
  color: #8c8c8c;
  background: #fafafa;
  border: 1px solid #d9d9d9;
}

.signin-title-card {
  background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.signin-page-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  line-height: 1.35;
}

.signin-page-desc {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
}

.signin-summary {
  display: grid;
  grid-template-columns: minmax(240px, 280px) 1fr minmax(140px, 168px);
  gap: 14px;
  align-items: stretch;
}

.signin-hero-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(26, 58, 107, 0.22);
}

.signin-hero-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signin-hero-cover.placeholder {
  background-size: cover;
  background-position: center;
}

.signin-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 35, 70, 0.88) 0%, rgba(37, 99, 168, 0.72) 100%);
  pointer-events: none;
}

.signin-hero-body {
  position: relative;
  z-index: 1;
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 168px;
}

.signin-hero-tag {
  align-self: flex-start;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

.signin-hero-year {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.signin-hero-sub {
  margin: 4px 0 10px;
  font-size: 13px;
  opacity: 0.92;
  line-height: 1.4;
}

.signin-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.signin-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.signin-hero-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.signin-hero-progress-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.95;
}

.signin-hero-progress-top b {
  font-weight: 600;
}

.signin-hero-progress-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.signin-hero-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #36cfc9, #69c0ff);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.signin-metrics-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signin-metric-group-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #8c8c8c;
  text-transform: none;
  letter-spacing: 0.02em;
}

.signin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.signin-metric-group:last-child .signin-metrics-grid {
  grid-template-columns: repeat(3, 1fr);
}

.signin-metric {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.signin-metric:hover {
  border-color: #d9d9d9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.signin-metric-icon-wrap {
  font-size: 16px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}

.signin-metric.tone-blue .signin-metric-icon-wrap { background: #e6f7ff; }
.signin-metric.tone-cyan .signin-metric-icon-wrap { background: #e6fffb; }
.signin-metric.tone-green .signin-metric-icon-wrap { background: #f6ffed; }
.signin-metric.tone-orange .signin-metric-icon-wrap { background: #fff7e6; }
.signin-metric.tone-purple .signin-metric-icon-wrap { background: #f9f0ff; }
.signin-metric.tone-gray .signin-metric-icon-wrap { background: #f5f5f5; }
.signin-metric.tone-teal .signin-metric-icon-wrap { background: #e6fffb; }

.signin-metric-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.signin-metric-label {
  font-size: 11px;
  color: #8c8c8c;
}

.signin-metric-value {
  font-size: 17px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
}

.signin-metric-hint {
  font-size: 10px;
  color: #bfbfbf;
  margin-top: 1px;
}

.signin-side-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signin-start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-height: 120px;
  padding: 16px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(165deg, #36cfc9 0%, #13c2c2 45%, #08979c 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(19, 194, 194, 0.4);
  transition: filter 0.15s, transform 0.1s;
}

.signin-start-icon svg {
  width: 32px;
  height: 32px;
}

.signin-start-text {
  font-size: 15px;
  font-weight: 600;
}

.signin-start-sub {
  font-size: 11px;
  opacity: 0.88;
}

.signin-start-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.signin-quick-stats {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px;
  box-shadow: var(--shadow);
  font-size: 11px;
  color: #8c8c8c;
}

.signin-quick-stats div {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.signin-quick-stats strong {
  font-size: 18px;
  color: #262626;
  font-weight: 600;
}

.signin-quick-stats strong.warn {
  color: #fa8c16;
}

.signin-quick-divider {
  width: 1px;
  height: 28px;
  background: #f0f0f0;
  flex: none !important;
}

.signin-insight-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: #595959;
}

.signin-insight-item b {
  color: #262626;
  font-weight: 600;
  margin-left: 2px;
}

.signin-insight-item b.warn {
  color: #fa8c16;
}

.signin-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.signin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  flex-wrap: wrap;
}

.signin-tabs-row {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.signin-tab {
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.signin-tab em {
  font-style: normal;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: #f0f0f0;
  color: #8c8c8c;
  font-weight: 500;
}

.signin-tab.active em {
  background: #e6f7ff;
  color: var(--primary);
}

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

.signin-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
  background: #fff;
}

.signin-panel-head .signin-search-box {
  margin: 8px 0;
  min-width: 220px;
}

.signin-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  background: #fcfcfc;
  flex-wrap: wrap;
}

.signin-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.signin-toolbar-right {
  flex-shrink: 0;
  margin-left: auto;
}

.signin-tool-section {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: auto;
}

.signin-tool-label {
  display: none;
}

.signin-tool-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}

.signin-btn svg { width: 14px; height: 14px; }

.signin-btn:hover { filter: brightness(1.08); }

.signin-btn-dark { background: #595959; }
.signin-btn-green { background: #52c41a; }
.signin-btn-teal { background: #13c2c2; }
.signin-btn-orange { background: #fa8c16; }
.signin-btn-blue { background: #1890ff; }
.signin-btn-purple { background: #722ed1; }

.signin-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  min-width: 200px;
}

.signin-search-box svg {
  width: 16px;
  height: 16px;
  color: #bfbfbf;
}

.signin-search-box input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 160px;
}

.signin-table-wrap {
  overflow-x: auto;
  padding: 0 2px;
}

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

.signin-table thead th {
  background: #fafafa;
  color: #262626;
  font-weight: 500;
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}

.signin-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #595959;
  vertical-align: middle;
}

.signin-table tbody tr:hover { background: #fafafa; }

.signin-table tbody tr.is-selected { background: #e6f7ff; }

.signin-table .col-check { width: 44px; text-align: center; }

.signin-table .col-name { min-width: 140px; }

.signin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.signin-user-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.signin-user-info strong {
  color: #262626;
  font-weight: 500;
}

.signin-audit-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  width: fit-content;
}

.signin-audit-badge.audit-ok {
  color: #389e0d;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.signin-audit-badge.audit-pending {
  color: #d46b08;
  background: #fff7e6;
  border: 1px solid #ffd591;
}

.signin-audit-badge.audit-reject {
  color: #cf1322;
  background: #fff1f0;
  border: 1px solid #ffa39e;
}

.signin-audit-badge.audit-block {
  color: #595959;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
}

.signin-table .col-audit {
  min-width: 100px;
  white-space: nowrap;
}

.signin-audit-select {
  min-width: 92px;
  max-width: 120px;
  height: 28px;
  padding: 0 22px 0 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  line-height: 26px;
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238c8c8c' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

.signin-audit-select.audit-ok {
  color: #389e0d;
  background-color: #f6ffed;
  border-color: #b7eb8f;
}

.signin-audit-select.audit-pending {
  color: #d46b08;
  background-color: #fff7e6;
  border-color: #ffd591;
}

.signin-audit-select.audit-reject {
  color: #cf1322;
  background-color: #fff1f0;
  border-color: #ffa39e;
}

.signin-audit-select.audit-block {
  color: #595959;
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}

.signin-audit-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.signin-sensitive-text {
  color: #1890ff;
}

.signin-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f0f5ff;
  color: #2f54eb;
  border: 1px solid #adc6ff;
}

.signin-needs {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signin-follow {
  color: #722ed1;
  font-size: 12px;
}

.signin-badge-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.signin-badge-color i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.signin-muted {
  color: #bfbfbf;
}

.signin-table .col-sensitive { color: #1890ff; }

.signin-table .col-lock .lock-icon {
  font-size: 11px;
  opacity: 0.65;
  margin-left: 2px;
}

.signin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.signin-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.signin-status-pill.unsigned { color: #1890ff; }
.signin-status-pill.unsigned i { background: #1890ff; }

.signin-status-pill.signed { color: #52c41a; }
.signin-status-pill.signed i { background: #52c41a; }

.signin-empty {
  text-align: center;
  padding: 40px !important;
  color: #8c8c8c;
}

.signin-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
  font-size: 12px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.signin-footer-left b {
  color: #262626;
  font-weight: 600;
}

.signin-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signin-page-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: #595959;
  cursor: pointer;
}

.signin-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.signin-page-num {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.signin-footer-sep {
  margin: 0 8px;
  color: #d9d9d9;
}

/* 签到页恢复经典布局 */
#module-view:has(.activity-signin-page) { padding: 0 0 20px; }
.activity-signin-page { gap: 12px; }
.signin-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.signin-back-btn {
  flex-shrink: 0;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
}
.signin-back-btn:hover { color: var(--primary); border-color: var(--primary); }
.signin-top-title { margin: 0; font-size: 15px; font-weight: 600; color: #262626; line-height: 1.4; }
.signin-summary {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 12px;
  align-items: stretch;
}
.signin-hero-card {
  background: linear-gradient(145deg, #1a3a6b 0%, #2563a8 55%, #1e4f8c 100%);
  border-radius: 8px;
  padding: 18px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  box-shadow: 0 4px 14px rgba(26, 58, 107, 0.25);
  position: static;
  overflow: visible;
}
.signin-hero-card::after { display: none; }
.signin-hero-year { font-size: 36px; font-weight: 700; line-height: 1.1; }
.signin-hero-sub { margin: 6px 0 12px; font-size: 13px; opacity: 0.92; }
.signin-hero-meta { display: flex; flex-direction: column; gap: 6px; font-size: 12px; opacity: 0.88; }
.signin-metrics-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.signin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.signin-metric-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  min-height: 72px;
}
.signin-metric-card:hover {
  border-color: #91d5ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.12);
  transform: translateY(-1px);
}
.signin-metric-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.25);
}
.signin-metric-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.signin-metric-card.tone-blue .signin-metric-card-icon { background: #e6f7ff; }
.signin-metric-card.tone-cyan .signin-metric-card-icon { background: #e6fffb; }
.signin-metric-card.tone-green .signin-metric-card-icon { background: #f6ffed; }
.signin-metric-card.tone-orange .signin-metric-card-icon { background: #fff7e6; }
.signin-metric-card.tone-gray .signin-metric-card-icon { background: #f5f5f5; }
.signin-metric-card.tone-purple .signin-metric-card-icon { background: #f9f0ff; }
.signin-metric-card.tone-teal .signin-metric-card-icon { background: #e6fffb; }
.signin-metric-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signin-metric-card-label {
  font-size: 11px;
  color: #8c8c8c;
  line-height: 1.2;
}
.signin-metric-card-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.signin-metric-card-value {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  line-height: 1.1;
}
.signin-metric-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.signin-metric-trend svg {
  width: 12px;
  height: 12px;
}
.signin-metric-trend.up {
  color: #389e0d;
  background: #f6ffed;
}
.signin-metric-trend.down {
  color: #cf1322;
  background: #fff1f0;
}
.signin-metric-trend.flat {
  color: #8c8c8c;
  background: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
}
.signin-metric-icon-wrap { display: none; }
.signin-metric-hint { display: none; }
.signin-start-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 100px;
  padding: 16px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #36cfc9 0%, #13c2c2 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(19, 194, 194, 0.35);
}
.signin-start-btn svg { width: 28px; height: 28px; }
.signin-start-icon, .signin-start-text, .signin-start-sub { display: none; }
.signin-tabs-row { display: flex; padding: 0 12px; border-bottom: 1px solid #f0f0f0; background: #fafafa; }
.signin-tab { padding: 12px 18px; }
.signin-tab em { display: none; }
.signin-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
  flex-direction: row;
  background: transparent;
}
.signin-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.signin-toolbar-right {
  flex-shrink: 0;
  margin-left: auto;
}
.activity-signin-page .signin-toolbar {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.activity-signin-page .signin-tool-section {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}
.activity-signin-page .signin-tool-btns {
  display: flex;
  gap: 4px;
}
.signin-footer { display: block; padding: 10px 14px 12px; font-size: 12px; color: #8c8c8c; }
.signin-footer-right { display: none; }

/* 经典签到页：去掉优化版残留控件与多余滚动条按钮 */
.activity-signin-page .signin-panel-head .signin-search-box,
.activity-signin-page .signin-quick-stats,
.activity-signin-page .signin-insight-bar {
  display: none !important;
}
.activity-signin-page .signin-tabs-row {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.activity-signin-page .signin-tabs-row::-webkit-scrollbar {
  height: 4px;
}
.activity-signin-page .signin-tabs-row::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}
.activity-signin-page .signin-metrics-wrap,
.activity-signin-page .signin-metrics-panel {
  overflow: visible;
}
.activity-signin-page .signin-start-btn {
  flex: 0 0 auto;
  min-height: auto;
}
body:has(.activity-signin-page)::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}

@media (max-width: 1100px) {
  .act-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .act-panel-head { flex-direction: column; align-items: flex-start; }
  .signin-summary { grid-template-columns: 1fr; }
  .signin-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .signin-stat-summary { grid-template-columns: 1fr; }
  .signin-metric-group:last-child .signin-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .signin-side-actions { flex-direction: row; }
  .signin-start-btn {
    flex: 1;
    min-height: auto;
    padding: 14px 16px;
  }
  .signin-quick-stats { flex: 1; }
  .signin-panel-head { flex-direction: column; align-items: stretch; padding-right: 0; }
  .signin-panel-head .signin-search-box { margin: 0 14px 10px; width: auto; }
}

/* —— 微站管理系统 —— */
.content:has(.microsite-mgmt-page) {
  padding: 12px 16px 20px;
  background: #f5f7fa;
}

#module-view:has(.microsite-mgmt-page) {
  padding: 0;
  width: 100%;
}

.microsite-mgmt-page {
  width: 100%;
  min-height: calc(100vh - var(--topbar-h) - 48px);
}

.ms-page-head {
  margin-bottom: 14px;
}

.ms-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.ms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.ms-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.ms-filter-select {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  color: #262626;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238c8c8c' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  min-width: 88px;
  cursor: pointer;
}

.ms-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
}

.ms-search-box svg {
  width: 16px;
  height: 16px;
  color: #bfbfbf;
  flex-shrink: 0;
}

.ms-search-box input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  background: transparent;
}

.ms-search-btn {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  color: #262626;
  cursor: pointer;
  white-space: nowrap;
}

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

.ms-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ms-view-switch {
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.ms-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  background: #fff;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  font-family: inherit;
}

.ms-view-btn svg {
  width: 14px;
  height: 14px;
}

.ms-view-btn + .ms-view-btn {
  border-left: 1px solid #d9d9d9;
}

.ms-view-btn.active {
  background: #595959;
  color: #fff;
}

.ms-view-btn.active:hover {
  background: #434343;
  color: #fff;
}

.ms-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}

.ms-create-btn:hover {
  background: var(--primary-dark);
}

.ms-create-btn svg {
  width: 14px;
  height: 14px;
}

.ms-create-btn.sm {
  margin-top: 12px;
  height: 36px;
}

.ms-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ms-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}

.ms-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.ms-card-banner {
  position: relative;
  min-height: 176px;
  padding: 14px 14px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.ms-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.ms-gradient-2 { background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); }
.ms-gradient-3 { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.ms-gradient-4 { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.ms-gradient-5 { background: linear-gradient(135deg, #f472b6 0%, #fb923c 100%); }
.ms-gradient-6 { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }

.ms-banner-year {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 6px;
}

.ms-banner-title-cn {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-banner-title-en {
  margin: 0;
  font-size: 9px;
  line-height: 1.35;
  opacity: 0.88;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-banner-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ms-banner-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.ms-banner-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ms-banner-tool {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ms-banner-tool:hover {
  background: rgba(255, 255, 255, 0.32);
}

.ms-banner-tool svg {
  width: 14px;
  height: 14px;
}

.ms-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ms-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  line-height: 1.45;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-status-tag {
  flex-shrink: 0;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1.6;
  white-space: nowrap;
}

.ms-status-tag.ended {
  color: #d46b08;
  background: #fff7e6;
  border-color: #ffd591;
}

.ms-status-tag.normal {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.ms-status-tag.draft {
  color: #8c8c8c;
  background: #fafafa;
  border-color: #d9d9d9;
}

.ms-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #8c8c8c;
}

.ms-info-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.ms-info-list svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #bfbfbf;
}

.ms-info-label {
  color: #8c8c8c;
}

.ms-publish.published {
  color: #389e0d;
}

.ms-publish.unpublished {
  color: #8c8c8c;
}

.ms-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid #f5f5f5;
}

.ms-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}

.ms-act svg {
  width: 14px;
  height: 14px;
}

.ms-act-del { color: #ff4d4f; }
.ms-act-edit { color: var(--primary); }
.ms-act-config { color: var(--primary); }

.ms-act:hover {
  opacity: 0.85;
}

.ms-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: #595959;
}

.ms-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ms-page-size select {
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238c8c8c' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  cursor: pointer;
}

.ms-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  color: #595959;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ms-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ms-page-num {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #262626;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.ms-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #595959;
}

.ms-page-jump input {
  width: 44px;
  height: 32px;
  text-align: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
}

.ms-table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

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

.ms-table th,
.ms-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.ms-table th {
  background: #fafafa;
  font-weight: 500;
  color: #262626;
}

.ms-table .col-name strong {
  display: block;
  color: #262626;
  margin-bottom: 2px;
}

.ms-list-en {
  display: block;
  font-size: 11px;
  color: #bfbfbf;
  text-transform: uppercase;
}

.ms-table .col-ops {
  white-space: nowrap;
}

.ms-table .col-ops .ms-act + .ms-act {
  margin-left: 8px;
}

.ms-empty,
.ms-empty-cell {
  text-align: center;
  color: #8c8c8c;
  padding: 48px 20px;
}

.modal.microsite-modal { max-width: 560px; width: 94vw; }
.modal.microsite-modal .modal-body { max-height: 70vh; overflow-y: auto; }

.microsite-detail .ms-detail-banner {
  border-radius: 8px;
  padding: 16px;
  color: #fff;
  margin-bottom: 14px;
}

.microsite-detail .ms-detail-banner h3 {
  margin: 6px 0 4px;
  font-size: 15px;
}

.microsite-detail .ms-detail-en {
  margin: 0;
  font-size: 11px;
  opacity: 0.9;
  text-transform: uppercase;
}

.ms-detail-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.ms-detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.ms-detail-list span {
  color: #8c8c8c;
}

.ms-detail-tip {
  margin: 0;
  font-size: 12px;
  color: #bfbfbf;
}

/* —— 客户管理系统 · 仪表盘 —— */
.content:has(.crm-dashboard-page) {
  padding: 16px 20px 24px;
  background: #f0f2f5;
}

#module-view:has(.crm-dashboard-page) {
  padding: 0;
  width: 100%;
}

.crm-dashboard-page {
  width: 100%;
  min-height: calc(100vh - var(--topbar-h) - 48px);
  color: #262626;
  font-size: 13px;
}

.crm-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.crm-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.crm-page-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-period-select,
.crm-date-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #595959;
}

.crm-period-select select,
.crm-date-select input {
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: #262626;
}

.crm-date-select {
  position: relative;
  min-width: 140px;
}

.crm-date-select input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.crm-date-ph {
  pointer-events: none;
  font-size: 13px;
}

.crm-panel {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  padding: 16px 18px 18px;
}

.crm-section-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

.crm-briefing-panel {
  margin-bottom: 16px;
}

.crm-briefing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.crm-brief-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  min-height: 108px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.crm-brief-card:hover {
  border-color: #91caff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.08);
}

.crm-brief-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-brief-icon svg {
  width: 32px;
  height: 32px;
}

.crm-brief-label {
  font-size: 13px;
  color: #595959;
}

.crm-brief-value {
  font-size: 22px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
  padding-right: 40px;
}

.crm-trend {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.crm-trend em {
  font-style: normal;
  color: #bfbfbf;
  margin-left: 2px;
}

.crm-trend.up {
  color: #52c41a;
}

.crm-trend.down {
  color: #ff4d4f;
}

.crm-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.crm-bottom-grid > .crm-panel {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.crm-bottom-grid .crm-chart-panel {
  min-height: 0;
}

.crm-bottom-grid .crm-chart-wrap {
  flex: 1;
  min-height: 220px;
}

.crm-bottom-grid .crm-summary-panel {
  margin-bottom: 0;
}

.crm-bottom-grid .crm-summary-body {
  flex: 1;
  overflow-y: auto;
  max-height: 720px;
  padding-right: 2px;
}

.crm-bottom-grid .crm-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-bottom-grid .crm-summary-grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-summary-combined-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.crm-summary-combined-labels .crm-summary-title:first-child {
  grid-column: 1 / span 2;
}

.crm-summary-combined-labels .crm-summary-title:last-child {
  grid-column: 3 / span 2;
}

.crm-summary-combined .crm-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-bottom-grid .crm-summary-card {
  min-height: 72px;
  padding: 12px 14px;
}

.crm-bottom-grid .crm-summary-card-value {
  font-size: 22px;
}

.crm-bottom-grid .crm-summary-trend {
  font-size: 11px;
}

.crm-bottom-grid .crm-summary-toolbar,
.crm-bottom-grid .crm-target-filters {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-bottom-grid .crm-summary-toolbar-right,
.crm-bottom-grid .crm-target-filters-right {
  width: auto;
  flex-shrink: 0;
  margin-left: auto;
}

.crm-bottom-grid .crm-scope-group {
  flex-shrink: 0;
}

.crm-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.crm-panel-toolbar.compact {
  margin-bottom: 8px;
}

.crm-scope-group {
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.crm-scope-btn {
  height: 28px;
  padding: 0 12px;
  border: none;
  background: #fff;
  font-size: 12px;
  color: #595959;
  cursor: pointer;
  font-family: inherit;
}

.crm-scope-btn + .crm-scope-btn {
  border-left: 1px solid #d9d9d9;
}

.crm-scope-btn.active {
  background: #1677ff;
  color: #fff;
}

.crm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.crm-mini-select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
}

.crm-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #595959;
  cursor: pointer;
}

.crm-chart-type {
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}

.crm-type-btn {
  width: 32px;
  height: 28px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #8c8c8c;
}

.crm-type-btn + .crm-type-btn {
  border-left: 1px solid #d9d9d9;
}

.crm-type-btn.active {
  background: #e6f4ff;
  color: #1677ff;
}

/* —— 合同金额目标及完成情况 —— */
.crm-chart-panel {
  display: flex;
  flex-direction: column;
}

.crm-target-head {
  margin-bottom: 12px;
}

.crm-target-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

.crm-target-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8c8c8c;
  max-width: 92%;
}

.crm-target-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.crm-target-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-period-select-sm,
.crm-date-select-sm {
  height: 28px;
  font-size: 12px;
}

.crm-chart-mode {
  display: inline-flex;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}

.crm-chart-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: none;
  background: #fff;
  font-size: 12px;
  color: #595959;
  cursor: pointer;
  font-family: inherit;
}

.crm-chart-mode-btn + .crm-chart-mode-btn {
  border-left: 1px solid #d9d9d9;
}

.crm-chart-mode-btn svg {
  flex-shrink: 0;
}

.crm-chart-mode-btn.active {
  background: #1677ff;
  color: #fff;
}

.crm-chart-mode-btn.active svg {
  stroke: #fff;
}

.crm-chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #595959;
}

.crm-chart-legend-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
  padding-top: 4px;
  font-size: 12px;
  color: #595959;
}

.crm-chart-legend-bottom .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.crm-chart-legend-bottom .dot.contract {
  background: #1677ff;
}

.crm-chart-legend-bottom .dot.collection {
  background: #52c41a;
}

.crm-chart-legend-bottom .dot.target {
  background: #e8e8e8;
  border: 1px solid #d9d9d9;
}

.crm-chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.crm-chart-legend .dot.contract {
  background: #1677ff;
}

.crm-chart-legend .dot.collection {
  background: #52c41a;
}

.crm-chart-legend .dot.target {
  background: #e8e8e8;
}

.crm-chart-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin-bottom: 16px;
  min-height: 280px;
  flex: 1;
}

.crm-simple-chart {
  position: relative;
  width: 100%;
  padding: 8px 4px 4px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: visible;
}

.crm-bar-tooltip {
  position: fixed;
  z-index: 10050;
  min-width: 148px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s ease;
}

.crm-bar-tooltip.hidden {
  opacity: 0;
  visibility: hidden;
}

.crm-bar-tooltip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.crm-bar-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.crm-bar-tip-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.crm-bar-tip-row .dot.contract {
  background: #1677ff;
}

.crm-bar-tip-row .dot.collection {
  background: #52c41a;
}

.crm-bar-tip-row .dot.target {
  background: #d9d9d9;
}

.crm-bar-tip-row b {
  margin-left: auto;
  font-weight: 600;
}

.crm-bar-tip-row-active {
  color: #fff;
}

.crm-bar-tip-row-active b {
  color: #ffd666;
}

.crm-simple-chart-plot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 200px;
  padding: 12px 8px 4px;
  overflow: visible;
}

.crm-scol {
  flex: 1;
  min-width: 0;
  max-width: 96px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.crm-scol:hover .crm-sbar-group {
  opacity: 0.92;
}

.crm-scol.current .crm-scol-label {
  color: #1677ff;
  font-weight: 600;
}

.crm-sbar-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 180px;
  width: 100%;
}

.crm-sbar {
  flex: 1;
  max-width: 18px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 3px 3px 0 0;
  background: #f5f5f5;
}

.crm-sbar i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height 0.35s ease, filter 0.15s ease, transform 0.15s ease;
}

.crm-sbar.active i {
  filter: brightness(1.12);
  transform: scaleX(1.08);
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.35);
}

.crm-sbar:hover i {
  filter: brightness(1.08);
}

.crm-scol-label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #8c8c8c;
  text-align: center;
}

.crm-spark-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.crm-spark-table th,
.crm-spark-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
}

.crm-spark-table th {
  color: #8c8c8c;
  font-weight: 500;
}

.crm-spark-table th.current {
  color: #1677ff;
}

.crm-spark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 36px;
  margin: 0 auto 6px;
  background: #f5f5f5;
  border-radius: 4px;
}

.crm-spark i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
}

.crm-spark-table td b {
  display: block;
  font-size: 11px;
  color: #595959;
  font-weight: 500;
}

.crm-simple-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 16px;
  min-height: 220px;
}

.crm-pie-ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.crm-pie-center {
  position: absolute;
  inset: 22%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.crm-pie-center span {
  font-size: 12px;
  color: #8c8c8c;
}

.crm-pie-center b {
  font-size: 13px;
  color: #262626;
}

.crm-pie-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 200px;
}

.crm-pie-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: #595959;
}

.crm-pie-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.crm-pie-list b {
  font-weight: 600;
  color: #262626;
}

.crm-pie-list em {
  margin-left: auto;
  font-style: normal;
  color: #8c8c8c;
  font-size: 12px;
}

.crm-chart-root {
  position: relative;
  width: 100%;
  min-height: 220px;
}

.crm-chart-body {
  display: flex;
  gap: 8px;
  min-height: 220px;
}

.crm-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 44px;
  padding: 8px 0 28px;
  font-size: 11px;
  color: #8c8c8c;
  text-align: right;
}

.crm-chart-plot {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 232px;
  min-height: 232px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

.crm-chart-grid {
  position: absolute;
  inset: 8px 0 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.crm-chart-grid-line {
  display: block;
  border-top: 1px dashed #f0f0f0;
}

.crm-chart-groups {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 208px;
  min-height: 208px;
  padding: 8px 4px 0;
  box-sizing: border-box;
}

.crm-chart-group {
  flex: 1;
  min-width: 0;
  max-width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.crm-chart-group.current .crm-chart-x {
  color: #1677ff;
  font-weight: 600;
}

.crm-chart-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.crm-chart-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #595959;
}

.crm-chart-stat .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-chart-stat .dot.contract {
  background: #1677ff;
}

.crm-chart-stat .dot.collection {
  background: #52c41a;
}

.crm-chart-stat .dot.target {
  background: #d9d9d9;
}

.crm-chart-stat b {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.crm-chart-month-stack {
  position: relative;
  width: 100%;
  max-width: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.crm-chart-target-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 88%;
  min-width: 36px;
  background: #f0f0f0;
  border-radius: 4px 4px 0 0;
  z-index: 0;
}

.crm-chart-fore {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}

.crm-chart-bar-fill {
  width: 14px;
  min-width: 10px;
  flex-shrink: 0;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: crmBarGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.crm-chart-bar-fill.contract {
  background: #1677ff;
}

.crm-chart-bar-fill.collection {
  background: #52c41a;
}

.crm-chart-bar-val {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  color: #595959;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.2;
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-chart-x {
  font-size: 12px;
  color: #8c8c8c;
}

.crm-chart-tooltip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  min-width: 140px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.crm-chart-tooltip.hidden {
  display: none;
}

.crm-chart-tooltip strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.crm-chart-tooltip div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-chart-tooltip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-chart-tooltip .dot.contract {
  background: #1677ff;
}

.crm-chart-tooltip .dot.collection {
  background: #52c41a;
}

.crm-chart-tooltip .dot.target {
  background: #d9d9d9;
}

.crm-chart-tooltip b {
  margin-left: auto;
  font-weight: 600;
}

.crm-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #bfbfbf;
  font-size: 13px;
}

.crm-chart-svg {
  width: 100%;
  height: 192px;
  display: block;
}

.crm-chart-svg-line {
  position: relative;
  z-index: 1;
}

.crm-chart-label {
  font-size: 11px;
  fill: #8c8c8c;
}

.crm-chart-label.current {
  fill: #1677ff;
  font-weight: 600;
}

.crm-chart-hit {
  cursor: pointer;
}

@keyframes crmBarGrow {
  from {
    transform: scaleY(0);
    opacity: 0.6;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.crm-target-table-wrap {
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}

.crm-simple-chart .crm-chart-inline-table {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin: 4px 8px 0;
  padding: 0;
  background: #fff;
}

.crm-simple-chart .crm-chart-inline-table .table-wrap {
  overflow-x: auto;
}

.crm-simple-chart .crm-chart-inline-table .crm-target-table th,
.crm-simple-chart .crm-chart-inline-table .crm-target-table td {
  padding: 8px 10px;
  font-size: 12px;
}

.crm-simple-chart .crm-chart-legend-bottom {
  margin-top: 6px;
  padding-top: 6px;
}

.crm-chart-wrap:has(.crm-chart-inline-table) {
  margin-bottom: 8px;
}

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

.crm-target-table th,
.crm-target-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f5f5f5;
}

.crm-target-table th:first-child,
.crm-target-table td:first-child {
  text-align: left;
}

.crm-target-table th:nth-child(n + 2),
.crm-target-table td:nth-child(n + 2) {
  text-align: right;
}

.crm-target-table th {
  color: #8c8c8c;
  font-weight: 500;
  background: #fafafa;
}

.crm-target-row {
  cursor: pointer;
  transition: background 0.12s;
}

.crm-target-row:hover {
  background: #fafafa;
}

.crm-target-row.warn td:last-child .crm-rate {
  color: #ff4d4f;
}

.crm-rate.low,
.crm-rate.warn {
  color: #fa8c16;
}

.crm-rate.ok {
  color: #52c41a;
  font-weight: 600;
}

.crm-summary-panel {
  margin-bottom: 0;
}

.crm-summary-head {
  margin-bottom: 12px;
}

.crm-summary-head .crm-section-title {
  margin-bottom: 6px;
}

.crm-summary-desc {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.6;
}

.crm-summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.crm-summary-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-summary-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.crm-summary-block {
  margin: 0;
}

.crm-summary-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #262626;
}

.crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.crm-summary-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-summary-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.crm-summary-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 80px;
  padding: 14px 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.crm-summary-card:hover {
  border-color: #91caff;
  box-shadow: 0 6px 16px rgba(22, 119, 255, 0.12);
  transform: translateY(-3px);
}

.crm-summary-card:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
}

.crm-summary-card-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.4;
}

.crm-summary-card-metrics {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  width: 100%;
}

.crm-summary-card-value {
  font-size: 26px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
  flex-shrink: 0;
}

.crm-summary-trend {
  margin-top: 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.crm-summary-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-summary-badge.warn {
  color: #faad14;
  background: #fffbe6;
  border: 1px solid #ffe58f;
}

.crm-summary-badge.danger {
  color: #ff4d4f;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .crm-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-summary-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .crm-summary-grid,
  .crm-summary-grid.cols-2 {
    grid-template-columns: 1fr;
  }
}

.crm-detail-modal {
  font-size: 13px;
}

.crm-detail-summary {
  margin: 0 0 12px;
  color: #595959;
}

.crm-detail-summary strong {
  color: #262626;
  font-size: 16px;
}

.crm-detail-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}

.crm-detail-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f5f5;
}

.crm-detail-list li:last-child {
  border-bottom: none;
}

.crm-detail-list span {
  color: #8c8c8c;
}

.crm-detail-list b.warn {
  color: #ff4d4f;
}

.crm-detail-tip {
  margin: 0;
  font-size: 12px;
  color: #bfbfbf;
}

.crm-detail-table {
  font-size: 13px;
}

.crm-widgets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.crm-widget-panel {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.crm-widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.crm-widget-head-text {
  flex: 1;
  min-width: 0;
}

.crm-widget-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

.crm-widget-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8c8c8c;
}

.crm-widget-tools {
  flex-shrink: 0;
}

.crm-widget-panel .crm-chart-type .crm-type-btn {
  width: auto;
  min-width: 64px;
  padding: 0 12px;
  font-size: 12px;
}

.crm-widget-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.crm-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #595959;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.crm-pill-btn:hover {
  border-color: #91caff;
  color: #1677ff;
}

.crm-pill-btn-muted {
  color: #262626;
}

.crm-metric-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 6px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
}

.crm-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #e6f4ff;
  color: #1677ff;
  font-size: 12px;
  font-weight: 600;
}

.crm-metric-select select {
  border: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: #262626;
  cursor: pointer;
}

.crm-link-btn {
  border: none;
  background: none;
  padding: 0;
  color: #1677ff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.crm-link-btn:hover {
  text-decoration: underline;
}

.crm-funnel-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}

.crm-funnel-svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}

.crm-funnel-layer {
  cursor: pointer;
}

.crm-funnel-layer:hover polygon {
  filter: brightness(1.05);
}

.crm-funnel-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.crm-funnel-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.crm-funnel-bar-row:hover {
  background: #f5f5f5;
}

.crm-funnel-bar-label {
  color: #595959;
}

.crm-funnel-bar-track {
  height: 10px;
  background: #f5f5f5;
  border-radius: 5px;
  overflow: hidden;
}

.crm-funnel-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
}

.crm-funnel-bar-meta {
  color: #8c8c8c;
  white-space: nowrap;
}

.crm-gauge-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}

.crm-gauge-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

.crm-gauge-rate-label,
.crm-gauge-metric-label {
  pointer-events: none;
}

.crm-gauge-foot {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8c8c8c;
  text-align: center;
  line-height: 1.6;
}

.crm-gauge-cap-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #fa8c16;
}

.crm-gauge-foot b {
  color: #262626;
  font-weight: 600;
}

.crm-rank-table-wrap {
  flex: 1;
  overflow: auto;
}

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

.crm-rank-table th {
  text-align: left;
  font-weight: 500;
  color: #8c8c8c;
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.crm-rank-table th:last-child {
  text-align: right;
}

.crm-rank-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #fafafa;
  vertical-align: middle;
}

.crm-rank-table td:last-child {
  text-align: right;
}

.crm-rank-row {
  cursor: pointer;
}

.crm-rank-row:hover td {
  background: #fafafa;
}

.crm-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.crm-rank-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.crm-rank-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6f4ff;
  color: #1677ff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-rank-name {
  color: #262626;
  font-weight: 500;
}

.crm-crown {
  font-style: normal;
  margin-left: 4px;
  font-size: 14px;
}

.crm-follow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}

.crm-follow-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 12px 10px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.crm-follow-cell:hover {
  border-color: #91caff;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.08);
  background: #fff;
}

.crm-follow-label {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.35;
}

.crm-follow-value {
  font-size: 22px;
  font-weight: 600;
  color: #262626;
  line-height: 1;
}

@media (max-width: 1400px) {
  .crm-briefing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-bottom-grid { grid-template-columns: 1fr; }
  .crm-widgets-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .crm-follow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1400px) {
  .ms-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .ms-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-toolbar { flex-direction: column; align-items: stretch; }
  .ms-toolbar-right { justify-content: flex-end; }
}

/* —— 项目管理（卡片列表） —— */
.content:has(.project-mgmt-page) {
  padding: 16px 20px 24px;
  background: #f0f2f5;
}

#module-view:has(.project-mgmt-page) {
  padding: 0;
}

.project-mgmt-page {
  width: 100%;
  min-height: calc(100vh - var(--topbar-h) - 48px);
}

.project-mgmt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.project-mgmt-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.project-mgmt-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  color: #595959;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-mgmt-back:hover {
  border-color: #91caff;
  color: #1677ff;
  background: #f0f7ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.16);
  transform: translateX(-2px);
}

.project-mgmt-back:active {
  transform: translateX(0);
}

.project-mgmt-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #262626;
  line-height: 1.3;
}

.project-mgmt-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: #8c8c8c;
}

.project-mgmt-new {
  flex-shrink: 0;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-mgmt-new:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
}

.project-mgmt-new:active {
  transform: translateY(0);
}

.project-mgmt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.project-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition:
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.project-card:hover {
  border-color: #91caff;
  box-shadow: 0 10px 28px rgba(22, 119, 255, 0.14);
  transform: translateY(-4px);
}

.project-card:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
}

.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--project-header, #1677ff);
  color: #fff;
}

.project-card-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.project-card-progress {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.project-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
}

.project-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  line-height: 1.45;
}

.project-card-title-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.project-card-title-btn:hover {
  color: #1677ff;
  transform: translateX(2px);
}

.project-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-card-meta li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.5;
}

.project-card-meta li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #bfbfbf;
}

.project-card-desc {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 12px 12px;
}

.project-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.project-card-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.project-card-btn.view {
  background: #e6f4ff;
  color: #1677ff;
}

.project-card-btn.view:hover {
  background: #bae0ff;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.28);
}

.project-card-btn.edit {
  background: #fffbe6;
  color: #d48806;
}

.project-card-btn.edit:hover {
  background: #fff1b8;
  box-shadow: 0 4px 14px rgba(212, 136, 6, 0.22);
}

.project-card-btn.delete {
  background: #fff2f0;
  color: #ff4d4f;
}

.project-card-btn.delete:hover {
  background: #ffccc7;
  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.22);
}

/* —— 项目详情页 —— */
.content:has(.project-detail-page) {
  padding: 16px 20px 24px;
  background: #f0f2f5;
}

#module-view:has(.project-detail-page) {
  padding: 0;
}

.project-detail-page {
  width: 100%;
  min-height: calc(100vh - var(--topbar-h) - 48px);
}

.pd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pd-back {
  flex-shrink: 0;
}

.pd-title {
  flex: 1;
  min-width: 200px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
}

.pd-deadline {
  font-size: 13px;
  color: #8c8c8c;
  white-space: nowrap;
}

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.pd-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.pd-stat-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 108px;
  padding: 14px 14px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.28s ease;
}

.pd-stat-card:hover {
  transform: translateY(-4px);
  border-color: #d6e4ff;
  box-shadow: 0 10px 24px rgba(22, 119, 255, 0.12);
}

.pd-stat-card.is-alert:hover {
  border-color: #ffa39e;
  box-shadow: 0 10px 24px rgba(255, 77, 79, 0.12);
}

.pd-stat-card.is-alert {
  border-color: #ffccc7;
}

.pd-stat-trend {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ff4d4f;
  opacity: 0.85;
}

.pd-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-stat-card:hover .pd-stat-icon {
  transform: scale(1.1);
}

.pd-stat-card:hover .pd-stat-value b {
  color: #1677ff;
}

.pd-stat-icon svg {
  width: 20px;
  height: 20px;
}

.pd-stat-icon.tone-blue {
  background: #e6f4ff;
  color: #1677ff;
}

.pd-stat-icon.tone-red {
  background: #fff2f0;
  color: #ff4d4f;
}

.pd-stat-body {
  min-width: 0;
  flex: 1;
}

.pd-stat-title {
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 6px;
}

.pd-stat-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.pd-stat-value b {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
  transition: color 0.25s ease;
}

.pd-stat-value span {
  font-size: 12px;
  color: #8c8c8c;
}

.pd-stat-sub {
  margin: 0;
  font-size: 11px;
  color: #bfbfbf;
  line-height: 1.45;
}

.pd-panel {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 0 0 16px;
  margin-bottom: 16px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pd-panel:hover {
  border-color: #e6f4ff;
  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.06);
}

.pd-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
}

.pd-tab {
  position: relative;
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px 6px 0 0;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.pd-tab:hover {
  color: #1677ff;
  background: #f0f7ff;
}

.pd-tab.active {
  color: #1677ff;
  font-weight: 500;
}

.pd-tab.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: #1677ff;
  border-radius: 2px 2px 0 0;
}

.pd-tab-add {
  margin-left: 4px;
  width: 28px;
  height: 28px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  background: #fafafa;
  color: #8c8c8c;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.pd-tab-add:hover {
  border-color: #91caff;
  color: #1677ff;
  background: #e6f4ff;
  transform: scale(1.08);
}

.pd-owner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 0;
}

.pd-owner-tag {
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid #f0f0f0;
  background: #fafafa;
  font-size: 12px;
  color: #595959;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pd-owner-tag:hover {
  border-color: #ffadd2;
  background: #fff0f6;
  color: #eb2f96;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(235, 47, 150, 0.12);
}

.pd-owner-tag.active {
  border-color: #ffadd2;
  background: #fff0f6;
  color: #eb2f96;
}

.pd-table-wrap {
  padding: 12px 16px 0;
  overflow-x: auto;
}

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

.pd-table th,
.pd-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: top;
}

.pd-table th {
  font-weight: 500;
  color: #8c8c8c;
  background: #fafafa;
  white-space: nowrap;
}

.pd-table td {
  color: #262626;
  transition: background-color 0.2s ease;
}

.pd-table tbody tr {
  transition: background-color 0.2s ease;
}

.pd-table tbody tr:hover td {
  background: #f0f7ff;
}

.pd-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #1677ff;
}

.pd-follow-cell {
  max-width: 360px;
  color: #595959;
  line-height: 1.55;
}

.pd-empty-row {
  text-align: center;
  color: #bfbfbf;
  padding: 24px !important;
}

.pd-tag {
  display: inline-flex;
  margin: 0 4px 4px 0;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-tag.ok {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.pd-tag.warn {
  background: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
}

.pd-tag.muted {
  background: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #e8e8e8;
}

.pd-file-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px;
}

.pd-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 8px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pd-file-item:hover {
  background: #fafafa;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pd-file-item:hover .pd-file-icon {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
}

.pd-file-item:last-child {
  border-bottom: none;
}

.pd-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #fff2f0;
  color: #ff4d4f;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.pd-file-info b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.pd-file-item:hover .pd-file-info b {
  color: #1677ff;
}

.pd-file-info span {
  font-size: 12px;
  color: #8c8c8c;
}

.pd-file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pd-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fff;
  color: #595959;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pd-file-btn:hover {
  border-color: #91caff;
  color: #1677ff;
  background: #e6f4ff;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
}

.pd-file-btn:active {
  transform: scale(0.96);
}

.pd-file-empty {
  padding: 20px;
  text-align: center;
  color: #bfbfbf;
  font-size: 13px;
}

.pd-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 8px 16px 0;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #1677ff;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pd-upload-btn:hover {
  background: #4096ff;
  box-shadow: 0 6px 16px rgba(22, 119, 255, 0.35);
  transform: translateY(-2px);
}

.pd-upload-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.25);
}

.pd-side-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 14px 14px 12px;
  margin-bottom: 16px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pd-side-card:hover {
  border-color: #e6f4ff;
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.08);
}

.pd-side-head .link-btn {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.pd-side-head .link-btn:hover {
  opacity: 0.85;
}

.pd-side-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

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

.pd-side-head h3 {
  margin: 0;
}

.pd-task-list,
.pd-notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-task-item {
  padding: 10px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 8px;
  transition:
    background-color 0.2s ease,
    padding-left 0.2s ease;
}

.pd-task-item:hover {
  background: #fafafa;
  padding-left: 12px;
}

.pd-task-item:hover .pd-task-bar span {
  filter: brightness(1.05);
}

.pd-task-item:last-child {
  border-bottom: none;
}

.pd-task-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
  color: #262626;
}

.pd-task-top b {
  font-size: 13px;
  color: #262626;
}

.pd-task-bar {
  height: 6px;
  background: #f5f5f5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.pd-task-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease, filter 0.2s ease;
}

.pd-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  color: #8c8c8c;
}

.pd-task-meta em {
  font-style: normal;
  color: #262626;
}

.pd-notify-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 8px;
  cursor: default;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.pd-notify-item:hover {
  background: #fafafa;
  transform: translateX(4px);
}

.pd-notify-item:hover .pd-notify-dot {
  transform: scale(1.35);
}

.pd-notify-item:last-child {
  border-bottom: none;
}

.pd-notify-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pd-notify-dot.tone-green { background: #52c41a; }
.pd-notify-dot.tone-blue { background: #1677ff; }
.pd-notify-dot.tone-red { background: #ff4d4f; }

.pd-notify-body p {
  margin: 0 0 4px;
  font-size: 13px;
  color: #262626;
  line-height: 1.45;
}

.pd-notify-body time {
  font-size: 11px;
  color: #bfbfbf;
}

.pd-table tbody tr:hover .pd-tag {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card-btn,
  .project-mgmt-back,
  .project-mgmt-new,
  .pd-stat-card,
  .pd-stat-icon,
  .pd-panel,
  .pd-tab,
  .pd-tab-add,
  .pd-owner-tag,
  .pd-file-item,
  .pd-file-btn,
  .pd-upload-btn,
  .pd-side-card,
  .pd-task-item,
  .pd-notify-item,
  .project-card-title-btn {
    transition: none !important;
  }

  .project-card:hover,
  .project-card-btn:hover,
  .pd-stat-card:hover,
  .pd-file-item:hover,
  .pd-upload-btn:hover,
  .pd-owner-tag:hover,
  .pd-notify-item:hover {
    transform: none !important;
  }
}

@media (max-width: 1400px) {
  .pd-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pd-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1400px) {
  .project-mgmt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .content:has(.microsite-mgmt-page) { padding: 8px; }
  .ms-card-grid { grid-template-columns: 1fr; }
  .ms-search-box { max-width: none; width: 100%; }
  .ms-toolbar-left { width: 100%; }
  .ms-footer { flex-direction: column; align-items: flex-start; }
  .content:has(.activity-mgmt-page),
  .content:has(.activity-signin-page) { padding-left: 6px; padding-right: 6px; }
  #module-view:has(.activity-mgmt-page),
  #module-view:has(.activity-signin-page) { padding: 0 0 16px; }
  .signin-metrics-grid,
  .signin-metric-group:last-child .signin-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .signin-insight-bar { flex-direction: column; gap: 8px; }
  .act-page-hero { flex-direction: column; padding: 18px; }
  .act-stats-grid { grid-template-columns: 1fr; }
  .act-panel-toolbar { flex-direction: column; align-items: stretch; }
  .act-toolbar-left,
  .act-toolbar-right { width: 100%; }
  .act-search-box { min-width: 0; width: 100%; }
  .act-table-footer { flex-direction: column; align-items: flex-start; }
  .act-card-grid { grid-template-columns: 1fr; }
  .act-view-btn span { display: none; }
  .project-detail-grid { grid-template-columns: 1fr; }
  .project-mgmt-grid { grid-template-columns: 1fr; }
  .project-mgmt-head { flex-direction: column; align-items: flex-start; }
  .project-mgmt-new { width: 100%; }
  .pd-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-header { flex-direction: column; align-items: flex-start; }
  .pd-deadline { align-self: flex-start; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .main-wrap { margin-left: 0 !important; }
  .top-link { display: none; }
}

/* —— 市场营销 · 问卷/投票 —— */
.content:has(.survey-mgmt-page) {
  padding: 0;
  background: #f5f6f8;
}

#module-view:has(.survey-mgmt-page) {
  padding: 0;
  width: 100%;
}

.survey-mgmt-page {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
  background: #f5f6f8;
}

.survey-side {
  width: 200px;
  flex-shrink: 0;
  padding: 20px 12px;
  background: #f0f1f3;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.survey-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(135deg, #9254de 0%, #1677ff 100%);
  box-shadow: 0 4px 12px rgba(114, 46, 209, 0.35);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.2s ease;
}

.survey-new-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.4);
  transform: translateY(-2px);
}

.survey-new-btn:active {
  transform: translateY(0);
}

.survey-new-btn.sm {
  width: auto;
  margin-top: 12px;
  padding: 0 20px;
}

.survey-side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #595959;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.survey-side-item svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.survey-side-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #262626;
}

.survey-side-item.active {
  background: #fff;
  color: #262626;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  position: relative;
}

.survey-side-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #1677ff;
}

.survey-main {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 32px;
  overflow: auto;
}

.survey-page-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: #262626;
  line-height: 1.3;
}

.survey-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.survey-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.survey-tool-btn:hover {
  border-color: #91caff;
  color: #1677ff;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.1);
  transform: translateY(-1px);
}

.survey-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  color: #8c8c8c;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.survey-filter-wrap:hover {
  border-color: #91caff;
}

.survey-filter-select {
  border: none;
  background: transparent;
  font-size: 13px;
  color: #262626;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  min-width: 72px;
}

.survey-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  max-width: 480px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.survey-search-box:focus-within {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.survey-search-box svg {
  width: 16px;
  height: 16px;
  color: #bfbfbf;
  flex-shrink: 0;
}

.survey-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: #262626;
}

.survey-toolbar-spacer {
  flex: 1;
  min-width: 12px;
}

.survey-view-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.survey-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border: none;
  background: transparent;
  color: #8c8c8c;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.survey-view-btn:hover {
  color: #1677ff;
  background: #f0f7ff;
}

.survey-view-btn.active {
  background: #1677ff;
  color: #fff;
}

.survey-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.survey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.survey-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  border-color: #e6f4ff;
}

.survey-card-accent {
  height: 4px;
  background: var(--survey-accent, #52c41a);
  flex-shrink: 0;
}

.survey-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 14px 12px;
  gap: 8px;
}

.survey-card-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.survey-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.survey-card:hover .survey-card-title {
  color: #1677ff;
}

.survey-card-collect {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
}

.survey-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.survey-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #595959;
}

.survey-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.survey-card-time {
  font-size: 12px;
  color: #bfbfbf;
  white-space: nowrap;
}

.survey-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f5f5f5;
}

.survey-card-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: #f5f5f5;
  color: #595959;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.survey-card-act:hover {
  background: #e6f4ff;
  color: #1677ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}

.survey-table-wrap {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

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

.survey-table th,
.survey-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
}

.survey-table th {
  background: #fafafa;
  color: #8c8c8c;
  font-weight: 500;
}

.survey-list-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.survey-list-row:hover td {
  background: #f0f7ff;
}

.survey-list-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.survey-list-title {
  font-weight: 500;
  color: #262626;
}

.survey-list-time {
  color: #bfbfbf;
}

.survey-empty-cell {
  text-align: center;
  color: #bfbfbf;
  padding: 40px !important;
}

.survey-empty,
.survey-placeholder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #8c8c8c;
  font-size: 14px;
}

@media (max-width: 1600px) {
  .survey-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .survey-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .survey-mgmt-page {
    flex-direction: column;
  }
  .survey-side {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }
  .survey-new-btn {
    width: auto;
  }
  .survey-side-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }
  .survey-side-item.active::before {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 0;
    width: auto;
    height: 3px;
  }
  .survey-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .survey-main {
    padding: 16px;
  }
  .survey-card-grid {
    grid-template-columns: 1fr;
  }
  .survey-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .survey-search-box {
    max-width: none;
  }
  .survey-toolbar-spacer {
    display: none;
  }
  .survey-view-switch {
    align-self: flex-end;
  }
}

/* —— 市场营销 · 市场管理 —— */
.content:has(.market-mgmt-page) {
  padding: 0;
  background: #f5f6f8;
}

#module-view:has(.market-mgmt-page) {
  padding: 0;
  width: 100%;
}

.market-mgmt-page {
  min-height: calc(100vh - var(--topbar-h));
  background: #f5f6f8;
}

.market-top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.market-top-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 14px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.market-top-tab svg {
  opacity: 0.7;
  flex-shrink: 0;
}

.market-top-tab:hover {
  color: #1677ff;
  background: #fafafa;
}

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

.market-top-tab.active svg {
  opacity: 1;
}

.market-main {
  padding: 20px 24px 32px;
}

.market-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.market-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.market-search-box:focus-within {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

.market-search-box svg {
  width: 16px;
  height: 16px;
  color: #bfbfbf;
  flex-shrink: 0;
}

.market-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
}

.market-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.market-view-switch {
  display: inline-flex;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.market-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border: none;
  background: transparent;
  color: #8c8c8c;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.market-view-btn:hover {
  color: #1677ff;
  background: #f5f5f5;
}

.market-view-btn.active {
  background: #1677ff;
  color: #fff;
}

.market-create-btn {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: 6px;
  background: #141414;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.market-create-btn:hover {
  background: #262626;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.market-create-btn:active {
  transform: translateY(0);
}

.market-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.market-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.28s ease,
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.market-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.market-stat-card b {
  display: block;
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
}

.market-stat-card span {
  font-size: 13px;
  color: #8c8c8c;
}

.market-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.market-stat-card:hover .market-stat-icon {
  transform: scale(1.08);
}

.market-stat-card.tone-green .market-stat-icon {
  background: #f6ffed;
  color: #52c41a;
}

.market-stat-card.tone-blue .market-stat-icon {
  background: #e6f4ff;
  color: #1677ff;
}

.market-stat-card.tone-orange .market-stat-icon {
  background: #fff7e6;
  color: #fa8c16;
}

.market-stat-card.tone-purple .market-stat-icon {
  background: #f9f0ff;
  color: #9254de;
}

.market-filter-row {
  margin-bottom: 16px;
}

.market-type-select {
  height: 36px;
  min-width: 120px;
  padding: 0 28px 0 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238c8c8c' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  font-size: 13px;
  color: #262626;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.market-type-select:hover {
  border-color: #91caff;
}

.market-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.market-act-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 16px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition:
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.market-act-card:hover {
  transform: translateY(-4px);
  border-color: #e6f4ff;
  box-shadow: 0 12px 28px rgba(22, 119, 255, 0.1);
}

.market-act-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.market-act-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.market-act-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.market-act-status {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.market-act-status.ongoing {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.market-act-status.paused {
  background: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
}

.market-act-status.ended {
  background: #f5f5f5;
  color: #8c8c8c;
  border: 1px solid #e8e8e8;
}

.market-act-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.market-act-card:hover .market-act-title {
  color: #1677ff;
}

.market-act-date {
  margin: 0 0 14px;
  font-size: 12px;
  color: #8c8c8c;
}

.market-act-progress {
  margin-bottom: 14px;
}

.market-act-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: #8c8c8c;
}

.market-act-progress-head b {
  font-size: 12px;
  font-weight: 500;
  color: #595959;
}

.market-act-progress-track {
  height: 6px;
  background: #f5f5f5;
  border-radius: 999px;
  overflow: hidden;
}

.market-act-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1677ff, #69b1ff);
  border-radius: 999px;
  transform-origin: left center;
  animation: marketBarGrow 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes marketBarGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.market-act-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 -16px;
  border-top: 1px solid #f0f0f0;
}

.market-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: none;
  background: #fff;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.market-act-btn + .market-act-btn {
  border-left: 1px solid #f0f0f0;
}

.market-act-btn:hover {
  background: #fafafa;
  color: #1677ff;
}

.market-act-card:hover .market-act-btn:first-child:hover {
  border-bottom-left-radius: 8px;
}

.market-act-card:hover .market-act-btn:last-child:hover {
  border-bottom-right-radius: 8px;
}

.market-table-wrap {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

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

.market-table th,
.market-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
}

.market-table th {
  background: #fafafa;
  color: #8c8c8c;
  font-weight: 500;
}

.market-list-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.market-list-row:hover td {
  background: #f0f7ff;
}

.market-list-title {
  font-weight: 500;
}

.market-list-progress {
  height: 4px;
  background: #f5f5f5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
  max-width: 120px;
}

.market-list-progress span {
  display: block;
  height: 100%;
  background: #1677ff;
  border-radius: 999px;
}

.market-empty,
.market-tab-placeholder {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px dashed #e8e8e8;
}

.market-empty-cell {
  text-align: center;
  color: #bfbfbf;
  padding: 40px !important;
}

/* —— 办公管理 · 审批管理 —— */
.content:has(.office-appr-page),
#module-view:has(.office-appr-page) {
  padding: 0;
  width: 100%;
}

.office-appr-page .office-appr-toolbar {
  margin-bottom: 16px;
}

.office-appr-card {
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.office-appr-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.office-appr-count {
  font-size: 13px;
  color: #8c8c8c;
  font-weight: normal;
}

.office-appr-table tbody tr {
  transition: background 0.15s ease;
}

.office-appr-table tbody tr:hover {
  background: #f8fbff;
}

.office-appr-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.office-appr-status.pass {
  background: #f6ffed;
  color: #52c41a;
}

.office-appr-status.pending {
  background: #fff7e6;
  color: #fa8c16;
}

.office-appr-status.reject {
  background: #fff1f0;
  color: #ff4d4f;
}

.office-appr-status.default {
  background: #f5f5f5;
  color: #595959;
}

.office-appr-empty,
.office-appr-empty-cell {
  text-align: center;
  color: #bfbfbf;
  padding: 40px 16px;
}

.office-appr-top-nav {
  position: sticky;
  top: var(--topbar-h);
  z-index: 10;
}

.content:has(.office-att-page),
#module-view:has(.office-att-page) {
  padding: 0;
  width: 100%;
}

@media (max-width: 1200px) {
  .market-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .market-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .market-main {
    padding: 16px;
  }
  .market-stats-row {
    grid-template-columns: 1fr;
  }
  .market-card-grid {
    grid-template-columns: 1fr;
  }
  .market-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .market-search-box {
    max-width: none;
  }
  .market-toolbar-right {
    justify-content: space-between;
  }
}

/* —— 客户管理系统 · 客户管理 —— */
.content:has(.crm-customer-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-customer-page) {
  padding: 0;
  width: 100%;
}

.crm-customer-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-cust-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.crm-cust-scope-tab {
  padding: 6px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.crm-cust-scope-tab:hover {
  color: #1677ff;
  border-color: #91caff;
}

.crm-cust-scope-tab.active {
  background: #fff;
  color: #1677ff;
  border-color: #91caff;
  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.15);
  font-weight: 500;
}

.crm-cust-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.crm-cust-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-cust-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-cust-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #1677ff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.crm-cust-icon-btn:hover {
  background: #4096ff;
  transform: rotate(90deg);
}

.crm-cust-btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.crm-cust-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.crm-cust-btn.primary { background: #1677ff; }
.crm-cust-btn.primary:hover { background: #4096ff; }
.crm-cust-btn.warning { background: #fa8c16; }
.crm-cust-btn.warning:hover { background: #ffa940; }
.crm-cust-btn.info { background: #1677ff; }
.crm-cust-btn.info-light { background: #69b1ff; color: #fff; }
.crm-cust-btn.dark { background: #595959; }
.crm-cust-btn.dark:hover { background: #434343; }
.crm-cust-btn.danger { background: #ff4d4f; }
.crm-cust-btn.danger:hover { background: #ff7875; }

.crm-cust-help {
  border: none;
  background: none;
  color: #1677ff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.crm-cust-help:hover {
  color: #4096ff;
  text-decoration: underline;
}

.crm-cust-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  color: #8c8c8c;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.crm-cust-tool-icon:hover,
.crm-cust-tool-icon.active {
  border-color: #1677ff;
  color: #1677ff;
  background: #e6f4ff;
}

.crm-cust-inline-search {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #1677ff;
  border-radius: 4px;
  background: #fff;
  animation: crmCustSearchIn 0.2s ease;
}

@keyframes crmCustSearchIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.crm-cust-inline-search input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 160px;
  font-family: inherit;
}

.crm-cust-table-panel {
  flex: 1;
  min-height: 0;
  padding: 0 0 0;
}

.crm-cust-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 220px);
}

.crm-cust-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.crm-cust-table th,
.crm-cust-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  vertical-align: middle;
}

.crm-cust-table th {
  background: #fafafa;
  color: #8c8c8c;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 2;
}

.crm-cust-row {
  transition: background-color 0.15s ease;
}

.crm-cust-row:nth-child(even) {
  background: #fafafa;
}

.crm-cust-row:hover td {
  background: #e6f4ff !important;
}

.crm-cust-row.selected td {
  background: #f0f7ff !important;
}

.crm-cust-check {
  width: 40px;
  text-align: center;
}

.crm-cust-company {
  min-width: 200px;
  max-width: 280px;
}

.crm-cust-link {
  border: none;
  background: none;
  padding: 0;
  color: #1677ff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.crm-cust-link:hover {
  color: #4096ff;
  text-decoration: underline;
}

.crm-cust-tags-cell {
  min-width: 100px;
}

.crm-cust-tag {
  display: inline-flex;
  margin: 0 4px 2px 0;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 18px;
  transition: transform 0.15s ease;
}

.crm-cust-row:hover .crm-cust-tag {
  transform: translateY(-1px);
}

.crm-cust-tag.tone-pink {
  background: #fff0f6;
  color: #eb2f96;
  border: 1px solid #ffadd2;
}

.crm-cust-tag.tone-blue {
  background: #e6f4ff;
  color: #1677ff;
  border: 1px solid #91caff;
}

.crm-cust-tag.tone-gold {
  background: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
}

.crm-cust-tag.tone-orange {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.crm-cust-relevance {
  min-width: 120px;
  max-width: 180px;
  white-space: normal;
}

.crm-cust-actions {
  min-width: 140px;
}

.crm-cust-act {
  border: none;
  background: none;
  padding: 0 6px;
  color: #1677ff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.crm-cust-act:hover {
  color: #4096ff;
  text-decoration: underline;
}

.crm-cust-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 40px !important;
}

.crm-cust-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  font-size: 12px;
  color: #595959;
}

.crm-cust-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.crm-cust-page-size select {
  height: 28px;
  padding: 0 24px 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
}

.crm-cust-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.crm-cust-page-btn,
.crm-cust-page-num {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #595959;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.crm-cust-page-btn:hover:not(:disabled),
.crm-cust-page-num:hover {
  border-color: #1677ff;
  color: #1677ff;
}

.crm-cust-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.crm-cust-page-num.active {
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
}

.crm-cust-page-ellipsis {
  padding: 0 4px;
  color: #8c8c8c;
}

.crm-cust-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 12px;
}

.crm-cust-page-jump input {
  width: 48px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 992px) {
  .crm-cust-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .crm-cust-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .crm-cust-toolbar-right {
    justify-content: flex-end;
  }
}

/* —— 客户管理系统 · 跟进纪录 —— */
.content:has(.crm-follow-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-follow-page) {
  padding: 0;
  width: 100%;
}

.crm-follow-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-follow-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.crm-follow-scope-tab {
  padding: 6px 16px;
  margin-right: 4px;
  border: none;
  border-radius: 2px;
  background: #f0f0f0;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.crm-follow-scope-tab:hover {
  background: #e6e6e6;
  color: #262626;
}

.crm-follow-scope-tab.active {
  background: #1677ff;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(22, 119, 255, 0.35);
}

.crm-follow-scope-tab.active:hover {
  background: #4096ff;
  color: #fff;
}

.crm-follow-page .crm-cust-toolbar {
  background: #fff;
}

.crm-follow-table .crm-follow-content {
  white-space: normal;
  min-width: 240px;
  max-width: 420px;
  line-height: 1.5;
  color: #262626;
}

.crm-follow-table .crm-follow-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.crm-follow-table .crm-cust-company {
  min-width: 220px;
  max-width: 300px;
}

.crm-follow-table .crm-cust-actions {
  white-space: nowrap;
}

.crm-follow-table .crm-cust-act + .crm-cust-act {
  margin-left: 8px;
}

/* —— 客户管理系统 · 商机管理 —— */
.content:has(.crm-opp-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-opp-page) {
  padding: 0;
  width: 100%;
}

.crm-opp-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-opp-toolbar .crm-cust-toolbar-left {
  gap: 6px;
}

.crm-opp-toolbar .crm-cust-btn {
  padding: 0 10px;
  font-size: 12px;
}

.crm-opp-grid-wrap {
  position: relative;
  display: inline-flex;
}

.crm-opp-grid-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px !important;
  width: auto !important;
  min-width: 32px;
}

.crm-opp-grid-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-opp-grid-btn.active .crm-opp-grid-chevron,
.crm-opp-grid-btn[aria-expanded="true"] .crm-opp-grid-chevron {
  transform: rotate(180deg);
}

.crm-opp-grid-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmOppMenuIn 0.18s ease;
}

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

.crm-opp-grid-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-opp-grid-menu button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-opp-table .crm-opp-name {
  min-width: 160px;
  max-width: 220px;
}

.crm-opp-table .crm-opp-amount {
  font-variant-numeric: tabular-nums;
  color: #262626;
}

.crm-opp-table .crm-opp-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.crm-opp-table .crm-opp-actions {
  min-width: 200px;
}

.crm-opp-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #262626;
  white-space: nowrap;
}

.crm-opp-stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.crm-opp-stage.tone-blue .crm-opp-stage-dot {
  background: #1677ff;
}

.crm-opp-stage.tone-red .crm-opp-stage-dot {
  background: #ff4d4f;
}

.crm-opp-stage.tone-orange .crm-opp-stage-dot {
  background: #fa8c16;
}

.crm-opp-stage.tone-grey .crm-opp-stage-dot {
  background: #bfbfbf;
}

.crm-opp-stage.tone-muted .crm-opp-stage-dot {
  background: #d9d9d9;
}

@media (max-width: 1200px) {
  .crm-opp-toolbar .crm-cust-toolbar-left {
    max-width: 100%;
  }
}

/* —— 客户管理系统 · 合同管理 —— */
.content:has(.crm-contract-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-contract-page) {
  padding: 0;
  width: 100%;
}

.crm-contract-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-contract-toolbar .crm-cust-toolbar-left {
  gap: 6px;
}

.crm-contract-toolbar .crm-cust-btn {
  padding: 0 10px;
  font-size: 12px;
}

.crm-contract-table-panel {
  flex: 1;
  min-height: 0;
}

.crm-contract-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 240px);
}

.crm-contract-table {
  width: max-content;
  min-width: 100%;
}

.crm-contract-table th,
.crm-contract-table td {
  white-space: nowrap;
}

.crm-contract-table .crm-contract-name {
  min-width: 140px;
  max-width: 200px;
  white-space: normal;
  line-height: 1.45;
}

.crm-contract-table .crm-contract-project {
  min-width: 180px;
  max-width: 260px;
  white-space: normal;
  line-height: 1.45;
  color: #595959;
}

.crm-contract-table .crm-contract-code {
  font-variant-numeric: tabular-nums;
}

.crm-contract-table .crm-contract-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #262626;
}

.crm-contract-table .crm-contract-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.crm-contract-table .crm-contract-actions {
  min-width: 120px;
}

.crm-contract-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #262626;
  white-space: nowrap;
}

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

.crm-contract-status.tone-green .crm-contract-status-dot {
  background: #52c41a;
}

.crm-contract-status.tone-blue .crm-contract-status-dot {
  background: #1677ff;
}

.crm-contract-status.tone-red .crm-contract-status-dot {
  background: #ff4d4f;
}

.crm-contract-status.tone-grey .crm-contract-status-dot {
  background: #d9d9d9;
}

.crm-contract-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.crm-contract-table-scroll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}

.crm-contract-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

@media (max-width: 1200px) {
  .crm-contract-toolbar .crm-cust-toolbar-left {
    max-width: 100%;
  }
}

/* —— 客户管理系统 · 回款管理 —— */
.content:has(.crm-payment-page) {
  padding: 12px 16px 20px;
  background: #f4f7f9;
}

#module-view:has(.crm-payment-page) {
  padding: 0;
  width: 100%;
}

.crm-payment-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-payment-scope-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #e8e8e8;
  background: #f5f5f5;
}

.crm-payment-scope-tab {
  padding: 10px 20px;
  border: none;
  border-right: 1px solid #e8e8e8;
  background: #f0f0f0;
  color: #8c8c8c;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.crm-payment-scope-tab:hover {
  color: #595959;
  background: #e8e8e8;
}

.crm-payment-scope-tab.active {
  background: #fff;
  color: #262626;
  font-weight: 500;
  margin-bottom: -1px;
  border-bottom: 1px solid #fff;
}

.crm-payment-toolbar {
  border-bottom: 1px solid #f0f0f0;
}

.crm-payment-toolbar-right {
  gap: 8px;
}

.crm-payment-menu-wrap {
  position: relative;
  display: inline-flex;
}

.crm-payment-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.crm-payment-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-payment-menu-btn.active .crm-payment-menu-chevron,
.crm-payment-menu-btn[aria-expanded="true"] .crm-payment-menu-chevron {
  transform: rotate(180deg);
}

.crm-payment-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmPaymentMenuIn 0.18s ease;
}

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

.crm-payment-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-payment-dropdown button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-payment-search-btn {
  width: 36px !important;
  height: 36px !important;
}

.crm-payment-table th,
.crm-payment-table td {
  text-align: center;
}

.crm-payment-table .crm-cust-check {
  text-align: center;
}

.crm-payment-table .crm-cust-link {
  display: inline;
  text-align: center;
  max-width: 200px;
}

.crm-payment-table td:nth-child(3) .crm-cust-link,
.crm-payment-table td:nth-child(4) .crm-cust-link {
  max-width: 180px;
  white-space: normal;
  line-height: 1.45;
}

.crm-payment-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #262626;
}

.crm-payment-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.crm-payment-audit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.crm-payment-audit.tone-green {
  color: #52c41a;
}

.crm-payment-audit.tone-grey {
  color: #8c8c8c;
}

.crm-payment-audit.tone-red {
  color: #ff4d4f;
}

.crm-payment-audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-payment-audit.tone-green .crm-payment-audit-dot {
  background: #52c41a;
}

.crm-payment-audit.tone-grey .crm-payment-audit-dot {
  background: #d9d9d9;
}

.crm-payment-audit.tone-red .crm-payment-audit-dot {
  background: #ff4d4f;
}

.crm-payment-footer {
  background: #fafafa;
}

/* —— 客户管理系统 · 费用管理 —— */
.content:has(.crm-expense-page) {
  padding: 12px 16px 20px;
  background: #f4f7f9;
}

#module-view:has(.crm-expense-page) {
  padding: 0;
  width: 100%;
}

.crm-expense-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-expense-scope-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
  background: #f5f5f5;
}

.crm-expense-scope-tab {
  padding: 10px 20px;
  border: none;
  border-right: 1px solid #e8e8e8;
  background: #f0f0f0;
  color: #8c8c8c;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.crm-expense-scope-tab:hover {
  color: #595959;
  background: #e8e8e8;
}

.crm-expense-scope-tab.active {
  background: #fff;
  color: #1677ff;
  font-weight: 500;
  margin-bottom: -1px;
  border-bottom: 1px solid #fff;
}

.crm-expense-toolbar {
  border-bottom: 1px solid #f0f0f0;
}

.crm-expense-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ff7875 !important;
  color: #fff !important;
}

.crm-expense-delete-btn:hover {
  background: #ff4d4f !important;
}

.crm-expense-toolbar-right {
  gap: 8px;
}

.crm-expense-menu-wrap {
  position: relative;
  display: inline-flex;
}

.crm-expense-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.crm-expense-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-expense-menu-btn.active .crm-expense-menu-chevron,
.crm-expense-menu-btn[aria-expanded="true"] .crm-expense-menu-chevron {
  transform: rotate(180deg);
}

.crm-expense-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmExpenseMenuIn 0.18s ease;
}

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

.crm-expense-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-expense-dropdown button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-expense-search-btn {
  width: 36px !important;
  height: 36px !important;
}

.crm-expense-table .crm-expense-remark {
  min-width: 200px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.45;
  color: #595959;
  text-align: left;
}

.crm-expense-table .crm-expense-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #262626;
}

.crm-expense-table .crm-expense-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.crm-expense-audit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.crm-expense-audit.tone-green {
  color: #52c41a;
}

.crm-expense-audit.tone-grey {
  color: #8c8c8c;
}

.crm-expense-audit.tone-red {
  color: #ff4d4f;
}

.crm-expense-audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-expense-audit.tone-green .crm-expense-audit-dot {
  background: #52c41a;
}

.crm-expense-audit.tone-grey .crm-expense-audit-dot {
  background: #d9d9d9;
}

.crm-expense-audit.tone-red .crm-expense-audit-dot {
  background: #ff4d4f;
}

.crm-expense-footer {
  background: #fafafa;
}

/* —— 客户管理系统 · 报价单 —— */
.content:has(.crm-quote-page) {
  padding: 12px 16px 20px;
  background: #f4f7f9;
}

#module-view:has(.crm-quote-page) {
  padding: 0;
  width: 100%;
}

.crm-quote-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-quote-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.crm-quote-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #9254de !important;
  color: #fff !important;
}

.crm-quote-edit-btn:hover {
  background: #b37feb !important;
}

.crm-quote-toolbar-right {
  gap: 8px;
  flex-wrap: wrap;
}

.crm-quote-search-box {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.crm-quote-search-box:focus-within {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.crm-quote-search-box input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 120px;
  font-family: inherit;
}

.crm-quote-search-trigger {
  width: 36px !important;
  height: 36px !important;
}

.crm-quote-menu-wrap {
  position: relative;
  display: inline-flex;
}

.crm-quote-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.crm-quote-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-quote-menu-btn.active .crm-quote-menu-chevron,
.crm-quote-menu-btn[aria-expanded="true"] .crm-quote-menu-chevron {
  transform: rotate(180deg);
}

.crm-quote-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmQuoteMenuIn 0.18s ease;
}

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

.crm-quote-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-quote-dropdown button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-quote-table .crm-quote-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.crm-quote-table .crm-quote-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.crm-quote-sortable {
  white-space: nowrap;
}

.crm-quote-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: #8c8c8c;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.crm-quote-sort-btn:hover {
  color: #1677ff;
}

.crm-quote-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  color: #bfbfbf;
}

.crm-quote-sort-arrows span.active {
  color: #1677ff;
}

.crm-quote-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

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

.crm-quote-status.tone-red {
  color: #ff4d4f;
}

.crm-quote-status.tone-red .crm-quote-status-dot {
  background: #ff4d4f;
}

.crm-quote-status.tone-blue {
  color: #1677ff;
}

.crm-quote-status.tone-blue .crm-quote-status-dot {
  background: #0958d9;
}

.crm-quote-status.tone-green {
  color: #52c41a;
}

.crm-quote-status.tone-green .crm-quote-status-dot {
  background: #52c41a;
}

.crm-quote-status.tone-grey {
  color: #8c8c8c;
}

.crm-quote-status.tone-grey .crm-quote-status-dot {
  background: #d9d9d9;
}

.crm-quote-status.tone-muted {
  color: #bfbfbf;
}

.crm-quote-status.tone-muted .crm-quote-status-dot {
  background: #d9d9d9;
}

.crm-quote-footer {
  background: #fafafa;
}

/* —— 客户管理系统 · 线索 —— */
.content:has(.crm-leads-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-leads-page) {
  padding: 0;
  width: 100%;
}

.crm-leads-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-leads-toolbar .crm-cust-toolbar-left {
  flex-wrap: wrap;
  gap: 8px;
}

.crm-leads-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: #1677ff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.crm-leads-help:hover {
  color: #4096ff;
  text-decoration: underline;
}

.crm-leads-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1677ff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.crm-leads-toolbar-right {
  gap: 6px;
  flex-wrap: wrap;
}

.crm-leads-menu-wrap {
  position: relative;
  display: inline-flex;
}

.crm-leads-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.crm-leads-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-leads-menu-btn.active .crm-leads-menu-chevron,
.crm-leads-menu-btn[aria-expanded="true"] .crm-leads-menu-chevron {
  transform: rotate(180deg);
}

.crm-leads-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmLeadsMenuIn 0.18s ease;
}

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

.crm-leads-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-leads-dropdown button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-leads-table-panel {
  flex: 1;
  min-height: 0;
}

.crm-leads-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 260px);
}

.crm-leads-table {
  width: max-content;
  min-width: 100%;
}

.crm-leads-table th,
.crm-leads-table td {
  white-space: nowrap;
}

.crm-leads-table .crm-cust-company {
  min-width: 120px;
}

.crm-leads-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
}

.crm-leads-footer {
  background: #fafafa;
}

.crm-leads-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.crm-leads-table-scroll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}

.crm-leads-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

/* —— 客户管理系统 · 公海 —— */
.content:has(.crm-pool-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-pool-page) {
  padding: 0;
  width: 100%;
}

.crm-pool-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-pool-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.crm-pool-import-btn,
.crm-pool-assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.crm-pool-toolbar-right {
  gap: 8px;
  flex-wrap: wrap;
}

.crm-pool-search-btn {
  width: 36px !important;
  height: 36px !important;
}

.crm-pool-menu-wrap {
  position: relative;
  display: inline-flex;
}

.crm-pool-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.crm-pool-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.crm-pool-menu-btn.active .crm-pool-menu-chevron,
.crm-pool-menu-btn[aria-expanded="true"] .crm-pool-menu-chevron {
  transform: rotate(180deg);
}

.crm-pool-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: crmPoolMenuIn 0.18s ease;
}

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

.crm-pool-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.crm-pool-dropdown button:hover {
  background: #e6f4ff;
  color: #1677ff;
}

.crm-pool-table-panel {
  flex: 1;
  min-height: 0;
}

.crm-pool-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 200px);
}

.crm-pool-table {
  width: max-content;
  min-width: 100%;
}

.crm-pool-table th,
.crm-pool-table td {
  white-space: nowrap;
}

.crm-pool-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.crm-pool-footer {
  background: #fafafa;
}

.crm-pool-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.crm-pool-table-scroll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}

.crm-pool-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

/* —— 客户管理系统 · 联系人 —— */
.content:has(.crm-contacts-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.crm-contacts-page) {
  padding: 0;
  width: 100%;
}

.crm-contacts-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.crm-contacts-toolbar .crm-cust-toolbar-left {
  flex-wrap: wrap;
  gap: 6px;
}

.crm-contacts-email-btn,
.crm-contacts-sms-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.crm-contacts-table-panel {
  flex: 1;
  min-height: 0;
}

.crm-contacts-table-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 280px);
}

.crm-contacts-table {
  width: max-content;
  min-width: 100%;
}

.crm-contacts-table th,
.crm-contacts-table td {
  white-space: nowrap;
}

.crm-contacts-table .crm-cust-company {
  min-width: 160px;
  max-width: 220px;
}

.crm-contacts-table .crm-cust-link {
  max-width: 120px;
  white-space: normal;
  line-height: 1.4;
}

.crm-contacts-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.crm-contacts-footer {
  background: #fafafa;
}

.crm-contacts-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.crm-contacts-table-scroll::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 5px;
}

.crm-contacts-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c;
}

@media (prefers-reduced-motion: reduce) {
  .market-act-progress-fill {
    animation: none;
  }
  .market-act-card:hover,
  .market-stat-card:hover,
  .market-create-btn:hover {
    transform: none;
  }
  .crm-cust-icon-btn:hover {
    transform: none;
  }
  .crm-cust-inline-search {
    animation: none;
  }
  .crm-opp-grid-menu {
    animation: none;
  }
  .crm-payment-dropdown {
    animation: none;
  }
  .crm-expense-dropdown {
    animation: none;
  }
  .crm-quote-dropdown {
    animation: none;
  }
  .crm-leads-dropdown {
    animation: none;
  }
  .crm-pool-dropdown {
    animation: none;
  }
  .task-mine-dropdown {
    animation: none;
  }
}

/* —— 任务管理 · 我的任务 —— */
.content:has(.task-mine-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.task-mine-page) {
  padding: 0;
  width: 100%;
}

.task-mine-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.task-mine-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.task-mine-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.task-mine-toolbar-right {
  gap: 8px;
  flex-wrap: wrap;
}

.task-mine-search-btn {
  width: 36px !important;
  height: 36px !important;
}

.task-mine-menu-wrap {
  position: relative;
  display: inline-flex;
}

.task-mine-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.task-mine-menu-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.task-mine-menu-btn.active .task-mine-menu-chevron,
.task-mine-menu-btn[aria-expanded="true"] .task-mine-menu-chevron {
  transform: rotate(180deg);
}

.task-mine-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: taskMineMenuIn 0.18s ease;
}

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

.task-mine-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.task-mine-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.task-mine-inline-search {
  animation: taskMineSearchIn 0.22s ease;
}

@keyframes taskMineSearchIn {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: auto;
  }
}

.task-mine-table-panel {
  flex: 1;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.task-mine-table-panel.is-refreshing {
  opacity: 0.55;
  pointer-events: none;
}

.task-mine-table-scroll {
  overflow: auto;
}

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

.task-mine-table thead th {
  background: #fafafa;
  color: #595959;
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

.task-mine-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #262626;
  vertical-align: middle;
}

.task-mine-row {
  transition: background-color 0.15s ease;
}

.task-mine-row:hover {
  background: #fafafa;
}

.task-mine-row.selected {
  background: #e6f4ff;
}

.task-mine-title-link {
  font-weight: 400;
}

.task-mine-type {
  color: #595959;
  max-width: 220px;
}

.task-mine-time {
  color: #8c8c8c;
  white-space: nowrap;
}

.task-mine-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

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

.task-mine-status.tone-navy {
  color: #262626;
}

.task-mine-status.tone-navy .task-mine-status-dot {
  background: #1d3557;
}

.task-mine-status.tone-blue {
  color: #1677ff;
}

.task-mine-status.tone-blue .task-mine-status-dot {
  background: #1677ff;
}

.task-mine-status.tone-green {
  color: #52c41a;
}

.task-mine-status.tone-green .task-mine-status-dot {
  background: #52c41a;
}

.task-mine-status.tone-red {
  color: #ff4d4f;
}

.task-mine-status.tone-red .task-mine-status-dot {
  background: #ff4d4f;
}

.task-mine-status.tone-grey {
  color: #8c8c8c;
}

.task-mine-status.tone-grey .task-mine-status-dot {
  background: #bfbfbf;
}

.task-mine-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.task-mine-footer .crm-cust-footer-left {
  font-size: 13px;
  color: #8c8c8c;
}

.task-mine-card-mode {
  padding: 16px;
}

.task-mine-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  animation: taskMineCardIn 0.28s ease;
}

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

.task-mine-card {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  cursor: pointer;
}

.task-mine-card:hover {
  border-color: #91caff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.12);
  transform: translateY(-2px);
}

.task-mine-card h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
}

.task-mine-card-type {
  margin: 0 0 10px;
  font-size: 12px;
  color: #8c8c8c;
}

.task-mine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: #595959;
  margin-bottom: 10px;
}

.task-mine-form .task-mine-field {
  display: block;
  margin-bottom: 12px;
}

.task-mine-form .task-mine-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.task-mine-form .task-mine-field input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.task-mine-detail p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
}

/* —— 产品管理 —— */
.content:has(.prod-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.prod-page) {
  padding: 0;
  width: 100%;
}

.prod-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.prod-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px 0;
}

@media (max-width: 1100px) {
  .prod-stats { grid-template-columns: repeat(2, 1fr); }
}

.prod-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: prodStatIn 0.4s ease backwards;
}

.prod-stat:nth-child(1) { animation-delay: 0.02s; }
.prod-stat:nth-child(2) { animation-delay: 0.06s; }
.prod-stat:nth-child(3) { animation-delay: 0.1s; }
.prod-stat:nth-child(4) { animation-delay: 0.14s; }

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

.prod-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #d6e4ff;
}

.prod-stat.tone-blue { border-left: 3px solid #1677ff; }
.prod-stat.tone-green { border-left: 3px solid #52c41a; }
.prod-stat.tone-orange { border-left: 3px solid #fa8c16; }
.prod-stat.tone-purple { border-left: 3px solid #722ed1; }
.prod-stat.tone-red { border-left: 3px solid #ff4d4f; }
.prod-stat.tone-grey { border-left: 3px solid #bfbfbf; }

.prod-stat-icon { font-size: 22px; }
.prod-stat-label { display: block; font-size: 12px; color: #8c8c8c; margin-bottom: 4px; }
.prod-stat-value { font-size: 20px; font-weight: 600; color: #262626; }
.prod-stat-value small { font-size: 12px; font-weight: 400; color: #8c8c8c; margin-left: 2px; }

.prod-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

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

.prod-tab {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.prod-tab:hover { background: #f5f5f5; color: #1677ff; }
.prod-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 500; }

.prod-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #fa8c16;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  animation: prodBadgePulse 1.5s ease infinite;
}

.prod-tab-badge.warn { background: #ff4d4f; }

@keyframes prodBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.prod-type-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.prod-type-select select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
}

.prod-toolbar { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.prod-toolbar-right { gap: 8px; flex-wrap: wrap; }

.prod-menu-wrap { position: relative; display: inline-flex; }
.prod-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}
.prod-menu-chevron { opacity: 0.65; transition: transform 0.2s ease; }
.prod-menu-btn.active .prod-menu-chevron { transform: rotate(180deg); }

.prod-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 130px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: prodMenuIn 0.18s ease;
}

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

.prod-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
}

.prod-dropdown button:hover { background: #f5f5f5; color: #1677ff; }

.prod-inline-search { animation: prodSearchIn 0.22s ease; }

@keyframes prodSearchIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.prod-table-panel { flex: 1; min-height: 0; transition: opacity 0.25s ease; }
.prod-table-panel.is-refreshing { opacity: 0.5; pointer-events: none; }

.prod-table thead th { background: #fafafa; white-space: nowrap; }

.prod-row { transition: background-color 0.15s ease; }
.prod-row:hover { background: #fafafa; }
.prod-row.selected { background: #e6f4ff; }

.prod-spec, .prod-target, .prod-barcode { max-width: 140px; color: #595959; font-size: 12px; }
.prod-cat-tag, .prod-type-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f0f5ff;
  color: #1677ff;
  font-size: 12px;
}

.prod-money { color: #262626; font-weight: 500; }
.prod-cost { color: #8c8c8c; font-size: 12px; }
.prod-time { color: #8c8c8c; font-size: 12px; white-space: nowrap; }

.prod-discount { font-weight: 600; color: #1677ff; }
.prod-discount.hot { color: #ff4d4f; }

.prod-stock { font-weight: 500; }
.prod-stock.low { color: #ff4d4f; }

.prod-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

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

.prod-status.tone-green { color: #389e0d; }
.prod-status.tone-green .prod-status-dot { background: #52c41a; }
.prod-status.tone-blue { color: #1677ff; }
.prod-status.tone-blue .prod-status-dot { background: #1677ff; }
.prod-status.tone-orange { color: #d46b08; }
.prod-status.tone-orange .prod-status-dot { background: #fa8c16; }
.prod-status.tone-grey { color: #8c8c8c; }
.prod-status.tone-grey .prod-status-dot { background: #bfbfbf; }

.prod-footer { border-top: 1px solid #f0f0f0; }

.prod-form .prod-field { display: block; margin-bottom: 12px; }
.prod-field span { display: block; margin-bottom: 4px; font-size: 13px; color: #595959; }
.prod-field input, .prod-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.prod-form-brief { margin: 0 0 12px; font-size: 13px; color: #595959; }

.prod-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.prod-detail-grid p { margin: 0; font-size: 13px; }
.prod-detail-grid span { display: block; color: #8c8c8c; font-size: 12px; margin-bottom: 2px; }

/* —— 工业管理 · 质检管理 —— */
.content:has(.ind-qc-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.ind-qc-page) {
  padding: 0;
  width: 100%;
}

.ind-qc-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.ind-qc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px 0;
}

@media (max-width: 1100px) {
  .ind-qc-stats { grid-template-columns: repeat(2, 1fr); }
}

.ind-qc-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: indQcStatIn 0.4s ease backwards;
}

.ind-qc-stat:nth-child(1) { animation-delay: 0.02s; }
.ind-qc-stat:nth-child(2) { animation-delay: 0.06s; }
.ind-qc-stat:nth-child(3) { animation-delay: 0.1s; }
.ind-qc-stat:nth-child(4) { animation-delay: 0.14s; }

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

.ind-qc-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #d6e4ff;
}

.ind-qc-stat.tone-blue { border-left: 3px solid #1677ff; }
.ind-qc-stat.tone-green { border-left: 3px solid #52c41a; }
.ind-qc-stat.tone-orange { border-left: 3px solid #fa8c16; }
.ind-qc-stat.tone-red { border-left: 3px solid #ff4d4f; }

.ind-qc-stat-icon { font-size: 22px; line-height: 1; }
.ind-qc-stat-label { display: block; font-size: 12px; color: #8c8c8c; margin-bottom: 4px; }
.ind-qc-stat-value { font-size: 20px; font-weight: 600; color: #262626; }
.ind-qc-stat-value small { font-size: 12px; font-weight: 400; color: #8c8c8c; margin-left: 2px; }

.ind-qc-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.ind-qc-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.ind-qc-tab {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-qc-tab:hover { background: #f5f5f5; color: #1677ff; }
.ind-qc-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 500; }

.ind-qc-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #fa8c16;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  animation: indQcBadgePulse 1.5s ease infinite;
}

.ind-qc-tab-badge.fail { background: #ff4d4f; }

@keyframes indQcBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ind-qc-type-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.ind-qc-type-select select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

.ind-qc-toolbar { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.ind-qc-toolbar-right { gap: 8px; flex-wrap: wrap; }

.ind-qc-menu-wrap { position: relative; display: inline-flex; }
.ind-qc-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}
.ind-qc-menu-chevron { opacity: 0.65; transition: transform 0.2s ease; }
.ind-qc-menu-btn.active .ind-qc-menu-chevron { transform: rotate(180deg); }

.ind-qc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: indQcMenuIn 0.18s ease;
}

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

.ind-qc-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-qc-dropdown button:hover { background: #f5f5f5; color: #1677ff; }

.ind-qc-inline-search { animation: indQcSearchIn 0.22s ease; }

@keyframes indQcSearchIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.ind-qc-table-panel {
  flex: 1;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.ind-qc-table-panel.is-refreshing {
  opacity: 0.5;
  pointer-events: none;
}

.ind-qc-table thead th { background: #fafafa; white-space: nowrap; }

.ind-qc-row { transition: background-color 0.15s ease; }
.ind-qc-row:hover { background: #fafafa; }
.ind-qc-row.selected { background: #e6f4ff; }

.ind-qc-ref { color: #1677ff; font-size: 12px; }
.ind-qc-spec { max-width: 130px; color: #595959; font-size: 12px; }

.ind-qc-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.ind-qc-type.tone-blue { background: #e6f4ff; color: #1677ff; }
.ind-qc-type.tone-cyan { background: #e6fffb; color: #13c2c2; }
.ind-qc-type.tone-green { background: #f6ffed; color: #52c41a; }
.ind-qc-type.tone-purple { background: #f9f0ff; color: #722ed1; }

.ind-qc-pass { color: #52c41a; font-weight: 500; }
.ind-qc-fail { color: #8c8c8c; }
.ind-qc-fail.has-fail { color: #ff4d4f; font-weight: 600; }

.ind-qc-rate-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}

.ind-qc-rate-text { font-size: 12px; color: #595959; }
.ind-qc-rate-text em { font-style: normal; color: #1677ff; font-weight: 500; }
.ind-qc-rate-text em.fail { color: #ff4d4f; }

.ind-qc-rate-bar {
  display: block;
  height: 4px;
  width: 72px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.ind-qc-rate-fill {
  display: block;
  height: 100%;
  background: #52c41a;
  border-radius: 2px;
  transition: width 0.35s ease;
}

.ind-qc-rate-fill.fail { background: #ff4d4f; }

.ind-qc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

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

.ind-qc-status.tone-green { color: #389e0d; }
.ind-qc-status.tone-green .ind-qc-status-dot { background: #52c41a; }
.ind-qc-status.tone-blue { color: #1677ff; }
.ind-qc-status.tone-blue .ind-qc-status-dot { background: #1677ff; }
.ind-qc-status.tone-red { color: #cf1322; }
.ind-qc-status.tone-red .ind-qc-status-dot { background: #ff4d4f; }
.ind-qc-status.tone-orange { color: #d46b08; }
.ind-qc-status.tone-orange .ind-qc-status-dot { background: #fa8c16; }
.ind-qc-status.tone-grey { color: #8c8c8c; }
.ind-qc-status.tone-grey .ind-qc-status-dot { background: #bfbfbf; }

.ind-qc-actions { white-space: nowrap; }
.ind-qc-actions .crm-cust-act:disabled { opacity: 0.45; cursor: not-allowed; }

.ind-qc-footer { border-top: 1px solid #f0f0f0; }

.ind-qc-form .ind-qc-field,
.ind-qc-form-grid .ind-qc-field { display: block; margin-bottom: 12px; }

.ind-qc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.ind-qc-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.ind-qc-field input,
.ind-qc-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.ind-qc-form-brief {
  margin: 0 0 12px;
  font-size: 13px;
  color: #595959;
}

.ind-qc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.ind-qc-detail-grid p { margin: 0; font-size: 13px; line-height: 1.5; }
.ind-qc-detail-grid span { display: block; color: #8c8c8c; font-size: 12px; margin-bottom: 2px; }

/* —— 工业管理 · 生产计划 —— */
.content:has(.ind-prod-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.ind-prod-page) {
  padding: 0;
  width: 100%;
}

.ind-prod-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.ind-prod-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px 0;
}

@media (max-width: 1100px) {
  .ind-prod-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ind-prod-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: indProdStatIn 0.4s ease backwards;
}

.ind-prod-stat:nth-child(1) { animation-delay: 0.02s; }
.ind-prod-stat:nth-child(2) { animation-delay: 0.06s; }
.ind-prod-stat:nth-child(3) { animation-delay: 0.1s; }
.ind-prod-stat:nth-child(4) { animation-delay: 0.14s; }

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

.ind-prod-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #d6e4ff;
}

.ind-prod-stat.tone-blue { border-left: 3px solid #1677ff; }
.ind-prod-stat.tone-green { border-left: 3px solid #52c41a; }
.ind-prod-stat.tone-orange { border-left: 3px solid #fa8c16; }
.ind-prod-stat.tone-purple { border-left: 3px solid #722ed1; }

.ind-prod-stat-icon { font-size: 22px; line-height: 1; }
.ind-prod-stat-label { display: block; font-size: 12px; color: #8c8c8c; margin-bottom: 4px; }
.ind-prod-stat-value { font-size: 20px; font-weight: 600; color: #262626; line-height: 1.2; }
.ind-prod-stat-value small { font-size: 12px; font-weight: 400; color: #8c8c8c; margin-left: 2px; }

.ind-prod-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.ind-prod-tabs { display: flex; flex-wrap: wrap; gap: 4px; }

.ind-prod-tab {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-prod-tab:hover { background: #f5f5f5; color: #1677ff; }
.ind-prod-tab.active { background: #e6f4ff; color: #1677ff; font-weight: 500; }

.ind-prod-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #52c41a;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  animation: indProdBadgePulse 1.5s ease infinite;
}

@keyframes indProdBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ind-prod-line-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.ind-prod-line-select select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

.ind-prod-toolbar { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.ind-prod-toolbar-right { gap: 8px; flex-wrap: wrap; }

.ind-prod-menu-wrap { position: relative; display: inline-flex; }
.ind-prod-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}
.ind-prod-menu-chevron { opacity: 0.65; transition: transform 0.2s ease; }
.ind-prod-menu-btn.active .ind-prod-menu-chevron { transform: rotate(180deg); }

.ind-prod-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: indProdMenuIn 0.18s ease;
}

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

.ind-prod-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-prod-dropdown button:hover { background: #f5f5f5; color: #1677ff; }

.ind-prod-inline-search { animation: indProdSearchIn 0.22s ease; }

@keyframes indProdSearchIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.ind-prod-table-panel {
  flex: 1;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.ind-prod-table-panel.is-refreshing {
  opacity: 0.5;
  pointer-events: none;
}

.ind-prod-table thead th { background: #fafafa; white-space: nowrap; }

.ind-prod-row { transition: background-color 0.15s ease; }
.ind-prod-row:hover { background: #fafafa; }
.ind-prod-row.selected { background: #e6f4ff; }

.ind-prod-spec { max-width: 140px; color: #595959; }

.ind-prod-line-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f0f5ff;
  color: #1677ff;
  font-size: 12px;
}

.ind-prod-progress-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 88px;
}

.ind-prod-progress-text { font-size: 12px; color: #595959; }
.ind-prod-progress-text em { font-style: normal; color: #1677ff; font-weight: 500; }

.ind-prod-progress-bar {
  display: block;
  height: 4px;
  width: 80px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.ind-prod-progress-fill {
  display: block;
  height: 100%;
  background: #1677ff;
  border-radius: 2px;
  transition: width 0.35s ease;
}

.ind-prod-progress-fill.late { background: #ff4d4f; }

.ind-prod-priority {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.ind-prod-priority.tone-red { background: #fff1f0; color: #cf1322; }
.ind-prod-priority.tone-blue { background: #e6f4ff; color: #1677ff; }
.ind-prod-priority.tone-grey { background: #f5f5f5; color: #8c8c8c; }

.ind-prod-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

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

.ind-prod-status.tone-green { color: #389e0d; }
.ind-prod-status.tone-green .ind-prod-status-dot { background: #52c41a; }
.ind-prod-status.tone-blue { color: #1677ff; }
.ind-prod-status.tone-blue .ind-prod-status-dot { background: #1677ff; }
.ind-prod-status.tone-orange { color: #d46b08; }
.ind-prod-status.tone-orange .ind-prod-status-dot { background: #fa8c16; }
.ind-prod-status.tone-purple { color: #531dab; }
.ind-prod-status.tone-purple .ind-prod-status-dot { background: #722ed1; }
.ind-prod-status.tone-grey { color: #8c8c8c; }
.ind-prod-status.tone-grey .ind-prod-status-dot { background: #bfbfbf; }

.ind-prod-actions { white-space: nowrap; }
.ind-prod-actions .crm-cust-act:disabled { opacity: 0.45; cursor: not-allowed; }

.ind-prod-footer { border-top: 1px solid #f0f0f0; }

.ind-prod-form .ind-prod-field,
.ind-prod-form-grid .ind-prod-field { display: block; margin-bottom: 12px; }

.ind-prod-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.ind-prod-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.ind-prod-field input,
.ind-prod-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.ind-prod-form-brief {
  margin: 0 0 12px;
  font-size: 13px;
  color: #595959;
}

.ind-prod-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.ind-prod-detail-grid p { margin: 0; font-size: 13px; line-height: 1.5; }
.ind-prod-detail-grid span { display: block; color: #8c8c8c; font-size: 12px; margin-bottom: 2px; }

/* —— 工业管理 · 库存物料 —— */
.content:has(.ind-stock-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.ind-stock-page) {
  padding: 0;
  width: 100%;
}

.ind-stock-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.ind-stock-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px 0;
}

@media (max-width: 1100px) {
  .ind-stock-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ind-stock-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  animation: indStockStatIn 0.4s ease backwards;
}

.ind-stock-stat:nth-child(1) { animation-delay: 0.02s; }
.ind-stock-stat:nth-child(2) { animation-delay: 0.06s; }
.ind-stock-stat:nth-child(3) { animation-delay: 0.1s; }
.ind-stock-stat:nth-child(4) { animation-delay: 0.14s; }

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

.ind-stock-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #d6e4ff;
}

.ind-stock-stat.tone-blue { border-left: 3px solid #1677ff; }
.ind-stock-stat.tone-green { border-left: 3px solid #52c41a; }
.ind-stock-stat.tone-orange { border-left: 3px solid #fa8c16; }
.ind-stock-stat.tone-purple { border-left: 3px solid #722ed1; }

.ind-stock-stat-icon {
  font-size: 22px;
  line-height: 1;
}

.ind-stock-stat-label {
  display: block;
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.ind-stock-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  line-height: 1.2;
}

.ind-stock-stat-value small {
  font-size: 12px;
  font-weight: 400;
  color: #8c8c8c;
  margin-left: 2px;
}

.ind-stock-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.ind-stock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ind-stock-tab {
  position: relative;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #595959;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-stock-tab:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.ind-stock-tab.active {
  background: #e6f4ff;
  color: #1677ff;
  font-weight: 500;
}

.ind-stock-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background: #ff4d4f;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  animation: indStockBadgePulse 1.5s ease infinite;
}

@keyframes indStockBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ind-stock-wh-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.ind-stock-wh-select select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ind-stock-wh-select select:hover,
.ind-stock-wh-select select:focus {
  border-color: #1677ff;
  outline: none;
}

.ind-stock-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.ind-stock-toolbar-right {
  gap: 8px;
  flex-wrap: wrap;
}

.ind-stock-menu-wrap {
  position: relative;
  display: inline-flex;
}

.ind-stock-menu-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 32px;
  padding-right: 4px !important;
}

.ind-stock-menu-chevron {
  opacity: 0.65;
  transition: transform 0.2s ease;
}

.ind-stock-menu-btn.active .ind-stock-menu-chevron {
  transform: rotate(180deg);
}

.ind-stock-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 20;
  animation: indStockMenuIn 0.18s ease;
}

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

.ind-stock-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ind-stock-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.ind-stock-inline-search {
  animation: indStockSearchIn 0.22s ease;
}

@keyframes indStockSearchIn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ind-stock-table-panel {
  flex: 1;
  min-height: 0;
  transition: opacity 0.25s ease;
}

.ind-stock-table-panel.is-refreshing {
  opacity: 0.5;
  pointer-events: none;
}

.ind-stock-table thead th {
  background: #fafafa;
  white-space: nowrap;
}

.ind-stock-row {
  transition: background-color 0.15s ease;
}

.ind-stock-row:hover {
  background: #fafafa;
}

.ind-stock-row.selected {
  background: #e6f4ff;
}

.ind-stock-spec {
  max-width: 160px;
  color: #595959;
}

.ind-stock-wh-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 12px;
  color: #595959;
}

.ind-stock-qty-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 72px;
}

.ind-stock-qty-num {
  font-weight: 500;
}

.ind-stock-qty-num.low {
  color: #ff4d4f;
}

.ind-stock-qty-bar {
  display: block;
  height: 4px;
  width: 64px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.ind-stock-qty-fill {
  display: block;
  height: 100%;
  background: #52c41a;
  border-radius: 2px;
  transition: width 0.35s ease;
}

.ind-stock-qty-fill.low {
  background: #ff4d4f;
}

.ind-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

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

.ind-stock-status.tone-green { color: #389e0d; }
.ind-stock-status.tone-green .ind-stock-status-dot { background: #52c41a; }
.ind-stock-status.tone-orange { color: #d46b08; }
.ind-stock-status.tone-orange .ind-stock-status-dot { background: #fa8c16; }
.ind-stock-status.tone-blue { color: #1677ff; }
.ind-stock-status.tone-blue .ind-stock-status-dot { background: #1677ff; }
.ind-stock-status.tone-grey { color: #8c8c8c; }
.ind-stock-status.tone-grey .ind-stock-status-dot { background: #bfbfbf; }

.ind-stock-time {
  color: #8c8c8c;
  white-space: nowrap;
  font-size: 12px;
}

.ind-stock-actions {
  white-space: nowrap;
}

.ind-stock-footer {
  border-top: 1px solid #f0f0f0;
}

.ind-stock-form .ind-stock-field,
.ind-stock-form-grid .ind-stock-field {
  display: block;
  margin-bottom: 12px;
}

.ind-stock-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.ind-stock-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.ind-stock-field input,
.ind-stock-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.ind-stock-form-brief {
  margin: 0 0 12px;
  font-size: 13px;
  color: #595959;
  line-height: 1.5;
}

.ind-stock-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.ind-stock-detail-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.ind-stock-detail-grid span {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 2px;
}

.ind-stock-detail-grid b.warn {
  color: #ff4d4f;
}

@media (prefers-reduced-motion: reduce) {
  .ind-stock-stat,
  .ind-stock-tab-badge,
  .ind-stock-dropdown,
  .ind-stock-inline-search {
    animation: none;
  }
  .ind-stock-stat:hover {
    transform: none;
  }
}

/* —— 财务管理 · 订单管理 —— */
.content:has(.fin-order-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.fin-order-page) {
  padding: 0;
  width: 100%;
}

.fin-order-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.fin-order-filter {
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}

.fin-order-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 20px;
  padding: 16px 16px 14px;
  background: #fafafa;
}

@media (max-width: 1200px) {
  .fin-order-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fin-order-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
  line-height: 1.4;
}

.fin-order-field input,
.fin-order-field select {
  width: 100%;
  height: 32px;
  padding: 0 11px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: #262626;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fin-order-field input::placeholder {
  color: #bfbfbf;
}

.fin-order-field input:hover,
.fin-order-field select:hover {
  border-color: #4096ff;
}

.fin-order-field input:focus,
.fin-order-field select:focus {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.fin-order-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fin-order-daterange:focus-within {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.fin-order-daterange input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: none;
  font-size: 12px;
}

.fin-order-daterange input:focus {
  outline: none;
  box-shadow: none;
}

.fin-order-daterange-sep {
  color: #bfbfbf;
  font-size: 12px;
  flex-shrink: 0;
}

.fin-order-filter-actions {
  grid-column: 3 / 5;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 1px;
}

@media (max-width: 1200px) {
  .fin-order-filter-actions {
    grid-column: 1 / -1;
  }
}

.fin-order-btn {
  height: 32px;
  min-width: 72px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.fin-order-btn.primary {
  border: 1px solid #1677ff;
  background: #1677ff;
  color: #fff;
}

.fin-order-btn.primary:hover {
  background: #4096ff;
  border-color: #4096ff;
  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.35);
}

.fin-order-btn.default {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #595959;
}

.fin-order-btn.default:hover {
  color: #1677ff;
  border-color: #1677ff;
}

.fin-order-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.fin-order-toolbar-right {
  gap: 6px;
}

.fin-order-refresh-btn.is-spinning svg {
  animation: finOrderSpin 0.5s ease;
}

@keyframes finOrderSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fin-order-menu-wrap {
  position: relative;
}

.fin-order-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: finOrderDropIn 0.18s ease;
}

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

.fin-order-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fin-order-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.fin-order-inline-search {
  animation: crmCustSearchIn 0.2s ease;
}

.fin-order-table-panel {
  flex: 1;
  min-height: 0;
}

.fin-order-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 320px);
}

.fin-order-table .fin-order-customer-cell {
  min-width: 180px;
  max-width: 260px;
}

.fin-order-fee {
  font-variant-numeric: tabular-nums;
}

.fin-order-received {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

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

.fin-order-received.tone-yes {
  color: #389e0d;
}

.fin-order-received.tone-yes .fin-order-received-dot {
  background: #52c41a;
}

.fin-order-received.tone-no {
  color: #595959;
}

.fin-order-received.tone-no .fin-order-received-dot {
  background: #434343;
}

.fin-order-time {
  color: #8c8c8c;
  font-size: 12px;
}

.fin-order-actions .crm-cust-act + .crm-cust-act {
  margin-left: 8px;
}

.fin-order-footer {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.fin-order-detail p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}

.fin-order-detail span {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 2px;
}

.fin-order-modal-hint {
  margin-top: 8px;
  font-size: 13px;
  color: #8c8c8c;
}

@media (prefers-reduced-motion: reduce) {
  .fin-order-refresh-btn.is-spinning svg,
  .fin-order-dropdown,
  .fin-order-inline-search {
    animation: none;
  }
}

/* —— 财务管理 · 费用报销 —— */
.content:has(.fin-reimb-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.fin-reimb-page) {
  padding: 0;
  width: 100%;
}

.fin-reimb-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.fin-reimb-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.fin-reimb-toolbar-right {
  gap: 6px;
}

.fin-reimb-refresh-btn.is-spinning svg {
  animation: finReimbSpin 0.5s ease;
}

@keyframes finReimbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fin-reimb-menu-wrap {
  position: relative;
}

.fin-reimb-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px !important;
  width: auto !important;
  min-width: 32px;
}

.fin-reimb-menu-chevron {
  margin-left: -2px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.fin-reimb-menu-btn.active .fin-reimb-menu-chevron,
.fin-reimb-menu-btn[aria-expanded="true"] .fin-reimb-menu-chevron {
  transform: rotate(180deg);
}

.fin-reimb-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: finReimbDropIn 0.18s ease;
}

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

.fin-reimb-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fin-reimb-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.fin-reimb-search-btn {
  width: 32px;
  height: 32px;
}

.fin-reimb-inline-search {
  animation: crmCustSearchIn 0.2s ease;
}

.fin-reimb-table-panel {
  flex: 1;
  min-height: 0;
}

.fin-reimb-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 200px);
}

.fin-reimb-table .fin-reimb-remark {
  min-width: 200px;
  max-width: 360px;
  white-space: normal;
  line-height: 1.45;
  color: #595959;
}

.fin-reimb-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #262626;
}

.fin-reimb-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.fin-reimb-audit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.fin-reimb-audit.tone-green {
  color: #52c41a;
}

.fin-reimb-audit.tone-grey {
  color: #8c8c8c;
}

.fin-reimb-audit.tone-red {
  color: #ff4d4f;
}

.fin-reimb-audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fin-reimb-audit.tone-green .fin-reimb-audit-dot {
  background: #52c41a;
}

.fin-reimb-audit.tone-grey .fin-reimb-audit-dot {
  background: #d9d9d9;
}

.fin-reimb-audit.tone-red .fin-reimb-audit-dot {
  background: #ff4d4f;
}

.fin-reimb-sortable {
  white-space: nowrap;
}

.fin-reimb-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: #8c8c8c;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.fin-reimb-sort-btn:hover {
  color: #1677ff;
}

.fin-reimb-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  color: #bfbfbf;
}

.fin-reimb-sort-arrows span.active {
  color: #1677ff;
}

.fin-reimb-actions {
  min-width: 48px;
}

.fin-reimb-footer {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.fin-reimb-detail p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}

.fin-reimb-detail span {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fin-reimb-refresh-btn.is-spinning svg,
  .fin-reimb-dropdown,
  .fin-reimb-inline-search {
    animation: none;
  }
}

/* —— 财务管理 · 账户管理 —— */
.content:has(.fin-acct-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.fin-acct-page) {
  padding: 0;
  width: 100%;
}

.fin-acct-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.fin-acct-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.fin-acct-toolbar .crm-cust-toolbar-left {
  gap: 8px;
}

.fin-acct-toolbar-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fin-acct-toolbar-edit svg {
  flex-shrink: 0;
}

.fin-acct-toolbar-right {
  gap: 6px;
}

.fin-acct-refresh-btn.is-spinning svg {
  animation: finAcctSpin 0.5s ease;
}

@keyframes finAcctSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fin-acct-menu-wrap {
  position: relative;
}

.fin-acct-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px !important;
  width: auto !important;
  min-width: 32px;
}

.fin-acct-menu-chevron {
  margin-left: -2px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.fin-acct-menu-btn.active .fin-acct-menu-chevron,
.fin-acct-menu-btn[aria-expanded="true"] .fin-acct-menu-chevron {
  transform: rotate(180deg);
}

.fin-acct-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: finAcctDropIn 0.18s ease;
}

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

.fin-acct-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fin-acct-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.fin-acct-inline-search {
  animation: crmCustSearchIn 0.2s ease;
}

.fin-acct-table-panel {
  flex: 1;
  min-height: 0;
}

.fin-acct-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 200px);
}

.fin-acct-table .fin-acct-bank {
  min-width: 220px;
  max-width: 360px;
  white-space: normal;
  line-height: 1.45;
  text-align: left;
}

.fin-acct-th-bank {
  text-align: left;
}

.fin-acct-th-center,
.fin-acct-table th.fin-acct-th-center {
  text-align: center;
}

.fin-acct-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.fin-acct-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.fin-acct-dot-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.fin-acct-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fin-acct-dot-label.tone-green {
  color: #52c41a;
}

.fin-acct-dot-label.tone-green .fin-acct-dot {
  background: #52c41a;
}

.fin-acct-dot-label.tone-navy {
  color: #1a2b4b;
}

.fin-acct-dot-label.tone-navy .fin-acct-dot {
  background: #1a2b4b;
}

.fin-acct-dot-label.tone-blue {
  color: #1677ff;
}

.fin-acct-dot-label.tone-blue .fin-acct-dot {
  background: #1677ff;
}

.fin-acct-dot-label.tone-grey {
  color: #8c8c8c;
}

.fin-acct-dot-label.tone-grey .fin-acct-dot {
  background: #d9d9d9;
}

.fin-acct-sortable {
  white-space: nowrap;
}

.fin-acct-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: #8c8c8c;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.fin-acct-sort-btn:hover {
  color: #1677ff;
}

.fin-acct-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  color: #bfbfbf;
}

.fin-acct-sort-arrows span.active {
  color: #1677ff;
}

.fin-acct-actions .crm-cust-act + .crm-cust-act {
  margin-left: 8px;
}

.fin-acct-footer {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.fin-acct-form .fin-acct-field {
  display: block;
  margin-bottom: 12px;
}

.fin-acct-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.fin-acct-field input,
.fin-acct-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .fin-acct-refresh-btn.is-spinning svg,
  .fin-acct-dropdown,
  .fin-acct-inline-search {
    animation: none;
  }
}

/* —— 财务管理 · 出纳管理 —— */
.content:has(.fin-cashier-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.fin-cashier-page) {
  padding: 0;
  width: 100%;
}

.fin-cashier-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.fin-cashier-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.fin-cashier-toolbar .crm-cust-toolbar-left {
  gap: 8px;
}

.fin-cashier-batch-btn {
  min-width: 96px;
}

.fin-cashier-toolbar-right {
  gap: 6px;
}

.fin-cashier-refresh-btn.is-spinning svg {
  animation: finCashierSpin 0.5s ease;
}

@keyframes finCashierSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fin-cashier-menu-wrap {
  position: relative;
}

.fin-cashier-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px !important;
  width: auto !important;
  min-width: 32px;
}

.fin-cashier-menu-chevron {
  margin-left: -2px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.fin-cashier-menu-btn.active .fin-cashier-menu-chevron,
.fin-cashier-menu-btn[aria-expanded="true"] .fin-cashier-menu-chevron {
  transform: rotate(180deg);
}

.fin-cashier-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 120px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: finCashierDropIn 0.18s ease;
}

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

.fin-cashier-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fin-cashier-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.fin-cashier-inline-search {
  animation: crmCustSearchIn 0.2s ease;
}

.fin-cashier-table-panel {
  flex: 1;
  min-height: 0;
}

.fin-cashier-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 200px);
}

.fin-cashier-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.fin-cashier-remark {
  min-width: 200px;
  max-width: 360px;
  white-space: normal;
  line-height: 1.45;
  color: #595959;
}

.fin-cashier-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.fin-cashier-disbursed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.fin-cashier-disbursed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fin-cashier-disbursed.tone-yes {
  color: #52c41a;
}

.fin-cashier-disbursed.tone-yes .fin-cashier-disbursed-dot {
  background: #52c41a;
}

.fin-cashier-disbursed.tone-no {
  color: #595959;
}

.fin-cashier-disbursed.tone-no .fin-cashier-disbursed-dot {
  background: #434343;
}

.fin-cashier-sortable {
  white-space: nowrap;
}

.fin-cashier-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: #8c8c8c;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.fin-cashier-sort-btn:hover {
  color: #1677ff;
}

.fin-cashier-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  color: #bfbfbf;
}

.fin-cashier-sort-arrows span.active {
  color: #1677ff;
}

.fin-cashier-actions {
  min-width: 48px;
}

.fin-cashier-footer {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.fin-cashier-detail p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}

.fin-cashier-detail span {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 2px;
}

.fin-cashier-modal-hint {
  margin-top: 8px;
  font-size: 13px;
  color: #8c8c8c;
}

@media (prefers-reduced-motion: reduce) {
  .fin-cashier-refresh-btn.is-spinning svg,
  .fin-cashier-dropdown,
  .fin-cashier-inline-search {
    animation: none;
  }
}

/* —— 财务管理 · 发票管理 —— */
.content:has(.fin-invoice-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.fin-invoice-page) {
  padding: 0;
  width: 100%;
}

.fin-invoice-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.fin-invoice-scope-tabs {
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
}

.fin-invoice-scope-tabs .crm-cust-scope-tab {
  background: #f0f0f0;
  border-color: #e8e8e8;
  color: #8c8c8c;
}

.fin-invoice-scope-tabs .crm-cust-scope-tab.active {
  background: #fff;
  color: #262626;
  border-color: #e8e8e8;
  box-shadow: none;
  font-weight: 500;
}

.fin-invoice-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.fin-invoice-toolbar .crm-cust-toolbar-left {
  gap: 8px;
}

.fin-invoice-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fin-invoice-delete-btn svg {
  flex-shrink: 0;
}

.fin-invoice-toolbar-right {
  gap: 6px;
}

.fin-invoice-refresh-btn.is-spinning svg {
  animation: finInvoiceSpin 0.5s ease;
}

@keyframes finInvoiceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fin-invoice-menu-wrap {
  position: relative;
}

.fin-invoice-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px !important;
  width: auto !important;
  min-width: 32px;
}

.fin-invoice-menu-chevron {
  margin-left: -2px;
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.fin-invoice-menu-btn.active .fin-invoice-menu-chevron,
.fin-invoice-menu-btn[aria-expanded="true"] .fin-invoice-menu-chevron {
  transform: rotate(180deg);
}

.fin-invoice-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 128px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
  animation: finInvoiceDropIn 0.18s ease;
}

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

.fin-invoice-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fin-invoice-dropdown button:hover {
  background: #f5f5f5;
  color: #1677ff;
}

.fin-invoice-inline-search {
  animation: crmCustSearchIn 0.2s ease;
}

.fin-invoice-table-panel {
  flex: 1;
  min-height: 0;
}

.fin-invoice-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 260px);
  overflow-x: auto;
}

.fin-invoice-table {
  min-width: 1600px;
}

.fin-invoice-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.fin-invoice-date,
.fin-invoice-time {
  color: #595959;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.fin-invoice-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  max-width: 200px;
  white-space: normal;
  line-height: 1.4;
}

.fin-invoice-dot-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.fin-invoice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fin-invoice-dot-label.tone-navy {
  color: #1a2b4b;
}

.fin-invoice-dot-label.tone-navy .fin-invoice-dot {
  background: #1a2b4b;
}

.fin-invoice-dot-label.tone-blue {
  color: #1677ff;
}

.fin-invoice-dot-label.tone-blue .fin-invoice-dot {
  background: #1677ff;
}

.fin-invoice-dot-label.tone-red {
  color: #ff4d4f;
}

.fin-invoice-dot-label.tone-red .fin-invoice-dot {
  background: #ff4d4f;
}

.fin-invoice-dot-label.tone-grey {
  color: #8c8c8c;
}

.fin-invoice-dot-label.tone-grey .fin-invoice-dot {
  background: #d9d9d9;
}

.fin-invoice-act-done {
  color: #8c8c8c;
  font-size: 12px;
}

.fin-invoice-actions {
  white-space: nowrap;
}

.fin-invoice-footer {
  padding: 12px 16px 14px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.fin-invoice-form .fin-invoice-field {
  display: block;
  margin-bottom: 12px;
}

.fin-invoice-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.fin-invoice-field input,
.fin-invoice-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.fin-invoice-detail p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}

.fin-invoice-detail span {
  display: block;
  color: #8c8c8c;
  font-size: 12px;
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fin-invoice-refresh-btn.is-spinning svg,
  .fin-invoice-dropdown,
  .fin-invoice-inline-search {
    animation: none;
  }
}

/* —— 员工管理 —— */
.content:has(.emp-mgmt-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.emp-mgmt-page) {
  padding: 0;
  width: 100%;
}

.emp-mgmt-page {
  min-height: calc(100vh - var(--topbar-h) - 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-mgmt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  .emp-mgmt-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.emp-mgmt-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.emp-mgmt-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.emp-mgmt-stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
}

.emp-mgmt-stat.tone-blue .emp-mgmt-stat-icon { background: #e6f4ff; }
.emp-mgmt-stat.tone-green .emp-mgmt-stat-icon { background: #f6ffed; }
.emp-mgmt-stat.tone-orange .emp-mgmt-stat-icon { background: #fff7e6; }
.emp-mgmt-stat.tone-purple .emp-mgmt-stat-icon { background: #f9f0ff; }

.emp-mgmt-stat b {
  display: block;
  font-size: 22px;
  line-height: 1.2;
  color: #262626;
}

.emp-mgmt-stat span {
  font-size: 12px;
  color: #8c8c8c;
}

.emp-mgmt-body {
  flex: 1;
  display: flex;
  gap: 12px;
  min-height: 0;
}

.emp-mgmt-org-panel {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.emp-mgmt-org-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-mgmt-org-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.emp-mgmt-org-add {
  width: 24px;
  height: 24px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #1677ff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.emp-mgmt-org-add:hover {
  border-color: #1677ff;
  background: #e6f4ff;
}

.emp-mgmt-org-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px;
  padding: 0 10px;
  height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fafafa;
}

.emp-mgmt-org-search input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
}

.emp-mgmt-org-search svg {
  color: #bfbfbf;
  flex-shrink: 0;
}

.emp-mgmt-org-tree {
  flex: 1;
  overflow: auto;
  padding: 4px 8px 12px;
}

.emp-mgmt-org-node {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.emp-mgmt-org-node.active {
  background: #e6f4ff;
}

.emp-mgmt-org-node.depth-1 { padding-left: 8px; }
.emp-mgmt-org-node.depth-2 { padding-left: 20px; }

.emp-mgmt-org-toggle,
.emp-mgmt-org-toggle-spacer {
  width: 18px;
  flex-shrink: 0;
  font-size: 10px;
  color: #8c8c8c;
}

.emp-mgmt-org-toggle {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.emp-mgmt-org-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #595959;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.emp-mgmt-org-node.active .emp-mgmt-org-label {
  color: #1677ff;
  font-weight: 500;
}

.emp-mgmt-org-label:hover {
  color: #1677ff;
}

.emp-mgmt-org-count {
  font-size: 12px;
  color: #8c8c8c;
  background: #f5f5f5;
  padding: 0 6px;
  border-radius: 10px;
  line-height: 18px;
}

.emp-mgmt-org-node.active .emp-mgmt-org-count {
  background: #bae0ff;
  color: #1677ff;
}

.emp-mgmt-main {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.emp-mgmt-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-mgmt-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.emp-mgmt-subtitle {
  margin: 0;
  font-size: 12px;
  color: #8c8c8c;
}

.emp-mgmt-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emp-mgmt-status-tab {
  padding: 4px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: all 0.2s ease;
}

.emp-mgmt-status-tab:hover {
  color: #1677ff;
  border-color: #91caff;
}

.emp-mgmt-status-tab.active {
  color: #1677ff;
  border-color: #1677ff;
  background: #e6f4ff;
}

.emp-mgmt-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-mgmt-refresh-btn.is-spinning svg {
  animation: empMgmtSpin 0.5s ease;
}

@keyframes empMgmtSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.emp-mgmt-table-panel {
  flex: 1;
  min-height: 0;
}

.emp-mgmt-table-scroll {
  max-height: calc(100vh - var(--topbar-h) - 340px);
}

.emp-mgmt-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.emp-mgmt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1677ff, #69b1ff);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-mgmt-avatar.tone-blue { background: linear-gradient(135deg, #69b1ff, #1677ff); }
.emp-mgmt-avatar.tone-cyan { background: linear-gradient(135deg, #5cdbd3, #13c2c2); }
.emp-mgmt-avatar.tone-purple { background: linear-gradient(135deg, #b37feb, #722ed1); }
.emp-mgmt-avatar.tone-green { background: linear-gradient(135deg, #95de64, #52c41a); }
.emp-mgmt-avatar.tone-orange { background: linear-gradient(135deg, #ffc069, #fa8c16); }
.emp-mgmt-avatar.tone-pink { background: linear-gradient(135deg, #ff85c0, #eb2f96); }

.emp-mgmt-email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-mgmt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.emp-mgmt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.emp-mgmt-status.tone-green { color: #52c41a; }
.emp-mgmt-status.tone-green .emp-mgmt-status-dot { background: #52c41a; }
.emp-mgmt-status.tone-blue { color: #1677ff; }
.emp-mgmt-status.tone-blue .emp-mgmt-status-dot { background: #1677ff; }
.emp-mgmt-status.tone-grey { color: #8c8c8c; }
.emp-mgmt-status.tone-grey .emp-mgmt-status-dot { background: #bfbfbf; }

.emp-mgmt-actions .crm-cust-act + .crm-cust-act {
  margin-left: 8px;
}

.emp-mgmt-footer {
  padding: 12px 16px;
  font-size: 13px;
  color: #8c8c8c;
  border-top: 1px solid #f0f0f0;
}

.emp-mgmt-view-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
  margin-right: 4px;
}

.emp-mgmt-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: #8c8c8c;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.emp-mgmt-view-btn + .emp-mgmt-view-btn {
  border-left: 1px solid #e8e8e8;
}

.emp-mgmt-view-btn:hover {
  color: #1677ff;
  background: #f0f7ff;
}

.emp-mgmt-view-btn.active {
  background: #fff;
  color: #1677ff;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.emp-mgmt-card-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 22px 14px;
  background: #fafafa;
}

.emp-mgmt-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1400px) {
  .emp-mgmt-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 1100px) {
  .emp-mgmt-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .emp-mgmt-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.emp-mgmt-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  animation: empMgmtCardIn 0.45s cubic-bezier(0.34, 1.1, 0.64, 1) backwards;
  animation-delay: calc(var(--card-i, 0) * 0.04s);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.1, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.emp-mgmt-card:hover {
  transform: translateY(-4px);
  border-color: #d6e4ff;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.12);
}

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

.emp-mgmt-card-head {
  display: flex;
  gap: 14px;
  padding: 18px 18px 14px;
}

.emp-mgmt-card-head .emp-mgmt-avatar {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.emp-mgmt-card-ident {
  flex: 1;
  min-width: 0;
}

.emp-mgmt-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.emp-mgmt-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
  line-height: 1.3;
}

.emp-mgmt-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.emp-mgmt-card-badge.tone-green {
  color: #389e0d;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.emp-mgmt-card-badge.tone-orange {
  color: #d46b08;
  background: #fff7e6;
  border: 1px solid #ffd591;
}

.emp-mgmt-card-badge.tone-grey {
  color: #8c8c8c;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
}

.emp-mgmt-card-title {
  margin: 0 0 4px;
  font-size: 13px;
  color: #595959;
  line-height: 1.4;
}

.emp-mgmt-card-dept {
  margin: 0;
  font-size: 12px;
  color: #bfbfbf;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.emp-mgmt-card-contact {
  padding: 0 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-mgmt-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #595959;
  min-width: 0;
}

.emp-mgmt-card-row svg {
  flex-shrink: 0;
  color: #bfbfbf;
}

.emp-mgmt-card-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emp-mgmt-card-row.is-empty span {
  color: #bfbfbf;
}

.emp-mgmt-card-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
  background: #fafafa;
}

.emp-mgmt-card-act {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: none;
  border-right: 1px solid #f0f0f0;
  background: transparent;
  color: #8c8c8c;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.emp-mgmt-card-act:last-child {
  border-right: none;
}

.emp-mgmt-card-act:hover {
  background: #fff;
  color: #1677ff;
}

.emp-mgmt-card-act.danger:hover {
  color: #ff4d4f;
  background: #fff1f0;
}

.emp-mgmt-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: #8c8c8c;
}

.emp-mgmt-card-empty p {
  margin: 0 0 12px;
}

.emp-mgmt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.emp-mgmt-field-wide {
  grid-column: 1 / -1;
}

.emp-mgmt-field {
  display: block;
  margin-bottom: 12px;
}

.emp-mgmt-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #595959;
}

.emp-mgmt-field em {
  color: #ff4d4f;
  font-style: normal;
}

.emp-mgmt-field input,
.emp-mgmt-field select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.emp-mgmt-detail-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-mgmt-detail-head .emp-mgmt-avatar {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.emp-mgmt-detail-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.emp-mgmt-detail-head p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #8c8c8c;
}

.emp-mgmt-detail-section {
  margin-bottom: 16px;
}

.emp-mgmt-detail-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #262626;
}

.emp-mgmt-detail-section dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.emp-mgmt-detail-section dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  font-size: 13px;
}

.emp-mgmt-detail-section dt {
  color: #8c8c8c;
}

.emp-mgmt-detail-section dd {
  margin: 0;
  color: #262626;
}

.emp-mgmt-detail-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.crm-cust-btn.default {
  background: #fff;
  border: 1px solid #d9d9d9;
  color: #595959;
}

.crm-cust-btn.default:hover {
  color: #1677ff;
  border-color: #1677ff;
}

@media (max-width: 960px) {
  .emp-mgmt-body {
    flex-direction: column;
  }
  .emp-mgmt-org-panel {
    width: 100%;
    max-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-mgmt-stat:hover,
  .emp-mgmt-refresh-btn.is-spinning svg {
    transform: none;
    animation: none;
  }
}

/* —— 员工管理 · 考勤统计 —— */
.content:has(.emp-att-page) {
  padding: 12px 12px 20px;
  background: #f0f2f5;
  max-width: none;
  overflow-x: auto;
}

#module-view:has(.emp-att-page) {
  padding: 0;
  width: 100%;
  max-width: none;
}

.emp-att-page {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - var(--topbar-h) - 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-att-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.emp-att-page-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.emp-att-page-desc {
  margin: 0;
  font-size: 13px;
  color: #8c8c8c;
}

.emp-att-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.emp-att-period-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #f5f5f5;
  border-radius: 6px;
}

.emp-att-period-tab {
  padding: 5px 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.emp-att-period-tab:hover {
  color: #1677ff;
}

.emp-att-period-tab.active {
  background: #fff;
  color: #1677ff;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.emp-att-dept-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  min-width: 130px;
}

.emp-att-main-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.emp-att-main-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: #595959;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.emp-att-main-tab:hover {
  color: #1677ff;
  border-color: #91caff;
  transform: translateY(-1px);
}

.emp-att-main-tab.active {
  color: #1677ff;
  border-color: #1677ff;
  background: linear-gradient(180deg, #e6f4ff 0%, #fff 100%);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.15);
}

.emp-att-main-tab-icon {
  font-size: 16px;
}

.emp-att-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1000px) {
  .emp-att-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

.emp-att-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.emp-att-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.emp-att-summary-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

.emp-att-summary-card.tone-blue .emp-att-summary-icon { background: #e6f4ff; color: #1677ff; }
.emp-att-summary-card.tone-green .emp-att-summary-icon { background: #f6ffed; color: #52c41a; }
.emp-att-summary-card.tone-orange .emp-att-summary-icon { background: #fff7e6; color: #fa8c16; }
.emp-att-summary-card.tone-purple .emp-att-summary-icon { background: #f9f0ff; color: #722ed1; }

.emp-att-summary-card b {
  display: block;
  font-size: 20px;
  color: #262626;
  line-height: 1.2;
}

.emp-att-summary-card span {
  font-size: 12px;
  color: #8c8c8c;
}

.emp-att-toolbar {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.emp-att-refresh-btn.is-spinning svg {
  animation: empAttSpin 0.5s ease;
}

@keyframes empAttSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.emp-att-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  animation: empAttFadeIn 0.28s ease;
}

.emp-att-summary-unified {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.emp-att-summary-group {
  padding: 12px 14px 10px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.emp-att-summary-group-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  display: flex;
  align-items: center;
  gap: 6px;
}

.emp-att-summary-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.emp-att-summary-compact .emp-att-summary-card {
  padding: 10px 12px;
}

.emp-att-summary-compact .emp-att-summary-card b {
  font-size: 17px;
}

.emp-att-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  flex: 1;
}

.emp-att-panel-unified {
  gap: 16px;
}

.emp-att-charts-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.emp-att-chart-icon {
  margin-right: 6px;
}

.emp-att-chart-card {
  min-height: 280px;
}

.emp-att-table-card-full {
  min-height: 360px;
}

.emp-att-table-card-full .emp-att-table-head {
  padding: 16px 22px;
}

.emp-att-unified-scroll {
  overflow: auto;
  padding: 8px 12px 16px;
}

.emp-att-unified-table {
  width: 100%;
  min-width: 1680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.5;
}

.emp-att-unified-table th,
.emp-att-unified-table td {
  padding: 16px 20px;
  white-space: nowrap;
  vertical-align: middle;
}

.emp-att-unified-table .emp-att-subhead th {
  padding: 10px 20px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #8c8c8c;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.emp-att-unified-table thead tr:first-child th {
  padding: 14px 20px 10px;
  background: #fafafa;
  font-size: 13px;
  font-weight: 600;
  vertical-align: bottom;
}

.emp-att-unified-table thead tr:first-child th[rowspan] {
  vertical-align: middle;
}

.emp-att-th-group {
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
}

.emp-att-th-group.clock { color: #1677ff; border-bottom-color: #91caff; }
.emp-att-th-group.perf { color: #722ed1; border-bottom-color: #d3adf7; }
.emp-att-th-group.sales { color: #fa8c16; border-bottom-color: #ffd591; }
.emp-att-th-group.eval { color: #52c41a; border-bottom-color: #b7eb8f; }

.emp-att-col-name { min-width: 96px; width: 10%; }
.emp-att-col-empno { min-width: 88px; width: 8%; }
.emp-att-col-dept { min-width: 120px; width: 11%; }
.emp-att-col-date { min-width: 108px; }
.emp-att-col-time { min-width: 72px; }
.emp-att-col-period { min-width: 96px; }
.emp-att-col-num { min-width: 64px; }
.emp-att-col-grade { min-width: 72px; }
.emp-att-col-money { min-width: 108px; }
.emp-att-col-progress { min-width: 120px; }
.emp-att-col-status { min-width: 88px; }
.emp-att-col-act { min-width: 80px; width: 72px; }

.emp-att-zone-base {
  background: #fff;
}

.emp-att-zone-clock {
  background: #fafcff;
}

.emp-att-zone-perf {
  background: #fcfafc;
}

.emp-att-zone-sales {
  background: #fffbf5;
}

.emp-att-zone-eval {
  background: #f9fcf6;
}

.emp-att-zone-act {
  background: #fff;
  text-align: center;
}

.emp-att-zone-start {
  padding-left: 28px !important;
  border-left: 1px solid #e8e8e8;
}

.emp-att-unified-row td {
  border-bottom: 1px solid #f0f0f0;
}

.emp-att-unified-row:hover td {
  background: #e6f4ff !important;
}

.emp-att-unified-row:nth-child(even) .emp-att-zone-base,
.emp-att-unified-row:nth-child(even) .emp-att-zone-act {
  background: #fafafa;
}

.emp-att-unified-row:nth-child(even) .emp-att-zone-clock {
  background: #f5f9ff;
}

.emp-att-unified-row:nth-child(even) .emp-att-zone-perf {
  background: #f8f5fa;
}

.emp-att-unified-row:nth-child(even) .emp-att-zone-sales {
  background: #fff8ed;
}

.emp-att-unified-row:nth-child(even) .emp-att-zone-eval {
  background: #f4faf0;
}

.emp-att-cell-dept {
  white-space: normal;
  min-width: 120px;
  max-width: 160px;
  line-height: 1.45;
}

.emp-att-cell-muted {
  color: #8c8c8c;
  font-variant-numeric: tabular-nums;
}

.emp-att-cell-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.emp-att-cell-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.emp-att-cell-progress {
  min-width: 120px;
  padding-right: 24px !important;
}

.emp-att-cell-progress .emp-att-progress {
  min-width: 100px;
}

.emp-att-empty {
  color: #d9d9d9;
}

.emp-att-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.04);
}

.emp-att-unified-table thead .emp-att-sticky-col {
  z-index: 4;
  background: #fafafa;
}

.emp-att-unified-table .emp-att-actions {
  padding-left: 16px;
  padding-right: 16px;
}

.emp-att-detail-unified section {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.emp-att-detail-unified h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #1677ff;
}

@media (max-width: 1200px) {
  .emp-att-summary-unified,
  .emp-att-charts-stack {
    grid-template-columns: 1fr;
  }
}

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

.emp-att-chart-card,
.emp-att-table-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 340px;
  min-width: 0;
  overflow: visible;
}

.emp-att-chart-head,
.emp-att-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-att-chart-head h4,
.emp-att-table-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.emp-att-chart-hint,
.emp-att-table-head span {
  font-size: 12px;
  color: #8c8c8c;
}

.emp-att-bars-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.emp-att-chart-card .emp-att-chart-tooltip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.emp-att-chart-card .emp-att-chart-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.emp-att-chart-card .emp-att-chart-tooltip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.emp-att-chart-card .emp-att-chart-tooltip span {
  color: rgba(255, 255, 255, 0.88);
}

.emp-att-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px 18px;
  flex: 1;
  min-height: 220px;
  overflow-x: auto;
  overflow-y: visible;
}

.emp-att-bar-item {
  flex: 1 1 0;
  min-width: 44px;
  max-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.emp-att-bar-item:hover,
.emp-att-bar-item.is-active {
  transform: translateY(-4px);
}

.emp-att-bar-item.is-dimmed {
  opacity: 0.38;
}

.emp-att-bar-item.is-dimmed .emp-att-bar-fill {
  filter: grayscale(0.35);
}

.emp-att-bar-track {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: flex-end;
  background: #f5f5f5;
  border-radius: 4px 4px 0 0;
  overflow: visible;
}

.emp-att-bar-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #69b1ff 0%, #1677ff 100%);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transform-origin: bottom center;
  animation: empAttBarGrow 0.65s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  animation-delay: var(--bar-delay, 0s);
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

@keyframes empAttBarGrow {
  from {
    height: 0;
    opacity: 0.5;
  }
  to {
    height: var(--bar-h, 8%);
    opacity: 1;
  }
}

.emp-att-bar-item:hover .emp-att-bar-fill,
.emp-att-bar-item.is-active .emp-att-bar-fill {
  transform: scaleX(1.1);
  filter: brightness(1.08);
  box-shadow: 0 -6px 16px rgba(22, 119, 255, 0.35);
}

.emp-att-chart-card[data-emp-att-chart="perf"] .emp-att-bar-fill {
  background: linear-gradient(180deg, #b37feb 0%, #722ed1 100%);
}

.emp-att-chart-card[data-emp-att-chart="perf"] .emp-att-bar-item:hover .emp-att-bar-fill,
.emp-att-chart-card[data-emp-att-chart="perf"] .emp-att-bar-item.is-active .emp-att-bar-fill {
  box-shadow: 0 -6px 16px rgba(114, 46, 209, 0.35);
}

.emp-att-chart-card[data-emp-att-chart="sales"] .emp-att-bar-fill {
  background: linear-gradient(180deg, #ffc069 0%, #fa8c16 100%);
}

.emp-att-chart-card[data-emp-att-chart="sales"] .emp-att-bar-item:hover .emp-att-bar-fill,
.emp-att-chart-card[data-emp-att-chart="sales"] .emp-att-bar-item.is-active .emp-att-bar-fill {
  box-shadow: 0 -6px 16px rgba(250, 140, 22, 0.35);
}

.emp-att-chart-card[data-emp-att-chart="eval"] .emp-att-bar-fill {
  background: linear-gradient(180deg, #95de64 0%, #52c41a 100%);
}

.emp-att-chart-card[data-emp-att-chart="eval"] .emp-att-bar-item:hover .emp-att-bar-fill,
.emp-att-chart-card[data-emp-att-chart="eval"] .emp-att-bar-item.is-active .emp-att-bar-fill {
  box-shadow: 0 -6px 16px rgba(82, 196, 26, 0.35);
}

.emp-att-bar-item:hover .emp-att-bar-val,
.emp-att-bar-item.is-active .emp-att-bar-val {
  color: #0958d9;
  font-weight: 600;
}

.emp-att-bar-label {
  font-size: 12px;
  color: #8c8c8c;
}

.emp-att-bar-val {
  font-size: 11px;
  color: #1677ff;
  font-weight: 500;
}

.emp-att-table-scroll {
  flex: 1;
  max-height: 420px;
  overflow: auto;
}

.emp-att-tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 18px;
}

.emp-att-tag.tone-green { background: #f6ffed; color: #52c41a; }
.emp-att-tag.tone-orange { background: #fff7e6; color: #fa8c16; }
.emp-att-tag.tone-red { background: #fff2f0; color: #ff4d4f; }
.emp-att-tag.tone-blue { background: #e6f4ff; color: #1677ff; }
.emp-att-tag.tone-grey { background: #f5f5f5; color: #8c8c8c; }

.emp-att-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.emp-att-grade.tone-green { background: #f6ffed; color: #52c41a; }
.emp-att-grade.tone-blue { background: #e6f4ff; color: #1677ff; }
.emp-att-grade.tone-orange { background: #fff7e6; color: #fa8c16; }

.emp-att-progress {
  position: relative;
  min-width: 88px;
  height: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}

.emp-att-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.emp-att-progress.tone-green .emp-att-progress-bar { background: #52c41a; }
.emp-att-progress.tone-blue .emp-att-progress-bar { background: #1677ff; }
.emp-att-progress.tone-orange .emp-att-progress-bar { background: #fa8c16; }

.emp-att-progress-text {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 11px;
  line-height: 20px;
  color: #262626;
  font-weight: 500;
}

.emp-att-score-cell {
  position: relative;
  min-width: 48px;
  padding-left: 4px;
}

.emp-att-score-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #91caff;
  border-radius: 3px;
  opacity: 0.35;
  max-width: 100%;
}

.emp-att-score-num {
  font-size: 16px;
  color: #1677ff;
}

.emp-att-level {
  color: #52c41a;
  font-weight: 500;
}

.emp-att-time {
  font-variant-numeric: tabular-nums;
  color: #595959;
}

@media (prefers-reduced-motion: reduce) {
  .emp-att-content,
  .emp-att-bar-fill,
  .emp-att-summary-card:hover,
  .emp-att-main-tab:hover,
  .emp-att-refresh-btn.is-spinning svg {
    animation: none;
    transform: none;
    transition: none;
  }

  .emp-att-bar-fill {
    height: var(--bar-h, 8%);
  }
}

/* —— 员工管理 · 薪资报表 —— */
.content:has(.emp-salary-page) {
  padding: 12px 16px 20px;
  background: #f0f2f5;
}

#module-view:has(.emp-salary-page) {
  padding: 0;
  width: 100%;
}

.emp-salary-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - var(--topbar-h) - 24px);
  animation: empSalaryFadeIn 0.45s ease;
}

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

.emp-salary-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.emp-salary-stat-card {
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.emp-salary-stat-card:hover {
  transform: translateY(-3px);
  border-color: #d6e4ff;
  box-shadow: 0 8px 20px rgba(22, 119, 255, 0.1);
}

.emp-salary-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.emp-salary-stat-label {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.4;
}

.emp-salary-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1677ff;
  background: #e6f4ff;
}

.emp-salary-stat-icon.gift {
  color: #fa8c16;
  background: #fff7e6;
  font-size: 16px;
}

.emp-salary-stat-icon.shield {
  color: #52c41a;
  background: #f6ffed;
  font-size: 15px;
}

.emp-salary-stat-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.emp-salary-stat-value {
  font-size: 30px;
  font-weight: 600;
  color: #262626;
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color 0.25s ease;
}

.emp-salary-stat-card:hover .emp-salary-stat-value {
  color: #1677ff;
}

.emp-salary-trend {
  font-size: 13px;
  font-weight: 500;
}

.emp-salary-trend.up {
  color: #ff4d4f;
}

.emp-salary-stat-sub {
  margin: 8px 0 0;
  font-size: 12px;
  color: #bfbfbf;
}

.emp-salary-mid-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.emp-salary-chart-card,
.emp-salary-actions-card,
.emp-salary-table-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.emp-salary-chart-card {
  padding: 16px 18px 12px;
  min-height: 280px;
}

.emp-salary-actions-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.emp-salary-card-title {
  margin-bottom: 12px;
}

.emp-salary-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

.emp-salary-chart-wrap {
  position: relative;
  width: 100%;
  padding-top: 4px;
}

.emp-salary-chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.emp-salary-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.emp-salary-legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #69b1ff, #1677ff);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}

.emp-salary-legend-trend {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
}

.emp-salary-legend-trend.up {
  color: #389e0d;
  background: #f6ffed;
}

.emp-salary-legend-trend.down {
  color: #cf1322;
  background: #fff1f0;
}

.emp-salary-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  overflow: visible;
}

.emp-salary-axis-unit {
  font-size: 11px;
  fill: #bfbfbf;
}

.emp-salary-grid-line {
  stroke: #f0f0f0;
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.emp-salary-axis-y {
  font-size: 11px;
  fill: #bfbfbf;
}

.emp-salary-axis-x {
  font-size: 12px;
  fill: #8c8c8c;
}

.emp-salary-bar-col {
  fill: url(#emp-salary-bar-grad);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
}

.emp-salary-chart-wrap.is-interactive .emp-salary-bar-col {
  transition: none;
}

.emp-salary-chart-wrap.is-animated .emp-salary-bar-col {
  animation: empSalaryBarGrow 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  animation-delay: var(--bar-delay, 0s);
}

.emp-salary-chart-wrap.is-interactive .emp-salary-bar-col {
  opacity: 0.85;
  transform: scaleY(1);
}

.emp-salary-bar-col.is-active,
.emp-salary-chart-wrap.is-interactive .emp-salary-bar-col.is-active {
  opacity: 1;
  fill: #91caff;
}

.emp-salary-bar-col.is-dimmed,
.emp-salary-chart-wrap.is-interactive .emp-salary-bar-col.is-dimmed {
  opacity: 0.35;
}

@keyframes empSalaryBarGrow {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 0.85;
    transform: scaleY(1);
  }
}

.emp-salary-area {
  opacity: 0;
  transform-origin: center bottom;
}

.emp-salary-chart-wrap.is-animated .emp-salary-area {
  animation: empSalaryAreaIn 0.9s ease forwards;
  animation-delay: 0.15s;
}

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

.emp-salary-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: none;
}

.emp-salary-chart-wrap.is-animated .emp-salary-line {
  animation: empSalaryLineDraw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes empSalaryLineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.emp-salary-crosshair {
  pointer-events: none;
  transition: none;
}

.emp-salary-point-group {
  cursor: pointer;
}

.emp-salary-hit {
  cursor: pointer;
}

.emp-salary-ring {
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.2s ease;
}

.emp-salary-chart-wrap.is-interactive .emp-salary-point-group.is-active .emp-salary-ring {
  opacity: 0.35;
  animation: empSalaryRingPulse 1.2s ease-out infinite;
}

@keyframes empSalaryRingPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.45;
  }
  70% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

.emp-salary-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.emp-salary-point-group.is-active .emp-salary-dot {
  transform: scale(1.5);
  filter: drop-shadow(0 2px 6px rgba(22, 119, 255, 0.45));
}

.emp-salary-point-group.is-dimmed .emp-salary-dot,
.emp-salary-point-group.is-dimmed .emp-salary-point-val {
  opacity: 0.45;
  transition: none;
}

.emp-salary-chart-wrap.is-interactive .emp-salary-point-group {
  transition: none;
}

.emp-salary-point-val {
  font-size: 11px;
  font-weight: 600;
  fill: #1677ff;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.emp-salary-point-group.is-active .emp-salary-point-val {
  opacity: 1;
}

.emp-salary-chart-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transform: translate3d(var(--tip-x, 0px), var(--tip-y, 0px), 0) translate(-50%, calc(-100% - 10px));
  will-change: transform;
  transition: opacity 0.1s ease, visibility 0.1s ease;
}

.emp-salary-chart-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.82);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

.emp-salary-chart-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.emp-salary-chart-tooltip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.emp-salary-chart-tooltip span {
  color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .emp-salary-chart-wrap.is-animated .emp-salary-bar-col,
  .emp-salary-chart-wrap.is-animated .emp-salary-area,
  .emp-salary-chart-wrap.is-animated .emp-salary-line,
  .emp-salary-point-group.is-active .emp-salary-ring {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
}

.emp-salary-quick-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.emp-salary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.emp-salary-btn:active {
  transform: scale(0.98);
}

.emp-salary-btn.primary {
  border: none;
  background: #1677ff;
  color: #fff;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}

.emp-salary-btn.primary:hover {
  background: #4096ff;
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35);
}

.emp-salary-btn.outline {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #262626;
}

.emp-salary-btn.outline:hover {
  color: #1677ff;
  border-color: #1677ff;
  background: #f0f7ff;
}

.emp-salary-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 6px;
}

.emp-salary-tip-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #faad14;
  font-weight: 700;
}

.emp-salary-tip p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8c6d1f;
}

.emp-salary-table-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.emp-salary-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.emp-salary-table-toolbar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}

.emp-salary-table-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.emp-salary-search-box,
.emp-salary-month-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.emp-salary-search-box:focus-within,
.emp-salary-month-box:focus-within {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}

.emp-salary-search-box svg,
.emp-salary-month-box svg {
  flex-shrink: 0;
  color: #bfbfbf;
}

.emp-salary-search-box input,
.emp-salary-month-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #262626;
  min-width: 0;
}

.emp-salary-search-box input {
  width: 120px;
}

.emp-salary-month-box input {
  width: 130px;
  color-scheme: light;
}

.emp-salary-table-scroll {
  max-height: none;
}

.emp-salary-table .crm-cust-row {
  transition: background 0.15s ease;
}

.emp-salary-table .crm-cust-row:hover {
  background: #fafafa;
}

.emp-salary-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #595959;
}

.emp-salary-net strong {
  color: #262626;
  font-weight: 600;
}

.emp-salary-sortable {
  text-align: right;
}

.emp-salary-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

.emp-salary-sort-btn:hover {
  color: #1677ff;
}

.emp-salary-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  font-size: 8px;
  line-height: 1;
  color: #d9d9d9;
  gap: 1px;
}

.emp-salary-sort-arrows span.active {
  color: #1677ff;
}

.emp-salary-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

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

.emp-salary-status.tone-green {
  color: #52c41a;
}

.emp-salary-status.tone-green .emp-salary-status-dot {
  background: #52c41a;
}

.emp-salary-status.tone-orange {
  color: #fa8c16;
}

.emp-salary-status.tone-orange .emp-salary-status-dot {
  background: #fa8c16;
}

.emp-salary-actions .crm-cust-act {
  color: #1677ff;
}

.emp-salary-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px 14px;
  border-top: 1px solid #f0f0f0;
}

.emp-salary-footer-info {
  font-size: 13px;
  color: #8c8c8c;
}

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

.emp-salary-detail dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin: 16px 0;
}

.emp-salary-detail dt {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 2px;
}

.emp-salary-detail dd {
  margin: 0;
  font-size: 15px;
  color: #262626;
}

@media (max-width: 1200px) {
  .emp-salary-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .emp-salary-mid-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .emp-salary-stats {
    grid-template-columns: 1fr;
  }

  .emp-salary-table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .emp-salary-table-tools {
    width: 100%;
  }

  .emp-salary-search-box,
  .emp-salary-month-box {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-salary-page,
  .emp-salary-stat-card:hover {
    animation: none;
    transform: none;
    transition: none;
  }
}