/* ============================================================
   MedAI 医美质检系统 · 全局样式
   Bitidea Design System · 冷调医疗专业 · 墨绿主色
   ============================================================ */

:root {
  --c-primary-900: #143B39;
  --c-primary:     #1B4D4B;
  --c-primary-100: #E8F0EF;
  --c-primary-50:  #F4F8F7;

  --c-text:        #182423;
  --c-text-2:      #566463;
  --c-text-3:      #9DA9A7;
  --c-border:      #E4EAEA;
  --c-border-soft: #EEF2F1;
  --c-bg:          #F4F6F6;
  --c-surface:     #FFFFFF;

  --c-danger:    #B0402F;  --c-danger-bg:  #F7E9E6;
  --c-warn:      #9A6E20;  --c-warn-bg:    #F6EEDE;
  --c-info:      #3A66A8;  --c-info-bg:    #EAF0F6;
  --c-success:   #2E7A66;  --c-success-bg: #E4F0EC;

  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   16px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px;

  --shadow-card:    0 1px 2px rgba(0,0,0,.05);
  --shadow-primary: 0 2px 8px -2px rgba(27,77,75,.5);
  --shadow-float:   0 10px 40px -16px rgba(20,40,38,.22);

  --font: 'Manrope','PingFang SC','Microsoft YaHei','Source Han Sans SC',-apple-system,system-ui,sans-serif;
}

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

html { min-width: 320px; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }

/* ─── 数字等宽 ─── */
.tnum, [data-num], strong[id$="Count"], strong[id$="Score"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ─── 登录弹层 ─── */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(244,246,246,.92);
  backdrop-filter: blur(6px);
}
.login-screen[hidden] { display: none; }

.login-panel {
  display: grid;
  gap: 18px;
  width: min(440px, 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-border-soft);
}
.login-panel h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.login-panel > p, .login-hint {
  margin: 0;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.6;
}
.login-hint.error { color: var(--c-danger); font-weight: 700; }

/* ─── 顶栏 ─── */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: relative;
  z-index: 10;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--c-primary);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  flex: none;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; }
.brand-text span { font-size: 11px; color: var(--c-text-3); font-weight: 500; }

.topbar-sep {
  width: 1px;
  height: 26px;
  background: var(--c-border);
  flex: none;
  margin: 0 4px;
}

/* 角色分段控件 */
.role-tabs {
  display: flex;
  align-items: center;
  background: #F1F4F4;
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  flex: none;
}
.role-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.role-tab.active {
  background: var(--c-surface);
  color: var(--c-primary);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
.role-tab:not(.active):hover { background: rgba(255,255,255,.6); color: var(--c-text); }
.role-tab svg { width: 14px; height: 14px; }

.topbar-spacer { flex: 1; }

.topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── 应用主体 ─── */
.app-body {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  overflow: hidden;
  height: 100%;
}

/* ─── 侧边栏 ─── */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 16px 12px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  gap: 2px;
}

.nav-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-3);
  padding: 10px 10px 6px;
}
.nav-group-label:first-child { padding-top: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: var(--r-md);
  padding: 9px 12px;
  background: transparent;
  color: var(--c-text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; color: inherit; }
.nav-item .nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--c-danger-bg);
  color: var(--c-danger);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}
.nav-item:hover { background: #EEF2F2; color: var(--c-text); }
.nav-item.active {
  background: var(--c-primary-100);
  color: var(--c-primary);
  font-weight: 600;
}
.nav-item[hidden] { display: none; }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-soft);
}
.sidebar-note {
  background: var(--c-primary-50);
  border: 1px solid #E2ECEA;
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
.sidebar-note .sidebar-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 4px;
}
.sidebar-note .sidebar-note-head svg { width: 14px; height: 14px; }
.sidebar-note p {
  margin: 0;
  font-size: 11.5px;
  color: var(--c-text-3);
  line-height: 1.55;
}

/* ─── 主内容区 ─── */
.main {
  height: 100%;
  overflow-y: auto;
  padding: 26px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 页面标题行 */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.page-eyebrow {
  margin: 0 0 4px;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.page-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ─── 按钮 ─── */
.primary-button, .ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .12s, box-shadow .12s;
  white-space: nowrap;
}
.primary-button {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.primary-button:hover { background: var(--c-primary-900); }
.ghost-button {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text);
}
.ghost-button:hover { background: #F1F5F4; border-color: #D3DEDD; }
.primary-button:disabled, .ghost-button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.primary-button svg, .ghost-button svg { width: 14px; height: 14px; }

/* 登录按钮复用 */
.login-panel .primary-button { min-height: 42px; font-size: 14px; }

/* 状态胶囊 */
.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-3);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.connection-pill.online {
  border-color: rgba(46,122,102,.28);
  background: var(--c-success-bg);
  color: var(--c-success);
}
.connection-pill.fallback {
  border-color: rgba(154,110,32,.24);
  background: var(--c-warn-bg);
  color: var(--c-warn);
}
.connection-pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(46,122,102,.16);
}

