/* 投流监控 — Design System CSS */
:root {
  --primary: #2563EB;
  --primary-light: #DBEAFE;
  --danger: #DC2626;
  --danger-light: #FEE2E2;
  --success: #16A34A;
  --success-light: #DCFCE7;
  --warning: #D97706;
  --warning-light: #FEF3C7;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --bg: #F9FAFB;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --text-1: #111827;
  --text-2: #6B7280;
  --text-3: #9CA3AF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
.tabnum { font-variant-numeric: tabular-nums; }
.pulse { animation: pulse 2s infinite; }
.traffic-bar { height: 4px; transition: background .3s; }
.traffic-green { background: var(--success); }
.traffic-red { background: var(--danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--success); }
.dot-bad { background: var(--danger); animation: pulse 2s infinite; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .6s linear infinite; }
.tag { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.tag-cost { background: var(--danger-light); color: var(--danger); }
.tag-compliance { background: var(--warning-light); color: var(--warning); }
.tag-speed { background: var(--purple-light); color: var(--purple); }
.tag-enabled { background: var(--success-light); color: var(--success); }
.tag-disabled { background: var(--gray-100); color: var(--text-2); }
.tag-rule-cost { background: var(--primary-light); color: var(--primary); }
.tag-rule-compliance { background: var(--purple-light); color: var(--purple); }
.card-problem { border: 2px solid var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }
/* 详情列截断 */
.msg-cell { max-width: 220px; }
.msg-cell .msg-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* === Mobile Responsive === */
/* 汉堡菜单 */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; padding: 0; }
.nav-toggle svg { width: 24px; height: 24px; stroke: #6B7280; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { padding: 10px 4px; display: inline-flex; align-items: center; min-height: 44px; }
.mobile-nav { display: none; }

@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; }
  .mobile-nav { display: block; position: fixed; inset: 0; z-index: 100; background: #fff; padding: 16px; }
  .mobile-nav a { display: block; padding: 14px 16px; font-size: 16px; border-bottom: 1px solid #E5E7EB; color: #374151; }
  .mobile-nav a.active { color: #2563EB; font-weight: 700; }
  .mobile-nav .nav-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
  .mobile-nav .nav-footer { position: absolute; bottom: 24px; left: 16px; right: 16px; text-align: center; font-size: 12px; color: #9CA3AF; }
  /* 表格卡片化 */
  .mobile-cards table { display: none; }
  .mobile-cards .card-list { display: block; }
  /* 标签加大 */
  .tag { padding: 4px 12px; font-size: 12px; min-height: 28px; display: inline-flex; align-items: center; }
  /* 消息列不截断 */
  .msg-cell { max-width: none; }
}
@media (min-width: 768px) {
  .mobile-cards .card-list { display: none; }
}