@font-face {
  font-family: "GDM Noto Serif SC";
  src: url("/static/fonts/NotoSerifSC-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #F4F1EA;
  --panel: #FBFAF6;
  --line: #DCD8CF;
  --line-strong: #C5C0B5;
  --text: #263238;
  --muted: #68736F;
  --accent: #3E5661;
  --accent-deep: #2C4049;
  --accent-soft: #E8E5DF;
  --ok: #70856A;
  --ok-deep: #5A6E56;
  --danger: #A6533F;
  --danger-deep: #8B3E2E;
  --gold: #B4874B;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(38,50,56,.12);
  --shadow-lg: 0 16px 48px rgba(38,50,56,.16);
  --ease: ease;
  --fast: .12s;
  --norm: .20s;
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

[hidden] { display: none !important; }

::selection { background: rgba(62,86,97,.18); }

*:focus-visible { outline: 2px solid rgba(62,86,97,.55); outline-offset: 2px; border-radius: 4px; }

/* ── Scrollbars ─────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C5C0B5; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #A8A298; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Login ──────────────────────────────────── */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 42px;
  width: 384px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: card-in .5s var(--ease) both;
}
.login-card .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
.login-card h1 { font-size: 25px; margin-bottom: 4px; letter-spacing: -.01em; }
.login-card .sub { color: var(--muted); margin-bottom: 30px; font-size: 13px; }
.login-card input {
  display: block; width: 100%;
  padding: 11px 13px; margin-bottom: 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; background: #fff;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.14); outline: none; }
.login-card button {
  width: 100%; padding: 11px;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--fast), box-shadow var(--norm);
}
.login-card button:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }
.login-card button:active { transform: scale(.99); }
.login-card button:disabled { opacity: .7; cursor: default; transform: none; }
.login-card .error { color: var(--danger); margin-top: 14px; font-size: 13px; animation: shake .3s ease; }

/* ── Layout ─────────────────────────────────── */
.app { display: none; min-height: 100vh; }
.app.on { display: flex; animation: app-in .3s var(--ease); }

.sidebar {
  width: 224px; background: var(--panel);
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 24px 20px 18px;
  font-size: 16px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.brand-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent);
  color: #FBFAF6;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-logo svg { width: 17px; height: 17px; }
.sidebar .brand small { font-weight: 500; color: var(--muted); }

/* ── Sidebar groups ─────────────────────────── */
.nav-group { padding: 6px 0; }
.nav-group + .nav-group { border-top: 1px solid var(--line); }
.nav-group-title {
  padding: 8px 16px 4px;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
}
.nav-list { flex: 1 1 auto; min-height: 0; padding: 0 12px; overflow-y: auto; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--fast), color var(--fast);
  margin-bottom: 2px;
}
.nav-item svg { flex-shrink: 0; color: var(--muted); transition: color var(--fast); }
.nav-item:hover { background: var(--accent-soft); color: var(--text); }
.nav-item:hover svg { color: var(--accent); }
.nav-item.active {
  background: #EDEAE3;
  color: var(--accent);
  font-weight: 650;
}
.nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 999px;
  background: var(--danger);
}
.nav-item.active svg { color: var(--accent); }
.sidebar .divider { border-top: 1px solid var(--line); margin: 10px 16px 12px; }