/* ─── 表单元素 ─── */
label {
  display: grid;
  gap: 6px;
  color: var(--c-text-2);
  font-size: 12.5px;
  font-weight: 700;
}
select, input, textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
select, input { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
textarea { resize: vertical; padding: 10px 12px; line-height: 1.6; font-size: 13.5px; }
select:focus, input:focus, textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(27,77,75,.1);
}
input[type="search"] {
  background: #F6F8F8;
  border-color: #E7EDEC;
}
input[type="search"]:focus { background: var(--c-surface); }
::placeholder { color: var(--c-text-3); }

/* ─── 卡片 / 面板 ─── */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.panel-header h2, .panel-header h3 { margin: 0; letter-spacing: -.01em; }
.panel-header h2 { font-size: 17px; font-weight: 700; }
.panel-header h3 { font-size: 14.5px; font-weight: 700; }
.panel-header p {
  margin: 4px 0 0;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.55;
}

/* ─── KPI 卡片 ─── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.metric > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.metric > strong {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.metric > small {
  display: block;
  font-size: 12px;
  color: var(--c-text-3);
}

/* ─── AI 洞察面板 ─── */
.ai-insight-panel {
  background: var(--c-surface);
  border: 1px solid rgba(27,77,75,.18);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
}
.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 12px;
}
.insight-grid > div {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  padding: 13px 14px;
  background: var(--c-bg);
}
.insight-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 700;
}
.insight-grid ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.6;
}
.ai-value-line {
  display: block;
  margin: 0;
  border-left: 3px solid var(--c-primary);
  padding: 9px 13px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-primary-50);
  color: var(--c-primary-900);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

/* ─── 严重违规待办 ─── */
.critical-todo-panel { display: grid; gap: 0; }
.critical-todo-list { display: grid; gap: 10px; }
.critical-todo-item {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(176,64,47,.22);
  border-radius: var(--r-lg);
  padding: 13px 14px;
  background: var(--c-surface);
  transition: background .1s;
}
.critical-todo-item.done {
  border-color: var(--c-border);
  background: var(--c-bg);
  opacity: .75;
}
.critical-todo-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.critical-todo-main strong { display: block; font-size: 14px; font-weight: 700; }
.critical-todo-main span { display: block; color: var(--c-text-2); font-size: 12.5px; margin-top: 2px; }
.critical-todo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.critical-todo-meta span { color: var(--c-text-2); font-size: 12.5px; }
.critical-todo-item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--c-text); }
.critical-todo-note { color: var(--c-text-2) !important; font-size: 12.5px !important; }

/* ─── 质检主从布局 ─── */
.workspace {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(400px, 1.1fr);
  gap: 16px;
}
.conversation-list {
  display: grid;
  gap: 8px;
  max-height: 580px;
  overflow-y: auto;
  padding-right: 2px;
}

