/* 万象客服系统统一视觉层：仅覆盖表现，不改变任何业务结构或接口。 */
:root {
  --wx-navy-950: #071524;
  --wx-navy-900: #0b1d2f;
  --wx-navy-800: #12314b;
  --wx-cyan-600: #0d8d95;
  --wx-cyan-500: #14a8ad;
  --wx-cyan-100: #dff5f4;
  --wx-blue-500: #2878e8;
  --wx-bg: #f3f6f8;
  --wx-surface: rgba(255, 255, 255, .96);
  --wx-line: #dfe7ed;
  --wx-line-strong: #cbd8e1;
  --wx-text: #15283b;
  --wx-muted: #697b8c;
  --wx-danger: #d85555;
  --wx-warning: #d8833d;
  --wx-success: #2f8b72;
  --wx-radius: 14px;
  --wx-radius-sm: 9px;
  --wx-shadow: 0 12px 30px rgba(12, 38, 60, .07);
  --wx-shadow-hover: 0 18px 44px rgba(12, 38, 60, .12);
  --wx-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 兼容各子系统现有 token */
  --p: var(--wx-cyan-600);
  --primary: var(--wx-cyan-600);
  --primary-hover: #0a737a;
  --primary-light: var(--wx-cyan-100);
  --primary-bg: #edf9f8;
  --brand: var(--wx-cyan-600);
  --bg: var(--wx-bg);
  --bg-page: var(--wx-bg);
  --bg-card: #fff;
  --c: #fff;
  --t: var(--wx-text);
  --text: var(--wx-text);
  --text-main: var(--wx-text);
  --td: var(--wx-muted);
  --text-secondary: var(--wx-muted);
  --text-sub: var(--wx-muted);
  --border: var(--wx-line);
  --b: var(--wx-line);
  --border-light: #ebf0f4;
  --border-input: var(--wx-line-strong);
  --r: var(--wx-radius);
  --radius: var(--wx-radius);
  --radius-sm: var(--wx-radius-sm);
  --s: var(--wx-shadow);
  --shadow: var(--wx-shadow);
  --shadow-card: var(--wx-shadow);
  --shadow-hover: var(--wx-shadow-hover);
  --shadow-card-hover: var(--wx-shadow-hover);
  --f: var(--wx-font);
  --font: var(--wx-font);
  --g: var(--wx-success);
  --success: var(--wx-success);
  --warning: var(--wx-warning);
  --e: var(--wx-danger);
  --error: var(--wx-danger);
}

html { color-scheme: light; }

body:not(.wx-home) {
  color: var(--wx-text);
  background-color: var(--wx-bg);
  background-image:
    radial-gradient(circle at 100% 0, rgba(20, 168, 173, .07), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, .76), transparent 17rem);
  font-family: var(--wx-font);
  -webkit-font-smoothing: antialiased;
}

body:not(.wx-home)::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 2px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, var(--wx-navy-900), var(--wx-cyan-500), #79d5cf, var(--wx-navy-900));
}

body:not(.wx-home) h1 {
  color: var(--wx-navy-900);
  font-weight: 720;
  letter-spacing: -.025em;
}

body:not(.wx-home) h2,
body:not(.wx-home) h3 { color: var(--wx-navy-800); }

body:not(.wx-home) .sub,
body:not(.wx-home) .subtitle,
body:not(.wx-home) .hint { color: var(--wx-muted); }

body:not(.wx-home) .card,
body:not(.wx-home) .panel,
body:not(.wx-home) .overview-card,
body:not(.wx-home) .stat-card,
body:not(.wx-home) .chart-card,
body:not(.wx-home) .table-card,
body:not(.wx-home) .section-card {
  border-color: var(--wx-line);
  border-radius: var(--wx-radius);
  background: var(--wx-surface);
  box-shadow: var(--wx-shadow);
}

body:not(.wx-home) .card,
body:not(.wx-home) .panel,
body:not(.wx-home) .stat-card,
body:not(.wx-home) .chart-card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }

@media (hover: hover) {
  body:not(.wx-home) .card:hover,
  body:not(.wx-home) .stat-card:hover,
  body:not(.wx-home) .chart-card:hover {
    border-color: #c7d9e3;
    box-shadow: var(--wx-shadow-hover);
  }
}

body:not(.wx-home) input,
body:not(.wx-home) select,
body:not(.wx-home) textarea {
  border-color: var(--wx-line-strong);
  border-radius: var(--wx-radius-sm);
  color: var(--wx-text);
  background-color: rgba(255, 255, 255, .96);
  font-family: var(--wx-font);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body:not(.wx-home) input::placeholder,
body:not(.wx-home) textarea::placeholder { color: #96a5b2; }

body:not(.wx-home) input:focus,
body:not(.wx-home) select:focus,
body:not(.wx-home) textarea:focus {
  border-color: var(--wx-cyan-500);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(20, 168, 173, .11);
}

body:not(.wx-home) button,
body:not(.wx-home) .btn {
  border-radius: var(--wx-radius-sm);
  font-family: var(--wx-font);
  transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body:not(.wx-home) button:hover:not(:disabled),
body:not(.wx-home) .btn:hover:not(:disabled) { transform: translateY(-1px); }

body:not(.wx-home) .btn-p,
body:not(.wx-home) .btn-primary,
body:not(.wx-home) .primary-btn,
body:not(.wx-home) .submit {
  border-color: var(--wx-cyan-600);
  color: #fff;
  background: linear-gradient(135deg, var(--wx-cyan-600), #126c86);
  box-shadow: 0 7px 18px rgba(13, 141, 149, .18);
}

body:not(.wx-home) table { border-collapse: separate; border-spacing: 0; }
body:not(.wx-home) th {
  color: #607386;
  background: #f4f7f9;
  font-weight: 650;
  letter-spacing: .02em;
}
body:not(.wx-home) th,
body:not(.wx-home) td { border-color: #e8eef2; }
body:not(.wx-home) tbody tr { transition: background .16s ease; }
body:not(.wx-home) tbody tr:hover { background: #f5fbfa; }

body:not(.wx-home) .tabs { border-color: var(--wx-line); }
body:not(.wx-home) .tab { color: var(--wx-muted); }
body:not(.wx-home) .tab.on,
body:not(.wx-home) .tab.active {
  color: var(--wx-cyan-600);
  border-color: var(--wx-cyan-600);
}

body:not(.wx-home) .tag-on,
body:not(.wx-home) .status-success { color: var(--wx-success); background: #eaf7f2; }
body:not(.wx-home) .tag-off,
body:not(.wx-home) .status-error { color: var(--wx-danger); background: #fff0f0; }

body:not(.wx-home) .modal {
  background: rgba(5, 19, 32, .48);
  backdrop-filter: blur(8px);
}
body:not(.wx-home) .modal > div,
body:not(.wx-home) .modal-box {
  border: 1px solid rgba(214, 227, 235, .95);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(7, 21, 36, .24);
}

body:not(.wx-home) .header,
body:not(.wx-home) .topbar,
body:not(.wx-home) .sidebar {
  border-color: rgba(205, 219, 228, .9);
  background-color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
}

body:not(.wx-home) a { transition: color .18s ease, background .18s ease, border-color .18s ease; }
body:not(.wx-home) a:hover { color: var(--wx-cyan-600); }

body:not(.wx-home) ::selection { color: #fff; background: var(--wx-cyan-600); }

@media (max-width: 720px) {
  body:not(.wx-home) .card,
  body:not(.wx-home) .panel,
  body:not(.wx-home) .overview-card { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}