/* 2026-08-12：侧栏「连接状态栏」（WhatsApp bridge 状态集中——业务化抽象 B 方案） */
.bridge-status-bar {
  margin: 8px 12px 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 12px;
}
.bridge-status-bar .bridge-bar-head {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.bridge-status-bar .bridge-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.bridge-status-bar .bridge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex: none;
}
.bridge-dot.ok { background: var(--ok, #2e9e6b); }
.bridge-dot.mid { background: var(--warn, #c9a227); }
.bridge-dot.bad { background: var(--danger, #c0392b); }
.bridge-status-bar .bridge-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bridge-status-bar .bridge-cn { color: var(--muted); }
.bridge-status-bar .btn-sm { font-size: 11px; padding: 2px 8px; }
/* 2026-08-12：平台通道状态行（平台级聚合——异常红色调） */
.bridge-status-bar .bridge-bar-platform { padding: 2px 0; }
.bridge-status-bar .bridge-bar-platform .alert { font-weight: 600; }
.bridge-status-bar .bridge-bar-platform .alert .bridge-cn { color: var(--danger, #c0392b); }
.sidebar-footer { flex: 0 0 auto; padding: 0 0 16px; background: rgba(255,254,251,.94); }
.user-info {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent);
  color: #FBFAF6;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.user-info strong { display: block; font-size: 13px; line-height: 1.3; }
.user-info small { display: block; color: var(--muted); font-size: 11px; }

.main { flex: 1; padding: 34px 44px; overflow-y: auto; min-width: 0; }
.page { display: none; }
.page.on { display: block; animation: page-in var(--norm) var(--ease); }

.page h2 { font-size: 21px; margin-bottom: 4px; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.page h2::before {
  content: "";
  width: 4px; height: 19px; border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}
.page .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 26px; }

/* ── Cards ──────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 16px;
}
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  cursor: pointer;
  transition: background var(--norm), border-color var(--norm);
  overflow: hidden;
}
.card:hover {
  background: #F5F3EE;
  border-color: var(--line-strong);
}
.card h3 { font-size: 15.5px; margin-bottom: 4px; font-weight: 650; }
.card p { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Home layout (Luv(sic) A.2) ─────────────── */
.home-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.home-summary-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.home-summary-item .metric {
  display: flex; flex-direction: column; gap: 2px;
}
.home-summary-item .metric-value {
  font-size: 24px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.1;
}
.home-summary-item .metric-label {
  font-size: 12px; color: var(--muted);
}
.home-summary-dot {
  width: 10px; height: 10px; border-radius: 999px;
  flex-shrink: 0;
}
.home-summary-dot.danger { background: var(--danger); }
.home-summary-dot.ok { background: var(--ok); }
.home-summary-dot.muted { background: var(--muted); }

.home-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 20px;
  margin-bottom: 24px;
}
.home-main-area {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.home-main-area h3 {
  font-size: 14px; font-weight: 650;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

/* Conversation list items */
.conv-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--fast);
  font-size: 13px;
}
.conv-item:last-child { border-bottom: none; }
.conv-item:hover { background: #F5F3EE; }
.conv-dot {
  width: 9px; height: 9px; border-radius: 999px;
  flex-shrink: 0;
  justify-self: center;
}
.conv-dot.attention { background: var(--danger); }
.conv-dot.ai { background: #68736F; }
.conv-dot.closed { background: #C5C0B5; }
.conv-body { min-width: 0; }
.conv-body strong {
  display: block; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-body small {
  display: block; color: var(--muted); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.conv-meta {
  text-align: right; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.conv-meta .conv-channel { font-size: 11px; color: var(--muted); }
.conv-meta .conv-time { font-size: 11px; color: var(--muted); }
.conv-meta .conv-status {
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.conv-status.attention { color: var(--danger); }
.conv-status.ai { color: #68736F; }
.conv-status.human { color: var(--accent); }
.conv-status.closed { color: #A5A195; }

/* Side context bar */
.home-side {
  display: flex; flex-direction: column; gap: 16px;
}
.home-side .side-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.home-side .side-box h4 {
  font-size: 12px; font-weight: 650;
  color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.home-side .side-identity {
  font-size: 13px; font-weight: 600;
  color: var(--text);
}
.home-side .side-identity small {
  display: block; font-size: 11px;
  color: var(--muted); font-weight: 400;
  margin-top: 2px;
}
.home-side .side-scope {
  font-size: 12px; color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
}
.home-side .side-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.home-side .side-action {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; color: var(--accent);
  cursor: pointer; font-weight: 500;
  transition: background var(--fast);
}
.home-side .side-action:hover { background: #DDD9CF; }
.home-side .side-action.unavailable {
  opacity: .5; cursor: not-allowed;
  background: transparent;
  color: var(--muted);
}

/* Business directory (row-based, borderless) */
.home-dir {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 0;
}
.home-dir h3 {
  font-size: 13px; font-weight: 650;
  color: var(--text);
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.dir-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--fast);
  color: var(--text); font-size: 13px;
  border: none;
}
.dir-row:hover { background: #F5F3EE; }
.dir-row .dir-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--accent); flex-shrink: 0;
}
.dir-row .dir-icon svg { width: 18px; height: 18px; }
.dir-row .dir-label { font-weight: 500; }
.dir-row .dir-hint {
  margin-left: auto; font-size: 11px;
  color: var(--muted);
}
.dir-row.unavailable {
  opacity: .4; cursor: not-allowed;
}

/* Conversation empty state */
.conv-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.conv-empty strong {
  display: block; font-size: 14px;
  color: var(--text); margin-bottom: 4px;
}

/* ── Home stats (old, keep until fully transitioned) ─── */
.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat-hero {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 98px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px 14px;
  border-left: 3px solid var(--accent);
  transition: background var(--norm);
}
.stat-hero:hover { background: #F5F3EE; }
.stat-hero span { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.stat-hero strong { display: block; margin: 6px 0 2px; font-size: 26px; line-height: 1.05; letter-spacing: -.01em; }
.stat-hero small { display: block; color: var(--muted); font-size: 11px; }
.stat-hero.blue { border-left-color: var(--accent); } .stat-hero.blue strong { color: var(--accent-deep); }
.stat-hero.amber { border-left-color: var(--gold); } .stat-hero.amber strong { color: #8C6A37; }
.stat-hero.green { border-left-color: var(--ok); } .stat-hero.green strong { color: var(--ok-deep); }
.stat-hero.violet { border-left-color: var(--accent); } .stat-hero.violet strong { color: var(--accent-deep); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wf-card { position: relative; min-height: 148px; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.wf-card h3 { margin-bottom: 0; font-size: 14.5px; white-space: nowrap; }
.wf-card p {
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.55;
}
.wf-card.wf-hero { border: 1px solid var(--line-strong); }
.wf-badge {
  position: absolute; top: 14px; right: 14px;
  padding: 2px 9px; border-radius: 999px;
  background: #F5E6D8; color: var(--danger);
  font-size: 11px; font-weight: 600;
}

/* ── Home split (old, keep compatible) ─── */
.home-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; margin-bottom: 16px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.work-panel { display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: background var(--norm), border-color var(--norm); }
.work-panel:hover { background: #F5F3EE; border-color: var(--line-strong); }
.work-panel header { display: flex; align-items: center; gap: 12px; }
.work-panel header .wf-badge { position: static; margin-left: auto; }
.work-panel header h3 { font-size: 16px; font-weight: 700; }
.work-panel header p { color: var(--muted); font-size: 12px; margin-top: 1px; }
.work-panel footer { margin-top: auto; display: flex; justify-content: flex-end; }
.recent-list { display: grid; gap: 2px; }
.recent-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  transition: background var(--fast);
}
.recent-list li:hover { background: #F5F3EE; }
.ov-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); flex-shrink: 0; }
.ov-dot.done { background: #C5C0B5; }
.ov-main { flex: 1; min-width: 0; }
.ov-main strong { display: block; font-size: 12.5px; }
.ov-main small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-status { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ov-panel h4 { font-size: 12.5px; color: var(--muted); font-weight: 650; margin: 14px 0 8px; letter-spacing: .02em; }
.ov-panel h4:first-child { margin-top: 0; }
.ov-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ov-metrics li { background: #F5F3EE; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; }
.ov-metrics span { color: var(--muted); font-size: 12px; }
.ov-metrics strong { font-size: 16px; letter-spacing: -.01em; }
.ov-audit { display: grid; gap: 3px; }
.ov-audit li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 4px 2px; color: var(--muted); }
.ov-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ov-actor { margin-left: auto; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.panel-empty { color: var(--muted); font-size: 12px; padding: 12px 0; text-align: center; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.app-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit; color: var(--text); font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background var(--norm), border-color var(--norm);
}
.app-cell:hover { background: #F5F3EE; border-color: var(--line-strong); }
.app-cell .wf-icon { width: 38px; height: 38px; border-radius: 10px; }
.app-cell .wf-icon svg { width: 20px; height: 20px; }
.wf-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform var(--fast);
}
.wf-icon svg { width: 22px; height: 22px; }
.wf-icon.blue { background: #E4E9EE; color: var(--accent); }
.wf-icon.orange { background: #F5EDE0; color: var(--gold); }
.wf-icon.pink { background: #F5E8E5; color: var(--danger); }
.wf-icon.teal { background: #E2EBE9; color: #68736F; }
.wf-icon.green { background: #E6EDE4; color: var(--ok); }
.wf-icon.red { background: #F5E8E5; color: var(--danger); }
.wf-icon.violet { background: #E8E5EF; color: #5D5A7A; }
.wf-icon.amber { background: #F5EDE0; color: var(--gold); }
.wf-icon.indigo { background: #E5E6ED; color: #4A5575; }
.wf-icon.cyan { background: #E1EAEC; color: #5D7A78; }
.wf-icon.gray { background: #EFEDE8; color: var(--muted); }

/* ── Tables ─────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 12px 13px; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
th { color: var(--muted); font-weight: 550; font-size: 12px; letter-spacing: .02em; background: #F5F3EE; }
tbody tr { transition: background var(--fast); }
tbody tr:hover { background: #F5F3EE; }
tbody tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #E6EDE4; color: var(--ok-deep); }
.badge.wait { background: #F5EDE0; color: #8C6A37; }
.badge.fail { background: #F5E8E5; color: var(--danger-deep); }

/* ── Approval cards ─────────────────────────── */
.approval {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color var(--norm);
}
.approval:hover { border-color: var(--line-strong); }
.approval input, .approval textarea {
  display: block; width: 100%; margin: 6px 0;
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: 13px; background: #fff;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.approval input:focus, .approval textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.approval .actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Buttons ────────────────────────────────── */
button, .btn {
  padding: 8px 15px; border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
button:active, .btn:active { transform: scale(.97); }
.btn.primary {
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-deep); }
.btn.green {
  background: var(--ok);
  color: #fff;
}
.btn.green:hover { background: var(--ok-deep); }
.btn.danger {
  background: var(--danger);
  color: #fff;
}
.btn.danger:hover { background: var(--danger-deep); }
.btn.outline {
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
}
.btn.outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── Members page ───────────────────────────── */
.form-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.form-row input, .form-row select {
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: 13px; background: #fff;
}
.form-grid { display: grid; gap: 12px; margin: 12px 0 16px; }
.form-grid label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 8px 10px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: 13px; background: #fff; width: 100%;
  font-family: inherit;
}
.form-grid textarea { resize: vertical; min-height: 120px; }
.empty { color: var(--muted); padding: 48px 20px; text-align: center; }
.empty-icon { width: 46px; height: 46px; margin: 0 auto 12px; color: #C5C0B5; display: block; }
.empty strong { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.empty p { font-size: 12.5px; line-height: 1.6; }

/* ── Member management ──────────────────────── */
.member-stats { display: flex; gap: 12px; margin-bottom: 20px; }
.stat-card {
  min-width: 134px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px;
  transition: background var(--norm), border-color var(--norm);
}
.stat-card:hover { background: #F5F3EE; border-color: var(--line-strong); }
.stat-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.stat-card strong { display: block; margin-top: 5px; font-size: 25px; line-height: 1.1; letter-spacing: -.01em; }
.stat-card.good strong { color: var(--ok-deep); }
.stat-card.muted strong { color: var(--muted); }
.member-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.member-toolbar input, .member-toolbar select {
  height: 37px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); font: inherit;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.member-toolbar input:focus, .member-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.member-toolbar input { min-width: 224px; }
.member-toolbar .btn { margin-left: auto; }

/* ── Toolbar ────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; min-width: 160px; }
.toolbar .spacer { margin-left: auto; }
.toolbar input, .toolbar select {
  height: 37px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); font: inherit; font-size: 13px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.toolbar input:focus, .toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.toolbar input { min-width: 160px; }

/* ── Pager ──────────────────────────────────── */
.audit-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 2px 2px;
}
.audit-pager span { margin-right: auto; color: var(--muted); font-size: 12px; }

/* ── 通用小组件 ─────────────────────────────── */
.kb-meta { padding: 8px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.account-sub { margin: 0 0 12px; }
.field-row { display: flex; gap: 8px; align-items: center; }
.field-row input, .field-row select { flex: 1; }
.logout-btn { margin: 8px 10px; width: calc(100% - 20px); font-size: 12px; justify-content: center; color: var(--muted); }
.table-wrap {
  overflow-x: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.member-table { min-width: 640px; }
.member-table td { vertical-align: middle; white-space: nowrap; }
.member-table td:first-child { white-space: normal; }
.member-table td:last-child { white-space: nowrap; }
.member-table td strong, .member-table td small { display: block; }
.member-table td small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.member-table .is-disabled { opacity: .5; }
.member-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 200px; flex-wrap: wrap; }
.tag {
  display: inline-flex; padding: 2px 9px; border-radius: 999px;
  background: #EFEDE8; color: var(--muted); font-size: 12px; white-space: nowrap;
  border: 1px solid transparent;
}
.tag.role-admin { background: #E8E5EF; color: #5D5A7A; }
.tag.role-lead { background: #E4E9EE; color: var(--accent-deep); }
.tag.role-member { background: #EFEDE8; color: var(--muted); }
.tag.department { background: #F5F3EE; border-color: var(--line); }
.status { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 500; }
.status i { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); }
.status.disabled { color: var(--muted); }
.status.disabled i { background: #C5C0B5; }

/* ── More menu ──────────────────────────────── */
.more-menu { position: relative; }
.more-menu summary { list-style: none; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-weight: 700; transition: background var(--fast), color var(--fast); }
.more-menu summary:hover { background: #F5F3EE; color: var(--text); }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu > div { position: absolute; z-index: 3; right: 0; top: 34px; width: 118px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-md); animation: menu-in .14s var(--ease); }
.more-menu button { display: block; width: 100%; padding: 7px 9px; text-align: left; background: transparent; color: var(--text); border-radius: var(--radius-sm); font-weight: 400; }
.more-menu button:hover { background: #F5F3EE; }
.more-menu button[data-member-action="delete"] { color: var(--danger); }
.empty-cell { padding: 36px; text-align: center; color: var(--muted); }

/* ── Drawer and notifications ───────────────── */
.drawer-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(38,50,56,.35); animation: fade-in .18s ease; }
.drawer {
  position: fixed; z-index: 11; top: 0; right: 0; height: 100vh;
  width: min(440px, 100vw); padding: 26px;
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  animation: drawer-in .20s var(--ease);
  overflow-y: auto;
}
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer-header h3 { font-size: 18px; }
.drawer-header p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.icon-button { padding: 0; width: 30px; height: 30px; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; border-radius: var(--radius-sm); transition: background var(--fast), color var(--fast); }
.icon-button:hover { background: #F5F3EE; color: var(--text); }
.drawer-form { display: grid; gap: 15px; padding-top: 22px; }
.drawer-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.drawer-form input, .drawer-form select {
  width: 100%; padding: 10px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font: inherit;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.drawer-form input:focus, .drawer-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.confirm-box {
  position: fixed; z-index: 12; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(368px, 92vw); padding: 24px;
  background: var(--panel); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: confirm-in .22s var(--ease);
}
.confirm-box p { font-size: 14px; line-height: 1.65; color: var(--text); margin-bottom: 20px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast-root { position: fixed; z-index: 20; top: 20px; right: 20px; display: grid; gap: 9px; }
.toast {
  min-width: 230px; padding: 11px 14px; border-radius: 10px;
  background: rgba(38,50,56,.94);
  color: #FBFAF6; box-shadow: var(--shadow-md); font-size: 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  animation: toast-in .20s var(--ease);
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex-shrink: 0; }
.toast.error::before { background: var(--danger); }
.toast .close { background: transparent; border: none; color: inherit; font-size: 16px; cursor: pointer; padding: 0 2px; opacity: .7; transition: opacity var(--fast); }
.toast .close:hover { opacity: 1; }
.toast.error { background: rgba(166,83,63,.95); }

/* ── Animations ─────────────────────────────── */
@keyframes drawer-in { from { transform: translateX(40px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { transform: translateY(-12px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes confirm-in { from { transform: translate(-50%, -50%) scale(.92); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes app-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ── Queue workspace ────────────────────────── */
.queue-workspace {
  display: grid; grid-template-columns: minmax(284px, 36%) minmax(0, 1fr);
  min-height: 640px;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--radius); overflow: hidden;
}
.queue-list { border-right: 1px solid var(--line); background: #F5F3EE; }
.kb-help-box { margin: 12px 13px 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: #F7F2E8; color: var(--text); display: grid; gap: 2px; }
.kb-help-box strong { font-size: 13px; }
.kb-help-box span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.filter-field { display: grid; gap: 2px; min-width: 0; }
.filter-field > span { color: var(--muted); font-size: 11px; }
.filter-field input, .filter-field select { min-width: 0; width: 100%; }
.kb-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; }
.kb-row-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.kb-row-main .queue-item { width: 100%; }
.kb-files-btn { justify-self: start; font-size: 12px; }
.queue-filters { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 13px; border-bottom: 1px solid var(--line); background: var(--panel); }
.queue-filters select {
  height: 33px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 12px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.queue-filters select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.queue-items { max-height: 566px; overflow-y: auto; }
.queue-item {
  position: relative;
  display: block; width: 100%; padding: 14px 15px;
  background: transparent; text-align: left;
  border-bottom: 1px solid var(--line); border-radius: 0;
  font-weight: 400;
  transition: background var(--fast);
}
.queue-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--danger);
  opacity: 0; transition: opacity var(--fast);
}
.queue-item:hover { background: var(--accent-soft); }
.queue-item.selected { background: #EDEAE3; }
.queue-item.selected::before { opacity: 1; }
.queue-item > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.queue-item strong { font-size: 13px; }
.queue-item span, .queue-item small { color: var(--muted); font-size: 11px; }
.queue-item p { margin: 5px 0; color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-detail { padding: 26px; overflow-y: auto; animation: page-in .22s var(--ease); }
.queue-detail header { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.queue-detail h3 { margin-top: 3px; font-size: 19px; }
.queue-detail header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 17px 0 13px; }
.queue-detail article {
  margin-top: 13px; padding: 15px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: border-color var(--norm);
}
.queue-detail article:hover { border-color: var(--line-strong); }
.queue-detail article h4 { margin-bottom: 8px; font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .02em; }
.queue-detail article p { white-space: pre-wrap; color: var(--text); font-size: 13px; line-height: 1.7; }
.reply-field { display: grid; gap: 8px; margin-top: 15px; color: var(--muted); font-size: 12px; font-weight: 600; }
.reply-field textarea {
  resize: vertical; padding: 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.reply-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,86,97,.12); outline: none; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.handoff-banner {
  margin: -26px -26px 18px; padding: 11px 26px;
  background: #F5EDE0;
  color: var(--danger);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.audit-summary ul { display: grid; gap: 5px; padding-left: 17px; color: var(--muted); font-size: 12px; }
.audit-summary li { position: relative; }
.audit-summary li::marker { color: #C5C0B5; }

/* ── Knowledge base preview ─────────────────── */
.kb-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(284px, 1fr)); gap: 15px; }
.kb-preview article {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  transition: background var(--norm), border-color var(--norm);
}
.kb-preview article:hover { background: #F5F3EE; border-color: var(--line-strong); }
.kb-preview article h4 { margin-bottom: 7px; font-size: 14px; }
.kb-preview article p { color: var(--text); font-size: 13px; margin-bottom: 12px; line-height: 1.65; }
.kb-preview .tag { display: inline-block; margin-top: 4px; }

/* ── M5 conversation chat view ──────────────── */
.chat-list { display: grid; gap: 10px; padding: 14px 0; max-height: 52vh; overflow-y: auto; }
.chat-row { display: flex; }
.chat-row.customer { justify-content: flex-start; }
.chat-row.ai { justify-content: flex-end; }
.chat-row .bubble {
  max-width: 78%; padding: 10px 13px;
  border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line);
  animation: page-in .18s var(--ease);
}
.chat-row.customer .bubble { background: #F5F3EE; }
.chat-row.ai .bubble { background: #E8E5DF; border-color: var(--line-strong); }
.chat-row.human .bubble { background: #fff; }
.bubble p { white-space: pre-wrap; color: var(--text); font-size: 13px; line-height: 1.65; margin-bottom: 5px; }
.bubble small { color: var(--muted); font-size: 11px; display: block; }
.delivery { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.delivery.sent { color: var(--ok); }
.delivery.failed { color: var(--danger); }
.delivery.unknown { color: var(--gold); }
.delivery.pending { color: var(--accent); }
.btn.mini { padding: 3px 9px; font-size: 11px; border-radius: var(--radius-sm); }
.close-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.modal-wrap { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(38,50,56,.35); animation: fade-in .18s var(--ease); }
.modal-wrap .confirm-box { width: min(420px, 92vw); }
.handoff-banner.muted { background: #E8E5DF; color: var(--accent); border-bottom-color: var(--line-strong); }
.closed-note { color: var(--muted); font-size: 12px; }
.muted-note { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ── Account connection status ───────────────── */
.acc-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
}
.acc-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
}
.acc-status.connected { color: var(--ok-deep); }
.acc-status.connected::before { background: var(--ok); }
.acc-status.disconnected { color: var(--muted); }
.acc-status.disconnected::before { background: #C5C0B5; }
.acc-status.connecting { color: #8C6A37; }
.acc-status.connecting::before { background: var(--gold); animation: pulse-dot 1s ease infinite; }
.acc-status.waiting_qr { color: #8C6A37; }
.acc-status.waiting_qr::before { background: var(--gold); animation: pulse-dot 1s ease infinite; }
.acc-status.error { color: var(--danger-deep); }
.acc-status.error::before { background: var(--danger); }
.acc-status.reauth_required { color: var(--danger-deep); }
.acc-status.reauth_required::before { background: var(--danger); }
.acc-status-help { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; max-width: 220px; }
.acc-connection-details { margin-top: 4px; color: var(--muted); font-size: 11px; }
.acc-connection-details summary { cursor: pointer; color: var(--accent); }
.acc-connection-details small { display: block; margin-top: 4px; line-height: 1.45; max-width: 260px; word-break: break-word; }
.bridge-next { color: var(--muted); font-size: 11px; margin-left: auto; }

/* ── T5-3: QR 扫码弹窗 ───────────────────────── */
.qr-scan-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; }
.qr-img-wrap {
  width: 232px; height: 232px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.qr-img-wrap img { width: 220px; height: 220px; image-rendering: pixelated; }
.qr-hint { color: var(--muted); font-size: 12px; text-align: center; }

/* ── Assignment chip ─────────────────────────── */
.acc-member {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: #EFEDE8; color: var(--muted); font-size: 11px;
  white-space: nowrap;
}
.acc-member .remove {
  cursor: pointer; color: var(--danger); font-weight: 700; font-size: 13px;
  line-height: 1; padding: 0 2px; transition: opacity var(--fast);
}
.acc-member .remove:hover { opacity: .7; }

/* ── Small buttons ───────────────────────────── */
.btn-sm {
  padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm);
}
.btn-sm.danger {
  background: var(--danger); color: #fff;
}
.btn-sm.danger:hover { background: var(--danger-deep); }
.btn-sm.outline {
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
}
.btn-sm.outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ── Assignment row in table ─────────────────── */
.acc-assignments {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.acc-assign-row {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.acc-assign-row select {
  padding: 3px 7px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: 12px; background: #fff;
  font-family: inherit;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 760px) {
  .main { padding: 20px 16px; }
  .sidebar {
    position: fixed; z-index: 30;
    left: 0; top: 0; height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--norm);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .home-summary { grid-template-columns: 1fr; }
  .home-main { grid-template-columns: 1fr; }
  .home-side { order: 1; }
  .table-wrap { overflow-x: auto; }
  .member-table { min-width: 720px; }
  .member-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  .member-toolbar { align-items: stretch; flex-wrap: wrap; }
  .member-toolbar input { min-width: 100%; }
  .member-toolbar .btn { margin-left: 0; }
}
@media (max-width: 900px) {
  .queue-workspace { grid-template-columns: 1fr; }
  .queue-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .queue-items { max-height: min(48vh, 520px); }
}
@media (max-width: 560px) {
  .detail-grid { grid-template-columns: 1fr; }
  .queue-detail { padding: 18px; }
  .handoff-banner { margin: -18px -18px 16px; padding: 10px 18px; }
}

/* ── Theme: MOONDROP x Luv(sic) / rational frame + paper skin ── */
:root {
  --bg: #F7F4EE;
  --panel: #FFFEFB;
  --panel-soft: #FBF9F4;
  --line: #E4E0D6;
  --line-strong: #C9C3B7;
  --text: #2B3236;
  --muted: #6F7975;
  --accent: #3A4F5C;
  --accent-deep: #2E3F49;
  --accent-soft: #E9EEF0;
  --ok: #70856A;
  --ok-deep: #5A6E56;
  --danger: #A6533F;
  --danger-deep: #8B3E2E;
  --gold: #B4874B;
  --radius: 10px;
  --radius-sm: 7px;
  --fast: .14s;
  --norm: .20s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --serif: "GDM Noto Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
}

.sidebar {
  background: rgba(255,254,251,.94);
  border-right-color: var(--line);
  padding-top: 22px;
}
.brand { border-bottom-color: var(--line); }
.brand > span:last-child { min-width: 0; font-family: var(--serif); letter-spacing: .02em; white-space: nowrap; }
.brand > span:last-child small { display: inline; margin-left: 3px; }
.brand small { font-family: var(--sans); letter-spacing: .16em; }
.brand-logo { background: var(--accent); border-radius: 8px; }
.nav-group-title {
  color: var(--muted); letter-spacing: .20em; font-size: 11px;
}
.nav-item { color: var(--text); transition: background var(--norm), color var(--fast); }
.nav-item:hover { background: #F3EFE6; }
.nav-item.active {
  background: #F4F0E6; color: var(--accent-deep); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--danger);
}
.nav-item.active svg { color: var(--accent); }
.user-avatar { border-radius: 50%; background: #EFEAE0; color: var(--accent); }

.main { padding-top: 34px; }
.page h2 {
  font-family: var(--serif); font-weight: 600; font-size: 24px;
  letter-spacing: .02em;
}
.page h2::before { width: 22px; height: 1px; border-radius: 0; background: var(--gold); }
.page .subtitle { color: var(--muted); }
.page.on { animation: theme-page-in .22s var(--ease); }

.card, .home-summary-item, .home-main-area, .home-side .side-box,
.home-dir, .stat-card, .approval, .table-wrap, .queue-workspace {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
.card:hover, .stat-card:hover, .approval:hover { background: #FBF8F1; border-color: var(--line-strong); }
.home-summary { gap: 14px; margin-bottom: 18px; }
.home-summary-item { padding: 15px 18px; transition: background var(--norm), border-color var(--norm); }
.home-summary-item:hover { background: #FBF8F1; border-color: var(--line-strong); }
.home-summary-item .metric-value, .stat-card strong { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.home-summary-item .metric-label { color: var(--muted); }
.home-main { gap: 18px; margin-bottom: 18px; }
.home-main-area h3, .home-dir h3 {
  font-family: var(--serif); font-weight: 600; letter-spacing: .02em;
}
.home-main-area h3 { padding: 16px 20px 12px; border-bottom-color: var(--line); }
.conv-item {
  padding: 12px 18px;
  border-bottom-color: var(--line);
  transition: background var(--norm), border-color var(--norm);
}
.conv-item:hover, .dir-row:hover, tbody tr:hover { background: radial-gradient(120% 160% at 0 50%, rgba(180,135,75,.09), transparent 60%), #F6F2E8; }
.conv-body strong { color: var(--text); }
.conv-body small, .conv-meta .conv-channel, .conv-meta .conv-time { color: var(--muted); }
.conv-meta .conv-status { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; }
.conv-status.attention { background: #F5E8E3; color: var(--danger); }
.conv-status.ai { background: #E9EFF1; color: #5B7480; }
.conv-status.human { background: #F5EDE0; color: #8C6A37; }
.conv-status.closed { background: #EFEDE6; color: #8E8A80; }
.home-side .side-box h4 { letter-spacing: .12em; border-bottom-color: var(--line); }
.home-side .side-action { background: transparent; border: 1px solid var(--line); color: var(--accent-deep); transition: background var(--norm), border-color var(--fast); }
.home-side .side-action:hover { background: #F6F2E8; border-color: var(--line-strong); }
.home-dir { margin-top: 37px; padding: 14px 0 0; border-top: 1px solid var(--text); }
.directory-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 0 14px; }
.home-dir h3 { padding: 0; margin: 0; border: 0; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .025em; }
.directory-title > span { color: var(--muted); font-size: 11px; }
.index-grid { display: grid; grid-template-columns: 1.08fr 1.28fr 1.08fr .76fr; gap: 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); }
.index-group { min-height: 158px; padding: 15px 19px 17px 0; border-right: 1px solid var(--line); margin-right: 19px; }
.index-group:last-child { border: 0; margin: 0; }
.index-group.compact { background: linear-gradient(180deg, rgba(173,136,79,.045), transparent 72%); padding-left: 15px; }
.index-kicker { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: .20em; margin-bottom: 8px; }
.index-kicker::before { content: ""; height: 1px; width: 16px; background: var(--gold); }
.index-group h4 { margin: 0 0 10px; color: var(--text); font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: .045em; }
.index-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; align-items: baseline; width: 100%; padding: 4px 0; color: var(--ink, var(--text)); border: 0; background: transparent; font: 12px var(--sans); text-align: left; cursor: pointer; transition: color var(--fast), padding-left var(--fast); }
.index-item:hover { color: var(--accent); padding-left: 4px; }
.index-no { color: var(--gold); font-size: 10px; font-weight: 650; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.index-arrow { color: var(--gold); opacity: 0; transition: opacity var(--fast); }
.index-item:hover .index-arrow { opacity: 1; }
.index-note { display: block; margin: 6px 0 0 24px; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.index-divider { height: 1px; margin: 9px 0 7px 24px; background: var(--line); }
.dir-grid { display: none; }
.dir-row { padding: 9px 18px; transition: background var(--norm), border-color var(--norm); }
@media (max-width: 1100px) { .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-main.is-empty .home-main-area { align-self: start; }
.home-main.is-empty .conv-empty { padding: 18px 20px; }
@media (max-height: 700px) and (min-width: 761px) {
  .sidebar .brand { padding-top: 14px; padding-bottom: 12px; }
  .nav-group { padding: 2px 0; }
  .nav-group-title { padding-top: 5px; padding-bottom: 2px; }
  .nav-item { padding-top: 7px; padding-bottom: 7px; }
  .user-info { padding-top: 6px; padding-bottom: 6px; }
  .sidebar-footer { padding-bottom: 8px; }
  .logout-btn { margin-top: 4px; }
}
@media (max-width: 1100px) { .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; } .index-group:nth-child(2) { border-right: 0; margin-right: 0; padding-left: 15px; } }
@media (max-width: 760px) { .index-grid { grid-template-columns: 1fr; } .index-group, .index-group:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 14px 0; } .index-group:last-child { border-bottom: 0; } }
@media (max-width: 480px) { .directory-title { align-items: start; flex-direction: column; gap: 3px; } }
.dir-row .dir-icon { background: #E9EEF0; color: var(--accent); border-radius: 7px; }
.dir-row .dir-label { color: var(--text); }

button, .btn { font-family: var(--sans); transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast); }
button:active, .btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-deep); }
.btn.outline:hover { background: #F3EFE6; border-color: var(--accent); }
input, select, textarea { color: var(--text); background: var(--panel); }
th { background: #F3EFE6; color: var(--muted); }
th, td { border-bottom-color: var(--line); }
.tag { background: #EFEDE6; color: var(--muted); }
.empty { padding: 44px 20px; }
.empty-icon { color: #BDB6A8; }
.empty strong { color: var(--text); }
.drawer, .confirm-box { background: var(--panel); }

@keyframes theme-page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* ── Layout corrections: viewport-safe workspaces and compact empty home ── */
.home-main.is-empty {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.home-main.is-empty .home-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.home-main.is-empty .home-side .side-box { min-width: 0; padding: 13px 14px; }
.home-main.is-empty .home-side .side-box h4 { margin-bottom: 8px; padding-bottom: 6px; }
.home-main.is-empty .home-side .side-actions { margin-top: 4px; gap: 4px; }
.home-main.is-empty .home-side .side-action { padding: 6px 8px; }

.queue-workspace {
  height: clamp(420px, calc(100vh - 158px), 760px);
  min-height: clamp(420px, calc(100vh - 158px), 760px);
}
.queue-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.queue-items {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.queue-detail { min-width: 0; min-height: 0; }
.queue-item > div > strong,
.queue-detail header > div:first-child,
.queue-detail h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue-item > div > strong { flex: 1; }
.queue-detail header > div:first-child { flex: 1; }

@media (max-width: 1280px) and (min-width: 761px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-group { min-height: 144px; }
  .index-group:nth-child(2) { border-right: 0; margin-right: 0; padding-left: 15px; }
  .index-group:nth-child(3), .index-group:nth-child(4) { border-top: 1px solid var(--line); }
  .index-group:nth-child(4) { padding-left: 15px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .sidebar { padding-top: 12px; }
  .sidebar .brand { padding-top: 8px; padding-bottom: 9px; }
  .nav-list { padding-top: 5px; padding-bottom: 5px; }
  .nav-group { padding: 0; }
  .nav-group-title { padding-top: 3px; padding-bottom: 1px; }
  .nav-item { padding-top: 6px; padding-bottom: 6px; }
  .user-info { padding-top: 5px; padding-bottom: 5px; }
  .sidebar-footer { padding-bottom: 6px; }
  .logout-btn { margin-top: 3px; margin-bottom: 3px; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .home-main.is-empty { grid-template-columns: 1fr; }
}

/* ── Full v3 production surface: match the approved multi-page study ── */
.main {
  position: relative;
  padding: 42px clamp(24px, 4vw, 56px) 34px;
}
.main::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 340px;
  height: 340px;
  right: -160px;
  top: -135px;
  border: 1px solid rgba(180,135,75,.18);
  border-radius: 47% 53% 57% 43% / 42% 47% 53% 58%;
  transform: rotate(22deg);
  pointer-events: none;
}
.page-head, .tool-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .25em;
}
.kicker::before { content: ""; width: 25px; height: 1px; background: var(--gold); }
.page h1, .page-head h1 {
  margin: 7px 0 4px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .045em;
}
.head-note { margin: 0; color: var(--muted); font-size: 12px; }
.scope {
  color: var(--text);
  font-size: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.brand > span:last-child { display: grid; gap: 3px; }
.brand > span:last-child b { font-family: var(--serif); font-size: 15px; line-height: 1; }
.brand > span:last-child small { display: block; margin: 0; font-size: 9px; letter-spacing: .20em; }

.measure-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.measure {
  min-height: 82px;
  padding: 14px 18px 13px 0;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 13px;
}
.measure:not(:first-child) { padding-left: 18px; }
.measure:last-child { border-right: 0; }
.measure-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.measure-dot.danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(166,83,63,.10); }
.measure-dot.ok { background: var(--ok); }
.measure-dot.muted { background: #A49F93; }
.measure-value { display: block; font: 600 27px/1 var(--serif); font-variant-numeric: tabular-nums; }
.measure-label { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.measure small { display: block; margin-top: 1px; color: #A29C8F; font-size: 10px; }

.home-main { grid-template-columns: minmax(0, 1fr) 222px; gap: 34px; align-items: start; }
.home-main.is-empty { grid-template-columns: minmax(0, 1fr) 222px; }
.home-main.is-empty .home-side { display: flex; }
.home-main-area, .home-side .side-box, .home-dir {
  border-radius: 0;
  box-shadow: none;
}
.work-surface {
  border: 0;
  border-top: 2px solid var(--accent);
  background: rgba(255,254,251,.72);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.section-head h3 { padding: 0; border: 0; font-size: 18px; }
.section-head > span { color: var(--muted); font-size: 11px; }
.context-index {
  border-left: 1px solid var(--line);
  padding-left: 20px;
  gap: 0;
}
.context-index .side-box {
  padding: 3px 0 18px;
  margin-bottom: 17px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.context-index .side-box:last-child { margin-bottom: 0; border-bottom: 0; }
.context-index .side-box h4 { padding: 0; margin: 0 0 8px; border: 0; font-size: 10px; letter-spacing: .19em; }
.context-index .side-actions { gap: 0; margin: 0; }
.context-index .side-action {
  width: 100%;
  justify-content: space-between;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.context-index .side-action b { color: var(--gold); font-weight: 400; }
.home-dir { background: transparent; border-left: 0; border-right: 0; border-bottom: 0; }

/* Tool surfaces: one shared frame, real module content and events stay intact. */
.queue-workspace {
  grid-template-columns: minmax(270px, 36%) minmax(0, 1fr);
  border-radius: 0;
  border-top: 1px solid var(--text);
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255,254,251,.62);
}
.queue-list { background: rgba(247,244,238,.45); }
.queue-filters {
  padding: 13px 0 13px 13px;
  background: transparent;
  border-bottom-color: var(--line);
}
.queue-filters input, .queue-filters select,
.toolbar input, .toolbar select, .member-toolbar input, .member-toolbar select {
  border-radius: 0;
  background: rgba(255,254,251,.68);
}
.queue-item { padding: 12px 13px; }
.queue-item.selected { background: rgba(166,83,63,.07); }
.queue-detail { padding: 18px 20px; }
.queue-detail header { align-items: flex-start; }
.queue-detail h3 { font-family: var(--serif); font-size: 19px; letter-spacing: .02em; }
.queue-detail article {
  border-radius: 0;
  background: rgba(255,254,251,.55);
}
.empty, .empty-work {
  color: var(--muted);
  background: transparent;
}
.queue-detail.empty { display: grid; place-items: center; text-align: center; }

/* Management surfaces: editorial strips and paper tables, not card widgets. */
.member-stats {
  gap: 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
}
.stat-card {
  flex: 1;
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 13px 18px 12px;
}
.stat-card:first-child { padding-left: 0; }
.stat-card:last-child { border-right: 0; }
.stat-card:hover { background: transparent; }
.member-toolbar, .toolbar {
  min-height: 44px;
  padding: 8px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
}
.member-stats + .member-toolbar { border-top: 0; }
.toolbar-caption { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.member-table th {
  background: transparent;
  border-bottom: 1px solid var(--text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
}
.member-table td { background: transparent; }
.member-table tbody tr:hover td { background: rgba(180,135,75,.05); }
.audit-pager { border-top: 1px solid var(--line); }

.login-page { position: relative; display: grid; place-items: center; min-height: 100vh; padding: 42px; overflow: hidden; }
.login-page::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: 55px;
  top: -155px;
  border: 1px solid rgba(180,135,75,.14);
  border-radius: 48% 52% 58% 42% / 44% 47% 53% 56%;
  transform: rotate(20deg);
}
.login-page::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  left: 5%;
  bottom: -145px;
  border: 1px solid rgba(112,133,106,.12);
  border-radius: 50%;
}
.login-layout {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(52px, 8vw, 110px);
  align-items: stretch;
  padding-top: 34px;
  border-top: 1px solid var(--text);
}
.login-layout::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 0;
  right: calc(min(320px, 34%) + clamp(26px, 4vw, 55px));
  width: 1px;
  background: var(--line);
}
.login-intro { align-self: center; padding-right: 16px; }
.login-intro h1 {
  margin: 12px 0 12px;
  font: 600 clamp(38px, 5vw, 58px)/1.1 var(--serif);
  letter-spacing: .055em;
}
.login-intro > p { max-width: 450px; color: var(--muted); font-size: 14px; }
.login-index {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 22px;
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--text);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}
.login-card {
  width: auto;
  padding: 23px 0 0;
  border: 0;
  border-top: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.login-form-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.login-form-head span { color: var(--gold); font-size: 10px; letter-spacing: .20em; }
.login-form-head strong { font: 600 16px var(--serif); }
.login-card label { display: grid; gap: 5px; margin-bottom: 15px; color: var(--muted); font-size: 11px; }
.login-card input {
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.login-card input:focus { border-color: var(--accent); box-shadow: none; }
.login-card button {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  padding: 10px 12px;
  border-radius: 0;
}
.login-card button b { color: #E6D7BE; font-weight: 400; }

.drawer, .confirm-box { border-radius: 0; }

@media (max-width: 900px) {
  .login-page::before { width: 260px; height: 260px; right: 55px; top: -120px; }
  .login-page::after { width: 160px; height: 160px; left: 0; bottom: -100px; }
  .page-head, .tool-head { align-items: flex-start; flex-direction: column; }
  .scope { display: none; }
  .measure-strip { grid-template-columns: 1fr; }
  .measure, .measure:not(:first-child) { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .measure:last-child { border-bottom: 0; }
  .home-main, .home-main.is-empty { grid-template-columns: 1fr; gap: 18px; }
  .context-index { border-left: 0; border-top: 1px solid var(--line); padding: 17px 0 0; }
  .login-layout { grid-template-columns: 1fr; gap: 40px; }
  .login-index { grid-template-columns: 1fr; gap: 7px; margin-top: 28px; }
}

/* Final alignment pass: keep production behavior, match the approved study. */
.main::after { opacity: .55; }
.page-head, .tool-head { margin-bottom: 22px; }
.page-head h1, .tool-head h1 { margin-top: 5px; }
.measure-strip { margin-bottom: 24px; }
.measure { min-height: 74px; }
.home-main { margin-bottom: 28px; }
.conv-empty { padding: 18px 20px; }

@media (min-width: 901px) {
  .index-grid { grid-template-columns: 1.08fr 1.22fr 1.08fr .82fr; }
  .index-group,
  .index-group:nth-child(2),
  .index-group:nth-child(3),
  .index-group:nth-child(4) {
    min-height: 158px;
    padding: 15px 14px 17px 0;
    margin-right: 14px;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .index-group:nth-child(2), .index-group:nth-child(4) { padding-left: 0; }
  .index-group:last-child { margin-right: 0; padding-left: 12px; border-right: 0; }
}

.queue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.queue-filters input { grid-column: 1 / -1; min-width: 0; }
.queue-filters .btn { min-width: 0; padding-left: 8px; padding-right: 8px; }
.queue-detail header { padding-bottom: 12px; }
.queue-detail article { margin-top: 10px; padding: 12px; }
.detail-grid { gap: 10px; margin: 13px 0 10px; }
.chat-list { gap: 7px; padding: 10px 0; }
.chat-row .bubble { padding: 8px 11px; }
.queue-actions { padding-top: 10px; border-top: 1px solid var(--line); }
.queue-actions.closed-note { color: var(--muted); font-size: 11px; }

.member-stats { margin-bottom: 14px; }
.stat-card { padding-top: 10px; padding-bottom: 10px; }
.stat-card strong { font-size: 22px; }
.member-toolbar, .toolbar { gap: 7px; }
.member-toolbar input, .member-toolbar select,
.toolbar input, .toolbar select { height: 34px; }
.member-toolbar .btn, .toolbar .btn { min-height: 34px; }
.member-table th { padding-top: 8px; padding-bottom: 8px; }
.member-table td { padding-top: 9px; padding-bottom: 9px; }
.member-actions { gap: 4px; min-width: 0; }
.member-actions .btn { padding: 5px 8px; background: transparent; }
.member-actions .btn.danger { color: var(--danger); border-color: transparent; background: transparent; }
.member-actions .btn.danger:hover { border-color: var(--danger); background: rgba(166,83,63,.05); }
.account-toolbar { justify-content: space-between; }

.login-layout { border-top: 1px solid var(--line); padding-top: 32px; }
.login-form-head strong { color: var(--ink-soft, var(--text)); font: 500 13px var(--sans); letter-spacing: .08em; }
.login-card { border-top-color: var(--gold); }
.login-card button { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .page.on { animation: none; }
  .conv-item, .dir-row, .card, .stat-card, .home-summary-item { transition: none; }
}
/* 2026-08-13：客户分类徽标（f01_customer_profile.classification） */
.cust-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 11px;
  font-style: normal;
  color: var(--accent, #9a5b1a);
  background: color-mix(in srgb, var(--accent, #9a5b1a) 12%, transparent);
  vertical-align: 1px;
}

/* A.1 平台话术管理（2026-08-14 gt-tone-css：从 f01-remaining 移植——话术页样式）*/
.tone-item { border-bottom: 1px solid var(--line); padding: 14px 0; }
.tone-item:last-child { border-bottom: none; }
.tone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tone-platform { font: 600 14px var(--sans); color: var(--text); }
.tone-workflow { font: 400 12px var(--mono, ui-monospace, monospace); color: var(--muted); background: rgba(62,86,97,.06); padding: 2px 8px; border-radius: 4px; }
.tone-head .btn { margin-left: auto; }
.tone-body { display: grid; gap: 8px; }
.tone-field { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; }
.tone-label { font: 600 12px var(--sans); color: var(--muted); letter-spacing: .04em; }
.tone-value { font: 400 13px var(--sans); color: var(--text); white-space: pre-wrap; word-break: break-word; }
.tone-value .muted { color: var(--muted); font-style: normal; }

/* 查看资料弹窗（知识库闭环 Phase 2——2026-08-16） */
.kb-files-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.kb-files-box {
  background: #faf8f2; color: #2f2a26; border-radius: 10px;
  width: min(720px, 92vw); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.kb-files-box header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(47, 42, 38, 0.15);
}
.kb-files-box header h4 { margin: 0; font-size: 15px; }
.kb-file-ref { padding: 6px 16px 0; font-size: 12px; opacity: 0.6; word-break: break-all; }
.kb-files-section { display: grid; gap: 6px; width: 100%; }
.kb-files-section > strong { color: var(--muted); font-size: 12px; font-weight: 600; }
.kb-files-section + .kb-files-section { margin-top: 8px; }
.kb-files-list {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid rgba(47, 42, 38, 0.1); max-height: 160px; overflow: auto;
}
.kb-file-item { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-file-dir::before { content: '打开文件夹：'; color: var(--muted); }
.kb-file-item[data-file]::before { content: '查看文件：'; color: var(--muted); }
.kb-file-text {
  flex: 1; overflow: auto; margin: 12px 16px; padding: 12px;
  background: #fff; border: 1px solid rgba(47, 42, 38, 0.12); border-radius: 6px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.kb-files-box .err { padding: 12px 16px; color: #b3402a; }

/* Knowledge page: the module itself participates in page scroll; the list remains independently scrollable. */
.knowledge-workspace {
  height: auto;
  min-height: clamp(620px, calc(100vh - 158px), 920px);
  overflow: visible;
}
.knowledge-workspace .queue-list { overflow: visible; }
.knowledge-workspace .queue-items { max-height: 620px; }

.queue-workspace .queue-item strong { font-size: 15px; line-height: 1.35; }
.queue-workspace .queue-item p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.5;
}
.queue-workspace .queue-item span,
.queue-workspace .queue-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.queue-workspace .kb-row { padding-block: 9px; }

@media (max-width: 900px) {
  .queue-workspace .queue-items { max-height: min(48vh, 520px); }
}

/* 冲突合并三选（知识库闭环 Phase 5——2026-08-16） */
.kb-conflict-box { width: min(680px, 92vw); }
.kb-conflict-list { flex-direction: column; align-items: stretch; max-height: 46vh; }
.kb-conflict-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid rgba(47, 42, 38, 0.12); border-radius: 6px;
  background: #fff;
}
.kb-conflict-info { display: flex; flex-direction: column; min-width: 0; }
.kb-conflict-info span { font-size: 11px; opacity: 0.6; }
.kb-conflict-action { font-size: 12px; padding: 4px 6px; border-radius: 6px; border: 1px solid rgba(47,42,38,0.25); background: #fff; }
.kb-conflict-actions { padding: 12px 16px; display: flex; justify-content: flex-end; }

/* Knowledge UI polish: compact guide and explicit file preview state. */
.kb-template-help { align-self: start; color: var(--muted); font-size: 12px; }
.kb-template-help summary { cursor: pointer; color: var(--accent); font-weight: 650; list-style: none; padding: 5px 0; }
.kb-template-help summary::before { content: '＋'; display: inline-block; margin-right: 5px; color: var(--gold); }
.kb-template-help[open] summary::before { content: '－'; }
.kb-template-guide { margin-top: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); line-height: 1.55; }
.kb-template-guide p { margin-bottom: 8px; color: var(--text); }
.kb-template-guide dl { display: grid; gap: 4px; margin: 0; }
.kb-template-guide dl div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; }
.kb-template-guide dt { color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.kb-template-guide dd { margin: 0; color: var(--muted); }
.kb-template-guide small { display: block; margin-top: 8px; color: var(--muted); }
.kb-file-text { display: grid; place-items: center; min-height: 150px; color: var(--muted); }
.kb-file-preview-empty { display: grid; justify-items: center; gap: 5px; text-align: center; white-space: normal; }
.kb-file-preview-empty strong { color: var(--text); font-size: 14px; }
.kb-file-preview-empty small { font-size: 12px; }
.kb-file-preview-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); font-size: 22px; }