.conversation-card {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 13px 14px;
  background: var(--c-surface);
  text-align: left;
  transition: border-color .12s, background .12s;
  box-shadow: var(--shadow-card);
}
.conversation-card:hover, .conversation-card.active {
  border-color: rgba(27,77,75,.36);
  background: var(--c-primary-50);
}
.conversation-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.conversation-card-header + .conversation-card-header { margin-top: 8px; margin-bottom: 0; }
.person strong, .person span { display: block; }
.person strong { font-size: 13.5px; font-weight: 700; }
.person span { color: var(--c-text-3); font-size: 12px; margin-top: 2px; }
.conversation-card > p {
  margin: 0 0 8px;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 详情面板 */
.detail-body { display: grid; gap: 14px; }

.transcript {
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 14px;
  background: var(--c-bg);
  font-size: 13.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  color: var(--c-text);
}

.violation-list { display: grid; gap: 10px; }
.violation {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 13px 14px;
  background: var(--c-surface);
}
.violation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.violation-header > strong { font-size: 13.5px; font-weight: 700; }
.violation p { margin-bottom: 7px; color: var(--c-text-2); font-size: 13px; line-height: 1.6; }
.violation p:last-child { margin-bottom: 0; }
.quote { color: var(--c-text); font-weight: 700; }

/* 处置闭环 */
.review-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(27,77,75,.18);
  border-radius: var(--r-lg);
  padding: 15px;
  background: var(--c-primary-50);
}
.review-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.review-title > strong { font-size: 14px; font-weight: 700; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.review-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-hint { margin: 0; color: var(--c-text-3); font-size: 12.5px; }

/* ─── Badge / Pill ─── */
.badge, .source-badge, .score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge.critical { background: var(--c-danger-bg); color: var(--c-danger); }
.badge.warning  { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge.suggestion { background: var(--c-success-bg); color: var(--c-success); }

.risk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.risk-badge.critical { background: var(--c-danger-bg); color: var(--c-danger); }
.risk-badge.warning  { background: var(--c-warn-bg);   color: var(--c-warn); }

.source-badge, .score-pill {
  background: var(--c-primary-100);
  color: var(--c-primary);
}
.score-pill { min-width: 56px; font-variant-numeric: tabular-nums; }

/* ─── 快速质检折叠 ─── */
.local-checker { margin: 0; }
.panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary > span { font-size: 15px; font-weight: 700; color: var(--c-text); }
.panel-summary > small { color: var(--c-text-3); font-size: 12.5px; }
.panel-summary::after {
  content: "+";
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-primary);
  font-weight: 900;
  font-size: 15px;
}
details[open] > .panel-summary { margin-bottom: 16px; }
details[open] > .panel-summary::after { content: "−"; }

.checker-grid, .import-grid, .assistant-grid, .training-layout {
  display: grid;
  gap: 16px;
}
.checker-grid { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); }
.import-grid { grid-template-columns: 210px minmax(300px, 1fr) minmax(240px, .72fr); align-items: stretch; }
.assistant-grid { grid-template-columns: 210px minmax(300px, 1fr) minmax(240px, .86fr); }
.training-layout { grid-template-columns: 210px minmax(300px, 1fr) minmax(260px, .9fr); align-items: stretch; }

.checker-result { display: grid; gap: 10px; }
.import-controls { display: grid; align-content: start; gap: 10px; }
.import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.import-text { min-width: 0; }
.import-panel { margin: 0; }
.feature-panel { margin: 0; }
.filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* ─── 空状态 ─── */
.empty-state {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px;
  color: var(--c-text-2);
  text-align: center;
}
.empty-state strong { display: block; margin-bottom: 6px; font-size: 14.5px; color: var(--c-text); }
.empty-state p { margin: 0; font-size: 13px; }
.empty-state.compact { min-height: 200px; }
.error-state strong { color: var(--c-danger); }

/* ─── pre / 输出框 ─── */
pre, #reportOutput {
  width: 100%;
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--c-bg);
  color: var(--c-text);
  overflow: auto;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  font-family: var(--font);
}
#reportOutput { min-height: 280px; resize: vertical; }

/* ─── LLM 状态卡 ─── */
.quick-stack { display: grid; align-content: start; gap: 8px; }
.quick-stack .ghost-button { min-height: 42px; text-align: left; justify-content: flex-start; }
.llm-status-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--c-surface);
}
.llm-status-card strong { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.llm-status-card span { font-size: 12.5px; color: var(--c-text-2); line-height: 1.5; }
.llm-status-card.online { border-color: rgba(27,77,75,.26); background: var(--c-primary-50); }
.llm-status-card.warning { border-color: rgba(154,110,32,.22); background: var(--c-warn-bg); }

/* ─── 培训聊天 ─── */
.training-chat {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 240px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 12px;
  background: var(--c-bg);
}
.chat-bubble {
  max-width: 84%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--c-surface);
}
.chat-bubble.customer { justify-self: start; }
.chat-bubble.consultant {
  justify-self: end;
  border-color: rgba(27,77,75,.22);
  background: var(--c-primary-100);
}
.chat-bubble strong {
  display: block;
  margin-bottom: 4px;
  color: var(--c-primary);
  font-size: 12.5px;
  font-weight: 700;
}
.chat-bubble p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--c-text); }

/* ─── 整改/培训素材卡片 ─── */
.material-list { display: grid; gap: 12px; }
.material-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 15px 16px;
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}
.material-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.material-card-header strong { display: block; font-size: 14px; font-weight: 700; }
.material-card-header span { display: block; color: var(--c-text-2); font-size: 12.5px; margin-top: 2px; }
.material-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--c-text); }
.material-card pre { max-height: 180px; font-size: 12.5px; }
.material-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.critical-todo-link { flex: none; }
.compact-filter { min-width: 160px; }

