openclaw-voc-skill/claude-code/claude-code-qiwe-assistant/mcp/src/dashboard/styles.css

:root {
  --brand: #fa8c16;
  --brand-dark: #d46b08;
  --brand-bg: #fff7e6;
  --border: #e8e8e8;
  --page-bg: #f0f2f5;
  --panel-bg: #ffffff;
  --sidebar-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  --text-primary: #1f1f1f;
  --text-secondary: #5a5a5a;
  --text-muted: #8c8c8c;
  --success: #52c41a;
  --success-bg: #f6ffed;
  --success-border: #b7eb8f;
  --error: #ff4d4f;
  --error-bg: #fff2f0;
  --error-border: #ffccc7;
  --warning: #faad14;
  --warning-bg: #fffbe6;
  --info: #1890ff;
  --info-bg: #e6f7ff;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.1);
}

/* Unified task center */
.customer-master-shell { display: grid; gap: 16px; margin-bottom: 22px; }
.customer-master-hero { min-height: 148px; border-radius: 20px; padding: 28px 30px; background: linear-gradient(125deg, #123f36, #287b58); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 16px 34px rgba(20, 77, 59, .16); }
.customer-master-hero > div { display: grid; gap: 6px; }
.customer-master-hero span { color: #b9dfd0; font-size: 10px; font-weight: 750; letter-spacing: 1.4px; }
.customer-master-hero h2 { margin: 0; font-size: 30px; }
.customer-master-hero p { margin: 0; color: #d8ece4; font-size: 13px; }
.customer-master-hero .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.customer-master-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.customer-master-stats > div { display: grid; gap: 4px; padding: 15px 17px; background: #fff; border: 1px solid #e3e8e6; border-radius: 13px; }
.customer-master-stats strong { color: #18342b; font-size: 23px; }
.customer-master-stats span { color: #78847f; font-size: 11px; }
.customer-master-policy { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; padding: 13px 16px; border-radius: 12px; border: 1px solid #cfe5d8; background: #f2faf5; }
.customer-master-policy strong { color: #237348; font-size: 13px; }
.customer-master-policy span { color: #4f695d; font-size: 12px; }
.customer-master-policy small { grid-column: 2; color: #809087; }
.customer-master-policy.fallback { border-color: #f1d6a5; background: #fffaf0; }
.customer-master-policy.fallback strong { color: #b07d1a; }
.customer-fallback-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; color: #b07d1a; background: #fff3d6; font-size: 10px; font-weight: 650; vertical-align: middle; }
.customer-master-list-item .customer-fallback-badge { margin-left: 6px; }
.customer-master-fallback-note { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid #f1d6a5; background: #fffaf0; color: #8a6a2f; }
.customer-master-fallback-note strong { font-size: 12px; }
.customer-master-fallback-note span { font-size: 11px; line-height: 1.6; }
.customer-master-layout { min-height: 620px; display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid #e2e7e5; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(30, 57, 46, .05); }
.customer-master-layout > aside { border-right: 1px solid #e6ebe8; background: #fafcfb; }
.customer-master-layout > aside > header { display: grid; gap: 10px; padding: 16px; border-bottom: 1px solid #e6ebe8; }
.customer-master-layout > aside > header strong { color: #24352e; font-size: 14px; }
.customer-master-layout > aside input { width: 100%; min-height: 36px; border: 1px solid #dce4e0; border-radius: 9px; padding: 0 10px; background: #fff; }
.customer-master-layout > aside > div { display: grid; padding: 8px; gap: 7px; }
.customer-master-list-item { width: 100%; display: grid; gap: 7px; padding: 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.customer-master-list-item:hover { background: #f1f7f4; }
.customer-master-list-item.active { background: #e8f5ee; border-color: #b9dfcc; }
.customer-master-list-item > div, .customer-master-list-item footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.customer-master-list-item strong { color: #20332a; font-size: 13px; }
.customer-master-list-item p { margin: 0; color: #68766f; font-size: 11px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.customer-master-list-item footer { color: #849089; font-size: 10px; }
.customer-stage { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 0 8px; color: #5c6b64; background: #edf1ef; font-size: 10px; white-space: nowrap; }
.customer-stage.priority { color: #a34436; background: #fff0ed; }
.customer-stage.qualified { color: #217349; background: #e5f6eb; }
.customer-stage.profiling { color: #486c91; background: #edf5fc; }
.customer-master-layout > main { min-width: 0; }
.customer-master-detail { display: grid; gap: 16px; padding: 22px; }
.customer-next-action-section, .customer-recommendation-section, .customer-timeline-section { display: grid; gap: 11px; padding: 15px; border: 1px solid #e0e7e3; border-radius: 13px; }
.customer-next-action-section > header, .customer-recommendation-section > header, .customer-timeline-section > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.customer-next-action-section > header > div, .customer-recommendation-section > header > div, .customer-timeline-section > header > div { display: grid; gap: 2px; }
.customer-next-action-section > header strong, .customer-recommendation-section > header strong, .customer-timeline-section > header strong { color: #2b3c34; font-size: 13px; }
.customer-next-action-section > header span, .customer-recommendation-section > header span, .customer-timeline-section > header span { color: #87938d; font-size: 10px; }
.customer-next-action-section > header em, .customer-recommendation-section > header em, .customer-timeline-section > header em { color: #52705f; font-size: 10px; font-style: normal; }
.customer-next-action-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.customer-next-action-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .75fr); gap: 9px 13px; align-items: start; padding: 12px; border-radius: 10px; background: #f7f9f8; border-left: 3px solid #8eaa9b; }
.customer-next-action-card.high { border-left-color: #e89545; background: #fffbf5; }
.customer-next-action-card > div { display: grid; gap: 4px; }
.customer-next-action-card > div span { color: #488064; font-size: 9px; font-weight: 700; }
.customer-next-action-card strong { color: #2a3b33; font-size: 12px; }
.customer-next-action-card p { margin: 0; color: #647169; font-size: 10px; line-height: 1.5; }
.customer-next-action-card ul { margin: 0; padding-left: 16px; color: #77827c; font-size: 9px; line-height: 1.55; }
.customer-next-action-card .btn { grid-column: 1 / -1; justify-self: start; }
.customer-recommendation-section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.customer-recommendation-card { display: grid; gap: 8px; padding: 12px; border: 1px solid #e2e7e4; border-radius: 10px; background: #fcfdfd; }
.customer-recommendation-card > header, .customer-recommendation-card > div, .customer-recommendation-card > footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 7px; }
.customer-recommendation-card > header > div { display: grid; gap: 2px; }
.customer-recommendation-card > header span { color: #8a958f; font-size: 8px; }
.customer-recommendation-card > header strong { color: #283b32; font-size: 12px; }
.customer-recommendation-card > header em { border-radius: 999px; padding: 4px 8px; color: #5d6d65; background: #eef2f0; font-size: 9px; font-style: normal; }
.customer-recommendation-card > header em.interested { color: #217147; background: #e7f7ed; }
.customer-recommendation-card > header em.rejected { color: #a15246; background: #fff0ed; }
.customer-recommendation-card > header em.viewing, .customer-recommendation-card > header em.viewed { color: #3a6594; background: #edf5ff; }
.customer-recommendation-card > p { margin: 0; color: #727e78; font-size: 10px; }
.customer-recommendation-card > div strong { color: #e77e22; font-size: 18px; }
.customer-recommendation-card > div strong small { font-size: 9px; }
.customer-recommendation-card > div span { color: #8a948f; font-size: 9px; }
.customer-recommendation-card blockquote { margin: 0; padding: 7px 9px; color: #6a756f; background: #f5f7f6; border-left: 2px solid #98b0a3; font-size: 9px; }
.customer-recommendation-card > footer { justify-content: flex-start; }
.customer-timeline-section > div { position: relative; display: grid; gap: 0; }
.customer-timeline-item { display: grid; grid-template-columns: 10px 78px minmax(0, 1fr); gap: 9px; align-items: start; min-height: 60px; padding: 5px 0 12px; }
.customer-timeline-item > i { position: relative; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #77a28c; box-shadow: 0 0 0 3px #edf5f1; }
.customer-timeline-item:not(:last-child) > i::after { content: ''; position: absolute; top: 11px; left: 4px; width: 1px; height: 47px; background: #dce6e1; }
.customer-timeline-item.inbound-message > i { background: #4e8ee1; }
.customer-timeline-item.outbound-message > i { background: #65a67e; }
.customer-timeline-item.alert > i { background: #e47a61; }
.customer-timeline-item.property > i { background: #e89a45; }
.customer-timeline-item > time { color: #8b958f; font-size: 9px; line-height: 1.6; }
.customer-timeline-item > div { display: grid; gap: 3px; }
.customer-timeline-item strong { color: #33433b; font-size: 11px; }
.customer-timeline-item p { margin: 0; color: #6f7b75; font-size: 10px; line-height: 1.5; }
.customer-timeline-item small { color: #929b96; font-size: 8px; }
.customer-master-detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.customer-master-detail-head > div:first-child { display: grid; gap: 4px; }
.customer-master-detail-head > div:last-child { display: flex; align-items: center; gap: 8px; }
.customer-master-detail-head span:first-child { color: #33805e; font-size: 9px; letter-spacing: 1px; font-weight: 750; }
.customer-master-detail-head h3 { margin: 0; color: #1f3028; font-size: 22px; }
.customer-master-detail-head p { margin: 0; color: #7d8983; font-size: 11px; }
.customer-master-score-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.customer-master-score-row > div { display: grid; gap: 3px; padding: 11px 13px; border-radius: 10px; background: #f6f8f7; }
.customer-master-score-row strong { color: #244236; font-size: 17px; }
.customer-master-score-row span { color: #839089; font-size: 10px; }
.customer-profile-fields { display: grid; gap: 11px; padding: 15px; border: 1px solid #e0e7e3; border-radius: 13px; }
.customer-profile-fields > header, .customer-master-intelligence-grid section > header, .customer-master-edit-form > header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.customer-profile-fields > header strong, .customer-master-intelligence-grid section > header strong, .customer-master-edit-form > header strong { color: #2b3c34; font-size: 13px; }
.customer-profile-fields > header span, .customer-master-intelligence-grid section > header span, .customer-master-edit-form > header span { color: #89948f; font-size: 10px; }
.customer-profile-fields > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.customer-profile-fields > div > div { display: grid; gap: 3px; min-height: 76px; padding: 10px; background: #f7f9f8; border-radius: 9px; }
.customer-profile-fields small { color: #87928d; font-size: 9px; }
.customer-profile-fields strong { color: #25372f; font-size: 13px; }
.customer-profile-fields em { color: #5a8b73; font-size: 9px; font-style: normal; }
.customer-profile-fields > footer { display: flex; flex-wrap: wrap; gap: 6px; }
.customer-profile-fields > footer span { color: #2d7251; background: #e8f5ed; border-radius: 999px; padding: 4px 9px; font-size: 10px; }
.customer-master-intelligence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.customer-master-intelligence-grid > section { display: grid; align-content: start; gap: 9px; padding: 14px; border: 1px solid #e2e7e4; border-radius: 12px; }
.customer-evidence-item, .customer-master-action-item { display: grid; gap: 3px; padding: 10px; border-radius: 9px; background: #f7f9f8; }
.customer-master-action-item.alert { background: #fff7f3; }
.customer-evidence-item strong, .customer-master-action-item strong { color: #34443c; font-size: 11px; }
.customer-evidence-item p, .customer-master-action-item p { margin: 0; color: #69766f; font-size: 10px; line-height: 1.5; }
.customer-evidence-item small, .customer-master-action-item small { color: #909994; font-size: 9px; }
.customer-latest-message { display: grid; gap: 5px; padding: 13px 15px; border-left: 3px solid #6aaf8b; background: #f4f9f6; border-radius: 0 10px 10px 0; }
.customer-latest-message strong { color: #315343; font-size: 11px; }
.customer-latest-message p { margin: 0; color: #51635a; font-size: 11px; line-height: 1.55; }
.customer-latest-message small { color: #87948e; font-size: 9px; }
.customer-master-edit-form { display: grid; gap: 11px; padding: 15px; border-radius: 13px; border: 1px solid #dce7e1; background: #fbfdfc; }
.customer-master-edit-form > header > div { display: grid; gap: 2px; }
.customer-master-edit-form > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.customer-master-edit-form label { display: grid; gap: 5px; }
.customer-master-edit-form label > span { color: #69776f; font-size: 10px; }
.customer-master-edit-form input { width: 100%; min-height: 35px; border: 1px solid #dbe3df; border-radius: 8px; padding: 0 9px; background: #fff; }
.customer-master-reason { grid-column: 1 / -1; }
.customer-operations-hint { margin-top: 4px; }

@media (max-width: 1100px) {
  .customer-master-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .customer-profile-fields > div, .customer-master-edit-form > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-next-action-section > div, .customer-recommendation-section > div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .customer-master-stats, .customer-master-score-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-master-layout { grid-template-columns: 1fr; }
  .customer-master-layout > aside { border-right: 0; border-bottom: 1px solid #e6ebe8; }
  .customer-master-intelligence-grid, .customer-profile-fields > div, .customer-master-edit-form > div { grid-template-columns: 1fr; }
  .customer-next-action-section > div, .customer-recommendation-section > div { grid-template-columns: 1fr; }
  .customer-master-policy { grid-template-columns: 1fr; }
  .customer-master-policy small { grid-column: 1; }
  .customer-master-detail-head, .customer-master-hero { align-items: flex-start; flex-direction: column; }
}

.unified-task-workbench { display: grid; gap: 18px; }
.task-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.task-stat-row > div { background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.task-stat-row strong { color: #18212f; font-size: 26px; line-height: 1; }
.task-stat-row span { color: #7a8493; font-size: 12px; }
.task-policy-banner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-policy-banner > div { border: 1px solid #dbe8df; background: #f4fbf6; border-radius: 14px; padding: 14px 16px; display: grid; gap: 5px; }
.task-policy-banner strong { color: #237344; font-size: 13px; }
.task-policy-banner span { color: #607067; font-size: 12px; line-height: 1.65; }
.task-create-form { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1.2fr) minmax(130px, .8fr) 175px 110px auto; gap: 10px; align-items: end; padding: 16px; background: #fff; border: 1px solid #e5e8ed; border-radius: 14px; }
.task-create-form > div { display: grid; gap: 4px; align-self: center; }
.task-create-form > div strong { color: #202a37; font-size: 14px; }
.task-create-form > div span { color: #838c99; font-size: 11px; }
.task-create-form input, .task-create-form select, .task-filterbar input, .task-filterbar select { width: 100%; min-height: 38px; border: 1px solid #dfe3e9; border-radius: 9px; padding: 0 11px; background: #fff; color: #26313f; }
.task-filterbar { display: grid; grid-template-columns: minmax(240px, 1fr) 210px 140px auto auto; gap: 10px; align-items: center; }
.task-filterbar > span { color: #7b8592; font-size: 12px; justify-self: end; }
.unified-task-list { display: grid; gap: 10px; }
.unified-task-card { position: relative; display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 15px; align-items: stretch; padding: 17px 18px; background: #fff; border: 1px solid #e5e8ed; border-radius: 14px; box-shadow: 0 7px 22px rgba(32, 42, 55, .035); }
.unified-task-card.overdue { border-color: #f0c5c2; background: #fffafa; }
.unified-task-card.candidate { border-style: dashed; background: #fbfbfe; }
.task-priority { width: 4px; border-radius: 999px; background: #91a0af; }
.task-priority.low { background: #a9b7c4; }
.task-priority.medium { background: #4c8bea; }
.task-priority.high { background: #f0993c; }
.task-priority.urgent { background: #d7524d; }
.unified-task-main { min-width: 0; display: grid; gap: 8px; }
.unified-task-main > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.unified-task-main > header > div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.unified-task-main > header small { color: #89919d; white-space: nowrap; }
.unified-task-main h4 { margin: 0; color: #1e2937; font-size: 15px; line-height: 1.45; }
.unified-task-main p { margin: 0; color: #67717f; font-size: 12px; line-height: 1.6; }
.unified-task-main footer { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #8a929d; font-size: 11px; }
.task-source, .task-status, .task-audience { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; padding: 0 9px; font-size: 10px; font-weight: 650; }
.task-source { color: #40546c; background: #edf2f8; }
.task-status { color: #3565a4; background: #edf5ff; }
.task-status.done { color: #2d7a4d; background: #edf8f1; }
.task-status.blocked, .task-status.dismissed { color: #8a5c22; background: #fff5e8; }
.task-status.suggested { color: #6953a5; background: #f1edfb; }
.task-audience { color: #237344; background: #eaf7ee; }
.unified-task-actions { min-width: 135px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: center; gap: 7px; }
.unified-task-actions > span, .task-promoted { color: #76808d; font-size: 11px; align-self: center; }

@media (max-width: 1180px) {
  .task-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-create-form > div { grid-column: 1 / -1; }
  .task-filterbar { grid-template-columns: minmax(200px, 1fr) 180px 130px auto; }
  .task-filterbar > span { display: none; }
}

@media (max-width: 760px) {
  .task-stat-row, .task-policy-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-create-form, .task-filterbar { grid-template-columns: 1fr; }
  .unified-task-card { grid-template-columns: 4px minmax(0, 1fr); }
  .unified-task-actions { grid-column: 2; justify-content: flex-start; }
  .unified-task-main > header { align-items: flex-start; flex-direction: column; gap: 6px; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
}

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

.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.25s ease;
  color: #fff;
}

.sidebar.hidden {
  transform: translateX(-100%);
}

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

.brand-icon {
  width: 36px;
  height: 36px;
  background: rgba(250, 140, 22, 0.18);
  color: var(--brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon svg { width: 22px; height: 22px; }

.brand-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.nav {
  padding: 16px 12px;
  overflow-y: auto;
  flex: 1;
}

.nav-group { margin-bottom: 24px; }

.nav-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 12px;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  margin-bottom: 4px;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.nav-item.active {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 14px rgba(250, 140, 22, 0.35);
}

.main {
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: 68px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow);
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.menu-btn:hover { background: var(--brand-bg); color: var(--brand); }
.menu-btn svg { width: 22px; height: 22px; fill: currentColor; }

.page-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.account-switcher {
  position: relative;
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.15s;
}

.account-btn:hover { border-color: var(--brand); background: var(--brand-bg); }

.account-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.account-dot.online { background: var(--success); box-shadow: 0 0 0 3px rgba(82,196,26,0.15); }
.account-dot.offline { background: var(--text-muted); }

.account-chevron { width: 16px; height: 16px; fill: var(--text-muted); }

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 8px 0;
  display: none;
  z-index: 60;
  animation: scaleIn 0.2s ease;
}

.account-dropdown.open { display: block; }

.dropdown-header {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.account-list { max-height: 240px; overflow-y: auto; }

.account-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.account-option:hover { background: var(--brand-bg); }

.account-option.active { color: var(--brand); font-weight: 600; }

.account-option .account-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.account-option .account-info strong {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-option .account-info span {
  font-size: 12px;
  color: var(--text-muted);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.dropdown-item:hover { background: var(--brand-bg); }

.dropdown-item svg { width: 18px; height: 18px; fill: currentColor; }

.content {
  flex: 1;
  padding: 28px 32px 48px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

/* ==================== Intelligent Conversations ==================== */
.agent-page {
  --agent-ink: #182126;
  --agent-soft: #f5f7f6;
  --agent-line: #e5e9e7;
  --agent-green: #137a5b;
  --agent-green-soft: #eaf6f1;
  --agent-orange: #fa8c16;
}

.agent-loading {
  min-height: 420px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.agent-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 30px 34px;
  margin-bottom: 16px;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% -20%, rgba(250,140,22,.35), transparent 38%),
    linear-gradient(125deg, #152622 0%, #164c3e 58%, #1a6e55 100%);
  box-shadow: 0 20px 44px rgba(20, 67, 54, .18);
}

.agent-hero::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  right: 32%;
  top: -150px;
}

.agent-eyebrow {
  margin-bottom: 8px;
  color: #a9dec9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.agent-hero h2 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: .2px;
}

.agent-hero p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
}

.agent-safety-card {
  position: relative;
  z-index: 1;
  min-width: 330px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(14px);
}

.agent-safety-card .btn {
  padding: 8px 12px;
  white-space: nowrap;
}

.agent-safety-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.agent-safety-card .btn-secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.28);
}

.agent-safety-card strong,
.agent-safety-card small {
  display: block;
}

.agent-safety-card strong { font-size: 14px; }
.agent-safety-card small { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 11px; }

.agent-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8d9b96;
  box-shadow: 0 0 0 5px rgba(141,155,150,.14);
}

.agent-live-dot.online {
  background: #5de0a4;
  box-shadow: 0 0 0 5px rgba(93,224,164,.14), 0 0 16px rgba(93,224,164,.4);
}

.agent-modebar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--agent-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(27,49,42,.05);
}

.agent-mode-copy strong,
.agent-mode-copy span { display: block; }
.agent-mode-copy strong { font-size: 14px; }
.agent-mode-copy span { margin-top: 2px; color: var(--text-muted); font-size: 11px; }

.agent-mode-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f3f2;
}

.agent-mode-btn {
  padding: 8px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6d7773;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.agent-mode-btn:hover { color: var(--agent-green); }
.agent-mode-btn.active { color: var(--agent-green); background: #fff; box-shadow: 0 2px 8px rgba(20,60,48,.1); font-weight: 700; }
.agent-mode-btn.danger.active { color: #b44b26; background: #fff1eb; }

.agent-guard {
  justify-self: end;
  color: #78827e;
  font-size: 11px;
}

.agent-guard span {
  margin-right: 7px;
  padding: 4px 7px;
  color: var(--agent-green);
  border-radius: 5px;
  background: var(--agent-green-soft);
  font-weight: 700;
}

.agent-runtime-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #f2c7b4;
  border-radius: 12px;
  color: #8b4429;
  background: #fff5f0;
  font-size: 11px;
}

.agent-runtime-alert strong { flex: 0 0 auto; }
.agent-runtime-alert span { line-height: 1.5; }

.agent-workspace {
  min-height: 650px;
  display: grid;
  grid-template-columns: 245px minmax(420px, 1fr) 330px;
  border: 1px solid var(--agent-line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 38px rgba(24,54,45,.08);
}

.agent-conversation-list,
.agent-insight-panel {
  min-width: 0;
  background: #fbfcfb;
}

.agent-conversation-list { border-right: 1px solid var(--agent-line); }
.agent-insight-panel { border-left: 1px solid var(--agent-line); overflow-y: auto; max-height: 760px; }

.agent-panel-heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--agent-line);
}

.agent-panel-heading strong,
.agent-panel-heading small { display: block; }
.agent-panel-heading strong { color: var(--agent-ink); font-size: 14px; }
.agent-panel-heading small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.agent-count { min-width: 24px; padding: 4px 7px; border-radius: 12px; text-align: center; color: var(--agent-green); background: var(--agent-green-soft); font-size: 11px; font-weight: 800; }

.agent-list-scroll { padding: 8px; }

.agent-conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 10px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 10px;
  text-align: left;
  color: var(--agent-ink);
  background: transparent;
  cursor: pointer;
}

.agent-conversation-item:hover { background: #f1f6f3; }
.agent-conversation-item.active { background: var(--agent-green-soft); box-shadow: inset 3px 0 0 var(--agent-green); }

.agent-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(145deg, #2f9b78, #145d49);
  font-size: 13px;
  font-weight: 800;
}

.agent-conversation-copy { min-width: 0; }
.agent-conversation-copy strong,
.agent-conversation-copy small,
.agent-conversation-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-conversation-copy strong { font-size: 12px; }
.agent-conversation-copy small { margin-top: 4px; color: #76817d; font-size: 10px; }
.agent-conversation-copy em { width: max-content; max-width: 100%; margin-top: 6px; padding: 2px 6px; border-radius: 4px; color: var(--agent-green); background: rgba(19,122,91,.08); font-size: 9px; font-style: normal; }
.agent-conversation-item time { color: #9aa29f; font-size: 9px; white-space: nowrap; }

.agent-chat-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(320px, 1fr) auto;
  background: #fff;
}

.agent-chat-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--agent-line);
}

.agent-chat-header strong,
.agent-chat-header span { display: block; }
.agent-chat-header strong { color: var(--agent-ink); font-size: 14px; }
.agent-chat-header span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.agent-chat-header .btn { padding: 7px 11px; font-size: 11px; }

.agent-conversation-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.agent-session-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: #6f7874;
  border-bottom: 1px solid var(--agent-line);
  background: #f8faf9;
}

.agent-session-strip.ready { color: #245d4b; background: #f0f8f5; }
.agent-session-strip strong,
.agent-session-strip small { display: block; }
.agent-session-strip strong { color: inherit; font-size: 11px; }
.agent-session-strip small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #89918e; font-size: 9px; }
.agent-session-dot { width: 8px; height: 8px; border-radius: 50%; background: #b3bbb8; box-shadow: 0 0 0 4px rgba(137,145,142,.1); }
.agent-session-strip.ready .agent-session-dot { background: #22b981; box-shadow: 0 0 0 4px rgba(34,185,129,.12); }

.agent-message-stream {
  max-height: 440px;
  overflow-y: auto;
  padding: 20px;
  background:
    linear-gradient(rgba(244,247,245,.75), rgba(244,247,245,.75)),
    radial-gradient(circle at 1px 1px, rgba(20,87,66,.1) 1px, transparent 0);
  background-size: auto, 18px 18px;
}

.agent-message { max-width: 86%; margin-bottom: 18px; }
.agent-message.customer { margin-right: auto; }
.agent-message.agent,
.agent-message.human { margin-left: auto; }
.agent-message-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: #8b9491; font-size: 9px; }
.agent-message.agent .agent-message-meta,
.agent-message.human .agent-message-meta { flex-direction: row-reverse; }
.agent-message-body { padding: 11px 13px; border: 1px solid #e3e8e5; border-radius: 4px 14px 14px 14px; color: #34413c; background: #fff; box-shadow: 0 5px 12px rgba(24,54,45,.05); font-size: 12px; line-height: 1.7; }
.agent-message.agent .agent-message-body { color: #164e3d; border-color: #cfe8de; border-radius: 14px 4px 14px 14px; background: #eef8f4; }
.agent-message.human .agent-message-body { color: #6d431b; border-color: #f3d9bd; border-radius: 14px 4px 14px 14px; background: #fff6eb; }

.agent-composer {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--agent-line);
  background: #fff;
}

.agent-composer.manual { background: #fffaf4; }
.agent-composer-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.agent-composer-label strong { color: var(--agent-green); font-size: 11px; }
.agent-composer.manual .agent-composer-label strong { color: #b06c2a; }
.agent-composer-label span { color: var(--text-muted); font-size: 9px; }
.agent-composer textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1px solid #dce5e1; border-radius: 10px; outline: 0; color: #34413c; background: #fbfdfc; font: inherit; font-size: 11px; line-height: 1.55; }
.agent-composer textarea:focus { border-color: var(--agent-green); box-shadow: 0 0 0 3px rgba(19,122,91,.08); }
.agent-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.agent-composer-actions span { color: #9aa29f; font-size: 9px; }
.agent-composer-actions .btn { padding: 8px 14px; background: var(--agent-green); border-color: var(--agent-green); font-size: 11px; }

.agent-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.agent-review-actions .btn-secondary { color: #5f6d68; border-color: #d7e0dc; background: #fff; }

.agent-tool-trace details {
  margin-bottom: 6px;
  border: 1px solid #e2e9e6;
  border-radius: 8px;
  background: #f8faf9;
}

.agent-tool-trace summary {
  padding: 8px 9px;
  color: #315e50;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.agent-tool-trace pre {
  max-height: 120px;
  margin: 0;
  overflow: auto;
  padding: 0 9px 9px;
  color: #67736f;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 8px;
  line-height: 1.45;
}

.agent-audit-list { display: grid; gap: 5px; }
.agent-audit-list > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px dashed #e6ebe9; color: #66736e; font-size: 8px; }
.agent-audit-list time { flex: 0 0 auto; color: #9aa39f; }

.agent-insight-section { padding: 17px 18px; border-bottom: 1px solid var(--agent-line); }
.agent-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.agent-section-title > span { color: #9bb7ae; font: 700 9px/1 monospace; }
.agent-section-title strong,
.agent-section-title small { display: block; }
.agent-section-title strong { color: var(--agent-ink); font-size: 12px; }
.agent-section-title small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }

.agent-intent-card { padding: 11px 12px; border: 1px solid #d7ebe3; border-radius: 10px; background: var(--agent-green-soft); }
.agent-intent-card > strong { color: var(--agent-green); font-size: 13px; }
.agent-intent-card > span { float: right; color: #60756e; font-size: 9px; }
.agent-intent-card > div { clear: both; height: 4px; margin-top: 10px; overflow: hidden; border-radius: 4px; background: rgba(19,122,91,.12); }
.agent-intent-card i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22a579, #73cfae); }
.agent-reasoning { margin: 9px 0 0; color: #75807c; font-size: 9px; line-height: 1.55; }

.agent-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.agent-demand-grid > div { padding: 8px 9px; border: 1px solid #e8ecea; border-radius: 8px; background: #fff; }
.agent-demand-grid small,
.agent-demand-grid strong { display: block; }
.agent-demand-grid small { color: #9aa29f; font-size: 8px; }
.agent-demand-grid strong { margin-top: 3px; overflow: hidden; color: #37443f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.agent-customer-task-list,
.agent-customer-alert-list { display: grid; gap: 8px; }
.agent-customer-task,
.agent-customer-alert { padding: 10px; border: 1px solid #e3e9e6; border-radius: 9px; background: #fff; }
.agent-customer-task.high,
.agent-customer-task.urgent { border-left: 3px solid #ed8a2e; }
.agent-customer-task.done,
.agent-customer-task.dismissed,
.agent-customer-alert.acknowledged,
.agent-customer-alert.resolved,
.agent-customer-alert.dismissed { opacity: .62; }
.agent-customer-task strong,
.agent-customer-task small { display: block; }
.agent-customer-task strong { color: #30423b; font-size: 10px; }
.agent-customer-task small { margin-top: 3px; color: #8d9692; font-size: 8px; }
.agent-customer-task p,
.agent-customer-alert p { margin: 6px 0 0; color: #68746f; font-size: 9px; line-height: 1.5; }
.agent-task-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.agent-task-meta span { padding: 2px 5px; border-radius: 4px; color: #68746f; background: #f0f3f2; font-size: 8px; }
.agent-task-meta span.synced { color: #26745e; background: #e8f5ef; }
.agent-task-meta span.error { color: #a83831; background: #fff0ee; }
.agent-customer-alert.high { border-left: 3px solid #ed8a2e; background: #fffaf3; }
.agent-customer-alert.critical { border-left: 3px solid #d94f45; background: #fff5f4; }
.agent-alert-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent-alert-heading strong { color: #3e4844; font-size: 10px; }
.agent-alert-heading em { padding: 2px 5px; border-radius: 4px; color: #966023; background: rgba(237,138,46,.12); font-size: 8px; font-style: normal; }
.agent-customer-alert.critical .agent-alert-heading em { color: #a83831; background: rgba(217,79,69,.12); }
.agent-customer-alert > small { display: block; margin-top: 5px; color: #929a97; font-size: 8px; line-height: 1.4; }
.agent-intelligence-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 8px; }
.agent-intelligence-actions .btn { padding: 4px 7px; font-size: 8px; }
.agent-intelligence-actions span { color: #7d8783; font-size: 8px; }

/* ==================== Dashboard Motion System ==================== */
:root {
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-ease-out: cubic-bezier(.2, .72, .24, 1);
  --motion-ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* 模块切换：页面立即出现，内容以短距离错峰进入，不延长数据加载。 */
.content > .page {
  animation: dashboardPageIn var(--motion-base) var(--motion-ease-out) both;
}

.content > .page > * {
  animation: dashboardSectionIn var(--motion-slow) var(--motion-ease-out) both;
}

.content > .page > *:nth-child(2) { animation-delay: 35ms; }
.content > .page > *:nth-child(3) { animation-delay: 70ms; }
.content > .page > *:nth-child(4) { animation-delay: 105ms; }
.content > .page > *:nth-child(5) { animation-delay: 140ms; }
.content > .page > *:nth-child(n+6) { animation-delay: 165ms; }

@keyframes dashboardPageIn {
  from { opacity: 0; transform: translate3d(8px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes dashboardSectionIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 侧边导航：新模块图标轻微弹入，文字与底色保持原有品牌风格。 */
.nav-item { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, transform var(--motion-fast) ease; }
.nav-item:hover { transform: translate3d(2px, 0, 0); }
.nav-item.active svg { animation: dashboardNavIconIn var(--motion-base) var(--motion-ease-out) both; }

@keyframes dashboardNavIconIn {
  0% { opacity: .55; transform: scale(.78) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* 关键指标与状态卡：错峰进入，并提供稳定、不改变布局的悬停反馈。 */
.kpi-row > .kpi-card,
.status-cards > .status-card,
.workspace-stat-row > div,
.customer-master-stats > div,
.task-stat-row > div {
  animation: dashboardMetricIn var(--motion-slow) var(--motion-ease-out) both;
  transition: transform var(--motion-base) var(--motion-ease-out), border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease;
}

.kpi-row > :nth-child(2), .status-cards > :nth-child(2), .workspace-stat-row > :nth-child(2), .customer-master-stats > :nth-child(2), .task-stat-row > :nth-child(2) { animation-delay: 45ms; }
.kpi-row > :nth-child(3), .status-cards > :nth-child(3), .workspace-stat-row > :nth-child(3), .customer-master-stats > :nth-child(3), .task-stat-row > :nth-child(3) { animation-delay: 90ms; }
.kpi-row > :nth-child(4), .workspace-stat-row > :nth-child(4), .customer-master-stats > :nth-child(4), .task-stat-row > :nth-child(4) { animation-delay: 135ms; }
.kpi-row > :nth-child(5), .workspace-stat-row > :nth-child(5) { animation-delay: 180ms; }
.kpi-row > :nth-child(6), .workspace-stat-row > :nth-child(6) { animation-delay: 225ms; }

.kpi-card:hover,
.status-card:hover,
.customer-master-stats > div:hover,
.task-stat-row > div:hover {
  transform: translate3d(0, -2px, 0);
  border-color: #d5dde2;
  box-shadow: 0 10px 28px rgba(28,45,59,.075);
}

@keyframes dashboardMetricIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 页签、筛选结果和局部工作区切换。 */
[data-group-ops-panel]:not([hidden]),
.agent-knowledge-view,
.customer-master-detail,
.meeting-detail,
.doc-detail,
.todo-detail {
  animation: dashboardPanelIn var(--motion-base) var(--motion-ease-soft) both;
}

@keyframes dashboardPanelIn {
  from { opacity: 0; transform: translate3d(6px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 常用列表与操作卡仅在悬停时轻移，避免数据密集页面持续运动。 */
.skill-capability-card,
.property-card,
.customer-master-list-item,
.meeting-list-item,
.office-list-item,
.unified-task-card,
.group-ops-playbooks article,
.group-ops-task-list article {
  transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-base) ease;
}

.skill-capability-card:hover,
.property-card:hover,
.customer-master-list-item:hover,
.meeting-list-item:hover,
.office-list-item:hover,
.unified-task-card:hover,
.group-ops-playbooks article:hover,
.group-ops-task-list article:hover {
  transform: translate3d(0, -1px, 0);
}

/* Hero 装饰只做低频漂移，主体文字与操作按钮保持稳定。 */
.customer-workspace-hero::before { animation: dashboardHeroFloat 8s ease-in-out infinite alternate; }
.customer-workspace-hero::after { animation: dashboardHeroFloatReverse 10s ease-in-out infinite alternate; }

@keyframes dashboardHeroFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-10px, 8px, 0); }
}

@keyframes dashboardHeroFloatReverse {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(9px, -6px, 0); }
}

.agent-match-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px dashed #e5e9e7; }
.agent-match-card:last-child { border-bottom: 0; }
.agent-match-card > span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--agent-green); border-radius: 6px; background: var(--agent-green-soft); font-size: 9px; font-weight: 800; }
.agent-match-card strong,
.agent-match-card small,
.agent-match-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-match-card strong { color: #34413c; font-size: 10px; }
.agent-match-card small { margin-top: 3px; color: #6f7b76; font-size: 9px; }
.agent-match-card em { margin-top: 3px; color: #9a7a51; font-size: 8px; font-style: normal; }
.agent-match-card b { color: var(--agent-orange); font: 800 13px/1 monospace; }

.agent-insight-section.knowledge ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.agent-insight-section.knowledge li { padding: 6px 7px; border-radius: 6px; color: #5c6c66; background: #f0f3f2; font-size: 8px; }
.agent-insight-section.knowledge li::before { content: '✓'; margin-right: 4px; color: var(--agent-green); font-weight: 800; }

.agent-muted { margin: 0; color: var(--text-muted); font-size: 10px; }
.agent-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--text-muted); }
.agent-empty.large { min-height: 560px; }
.agent-empty strong { color: #53605b; font-size: 13px; }
.agent-empty span { max-width: 360px; font-size: 10px; line-height: 1.5; }

@media (max-width: 1320px) {
  .agent-workspace { grid-template-columns: 220px minmax(390px, 1fr) 300px; }
}

@media (max-width: 1050px) {
  .agent-modebar { grid-template-columns: 1fr auto; }
  .agent-guard { display: none; }
  .agent-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .agent-insight-panel { grid-column: 1 / -1; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--agent-line); border-left: 0; }
}

@media (max-width: 760px) {
  .agent-hero { align-items: stretch; flex-direction: column; padding: 24px; }
  .agent-safety-card { min-width: 0; }
  .agent-modebar { grid-template-columns: 1fr; }
  .agent-mode-switch { justify-self: stretch; }
  .agent-mode-btn { flex: 1; }
  .agent-workspace { display: block; }
  .agent-conversation-list { border-right: 0; border-bottom: 1px solid var(--agent-line); }
  .agent-chat-panel { min-height: 620px; }
  .agent-insight-panel { display: block; }
}

.page {
  animation: fadeInUp 0.4s ease both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-weight: 600;
}

.card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
  animation: fadeInUp 0.4s ease both;
}

.card:hover { box-shadow: var(--shadow-hover); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title svg { width: 20px; height: 20px; fill: var(--brand); }

.card-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.form-group label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  background: var(--panel-bg);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(250, 140, 22, 0.1);
}

.form-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.checkbox-row input { width: 16px; height: 16px; accent-color: var(--brand); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.25);
}

.btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-sm { padding: 7px 14px; font-size: 13px; }

.btn-secondary {
  background: var(--panel-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn-secondary:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }

.btn-danger { background: var(--error); box-shadow: 0 4px 12px rgba(255,77,79,0.25); }

.btn svg { width: 16px; height: 16px; fill: currentColor; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: var(--shadow);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

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

th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--page-bg);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--brand-bg); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.badge-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #ffe58f; }
.badge-info { background: var(--info-bg); color: var(--info); border: 1px solid #91d5ff; }
.badge-default { background: var(--page-bg); color: var(--text-muted); border: 1px solid var(--border); }

.confidence-bar {
  width: 80px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #ffc53d 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.filter-bar input,
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  background: var(--panel-bg);
}

.filter-bar input:focus,
.filter-bar select:focus { border-color: var(--brand); }

.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 56px;
  height: 56px;
  fill: var(--border);
  margin-bottom: 16px;
}

.empty-state-title { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state-desc { font-size: 13px; }

.progress-wrap { margin: 18px 0; }

.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #ffc53d 100%);
  border-radius: 4px;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  animation: progressStripes 1s linear infinite;
  transition: width 0.3s ease;
}

@keyframes progressStripes {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}

.job-log {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-top: 14px;
}

.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  min-width: 280px;
  max-width: 400px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.toast.success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.toast.error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }
.toast.warning { background: var(--warning-bg); color: #d48806; border: 1px solid #ffe58f; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 90%;
  max-width: 440px;
  animation: scaleIn 0.25s ease;
  box-shadow: var(--shadow-hover);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

body.modal-open { overflow: hidden; }

/* Customer portrait detail */
.portrait-modal-overlay {
  align-items: flex-start;
  padding: 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

.portrait-modal {
  width: min(100%, 960px);
  max-width: 960px;
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(20,34,44,.24);
}

.portrait-modal > .modal-title {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 21px 26px 18px;
  border-bottom: 1px solid #e9eeec;
  color: #1f3029;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  font-size: 20px;
}

.portrait-profile { padding: 24px 26px 18px; background: linear-gradient(145deg, #f4faf7, #fff 72%); }
.portrait-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.portrait-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #218263, #155b48); box-shadow: 0 8px 18px rgba(21,91,72,.2); font-size: 21px; font-weight: 800; }
.portrait-identity { min-width: 0; }
.portrait-name { color: #20342b; font-size: 20px; font-weight: 750; }
.portrait-subtitle { margin-top: 4px; overflow-wrap: anywhere; color: #75847d; font-size: 11px; line-height: 1.55; }
.portrait-chip-row, .portrait-tags, .portrait-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.portrait-chip-row { margin-top: 8px; }
.portrait-soft-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; color: #547066; background: #e8f2ed; font-size: 10px; }
.portrait-meta { min-width: 132px; padding-left: 14px; text-align: right; }
.portrait-meta div { color: #89958f; font-size: 9px; }
.portrait-meta strong { display: block; margin-top: 4px; color: #496057; font-size: 11px; }
.portrait-tags { margin-top: 16px; padding-top: 14px; border-top: 1px solid #dfeae5; }
.portrait-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }

.portrait-section { margin: 0 26px 18px; padding: 17px; border: 1px solid #e1e8e4; border-radius: 14px; background: #fff; }
.portrait-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.portrait-section-head h3 { margin: 0; color: #293b33; font-size: 14px; }
.portrait-section-head span { padding: 3px 7px; border-radius: 999px; color: #6f7e77; background: #f0f4f2; font-size: 9px; }
.portrait-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.portrait-insight-card { min-width: 0; padding: 12px 13px; border: 1px solid #e7ece9; border-radius: 10px; background: #f8faf9; }
.portrait-insight-label { margin-bottom: 5px; color: #78867f; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.portrait-insight-value { overflow-wrap: anywhere; color: #304139; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.portrait-insight-note { margin-top: 6px; color: #71847a; font-size: 9px; }
.portrait-evidence { margin-top: 8px; }
.portrait-evidence span { padding: 3px 7px; border-radius: 999px; color: #2f7258; background: #e7f4ed; font-size: 9px; }
.portrait-empty-panel { margin: 0 26px 18px; padding: 28px; border: 1px dashed #dbe4df; border-radius: 13px; color: #819087; background: #fafcfb; text-align: center; }

.portrait-modal .raw-toggle { display: flex; align-items: center; gap: 7px; margin: 0 26px; padding: 11px 13px; border: 1px solid #e1e7e4; border-radius: 10px; color: #65746d; background: #f7f9f8; cursor: pointer; font-size: 11px; font-weight: 650; }
.portrait-modal .raw-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; transition: transform .18s ease; }
.portrait-modal .raw-toggle.open svg { transform: rotate(180deg); }
.portrait-modal .raw-panel { display: none; max-height: 360px; margin: 10px 26px 0; padding: 14px; overflow: auto; border: 1px solid #dde5e1; border-radius: 10px; color: #4d5f56; background: #f5f8f6; font: 10px/1.65 Consolas, "SFMono-Regular", monospace; white-space: pre-wrap; word-break: break-word; }
.portrait-modal > .modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 18px 0 0; padding: 14px 26px; border-top: 1px solid #e9eeec; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.portrait-modal-loading { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 36px; color: #708078; text-align: center; }
.portrait-modal-loading .spinner { width: 30px; height: 30px; margin-bottom: 4px; }
.portrait-modal-loading strong { color: #304139; font-size: 14px; }
.portrait-modal-loading small { font-size: 10px; }
.portrait-modal-error { min-height: 300px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 32px; color: #8b5d54; text-align: center; }
.portrait-modal-error strong { font-size: 14px; }
.portrait-modal-error span { font-size: 11px; }

/* Customer detail modal */
.customer-detail-modal-overlay { align-items: flex-start; padding: 24px; overflow-x: hidden; overflow-y: auto; }
.customer-detail-modal {
  width: min(100%, 720px);
  max-width: 720px;
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(20,34,44,.24);
}
.customer-detail-modal > .modal-title {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 21px 26px 18px;
  border-bottom: 1px solid #e9eeec;
  color: #1f3029;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  font-size: 20px;
}
.customer-detail-modal .detail-card {
  margin: 18px 26px 0;
  border: 1px solid #e1e8e4;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.customer-detail-modal .detail-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid #eef2f0;
  background: #fafcfb;
  color: #293b33;
  font-size: 13px;
  font-weight: 700;
}
.customer-detail-modal .detail-card-header svg { width: 18px; height: 18px; fill: currentColor; }
.customer-detail-modal .detail-card-body { padding: 16px; }
.customer-detail-modal .detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #2b3c34;
  font-size: 13px;
  font-weight: 700;
}
.customer-detail-modal .detail-section-title svg { width: 18px; height: 18px; fill: currentColor; }
.customer-detail-modal .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.customer-detail-modal .detail-grid.compact { gap: 10px; }
.customer-detail-modal .detail-item { display: grid; gap: 4px; }
.customer-detail-modal .detail-item-label { color: #89948f; font-size: 11px; }
.customer-detail-modal .detail-item-value { color: #2b3c34; font-size: 12px; line-height: 1.5; word-break: break-word; }
.customer-detail-modal .detail-list { display: grid; gap: 8px; }
.customer-detail-modal .detail-list.compact { gap: 6px; }
.customer-detail-modal .detail-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f9f8;
}
.customer-detail-modal .detail-list-item > div { min-width: 0; }
.customer-detail-modal .detail-list-item > div > div:first-child { color: #34443c; font-size: 12px; font-weight: 650; }
.customer-detail-modal .detail-muted { color: #8e9a93; font-size: 11px; }
.customer-detail-modal .detail-empty { padding: 20px; border-radius: 10px; color: #8e9a93; background: #f7f9f8; font-size: 12px; text-align: center; }
.customer-detail-modal .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.customer-detail-modal .detail-tags .tag { padding: 4px 10px; border-radius: 999px; color: #2f7258; background: #e7f4ed; font-size: 11px; }
.customer-detail-modal .detail-id-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f0; color: #9aa49d; font-size: 11px; }
.customer-detail-modal .detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 26px 0;
}
.customer-detail-modal .raw-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 26px 0;
  padding: 11px 13px;
  border: 1px solid #e1e7e4;
  border-radius: 10px;
  color: #65746d;
  background: #f7f9f8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}
.customer-detail-modal .raw-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; transition: transform .18s ease; }
.customer-detail-modal .raw-toggle.open svg { transform: rotate(180deg); }
.customer-detail-modal .raw-panel {
  display: none;
  max-height: 360px;
  margin: 10px 26px 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid #dde5e1;
  border-radius: 10px;
  color: #4d5f56;
  background: #f5f8f6;
  font: 10px/1.65 Consolas, "SFMono-Regular", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.customer-detail-modal > .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 18px 0 0;
  padding: 14px 26px;
  border-top: 1px solid #e9eeec;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}

@media (max-width: 700px) {
  .customer-detail-modal-overlay { align-items: flex-end; padding: 0; }
  .customer-detail-modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .customer-detail-modal > .modal-title { padding: 18px 18px 15px; font-size: 18px; }
  .customer-detail-modal .detail-card { margin: 14px 14px 0; }
  .customer-detail-modal .detail-grid { grid-template-columns: 1fr; }
  .customer-detail-modal .detail-actions,
  .customer-detail-modal .raw-toggle,
  .customer-detail-modal .raw-panel { margin: 14px 14px 0; }
  .customer-detail-modal > .modal-actions { padding: 12px 14px; }
  .customer-detail-modal > .modal-actions .btn { flex: 1; min-height: 44px; }
}

/* Customer selector */
.customer-selector-modal-overlay { align-items: flex-start; padding: 24px; overflow-x: hidden; overflow-y: auto; }
.customer-selector-modal { width: min(100%, 760px); max-width: 760px; max-height: calc(100vh - 48px); padding: 0; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; box-shadow: 0 28px 80px rgba(20,34,44,.24); }
.customer-selector-modal > .modal-title { position: sticky; top: 0; z-index: 3; margin: 0; padding: 21px 24px 18px; border-bottom: 1px solid #e8edeb; color: #26362f; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); font-size: 20px; }
.customer-selector-modal > .form-group { padding: 20px 24px 4px; }
.customer-selector-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 160px 150px; gap: 9px; }
.customer-selector-search, .customer-selector-filter { width: 100%; min-width: 0; min-height: 40px; padding: 0 11px; border: 1px solid #dbe3df; border-radius: 9px; outline: 0; color: #33433b; background: #fff; font: inherit; font-size: 12px; }
.customer-selector-search:focus, .customer-selector-filter:focus { border-color: #4e9677; box-shadow: 0 0 0 3px rgba(44,126,91,.1); }
.customer-selector-count { margin: 13px 1px 8px; color: #77857e; font-size: 10px; }
.customer-selector-list { min-height: 260px; max-height: 420px; display: grid; align-content: start; gap: 7px; overflow-y: auto; padding: 6px; border: 1px solid #e2e8e5; border-radius: 12px; background: #f8faf9; }
.customer-selector-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid transparent; border-radius: 9px; color: #34433c; background: #fff; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.customer-selector-item:hover { border-color: #ceddd6; background: #fbfdfc; }
.customer-selector-item.selected { border-color: #9ecdb9; background: #eef8f3; box-shadow: inset 3px 0 0 #2d8664; }
.customer-selector-item input { width: 18px; height: 18px; margin: 0; accent-color: #25815f; cursor: pointer; }
.customer-selector-info { min-width: 0; }
.customer-selector-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #293a32; font-size: 12px; font-weight: 700; }
.customer-selector-phone { margin-top: 4px; overflow: hidden; color: #849088; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-selector-empty { min-height: 240px; display: grid; place-items: center; color: #87938d; font-size: 12px; text-align: center; }
.customer-selector-empty.error { color: #a95a4c; }
.customer-selector-pagination { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding-top: 10px; }
.customer-selector-modal > .modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 16px 0 0; padding: 14px 24px; border-top: 1px solid #e8edeb; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }

@media (max-width: 700px) {
  .portrait-modal-overlay { align-items: flex-end; padding: 0; }
  .portrait-modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .portrait-modal > .modal-title { padding: 18px 18px 15px; font-size: 18px; }
  .portrait-profile { padding: 18px; }
  .portrait-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
  .portrait-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
  .portrait-name { font-size: 18px; }
  .portrait-meta { grid-column: 1 / -1; min-width: 0; padding: 10px 0 0; border-top: 1px solid #dfe9e4; text-align: left; }
  .portrait-highlight-grid, .portrait-insight-grid { grid-template-columns: 1fr; }
  .portrait-section { margin: 0 14px 14px; padding: 14px; }
  .portrait-empty-panel { margin: 0 14px 14px; }
  .portrait-modal .raw-toggle { margin: 0 14px; }
  .portrait-modal .raw-panel { margin: 8px 14px 0; }
  .portrait-modal > .modal-actions { padding: 12px 14px; }
  .portrait-modal > .modal-actions .btn { flex: 1; min-height: 44px; }
  .customer-selector-modal-overlay { align-items: flex-end; padding: 0; }
  .customer-selector-modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .customer-selector-modal > .modal-title { padding: 18px 18px 15px; font-size: 18px; }
  .customer-selector-modal > .form-group { padding: 15px 14px 2px; }
  .customer-selector-filters { grid-template-columns: 1fr; }
  .customer-selector-list { min-height: 240px; max-height: 46vh; }
  .customer-selector-modal > .modal-actions { padding: 12px 14px; }
  .customer-selector-modal > .modal-actions .btn { flex: 1; min-height: 44px; }
}

body.business-modal-open { overflow: hidden; }

.business-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 30, 38, .52);
  backdrop-filter: blur(5px);
  animation: fadeIn .18s ease;
}

.business-modal {
  width: min(100%, 560px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(20, 34, 44, .24);
  animation: businessModalIn .22s ease;
}

@keyframes businessModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.business-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 25px 27px 20px;
  border-bottom: 1px solid #edf0f2;
  background: linear-gradient(145deg, #f8fbfa 0%, #fff 66%);
}

.business-modal-header > div > span {
  display: block;
  margin-bottom: 7px;
  color: #178a69;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.business-modal-header h3 { margin: 0; color: #1e2a32; font-size: 21px; line-height: 1.3; }
.business-modal-header p { margin: 7px 0 0; color: #74808a; font-size: 13px; line-height: 1.65; }

.business-modal-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  color: #7d878e;
  background: #f1f4f3;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.business-modal-close:hover { color: #25333b; background: #e7ecea; }
.business-modal-form { padding: 22px 27px 25px; }
.business-modal-fields { display: grid; gap: 16px; }
.business-modal-field { display: grid; gap: 7px; }
.business-modal-field > span { color: #38454d; font-size: 13px; font-weight: 650; }
.business-modal-field > span em { margin-left: 3px; color: #d9574f; font-style: normal; }

.business-modal-field input,
.business-modal-field textarea,
.business-modal-field select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #d9e0e3;
  border-radius: 10px;
  outline: none;
  color: #1f2c34;
  background: #fff;
  font: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.business-modal-field input:focus,
.business-modal-field textarea:focus,
.business-modal-field select:focus { border-color: #2a9a77; box-shadow: 0 0 0 3px rgba(42, 154, 119, .12); }
.business-modal-field.readonly input { color: #67737b; background: #f5f7f7; }
.business-modal-field small { color: #929ba1; font-size: 11px; line-height: 1.5; }
.business-modal-field.invalid input,
.business-modal-field.invalid textarea,
.business-modal-field.invalid select { border-color: #dd655d; box-shadow: 0 0 0 3px rgba(221, 101, 93, .1); }

.business-modal-shortcuts { margin-top: 17px; }
.business-modal-shortcuts > span { display: block; margin-bottom: 8px; color: #78848c; font-size: 11px; }
.business-modal-shortcuts > div { display: flex; flex-wrap: wrap; gap: 8px; }
.business-modal-shortcuts button {
  padding: 7px 11px;
  border: 1px solid #dce8e4;
  border-radius: 999px;
  color: #26775f;
  background: #f4faf8;
  font-size: 12px;
  cursor: pointer;
}
.business-modal-shortcuts button:hover,
.business-modal-shortcuts button:focus { border-color: #60b79b; background: #eaf7f2; outline: none; }

.business-modal-live-warning {
  display: flex;
  gap: 11px;
  margin-top: 19px;
  padding: 13px 14px;
  border: 1px solid #f1d6a5;
  border-radius: 12px;
  color: #815917;
  background: #fffaf0;
}
.business-modal-live-warning > i { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: #d99a2b; font-size: 12px; font-style: normal; font-weight: 800; }
.business-modal-live-warning strong,
.business-modal-live-warning span { display: block; }
.business-modal-live-warning strong { font-size: 12px; }
.business-modal-live-warning span { margin-top: 3px; font-size: 11px; line-height: 1.55; }
.business-modal-error { margin: 13px 0 0; color: #c3443d; font-size: 12px; }
.business-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.business-modal-confirm { min-width: 128px; }

@media (max-width: 600px) {
  .business-modal-backdrop { align-items: end; padding: 0; }
  .business-modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .business-modal-header { padding: 22px 20px 17px; }
  .business-modal-form { padding: 19px 20px 22px; }
  .business-modal-actions .btn { flex: 1; }
}

.agent-session-modal-status { padding: 12px 14px; border-radius: 10px; color: #6d7673; background: #f4f6f5; }
.agent-session-modal-status.ready { color: #146a4f; background: #eaf7f2; }
.agent-session-modal-status strong,
.agent-session-modal-status span { display: block; }
.agent-session-modal-status span { margin-top: 4px; font-size: 12px; line-height: 1.6; }
.agent-session-modal dl { margin: 16px 0; }
.agent-session-modal dl > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf0ee; }
.agent-session-modal dt { color: var(--text-muted); font-size: 12px; }
.agent-session-modal dd { margin: 0; color: var(--text-main); font-size: 12px; word-break: break-word; }
.agent-session-modal label { display: block; margin: 12px 0 6px; color: var(--text-muted); font-size: 12px; }
.agent-session-modal pre { margin: 0; padding: 12px; overflow-x: auto; border: 1px solid #dfe8e3; border-radius: 8px; color: #155b45; background: #f7fbf9; font-size: 11px; white-space: pre-wrap; word-break: break-all; }
.agent-session-modal p { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  background: var(--brand-bg);
  color: var(--brand-dark);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.tag button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #f5f5f5 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

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

.status-dot.online { background: var(--success); box-shadow: 0 0 0 3px rgba(82,196,26,0.15); }
.status-dot.offline { background: var(--text-muted); }

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px);
  padding: 40px 20px;
}

.login-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-hover);
}

.login-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
}

.login-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.qr-wrap {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.qr-wrap img {
  width: 220px;
  height: 220px;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 8px;
}

.qr-status {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 14px;
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.status-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}

.status-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.status-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.status-icon.green { background: var(--success-bg); color: var(--success); }
.status-icon.orange { background: var(--warning-bg); color: var(--warning); }
.status-icon.red { background: var(--error-bg); color: var(--error); }
.status-icon.blue { background: var(--info-bg); color: var(--info); }
.status-icon svg { width: 24px; height: 24px; fill: currentColor; }

.status-content { flex: 1; }

.status-content h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.status-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.status-content .status-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}

.hint-box {
  background: var(--brand-bg);
  border: 1px solid #ffd591;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--brand-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hint-box svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; margin-top: 1px; }

/* ==================== Unified Skills & Knowledge Library ==================== */
.workspace-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
  padding: 28px 30px;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #17243d, #21365e 62%, #315985);
  box-shadow: 0 16px 36px rgba(21,37,67,.16);
}

.knowledge-hero { background: linear-gradient(135deg, #113a2e, #17674f 62%, #49804f); }
.workspace-hero > div:first-child { max-width: 650px; }
.workspace-hero > div:first-child > span { color: rgba(255,255,255,.65); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.workspace-hero h2 { margin: 7px 0 5px; font-size: 30px; }
.workspace-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }
.workspace-stat-row { display: flex; flex: 0 0 auto; gap: 8px; }
.workspace-stat-row > div { min-width: 88px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.workspace-stat-row strong, .workspace-stat-row span { display: block; }
.workspace-stat-row strong { font-size: 22px; }
.workspace-stat-row span { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 9px; }

.skill-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.skill-toolbar strong, .skill-toolbar span { display: block; }
.skill-toolbar strong { font-size: 14px; }
.skill-toolbar span { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.skill-toolbar input { width: min(360px, 42vw); padding: 10px 13px; border: 1px solid var(--border); border-radius: 9px; outline: 0; font: inherit; }
.skill-toolbar input:focus { border-color: #315985; box-shadow: 0 0 0 3px rgba(49,89,133,.08); }

.skill-hub-layout {
  min-height: 680px;
  display: grid;
  grid-template-columns: 210px minmax(380px, 1fr) minmax(300px, .7fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.skill-package-list { padding: 10px; border-right: 1px solid var(--border); background: #f8fafc; }
.skill-package-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; margin-bottom: 7px; padding: 13px 12px; border: 0; border-radius: 10px; text-align: left; color: #485466; background: transparent; cursor: pointer; }
.skill-package-item:hover { background: #edf2f8; }
.skill-package-item.active { color: #1c4673; background: #e8f1fb; box-shadow: inset 3px 0 #315985; }
.skill-package-item span { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.skill-package-item em { min-width: 22px; padding: 2px 5px; border-radius: 10px; text-align: center; background: rgba(49,89,133,.1); font-size: 9px; font-style: normal; }
.skill-package-item small { grid-column: 1 / -1; color: #8a95a4; font-size: 8px; }
.skill-card-panel { min-width: 0; padding: 18px; overflow-y: auto; max-height: 780px; }
.skill-card-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.skill-card-panel > header strong, .skill-card-panel > header span { display: block; }
.skill-card-panel > header strong { font-size: 15px; }
.skill-card-panel > header span { margin-top: 4px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.skill-card-panel > header code { max-width: 44%; overflow: hidden; color: #8894a4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.skill-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skill-capability-card { min-height: 145px; padding: 15px; border: 1px solid #e4e9ef; border-radius: 13px; text-align: left; color: var(--text); background: #fff; cursor: pointer; transition: .18s ease; }
.skill-capability-card:hover { transform: translateY(-2px); border-color: #aac3df; box-shadow: 0 10px 22px rgba(34,66,104,.09); }
.skill-capability-card.active { border-color: #5f8bb7; background: #f5f9fe; box-shadow: inset 0 0 0 1px #5f8bb7; }
.skill-capability-card > div { display: flex; justify-content: space-between; gap: 10px; }
.skill-capability-card > div span { font-size: 12px; font-weight: 750; }
.skill-capability-card > div em { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; color: #315985; background: #e8f1fb; font-size: 8px; font-style: normal; }
.skill-capability-card p { min-height: 47px; margin: 10px 0; overflow: hidden; color: #758091; font-size: 9px; line-height: 1.65; }
.skill-capability-card footer { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-capability-card footer i { padding: 3px 6px; border-radius: 5px; color: #697687; background: #f0f3f6; font-size: 8px; font-style: normal; }
.skill-detail-panel { min-width: 0; overflow-y: auto; max-height: 780px; border-left: 1px solid var(--border); background: #fbfcfe; }
.skill-detail-heading { padding: 20px; border-bottom: 1px solid var(--border); background: #fff; }
.skill-detail-heading > span { color: #6f86a2; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.skill-detail-heading h3 { margin: 6px 0 7px; font-size: 18px; }
.skill-detail-heading p { margin: 0 0 14px; color: var(--text-muted); font-size: 10px; line-height: 1.6; }
.skill-markdown { padding: 20px; }

.markdown-view { color: #3e4a57; font-size: 11px; line-height: 1.75; }
.markdown-view h2, .markdown-view h3, .markdown-view h4 { margin: 20px 0 8px; color: #1f2d3c; }
.markdown-view h2 { font-size: 20px; }
.markdown-view h3 { font-size: 16px; }
.markdown-view h4 { font-size: 13px; }
.markdown-view p { margin: 7px 0; }
.markdown-view ul, .markdown-view ol { margin: 8px 0 8px 20px; padding: 0; }
.markdown-view li { margin: 4px 0; }
.markdown-view code { padding: 2px 5px; border-radius: 4px; color: #b54d20; background: #fff1eb; font-family: Consolas, monospace; font-size: .92em; }
.markdown-view pre, .code-view { margin: 12px 0; overflow: auto; padding: 15px; border: 1px solid #dfe6e9; border-radius: 10px; color: #dce7e2; background: #182421; font: 10px/1.6 Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.markdown-view pre code { padding: 0; color: inherit; background: transparent; }
.markdown-view blockquote { margin: 10px 0; padding: 9px 12px; border-left: 3px solid #4e9b7e; color: #5f736b; background: #eef8f4; }
.md-table-line { padding: 5px 8px; border-bottom: 1px solid #e8ecea; font-family: Consolas, monospace; font-size: 9px; }

.knowledge-layout { min-height: 720px; display: grid; grid-template-columns: 285px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.knowledge-tree-panel { border-right: 1px solid var(--border); background: #f7faf8; }
.knowledge-tree-panel > header { padding: 16px 17px; border-bottom: 1px solid var(--border); background: #fff; }
.knowledge-tree-panel > header strong, .knowledge-tree-panel > header span { display: block; }
.knowledge-tree-panel > header strong { font-size: 14px; }
.knowledge-tree-panel > header span { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.knowledge-tree { max-height: 780px; overflow: auto; padding: 9px 7px 20px; }
.knowledge-tree-folder { margin: 2px 0; }
.knowledge-tree-folder > summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 8px 8px 8px calc(8px + var(--tree-depth) * 12px); border-radius: 8px; color: #42534d; cursor: pointer; list-style: none; }
.knowledge-tree-folder > summary:hover { background: #eaf2ee; }
.knowledge-tree-folder > summary::-webkit-details-marker { display: none; }
.knowledge-tree-folder > summary span { color: #348064; font-size: 10px; }
.knowledge-tree-folder > summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-folder > summary em { padding: 2px 5px; border-radius: 8px; color: #779087; background: #e5eeea; font-size: 8px; font-style: normal; }
.knowledge-tree-file { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 7px 7px 7px calc(8px + var(--tree-depth) * 12px); border: 0; border-radius: 7px; text-align: left; color: #63726c; background: transparent; cursor: pointer; }
.knowledge-tree-file:hover { background: #edf4f1; }
.knowledge-tree-file.active { color: #17674f; background: #deefe7; box-shadow: inset 3px 0 #238463; }
.knowledge-tree-file > span { display: grid; place-items: center; color: #3c8a6d; font: 700 8px/1 Consolas, monospace; }
.knowledge-tree-file strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-file small { color: #9aa7a2; font-size: 7px; }
.knowledge-viewer { min-width: 0; max-height: 820px; overflow: auto; }
.knowledge-view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.knowledge-view-header > div > span { color: #438269; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.knowledge-view-header h3 { margin: 5px 0 4px; font-size: 18px; }
.knowledge-view-header p { margin: 0; color: var(--text-muted); font-size: 9px; }
.knowledge-view-header code { max-width: 48%; overflow: hidden; color: #8b9893; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-view-header > em { padding: 4px 7px; border-radius: 6px; color: #257254; background: #e3f2eb; font-size: 8px; font-style: normal; }
.knowledge-viewer > .markdown-view { padding: 22px 26px 40px; }
.knowledge-viewer > .code-view { margin: 20px 22px 30px; }
.json-summary { margin: 18px 22px -5px; color: #668078; font-size: 10px; }

.meeting-workbench { min-width: 0; background: #f7faf8; }
.meeting-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 0; }
.meeting-stat-row > div { padding: 11px 13px; border: 1px solid #e0ebe6; border-radius: 10px; background: #fff; }
.meeting-stat-row strong, .meeting-stat-row span { display: block; }
.meeting-stat-row strong { overflow: hidden; color: #285e4b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-stat-row span { margin-top: 3px; color: #8a9993; font-size: 8px; }
.meeting-cli-banner { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, auto) auto; align-items: center; gap: 10px; margin: 12px 18px; padding: 12px 14px; border: 1px solid; border-radius: 11px; }
.meeting-cli-banner.ready { border-color: #b9dfce; background: #edf8f3; }
.meeting-cli-banner.waiting { border-color: #efd2a2; background: #fff8eb; }
.meeting-cli-banner.blocked { border-color: #e8bea9; background: #fff3ed; }
.meeting-cli-banner > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; }
.meeting-cli-banner i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #d9952f; box-shadow: 0 0 0 3px rgba(217,149,47,.13); }
.meeting-cli-banner.ready i { background: #278263; box-shadow: 0 0 0 3px rgba(39,130,99,.13); }
.meeting-cli-banner.blocked i { background: #cf6748; box-shadow: 0 0 0 3px rgba(207,103,72,.13); }
.meeting-cli-banner strong { color: #44554e; font-size: 10px; }
.meeting-cli-banner span { grid-column: 2; color: #7d8d87; font-size: 8px; }
.meeting-cli-banner code { overflow: hidden; padding: 7px 9px; border-radius: 7px; color: #7a6543; background: rgba(255,255,255,.72); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-sync-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) 90px auto; align-items: end; gap: 8px; padding: 0 18px 14px; }
.meeting-sync-form label span { display: block; margin: 0 0 5px 2px; color: #75867f; font-size: 8px; font-weight: 700; }
.meeting-sync-form input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dbe6e1; border-radius: 8px; color: #43544d; background: #fff; font-size: 9px; }
.meeting-sync-form .btn { height: 34px; }
.meeting-browser { min-height: 520px; display: grid; grid-template-columns: 245px minmax(0, 1fr); border-top: 1px solid #dfe8e4; background: #fff; }
.meeting-browser > aside { border-right: 1px solid #e2ebe7; background: #f8fbf9; }
.meeting-browser > aside > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px 9px; color: #54665f; font-size: 9px; }
.meeting-browser > aside > header span { color: #91a09a; font-size: 8px; }
.meeting-list { max-height: 590px; overflow: auto; padding: 0 7px 14px; }
.meeting-list-item { width: 100%; margin: 3px 0; padding: 11px 10px; border: 1px solid transparent; border-radius: 10px; text-align: left; color: #52625c; background: transparent; cursor: pointer; }
.meeting-list-item:hover { border-color: #d9e7e1; background: #fff; }
.meeting-list-item.active { border-color: #bbdccf; background: #eaf6f0; box-shadow: inset 3px 0 #298264; }
.meeting-list-item > div, .meeting-list-item footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meeting-list-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-list-item em { flex: 0 0 auto; padding: 2px 5px; border-radius: 7px; color: #4d806d; background: #e2eee9; font-size: 7px; font-style: normal; }
.meeting-list-item p { margin: 6px 0; overflow: hidden; color: #85928d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.meeting-list-item footer { color: #8d9b96; font-size: 7px; }
.meeting-list-item footer small { color: #2d7d60; font-size: 7px; font-weight: 700; }
.meeting-browser > main { min-width: 0; }
.meeting-detail { padding: 18px 20px 34px; }
.meeting-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid #e6edea; }
.meeting-detail > header span, .meeting-analysis-summary > span, .meeting-actions header span { color: #348064; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.meeting-detail > header h3 { margin: 5px 0 4px; color: #33483f; font-size: 18px; }
.meeting-detail > header p { margin: 0; color: #82908b; font-size: 9px; }
.meeting-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 14px 0; }
.meeting-meta-grid > div { padding: 10px; border: 1px solid #e4ece8; border-radius: 9px; background: #fafcfb; }
.meeting-meta-grid small, .meeting-meta-grid strong { display: block; }
.meeting-meta-grid small { color: #92a09a; font-size: 7px; }
.meeting-meta-grid strong { margin-top: 4px; color: #50625a; font-size: 9px; }
.meeting-source-note { padding: 13px 14px; border-left: 3px solid #69a58d; border-radius: 0 9px 9px 0; background: #f3f8f6; }
.meeting-source-note strong { color: #476057; font-size: 9px; }
.meeting-source-note p { margin: 7px 0; color: #687a73; font-size: 9px; line-height: 1.65; }
.meeting-source-note small { color: #9aa6a1; font-size: 7px; }
.meeting-analysis-error { display: flex; gap: 8px; margin-top: 12px; padding: 11px 13px; border: 1px solid #edc2b2; border-radius: 9px; color: #91482e; background: #fff4ef; font-size: 8px; }
.meeting-analysis-summary { margin-top: 14px; padding: 14px; border: 1px solid #d7e7e0; border-radius: 11px; background: linear-gradient(135deg, #f0f8f4, #f8fbf9); }
.meeting-analysis-summary h4 { margin: 6px 0; color: #3e554c; font-size: 13px; line-height: 1.55; }
.meeting-analysis-summary p { margin: 0; color: #87958f; font-size: 8px; }
.meeting-analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.meeting-analysis-grid > section { padding: 12px 13px; border: 1px solid #e2ebe7; border-radius: 10px; background: #fff; }
.meeting-analysis-grid h4, .meeting-actions h4 { margin: 0 0 8px; color: #4b5e56; font-size: 10px; }
.meeting-analysis-grid ul { margin: 0; padding-left: 16px; color: #687972; font-size: 8px; line-height: 1.65; }
.meeting-empty-copy { margin: 0; color: #9aa7a2; font-size: 8px; line-height: 1.6; }
.meeting-actions { margin-top: 10px; padding: 13px; border: 1px solid #dce8e3; border-radius: 11px; background: #fbfdfc; }
.meeting-actions > header { display: flex; align-items: center; justify-content: space-between; }
.meeting-actions > header h4 { margin: 4px 0 8px; }
.meeting-actions > header > em { padding: 3px 6px; border-radius: 7px; color: #34785f; background: #e5f2ec; font-size: 8px; font-style: normal; }
.meeting-action-item { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 9px; background: #fff; box-shadow: 0 1px 6px rgba(33,73,58,.06); }
.meeting-action-item > i { width: 4px; border-radius: 4px; background: #d3a64d; }
.meeting-action-item > i.high { background: #d96b55; }
.meeting-action-item > i.low { background: #5d9f88; }
.meeting-action-item strong { color: #4b5d56; font-size: 9px; }
.meeting-action-item p { margin: 4px 0; color: #7c8b85; font-size: 8px; }
.meeting-action-item small { color: #98a49f; font-size: 7px; }
.meeting-action-item > em { color: #3c8468; font-size: 9px; font-style: normal; font-weight: 800; }
.meeting-tags { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: #596b64; font-size: 9px; }
.meeting-tags div { display: flex; flex-wrap: wrap; gap: 5px; }
.meeting-tags span { padding: 3px 7px; border-radius: 9px; color: #37775f; background: #e5f2ec; font-size: 7px; }

.office-workbench { min-width: 0; background: #f7faf8; }
.office-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 18px 0; }
.office-stat-row > div { padding: 11px 13px; border: 1px solid #e0ebe6; border-radius: 10px; background: #fff; }
.office-stat-row strong, .office-stat-row span { display: block; }
.office-stat-row strong { color: #285e4b; font-size: 15px; }
.office-stat-row span { margin-top: 3px; color: #8a9993; font-size: 8px; }
.office-cli-banner { display: flex; align-items: center; gap: 10px; margin: 12px 18px; padding: 11px 13px; border: 1px solid; border-radius: 10px; }
.office-cli-banner.ready { border-color: #b9dfce; background: #edf8f3; }
.office-cli-banner.blocked { border-color: #e8bea9; background: #fff3ed; }
.office-cli-banner > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #278263; box-shadow: 0 0 0 3px rgba(39,130,99,.12); }
.office-cli-banner.blocked > i { background: #cf6748; }
.office-cli-banner strong, .office-cli-banner span { display: block; }
.office-cli-banner strong { color: #455a51; font-size: 10px; }
.office-cli-banner span { margin-top: 3px; color: #7f8f89; font-size: 8px; }
.office-action-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; padding: 0 18px 14px; }
.office-action-grid form { padding: 13px; border: 1px solid #e0e9e5; border-radius: 11px; background: #fff; }
.office-action-grid form header { margin-bottom: 9px; }
.office-action-grid form header strong, .office-action-grid form header span { display: block; }
.office-action-grid form header strong { color: #506159; font-size: 10px; }
.office-action-grid form header span { margin-top: 3px; color: #92a09a; font-size: 8px; }
.office-action-grid input, .office-action-grid textarea, .todo-toolbar input, .todo-create-form input, .todo-create-form select { width: 100%; margin-bottom: 7px; padding: 8px 9px; border: 1px solid #dbe6e1; border-radius: 8px; color: #45564f; background: #fff; font: 9px/1.45 inherit; }
.office-action-grid textarea { resize: vertical; }
.office-browser { min-height: 500px; display: grid; grid-template-columns: 235px minmax(0, 1fr); border-top: 1px solid #dfe8e4; background: #fff; }
.office-browser > aside { padding: 8px; border-right: 1px solid #e2ebe7; background: #f8fbf9; }
.office-browser > aside > header { display: flex; justify-content: space-between; padding: 6px 5px 9px; color: #576861; font-size: 9px; }
.office-list-item { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; margin: 3px 0; padding: 10px; border: 1px solid transparent; border-radius: 9px; text-align: left; color: #56665f; background: transparent; cursor: pointer; }
.office-list-item:hover { border-color: #d8e6df; background: #fff; }
.office-list-item.active { border-color: #b9dccd; background: #e9f5ef; box-shadow: inset 3px 0 #288064; }
.office-list-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.office-list-item span { color: #94a19c; font-size: 7px; }
.office-list-item small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #2f7d60; font-size: 7px; }
.office-browser > main { min-width: 0; }
.doc-detail { padding: 18px 20px 35px; }
.doc-detail > header { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid #e5ece9; }
.doc-detail > header span, .doc-analysis > span, .todo-detail > span { color: #348064; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.doc-detail > header h3, .todo-detail h3 { margin: 5px 0; color: #364b42; font-size: 18px; }
.doc-detail > header p { margin: 0; color: #88968f; font-size: 8px; }
.doc-detail > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.doc-detail > header a { color: #287b5e; font-size: 8px; }
.doc-readback-warning { display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px solid #edcf9c; border-radius: 9px; color: #785b2b; background: #fff8eb; font-size: 8px; }
.doc-readback-warning strong { flex: 0 0 auto; }
.doc-analysis { margin: 13px 0; padding: 13px; border: 1px solid #d9e8e1; border-radius: 10px; background: #f2f8f5; }
.doc-analysis > h4 { margin: 6px 0 10px; color: #44594f; font-size: 12px; line-height: 1.5; }
.doc-analysis > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.doc-analysis section { padding: 9px; border-radius: 8px; background: #fff; }
.doc-analysis section strong { color: #566860; font-size: 8px; }
.doc-analysis ul { margin: 6px 0 0; padding-left: 15px; color: #74837d; font-size: 8px; line-height: 1.55; }
.doc-analysis section p { color: #9aa6a1; font-size: 8px; }
.doc-original { border: 1px solid #e1e9e5; border-radius: 10px; overflow: hidden; }
.doc-original > header { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e5ece9; color: #52645c; font-size: 9px; }
.doc-original > header span { color: #96a29d; font-size: 8px; }
.doc-original .markdown-view { max-height: 480px; overflow: auto; padding: 16px 18px; }
.todo-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 10px; }
.todo-toolbar form { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.todo-toolbar input { margin: 0; }
.todo-user-results { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.todo-user-results button { padding: 7px 10px; border: 1px solid #cfe2d9; border-radius: 8px; text-align: left; color: #4b6258; background: #fff; cursor: pointer; }
.todo-user-results strong, .todo-user-results span { display: block; font-size: 8px; }
.todo-user-results span { margin-top: 2px; color: #8e9b96; }
.todo-create-form { display: grid; grid-template-columns: 1.4fr 1fr 170px 120px auto; gap: 7px; padding: 0 18px 14px; }
.todo-create-form input, .todo-create-form select { margin: 0; }
.todo-detail { padding: 24px; }
.todo-detail .todo-status { display: inline-block; margin: 8px 0 14px; padding: 4px 8px; border-radius: 9px; color: #347a60; background: #e3f1eb; font-size: 8px; }
.todo-detail .todo-status.done { color: #71807a; background: #edf1ef; }
.todo-detail dl { display: grid; gap: 7px; margin: 0 0 16px; }
.todo-detail dl > div { display: grid; grid-template-columns: 75px minmax(0,1fr); padding: 9px 10px; border-radius: 8px; background: #f7faf8; font-size: 9px; }
.todo-detail dt { color: #8a9892; }
.todo-detail dd { margin: 0; color: #506159; }
.todo-detail > p { margin-top: 14px; color: #96a29d; font-size: 8px; }

.property-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 0; }
.property-stats > div { padding: 12px 13px; border: 1px solid #e1eae6; border-radius: 10px; background: #f8fbf9; }
.property-stats strong, .property-stats span { display: block; }
.property-stats strong { color: #17674f; font-size: 18px; }
.property-stats strong small { margin-left: 2px; font-size: 9px; }
.property-stats span { margin-top: 3px; color: #87958f; font-size: 8px; }
.property-filterbar { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(100px, .8fr)) minmax(100px, .7fr) auto; gap: 7px; padding: 12px 18px; }
.property-filterbar input, .property-filterbar select { min-width: 0; padding: 9px 10px; border: 1px solid #dce6e1; border-radius: 8px; outline: 0; color: #43514c; background: #fff; font: inherit; font-size: 9px; }
.property-filterbar input:focus, .property-filterbar select:focus { border-color: #399071; box-shadow: 0 0 0 3px rgba(57,144,113,.08); }
.property-browser-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 520px; border-top: 1px solid var(--border); }
.property-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 9px; padding: 15px; }
.property-card { min-height: 155px; padding: 13px; border: 1px solid #e0e8e4; border-radius: 12px; text-align: left; color: #34443e; background: #fff; cursor: pointer; transition: .16s ease; }
.property-card:hover { transform: translateY(-2px); border-color: #76ae98; box-shadow: 0 9px 18px rgba(42,91,72,.09); }
.property-card.active { border-color: #238463; background: #f0faf6; box-shadow: inset 0 0 0 1px #238463; }
.property-card > div { display: flex; justify-content: space-between; gap: 8px; }
.property-card > div span { color: #8a9892; font: 700 8px/1 Consolas, monospace; }
.property-card > div em { padding: 3px 6px; border-radius: 5px; color: #277257; background: #e6f4ee; font-size: 7px; font-style: normal; }
.property-card h4 { margin: 10px 0 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.property-card p { margin: 0; overflow: hidden; color: #7e8c86; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.property-card > strong { display: block; margin: 12px 0 9px; color: #e47822; font-size: 18px; }
.property-card > strong small { margin-left: 2px; font-size: 8px; }
.property-card footer { display: flex; flex-wrap: wrap; gap: 3px; }
.property-card footer i { padding: 3px 5px; border-radius: 4px; color: #718079; background: #f0f3f2; font-size: 7px; font-style: normal; }
.property-detail-panel { border-left: 1px solid var(--border); background: #fbfdfc; }
.property-detail-empty { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px; text-align: center; color: var(--text-muted); }
.property-detail-empty strong { color: #55665f; font-size: 13px; }
.property-detail-empty span { font-size: 9px; line-height: 1.55; }
.property-detail > header { padding: 20px; color: #fff; background: linear-gradient(145deg, #17674f, #2a8d6c); }
.property-detail > header > span { color: rgba(255,255,255,.62); font: 700 9px/1 Consolas, monospace; }
.property-detail > header h3 { margin: 7px 0 3px; font-size: 18px; }
.property-detail > header > strong { display: block; font-size: 27px; }
.property-detail > header > strong small { margin-left: 3px; font-size: 10px; }
.property-detail > header p { margin: 5px 0 0; color: rgba(255,255,255,.72); font-size: 9px; }
.property-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #e8eeeb; }
.property-detail-grid > div { padding: 10px 12px; background: #fff; }
.property-detail-grid small, .property-detail-grid strong { display: block; }
.property-detail-grid small { color: #95a19c; font-size: 7px; }
.property-detail-grid strong { margin-top: 3px; overflow: hidden; color: #485750; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.property-detail section { padding: 13px 16px; border-top: 1px solid #e7ecea; }
.property-detail section h4 { margin: 0 0 8px; color: #33463f; font-size: 10px; }
.property-detail section p { margin: 0; color: #74817c; font-size: 9px; line-height: 1.6; }
.property-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.property-tags span { padding: 4px 7px; border-radius: 6px; color: #28765a; background: #e6f4ee; font-size: 8px; }
.property-score-list { display: grid; gap: 7px; }
.property-score-list > div { display: grid; grid-template-columns: 52px 1fr 18px; align-items: center; gap: 6px; font-size: 8px; }
.property-score-list i { height: 4px; overflow: hidden; border-radius: 4px; background: #e4ebe8; }
.property-score-list b { display: block; height: 100%; border-radius: inherit; background: #4baa86; }
.property-score-list em { color: #7d8b85; font-style: normal; }
.library-empty, .library-error { padding: 35px; text-align: center; color: var(--text-muted); font-size: 11px; }
.library-empty.large { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.library-empty strong, .library-empty span { display: block; }
.library-empty strong { color: #53635d; font-size: 14px; }
.library-error { margin: 20px; border: 1px solid #efc7b6; border-radius: 12px; color: #934a2e; background: #fff4ef; }

@media (max-width: 1280px) {
  .skill-hub-layout { grid-template-columns: 190px minmax(360px, 1fr) 290px; }
  .property-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .property-browser-layout { grid-template-columns: minmax(0, 1fr) 285px; }
}

@media (max-width: 1050px) {
  .workspace-hero { align-items: stretch; flex-direction: column; }
  .skill-hub-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .skill-detail-panel { grid-column: 1 / -1; max-height: none; border-top: 1px solid var(--border); border-left: 0; }
  .knowledge-layout { grid-template-columns: 235px minmax(0, 1fr); }
  .meeting-cli-banner { grid-template-columns: 1fr auto; }
  .meeting-cli-banner code { grid-column: 1 / -1; }
  .meeting-browser { grid-template-columns: 210px minmax(0, 1fr); }
  .meeting-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .office-browser { grid-template-columns: 205px minmax(0, 1fr); }
  .todo-create-form { grid-template-columns: 1fr 1fr; }
  .property-browser-layout { display: block; }
  .property-detail-panel { border-top: 1px solid var(--border); border-left: 0; }
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-btn { display: block; }
  .content { padding: 20px 16px 40px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .account-name { display: none; }
  .topbar { padding: 0 16px; }
  .workspace-stat-row { flex-wrap: wrap; }
  .skill-toolbar { align-items: stretch; flex-direction: column; }
  .skill-toolbar input { width: 100%; }
  .skill-hub-layout, .knowledge-layout { display: block; }
  .skill-package-list { border-right: 0; border-bottom: 1px solid var(--border); }
  .skill-card-grid, .property-card-grid { grid-template-columns: 1fr; }
  .knowledge-tree-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .knowledge-tree { max-height: 330px; }
  .meeting-stat-row { grid-template-columns: repeat(2, 1fr); }
  .meeting-cli-banner, .meeting-sync-form, .meeting-browser { display: block; }
  .meeting-cli-banner code, .meeting-cli-banner .btn { display: block; width: 100%; margin-top: 8px; }
  .meeting-sync-form label, .meeting-sync-form .btn { display: block; width: 100%; margin-top: 8px; }
  .meeting-browser > aside { border-right: 0; border-bottom: 1px solid #e2ebe7; }
  .meeting-list { max-height: 260px; }
  .meeting-analysis-grid { grid-template-columns: 1fr; }
  .office-stat-row, .doc-analysis > div { grid-template-columns: 1fr; }
  .office-action-grid, .office-browser, .todo-toolbar, .todo-create-form { display: block; }
  .office-action-grid form, .todo-toolbar form, .todo-create-form input, .todo-create-form select, .todo-create-form .btn { margin-top: 8px; }
  .office-browser > aside { border-right: 0; border-bottom: 1px solid #e2ebe7; }
  .property-stats { grid-template-columns: repeat(2, 1fr); }
  .property-filterbar { grid-template-columns: 1fr; }
}

/* 社群运营 */
.group-ops-page { display: flex; flex-direction: column; gap: 20px; }
.group-ops-tabs { display: flex; gap: 6px; padding: 5px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-bg); box-shadow: var(--shadow); }
.group-ops-tabs button { min-height: 42px; padding: 9px 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .2s, background-color .2s; }
.group-ops-tabs button:hover, .group-ops-tabs button:focus-visible { color: var(--brand); background: var(--brand-bg); outline: none; }
.group-ops-tabs button.active { color: #873800; background: #fff1d6; box-shadow: inset 0 0 0 1px #ffd591; }
.group-ops-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border: 1px solid #ffd8a8; border-radius: var(--radius-md);
  background: linear-gradient(120deg, #fff7e6 0%, #fff 68%); box-shadow: var(--shadow);
}
.group-ops-hero h2 { margin: 4px 0 6px; color: var(--text-primary); font-size: 24px; }
.group-ops-hero p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.group-ops-kicker { color: #ad4e00; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.group-ops-stats { margin-bottom: 0; grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.group-ops-stats .stat-card { text-align: left; }
.group-ops-stats .stat-card.danger .stat-value { color: var(--error); }
.group-ops-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; }
.group-ops-builder, .group-ops-risks, .group-ops-workbench { padding: 20px; }
.group-ops-form { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px; background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
.group-ops-form label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.group-ops-form input, .group-ops-form textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-bg); color: var(--text-primary); font: inherit; resize: vertical; }
.group-ops-form input:focus, .group-ops-form textarea:focus { outline: 3px solid rgba(250, 140, 22, .16); border-color: var(--brand); }
.group-ops-form .btn { grid-column: 2; justify-self: start; min-height: 40px; }
.group-ops-plan-form { margin-top: 16px; }
.group-ops-playbooks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.group-ops-playbooks article { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.group-ops-playbooks article > div { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.group-ops-playbooks article span { color: var(--text-muted); font-size: 12px; }
.group-ops-list { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; }
.group-ops-risk { display: flex; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius-sm); }
.group-ops-risk.high { border-left-color: var(--error); background: var(--error-bg); }
.group-ops-risk > div:first-child { min-width: 0; }
.group-ops-risk p { margin: 5px 0; color: var(--text-secondary); font-size: 13px; }
.group-ops-risk small { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.group-ops-risk > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.group-ops-copy { min-width: 260px; max-width: 520px; white-space: normal; line-height: 1.6; }
.group-ops-workbench .table-wrap { max-width: 100%; }
.group-ops-workbench table { min-width: 880px; }
.group-ops-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page-bg); }
.group-ops-inline-form label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.group-ops-inline-form input, .group-ops-inline-form select { min-height: 40px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-bg); color: var(--text-primary); font: inherit; }
.group-ops-inline-form input:focus, .group-ops-inline-form select:focus { border-color: var(--brand); outline: 3px solid rgba(250,140,22,.16); }
.group-ops-quality-form input { min-width: 180px; flex: 1; }
.group-ops-task-list { display: flex; flex-direction: column; gap: 8px; }
.group-ops-task-list article { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.group-ops-task-list article > div { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.group-ops-task-list article span { color: var(--text-muted); font-size: 12px; }
.group-ops-automation { padding: 20px; border-color: #ffd591; }
.group-ops-automation-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.group-ops-automation-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; }
.group-ops-time-window { display: flex; align-items: center; gap: 8px; }
.group-ops-time-window input { min-width: 0; }
.group-ops-automation-summary { padding: 18px; border: 1px solid #ffd591; border-radius: var(--radius-md); background: #fffaf0; }
.group-ops-automation-summary h4 { margin: 0 0 14px; color: var(--text-primary); font-size: 16px; }
.group-ops-automation-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.group-ops-automation-summary dl div { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-bg); }
.group-ops-automation-summary dt { color: var(--text-muted); font-size: 12px; }
.group-ops-automation-summary dd { margin: 4px 0 0; color: var(--text-primary); font-weight: 700; }
.group-ops-automation-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.group-ops-automation-log-header { margin-top: 22px; }

@media (max-width: 1100px) {
  .group-ops-stats { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .group-ops-grid { grid-template-columns: 1fr; }
  .group-ops-automation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .group-ops-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
  .group-ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-ops-form { grid-template-columns: 1fr; }
  .group-ops-form .btn { grid-column: 1; width: 100%; }
  .group-ops-builder, .group-ops-risks, .group-ops-workbench { padding: 14px; }
  .group-ops-inline-form { align-items: stretch; flex-direction: column; }
  .group-ops-inline-form input, .group-ops-inline-form select, .group-ops-inline-form .btn { width: 100%; }
  .group-ops-task-list article { align-items: flex-start; flex-wrap: wrap; }
  .group-ops-time-window { flex-wrap: wrap; }
  .group-ops-automation-summary dl { grid-template-columns: 1fr; }
  .group-ops-automation-actions .btn { width: 100%; }
}

/* 社群运营：对齐客户群、画像与交接工作台的视觉语言 */
.group-ops-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.group-ops-page .group-ops-hero {
  min-height: 158px;
  margin: 0;
  padding: 26px 30px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #172d4f, #294d7e 62%, #507fa3);
  box-shadow: 0 16px 36px rgba(21, 45, 79, .16);
}

.group-ops-page .group-ops-hero::before,
.group-ops-page .group-ops-hero::after {
  position: absolute;
  z-index: -1;
  content: '';
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  pointer-events: none;
}

.group-ops-page .group-ops-hero::before { width: 270px; height: 270px; top: -195px; right: 250px; }
.group-ops-page .group-ops-hero::after { width: 220px; height: 220px; right: -82px; bottom: -162px; }
.group-ops-page .group-ops-hero h2 { margin: 7px 0 5px; color: #fff; font-size: 30px; }
.group-ops-page .group-ops-hero p { max-width: 610px; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }

.group-ops-hero-side { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.group-ops-hero-status { display: flex; gap: 8px; }
.group-ops-hero-status > span {
  min-width: 76px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.08);
  font-size: 9px;
  text-align: left;
  backdrop-filter: blur(10px);
}
.group-ops-hero-status strong { display: block; margin-bottom: 3px; color: #fff; font-size: 20px; line-height: 1; }
.group-ops-hero-status .is-risk { border-color: rgba(255,183,178,.34); background: rgba(170,48,48,.2); }
.group-ops-refresh { min-height: 44px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.12); box-shadow: none; backdrop-filter: blur(10px); }
.group-ops-refresh:hover { background: rgba(255,255,255,.2); }
.group-ops-refresh:focus-visible { outline: 3px solid rgba(255,255,255,.38); outline-offset: 2px; }

.group-ops-page .group-ops-tabs {
  gap: 3px;
  margin: 0;
  padding: 5px;
  border-color: #e1e7ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(28,45,59,.035);
  scrollbar-width: thin;
}
.group-ops-page .group-ops-tabs button { min-height: 44px; flex: 1 0 auto; padding: 9px 15px; color: #6f7c84; font-size: 12px; font-weight: 650; }
.group-ops-page .group-ops-tabs button:hover { color: #294d7e; background: #f2f6fa; }
.group-ops-page .group-ops-tabs button:focus-visible { color: #294d7e; outline: 2px solid #6f93b5; outline-offset: -2px; }
.group-ops-page .group-ops-tabs button.active { color: #23496f; background: #eaf1f7; box-shadow: inset 0 0 0 1px #d2e0eb; }

.group-ops-page .group-ops-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
.group-ops-page .group-ops-stats .kpi-card { min-height: 108px; }
.group-ops-page .group-ops-stats .kpi-card.danger { border-color: #f0d4d0; background: linear-gradient(145deg, #fff, #fff8f7); }
.group-ops-page .group-ops-stats .kpi-card.danger .kpi-value { color: #bd5149; }

.group-ops-page > .card {
  min-width: 0;
  margin: 0;
  padding: 17px;
  overflow: hidden;
  border-color: #e1e7ea;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28,45,59,.04);
  transform: none;
}
.group-ops-page > .card:hover { box-shadow: 0 10px 28px rgba(28,45,59,.06); }
.group-ops-page > .card > .card-header { margin-bottom: 13px; padding: 0; }
.group-ops-page > .card > .card-header h3 { margin: 0; color: #2b3b43; font-size: 13px; }
.group-ops-page > .card > .card-header p { margin: 4px 0 0; color: #8b969c; font-size: 10px; line-height: 1.55; }
.group-ops-page > .card > .card-header > span { color: #7d898f; font-size: 10px; }
.group-ops-page .table-wrap { max-width: 100%; border-color: #e4e9ec; border-radius: 10px; }
.group-ops-page table { min-width: 820px; }
.group-ops-page th { padding: 10px 12px; color: #78848b; background: #f7f9fa; font-size: 10px; letter-spacing: .02em; }
.group-ops-page td { padding: 11px 12px; color: #4b5b63; }
.group-ops-page tbody tr:hover { background: #fafcfd; }

.group-ops-page .group-ops-form,
.group-ops-page .group-ops-inline-form {
  gap: 11px 14px;
  margin-bottom: 14px;
  padding: 15px;
  border-color: #e2e7ea;
  border-radius: 11px;
  background: #f8fafb;
}
.group-ops-page .group-ops-form label,
.group-ops-page .group-ops-inline-form label { color: #66747b; font-size: 11px; }
.group-ops-page .group-ops-form input,
.group-ops-page .group-ops-form textarea,
.group-ops-page .group-ops-inline-form input,
.group-ops-page .group-ops-inline-form select { min-height: 42px; border-color: #dce3e7; border-radius: 9px; background: #fff; font-size: 12px; }
.group-ops-page .group-ops-form input:focus,
.group-ops-page .group-ops-form textarea:focus,
.group-ops-page .group-ops-inline-form input:focus,
.group-ops-page .group-ops-inline-form select:focus { border-color: #6f93b5; outline: 3px solid rgba(55,100,140,.11); }
.group-ops-page .group-ops-form .btn,
.group-ops-page .group-ops-inline-form .btn { min-height: 42px; }

.group-ops-playbooks article,
.group-ops-task-list article,
.group-ops-risk { border-color: #e2e7ea; border-radius: 10px; background: #fff; }
.group-ops-playbooks article:hover,
.group-ops-task-list article:hover { border-color: #cedbe3; background: #fafcfd; }
.group-ops-task-list article { min-height: 54px; }
.group-ops-risk { padding: 13px 14px; border-left-width: 3px; }
.group-ops-risk.high { border-color: #f0d4d0; border-left-color: #ca5b52; background: #fff9f8; }
.group-ops-risk > div:last-child { flex-flow: row wrap; justify-content: flex-end; }

.group-ops-page .group-ops-automation { border-color: #e1e7ea; }
.group-ops-automation-summary { border-color: #dbe5eb; border-radius: 11px; background: #f4f8fb; }
.group-ops-automation-summary dl div { border-color: #e0e7eb; border-radius: 9px; }
.group-ops-automation-log-header { padding-top: 20px !important; border-top: 1px solid #e7ecef; }

@media (max-width: 1180px) {
  .group-ops-page .group-ops-hero { align-items: flex-start; flex-direction: column; }
  .group-ops-hero-side { width: 100%; justify-content: space-between; }
  .group-ops-page .group-ops-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .group-ops-page { gap: 12px; }
  .group-ops-page .group-ops-hero { min-height: 0; padding: 20px; border-radius: 16px; }
  .group-ops-page .group-ops-hero h2 { font-size: 25px; }
  .group-ops-hero-side { align-items: stretch; flex-direction: column; }
  .group-ops-hero-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group-ops-hero-status > span { min-width: 0; padding: 10px; }
  .group-ops-refresh { width: 100%; }
  .group-ops-page .group-ops-tabs button { flex: 0 0 auto; }
  .group-ops-page .group-ops-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-ops-page .group-ops-stats .kpi-card { min-height: 98px; padding: 13px; }
  .group-ops-page > .card { padding: 14px; }
  .group-ops-risk > div:last-child { width: 100%; align-items: stretch; }
}

/* ==================== Customer Operations Workspaces ==================== */
.customer-workspace-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.customer-workspace-hero {
  position: relative;
  isolation: isolate;
  margin-bottom: 0;
  min-height: 150px;
  align-items: center;
}

.customer-workspace-hero::before,
.customer-workspace-hero::after {
  position: absolute;
  z-index: -1;
  content: '';
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  pointer-events: none;
}

.customer-workspace-hero::before { width: 260px; height: 260px; top: -190px; right: 240px; }
.customer-workspace-hero::after { width: 210px; height: 210px; right: -80px; bottom: -155px; }
.group-hero { background: linear-gradient(135deg, #153449, #215b70 62%, #428090); }
.portrait-dashboard-hero { background: linear-gradient(135deg, #123c32, #1d7156 62%, #5b8d59); }
.transfer-dashboard-hero { background: linear-gradient(135deg, #172d4f, #294d7e 62%, #5179a8); }

.hero-feature-list {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 330px;
}

.hero-feature-list span {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.handover-flow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.handover-flow span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8); font-size: 10px; white-space: nowrap; }
.handover-flow b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); font-size: 10px; }
.handover-flow i { width: 22px; height: 1px; background: rgba(255,255,255,.25); }

/* Group management */
.group-stat-row > div { min-width: 100px; }
.group-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e2e7ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(27,49,65,.055);
}

.group-sync-panel { min-width: 0; padding: 18px; border-right: 1px solid #e6ebee; background: #f8fafb; }
.group-list-panel { min-width: 0; padding: 18px; }
.group-sync-card,
.group-filter-card,
.group-list-panel #groups-table-card > .card { margin: 0; box-shadow: none; }
.group-sync-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.group-sync-card:hover,
.group-filter-card:hover,
.group-list-panel #groups-table-card > .card:hover { box-shadow: none; }
.group-sync-card .card-header { margin-bottom: 16px; }
.group-sync-fields { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
.group-sync-fields .form-group { min-width: 0; }
.field-help { margin-top: -2px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.advanced-settings { margin: 14px 0; border: 1px solid #dfe6e9; border-radius: 10px; background: #fff; }
.advanced-settings summary { padding: 10px 12px; color: #4c5c64; font-size: 11px; font-weight: 650; cursor: pointer; }
.advanced-settings summary::marker { color: #6c8793; }
.advanced-settings-body { display: grid; gap: 12px; padding: 0 12px 12px; }
.advanced-settings textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.group-auto-classify { margin: 0 0 14px; }
.group-primary-action { width: 100%; }
.group-sync-card .progress-wrap { margin-bottom: 0; }

.operation-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid #cfe4dc;
  border-radius: 11px;
  color: #315f50;
  background: #f2faf6;
}

.operation-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; fill: #2f8565; }
.operation-note div { display: grid; gap: 2px; }
.operation-note strong { font-size: 11px; }
.operation-note span { color: #6e8078; font-size: 10px; line-height: 1.5; }
.group-filter-card { padding: 14px 15px; border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.group-filter-card .card-header { align-items: flex-end; margin: 0; }
.group-filter-card .filter-bar { justify-content: flex-end; }
.group-filter-card .filter-bar input { width: 170px; }
.group-list-panel #groups-table-card > .card { border-radius: 0 0 12px 12px; }
.group-list-panel #groups-table-card table { min-width: 920px; }
.group-list-panel #groups-table-card th,
.group-list-panel #groups-table-card td { padding: 11px 12px; }

/* Shared dashboard composition */
.dashboard-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.kpi-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.kpi-card {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid #e2e7ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(28,45,59,.045);
}

.kpi-label { overflow: hidden; color: #748089; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-value { margin-top: 6px; color: #1e3139; font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kpi-sub { margin-top: 6px; overflow: hidden; color: #98a1a6; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.kpi-trend.up { color: #25845e; }
.kpi-trend.down { color: #ca5b52; }

.chart-card {
  grid-column: span 3;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e7ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(28,45,59,.04);
}

.chart-card.third { grid-column: span 2; }
.chart-card.full { grid-column: 1 / -1; }
.chart-title { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 17px; border-bottom: 1px solid #edf0f2; color: #2b3b43; font-size: 12px; }
.chart-subtitle { color: #919aa0; font-size: 9px; font-weight: 400; }
.chart-container { width: 100%; height: 238px; padding: 4px; }
.chart-container.small { height: 220px; }
.empty-chart { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9aa3a8; font-size: 10px; }

.operation-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #e1e7ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(28,45,59,.035);
}

.toolbar-left,
.toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.data-table-card {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 17px;
  overflow: hidden;
  border: 1px solid #e1e7ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28,45,59,.04);
}

.data-table-card > .card-header { margin-bottom: 13px; }
.data-table-card .filter-bar { margin-bottom: 13px !important; }
.data-table-card .table-wrap { max-width: 100%; border-radius: 10px; }
.data-table-card table { min-width: 820px; }
.data-table-card th,
.data-table-card td { padding: 11px 12px; }
.data-table-card .tag { margin: 2px; }

.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 13px; color: #7d888e; font-size: 10px; }
.pagination span { margin-right: auto; }
.pagination button { min-height: 32px; padding: 0 12px; border: 1px solid #dfe5e8; border-radius: 8px; color: #58666d; background: #fff; cursor: pointer; }
.pagination button:hover:not(:disabled) { color: var(--brand-dark); border-color: #f0b879; background: #fff9f1; }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }

.loading-overlay { position: relative; min-height: 120px; }
.loading-spinner { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px; border: 3px solid #e7ecef; border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; }
.table-skeleton,
.skeleton-list { display: grid; gap: 12px; padding: 18px 4px; }
.skeleton { position: relative; overflow: hidden; border-radius: 6px; background: #edf1f3; }
.skeleton::after { position: absolute; inset: 0; content: ''; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: dashboardShimmer 1.35s infinite; }
.skeleton-line { height: 30px; }
@keyframes dashboardShimmer { to { transform: translateX(100%); } }

.error-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; text-align: center; }
.error-state svg { width: 36px; height: 36px; fill: #e08865; }
.error-state-title { color: #784733; font-size: 13px; font-weight: 700; }
.error-state-desc { max-width: 420px; color: #8a7770; font-size: 10px; line-height: 1.55; }

/* Transfer stage conversion card */
.transfer-stage-board {
  min-height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 17px;
}

.transfer-stage-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.transfer-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 7px;
  border: 1px solid #e2e8ec;
  border-radius: 12px;
  text-align: center;
  background: #f9fbfc;
}

.transfer-stage.preview { border-color: #dce6f0; background: #f5f8fc; }
.transfer-stage.execution { border-color: #f1dfcb; background: #fff9f2; }
.transfer-stage.success { border-color: #cfe7dc; background: #f2faf6; }
.transfer-stage-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #527494; background: #e7eef5; }
.transfer-stage.execution .transfer-stage-icon { color: #b46b25; background: #fbeddd; }
.transfer-stage.success .transfer-stage-icon { color: #27805d; background: #dff1e8; }
.transfer-stage-icon svg { width: 18px; height: 18px; fill: currentColor; }
.transfer-stage > div:last-child { min-width: 0; }
.transfer-stage span,
.transfer-stage strong,
.transfer-stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-stage span { color: #77858d; font-size: 8px; font-weight: 650; }
.transfer-stage strong { margin-top: 4px; color: #21343d; font-size: 22px; line-height: 1; }
.transfer-stage small { margin-top: 4px; color: #929ca2; font-size: 8px; }

.transfer-stage-connector { min-width: 0; display: grid; justify-items: center; gap: 3px; text-align: center; }
.transfer-stage-connector strong { color: #52636c; font-size: 11px; }
.transfer-stage-connector span { color: #9aa3a8; font-size: 7px; white-space: nowrap; }
.transfer-stage-connector i,
.transfer-overall-progress > i { width: 100%; height: 4px; overflow: hidden; border-radius: 999px; background: #e7ecef; }
.transfer-stage-connector b,
.transfer-overall-progress > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d86b1, #51a480); transition: width .3s ease; }

.transfer-overall-progress { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #f6f8fa; }
.transfer-overall-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transfer-overall-progress span { color: #5f6f77; font-size: 9px; font-weight: 650; }
.transfer-overall-progress strong { color: #274f67; font-size: 13px; }
.transfer-overall-progress small { overflow: hidden; color: #8b979d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .group-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-card.third { grid-column: span 3; }
  .handover-flow { max-width: 380px; flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .customer-workspace-hero { align-items: flex-start; flex-direction: column; }
  .hero-feature-list { justify-content: flex-start; }
  .group-workspace { display: block; }
  .group-sync-panel { border-right: 0; border-bottom: 1px solid #e6ebee; }
  .group-sync-fields { grid-template-columns: minmax(0, 1fr) 110px; }
  .chart-card,
  .chart-card.third { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .customer-workspace-hero { min-height: 0; padding: 22px; }
  .customer-workspace-hero h2 { font-size: 25px; }
  .group-stat-row { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group-stat-row > div { min-width: 0; padding: 10px; }
  .group-list-panel,
  .group-sync-panel { padding: 13px; }
  .group-sync-fields,
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .operation-toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-left,
  .toolbar-right { width: 100%; }
  .toolbar-left .btn { flex: 1 1 auto; }
  .handover-flow i { display: none; }
  .data-table-card { padding: 13px; }
  .data-table-card .filter-bar input,
  .data-table-card .filter-bar select,
  .group-filter-card .filter-bar input,
  .group-filter-card .filter-bar select { width: 100% !important; }
  .transfer-stage-board { padding: 14px; }
  .transfer-stage-track { grid-template-columns: 1fr; gap: 7px; }
  .transfer-stage { grid-template-columns: 34px minmax(0, 1fr); justify-items: stretch; align-items: center; padding: 10px 12px; text-align: left; }
  .transfer-stage-connector { grid-template-columns: 42px 1fr; justify-items: stretch; align-items: center; padding: 0 12px; text-align: left; }
  .transfer-stage-connector span { display: none; }
  .transfer-stage-connector i { height: 3px; }
}