/* ─── 客户标签 ─── */
.tag-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(400px, 1.22fr);
  gap: 16px;
}
.tag-list-panel, .tag-detail-panel { min-width: 0; }
.tag-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tag-filters button { grid-column: 1 / -1; }
.tag-list, .tag-detail-body, .tag-follow-form { display: grid; gap: 10px; }
.tag-card {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  background: var(--c-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  box-shadow: var(--shadow-card);
}
.tag-card:hover, .tag-card.active {
  border-color: rgba(27,77,75,.38);
  background: var(--c-primary-50);
}
.tag-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.tag-card-head strong, .tag-card-head span { display: block; }
.tag-card-head strong { font-size: 13.5px; font-weight: 700; }
.tag-card-head span { color: var(--c-text-2); font-size: 12px; margin-top: 2px; }
.tag-card-chips, .tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag-card-chips span, .tag-chip-list span {
  border: 1px solid rgba(27,77,75,.16);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  background: var(--c-primary-100);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
}
.tag-detail-summary { display: grid; gap: 10px; }
.customer-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.customer-info-grid article {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  background: var(--c-bg);
}
.customer-info-grid span { display: block; color: var(--c-text-3); font-size: 11.5px; margin-bottom: 3px; }
.customer-info-grid strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.tag-script {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--c-bg);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-text);
}
.tag-follow-form { border-top: 1px solid var(--c-border-soft); padding-top: 14px; }
.follow-history { display: grid; gap: 7px; }
.follow-history p {
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* 周报 */
.report-panel { margin: 0; }
.report-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-action-hint { margin: 8px 0 0; color: var(--c-text-3); font-size: 12.5px; min-height: 18px; }

/* 视图隐藏 */
.view-hidden { display: none !important; }

/* ─── 进度条（通用） ─── */
.progress-bar {
  height: 6px;
  background: #EDF1F0;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-pill);
  transition: width .3s;
}

/* ─── checker-result 布局修复（按钮不撑满右栏）─── */
.checker-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.checker-result > pre,
.checker-result > #manualResult,
.checker-result > #kbResult,
.checker-result > #importResult,
.checker-result > #trainingFeedback {
  align-self: stretch;
}
.import-actions { flex-shrink: 0; }

/* ─── 按钮 & 交互元素动效 ─── */
.primary-button, .ghost-button {
  position: relative;
  overflow: hidden;
}
.primary-button::after, .ghost-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background .18s;
}
.primary-button:active::after { background: rgba(255,255,255,.15); }
.ghost-button:active::after { background: rgba(0,0,0,.05); }

.primary-button:active, .ghost-button:active { transform: scale(0.975); }
.nav-item:active { transform: scale(0.97); }
.role-tab:active { transform: scale(0.97); }
.conversation-card:active { transform: scale(0.99); }
.tag-card:active { transform: scale(0.99); }
.kb-sample:active { transform: scale(0.97); }

/* 为所有可点击元素添加过渡 */
.primary-button, .ghost-button {
  transition: background .12s, box-shadow .12s, border-color .12s, transform .08s, color .12s;
}
.nav-item, .role-tab, .conversation-card, .tag-card, .kb-sample {
  transition: background .12s, border-color .12s, color .12s, transform .08s, box-shadow .12s;
}
.connection-pill { transition: background .2s, border-color .2s, color .2s; }

/* ─── 主题切换按钮 ─── */
.theme-toggle-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  flex: none;
  transition: border-color .15s, background .15s, color .15s, transform .08s;
}
.theme-toggle-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-50); }
.theme-toggle-btn:active { transform: scale(0.9); }
.theme-toggle-btn svg { width: 17px; height: 17px; }

/* ─── 暗色主题变量 ─── */
html[data-theme="dark"] {
  --c-primary-900: #1B4D4B;
  --c-primary:     #2F7472;
  --c-primary-100: #1C3A38;
  --c-primary-50:  #152F2D;

  --c-text:        #DDE8E6;
  --c-text-2:      #8AA4A1;
  --c-text-3:      #4E6866;
  --c-border:      #1F3836;
  --c-border-soft: #172E2C;
  --c-bg:          #0D1918;
  --c-surface:     #131F1E;

  --c-danger:    #CF6050;  --c-danger-bg:  #2A1614;
  --c-warn:      #C4973F;  --c-warn-bg:    #281E0C;
  --c-info:      #5A88C4;  --c-info-bg:    #111D2E;
  --c-success:   #3E9C7C;  --c-success-bg: #0D231E;

  --shadow-card:    0 1px 4px rgba(0,0,0,.35);
  --shadow-primary: 0 2px 10px -2px rgba(47,116,114,.55);
  --shadow-float:   0 10px 40px -12px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* 平滑主题过渡 */
html {
  transition: background-color .3s ease, color .3s ease;
}
body {
  transition: background-color .3s ease, color .3s ease;
}

/* 扩散过渡（View Transitions API） */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after { transition-duration: 0ms !important; }

/* 太阳/月亮图标形变动效 */
.theme-toggle-icon { display: block; overflow: visible; --theme-toggle-duration: 380ms; }
.theme-toggle-core {
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--theme-toggle-duration) ease;
}
.theme-toggle-cutout {
  transition: d var(--theme-toggle-duration) ease, transform var(--theme-toggle-duration) ease;
}
.theme-toggle-ray {
  transform-box: view-box; transform-origin: center;
  transition: transform var(--theme-toggle-duration) ease, opacity var(--theme-toggle-duration) ease;
  transition-delay: calc(var(--theme-toggle-duration) * 0.15);
}
html[data-theme="dark"] .theme-toggle-core { transform: scale(1.7); }
html[data-theme="dark"] .theme-toggle-cutout {
  d: path("M0 2h13a1 1 0 0 1 10 10v14H0Z");
  transform: translate(-3.25px, 0.5px);
  transition-delay: calc(var(--theme-toggle-duration) * 0.15);
}
html[data-theme="dark"] .theme-toggle-ray { opacity: 0; transform: scale(0); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .theme-toggle-core, .theme-toggle-cutout, .theme-toggle-ray { transition: none !important; }
}

/* 暗色模式：组件覆盖 */
html[data-theme="dark"] .topbar {
  background: #111F1E;
  border-bottom-color: var(--c-border);
}
html[data-theme="dark"] .sidebar {
  background: #111F1E;
  border-right-color: var(--c-border);
}
html[data-theme="dark"] .role-tabs { background: #0D1918; }
html[data-theme="dark"] .role-tab.active { background: var(--c-surface); }
html[data-theme="dark"] .nav-item:hover { background: #1A2F2D; }
html[data-theme="dark"] .sidebar-note { background: var(--c-primary-50); border-color: var(--c-border); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .conversation-card,
html[data-theme="dark"] .material-card,
html[data-theme="dark"] .tag-card,
html[data-theme="dark"] .critical-todo-item,
html[data-theme="dark"] .violation,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .llm-status-card {
  background: var(--c-surface);
  border-color: var(--c-border);
}
html[data-theme="dark"] .ghost-button {
  background: #1A2F2D;
  border-color: var(--c-border);
  color: var(--c-text-2);
}
html[data-theme="dark"] .ghost-button:hover {
  background: #213836;
  border-color: #2A4543;
  color: var(--c-text);
}
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  background: #0D1918;
  border-color: var(--c-border);
  color: var(--c-text);
}
html[data-theme="dark"] input[type="search"] { background: #0F1F1E; }
html[data-theme="dark"] pre,
html[data-theme="dark"] #reportOutput {
  background: #0D1918;
  border-color: var(--c-border);
  color: var(--c-text);
}
html[data-theme="dark"] .transcript,
html[data-theme="dark"] .insight-grid > div,
html[data-theme="dark"] .tag-script,
html[data-theme="dark"] .customer-info-grid article {
  background: #0D1918;
  border-color: var(--c-border);
}
html[data-theme="dark"] .review-panel { background: var(--c-primary-50); }
html[data-theme="dark"] .login-panel { background: #131F1E; border-color: var(--c-border); }
html[data-theme="dark"] .login-screen { background: rgba(13,25,24,.92); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A4441; border-color: var(--c-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #365856; }

/* ─── 自定义滚动条 ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4DEDD; border-radius: 8px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #BCC8C6; }

/* ─── 响应式 ─── */
@media (max-width: 1100px) {
  body { grid-template-rows: 62px auto; height: auto; overflow: visible; }
  .app-body { grid-template-columns: 1fr; height: auto; }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    overflow: visible;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    gap: 4px;
  }
  .nav-group-label { display: none; }
  .sidebar-footer { display: none; }
  .nav-item { width: auto; padding: 8px 12px; font-size: 13px; }
  .main { height: auto; overflow: visible; padding: 18px; }
  .workspace, .checker-grid, .import-grid, .insight-grid,
  .assistant-grid, .training-layout, .tag-workspace { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .brand-text { display: none; }
  .role-tab { padding: 6px 10px; font-size: 12px; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .topbar-actions { width: 100%; }
  .review-grid, .customer-info-grid { grid-template-columns: 1fr; }
  .tag-filters { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .role-tabs { gap: 1px; }
  .role-tab span { display: none; }
}