/* ============================================================================
   WMU 风格主题层 —— 覆盖 ClinMedAgent Lite 的默认视觉，使本站模块与
   hellowmu.fun 起始页（温医红 #811d35 / 米白 #fffaf6 / 柔和卡片）保持一致。
   加载顺序：style.css 之后引入本文件。
   ============================================================================ */

:root {
  /* ---- 与起始页对齐的设计令牌 ---- */
  --ink: #3d1220;
  --ink-soft: #5f3a48;
  --teal: #811d35;
  --teal-dark: #641528;
  --mint: #f4e3e7;
  --cream: #fffaf6;
  --orange: #d98d58;
  --line: #ead8dc;
  --sky: #8abbd4;

  /* 主色系（映射到 Lite 原有变量名） */
  --primary: #811d35;
  --primary-dark: #641528;
  --primary-soft: rgba(129, 29, 53, .08);
  --primary-line: rgba(129, 29, 53, .22);
  --accent: #d98d58;
  --accent-soft: rgba(217, 141, 88, .12);

  /* 中性色（偏暖，呼应米白底） */
  --bg: #fffaf6;
  --bg-card: rgba(255, 255, 255, .92);
  --bg-soft: #fdf4f2;
  --bg-inset: #fbf0f2;
  --text: #3d1220;
  --text-soft: #5f3a48;
  /* 次要文字：加深到 WCAG AA（≥4.5:1）可辨识水平 */
  --text-muted: #6d4a56;
  --border: #e6ccd3;
  --border-strong: #d7b4be;

  /* 语义色（加深以保证小字号徽标/文字可辨识） */
  --ok: #2f7350;
  --ok-soft: rgba(74, 143, 106, .14);
  --warn: #9e6318;
  --warn-soft: rgba(201, 138, 60, .18);
  --err: #9c1f36;
  --err-soft: rgba(179, 56, 79, .14);

  /* 圆角与阴影沿用起始页质感 */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 60px rgba(94, 24, 45, .12);
  --shadow-sm: 0 8px 24px rgba(94, 24, 45, .08);
  --ring: 0 0 0 3px rgba(129, 29, 53, .16);

  /* 字体：与起始页一致（Noto Sans SC 主体 + Georgia 强调） */
  --font: 'Noto Sans SC', 'Noto Sans SC Local', 'DengXian',
          'Microsoft YaHei UI', 'Microsoft YaHei', -apple-system, sans-serif;
  --serif: Georgia, 'Songti SC', 'SimSun', serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* 补齐应用原有变量名，确保主题完全覆盖 */
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --fs-body: 15.5px;
  --lh-body: 1.75;
  --radius-lg: 20px;
  --shadow-lg: 0 26px 70px rgba(94, 24, 45, .16);
  --tr: .2s ease;
  --primary-line-soft: rgba(129, 29, 53, .12);
}

/* ---------- 基础排版 ---------- */
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(244, 227, 231, .85), transparent 62%),
    radial-gradient(900px 560px at 104% 6%, rgba(217, 141, 88, .10), transparent 58%),
    var(--cream);
  /* 渐变只画在页面顶部一次。
     html,body 是 height:100%（=视口高），而内容会把画布撑到数千像素；
     background-repeat 默认是 repeat，于是在文档坐标里每 100vh 就重铺一次渐变，
     出现「页面往下走，背景又冒出一层渐变」的断层。设为 no-repeat 后，
     底部铺底由 var(--cream) 纯色承担，向下延伸就不再重复渐变。 */
  background-repeat: no-repeat;
  color: var(--text);
}

/* 标题用衬线强调，呼应起始页的编辑感 */
h1, h2, .brand-name { letter-spacing: -.03em; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; color: var(--teal); }

/* ---------- 顶栏：贴合 site-header 的高度与留白 ---------- */
.topbar {
  background: rgba(255, 250, 246, .88);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(94, 24, 45, .06);
}
.topbar .brand-logo {
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  box-shadow: 0 8px 20px rgba(94, 24, 45, .22);
}

/* ---------- 标签页：胶囊但用暖色调 ---------- */
.tab {
  border-radius: 999px;
  color: var(--ink-soft);
}
.tab:hover { background: var(--primary-soft); color: var(--teal); }
.tab.active {
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(94, 24, 45, .20);
}

/* ---------- 卡片：与 home-entry-card 同质感 ---------- */
.card, .result-card, .term-card, .job-card, .book-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.result-card:hover, .book-item:hover {
  transform: translateY(-3px);
  border-color: #d5a5b2;
  box-shadow: 0 18px 45px rgba(94, 24, 45, .14);
}
.term-card { border-left: 4px solid var(--teal); }

/* ---------- 按钮：主按钮沿用 primary-button 的砖红 ---------- */
.btn-primary {
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(94, 24, 45, .20);
  font-weight: 700;
}
.btn-primary:hover { box-shadow: 0 14px 32px rgba(94, 24, 45, .28); }
.btn-icon {
  border-radius: 10px;
  border-color: var(--line);
  background: #fff;
}
.btn-icon:hover { border-color: var(--teal); background: var(--primary-soft); color: var(--teal); }

/* ---------- 输入控件：暖色底 + 砖红聚焦环 ---------- */
input[type="text"], input[type="password"], select, textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--ring);
}

/* ---------- 登录页：加入学校元素感 ---------- */
.auth-screen {
  background:
    radial-gradient(1100px 620px at 14% -10%, rgba(244, 227, 231, .95), transparent 60%),
    radial-gradient(900px 560px at 104% 4%, rgba(217, 141, 88, .14), transparent 58%),
    var(--cream);
}
.auth-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  background: rgba(255, 255, 255, .94);
}
.auth-card h1 { color: var(--teal); }
.auth-card h1::after {
  content: 'WMU · 教材智能助手';
  display: block;
  margin-top: 8px;
  font: 700 10px/1.2 'Segoe UI', Arial, sans-serif;
  letter-spacing: .16em;
  color: var(--orange);
}
.auth-tab.active { background: var(--teal); color: #fff; }

/* 品牌徽标改为校徽风格方圆 */
.auth-card .brand-logo {
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(94, 24, 45, .24);
}

/* ---------- 引用与证据：用砖红高亮 ---------- */
.cite {
  background: var(--primary-soft);
  color: var(--teal-dark);
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 700;
  border: 1px solid var(--primary-line);
}
mark { background: rgba(217, 141, 88, .28); color: var(--ink); border-radius: 3px; }

/* 问答气泡 */
.msg-user {
  background: linear-gradient(140deg, var(--teal), var(--teal-dark));
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.msg-assistant {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
}

/* 进度条 */
.progress-bar-fill { background: linear-gradient(90deg, var(--teal), var(--orange)); }

/* 提示条 */
.toast { border-radius: 12px; box-shadow: var(--shadow); }

/* 站内返回条（指向起始页） */
.wmu-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 34px;
  background: rgba(244, 227, 231, .72);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
/* 链接用主色深砖红，压在浅粉底上清晰可读 */
.wmu-banner a { color: var(--teal-dark); font-weight: 700; text-decoration: none; }
.wmu-banner a:hover { text-decoration: underline; color: var(--teal); }
/* 分隔符「|」是装饰性元素，用中灰即可，不参与正文对比度要求 */
.wmu-banner .wmu-sep { color: var(--text-muted); opacity: .55; }
/* 右侧上下文文字：比链接弱一档但仍清晰 */
.wmu-banner .wmu-ctx { color: var(--ink-soft); }

/* ============================================================================
   可辨识性加固层 —— 针对对比度过低的文字统一提高对比。
   正文 ≥ 10.5:1，次要/说明文字 ≥ 4.5:1（WCAG 2.1 AA）。
   ============================================================================ */

/* 标题、次级说明、正文色 */
h1, h2, h3, h4, .brand-text h1, .search-hero h2 { color: var(--text); }
.hero-sub { color: var(--text-soft); }

/* 说明类文字（原本最浅的一档，重点修正） */
.muted,
.muted.small,
.small,
.hero-sub,
.build-tag,
.brand-sub,
.msg-label,
.msg-note,
.job-meta,
.job-badge,
.result-page,
.result-section,
.term-note,
.b-meta,
.status-pill,
.empty,
.empty-state,
.sys-status .row > span,
.prog-label,
.prog-pct,
.chat-hint li,
.drop-inner .small {
  color: var(--text-muted);
}

/* 这些略带强调的文字再深一档，避免与背景糊在一起 */
.result-text,
.chat-hint,
.drop-inner,
.evidence-item,
.key-form label,
.auth-form label,
.book-del {
  color: var(--text-soft);
}

/* 表单占位符：默认浏览器灰往往过浅 */
::placeholder { color: #7d5a66; opacity: 1; }

/* 聊天提示框底色偏浅，加深边框与文字 */
.chat-hint {
  background: var(--bg-inset);
  border-color: var(--border-strong);
}
.msg-assistant .msg-body { color: var(--text); }

/* 站内返回条文字 */
.wmu-banner { color: var(--text-soft); background: rgba(244, 227, 231, .9); }
.wmu-banner a { color: var(--teal-dark); }
.wmu-banner .wmu-ctx { color: var(--text-soft); }

/* 徽标 / 状态点上的小字 */
.job-badge { background: var(--bg-soft); }
.book-del { border-color: var(--border-strong); }
.tool-download { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }

/* 链接与高亮 */
a { color: var(--teal-dark); }
mark { background: rgba(217, 141, 88, .38); color: var(--ink); }

/* 深色模式也走暖色暗调 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #241419;
    --bg-card: rgba(48, 28, 34, .92);
    --bg-soft: #2b181e;
    --bg-inset: #321c23;
    --text: #f8eff2;
    --text-soft: #e2ccd3;
    /* 正态次要文字：深底上保持 AA 可辨识 */
    --text-muted: #c4a9b2;
    --border: #4d2c35;
    --border-strong: #63404a;
    --primary-soft: rgba(217, 141, 88, .16);
    --line: #4d2c35;
    --cream: #241419;
    /* 深色模式下的语义色：提亮以维持对比 */
    --ok: #6fd39c;
    --warn: #e8b263;
    --err: #f293a4;
    /* 关键：深底上不能再用深砖红 #811d35 当文字色（对比度仅 1.25），
       改用浅玫瑰色作为「主色文字」；--teal 仍用于需要深底的按钮渐变。 */
    --primary: #f0bccb;
    --primary-dark: #d98fa6;
    --primary-line: rgba(240, 188, 203, .34);
    --teal-dark: #f0bccb;
    --accent: #e8b263;
  }
  body {
    background:
      radial-gradient(1100px 620px at 12% -8%, rgba(129, 29, 53, .35), transparent 62%),
      var(--cream);
    /* 同上：background 简写会把 repeat 重置回默认值，这里必须显式再关一次 */
    background-repeat: no-repeat;
  }
  .card, .result-card, .term-card, .job-card, .book-item, .msg-assistant, .auth-card {
    background: var(--bg-card);
  }
  input[type="text"], input[type="password"], select, textarea { background: var(--bg-inset); color: var(--text); }
  ::placeholder { color: #b2919b; }
  .wmu-banner {
    background: rgba(129, 29, 53, .32);
    color: var(--text-soft);
    border-bottom-color: var(--border);
  }
  /* 深红底上不能用深砖红链接色：改用浅玫瑰，保证 AA */
  .wmu-banner a { color: #f4c6d2; }
  .wmu-banner a:hover { color: #ffdbe4; }
  .wmu-banner .wmu-ctx { color: #e0c6ce; }
  .wmu-banner .wmu-sep { color: #c99aab; opacity: 1; }
  .chat-hint { background: var(--bg-inset); border-color: var(--border-strong); }
  /* 顶栏：浅色底必须覆盖，否则深色模式下顶栏仍是米白，白字无法辨识 */
  .topbar {
    background: rgba(36, 20, 25, .9);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  }
  .brand-text h1 { color: var(--text); }
  .brand-sub { color: var(--text-muted); }
  .tabs { background: transparent; }
  mark, .result-text mark { background: #5a4318; color: #ffe9a8; }

  /* 主色为深底渐变（按钮/激活标签）：文字保持纯白 */
  .btn-primary, .tab.active, .brand-logo, .auth-tab.active, .msg-user .msg-body {
    color: #fff;
    background: linear-gradient(140deg, #a8263f, #7f1a2e);
  }
  /* 这些元素的浅色底纹上，文字用主色（已提亮） */
  .result-book, .user-badge, .term-name, .job-badge.ocr,
  .job-badge.indexing, .evidence-item b, .cite, .tab:hover {
    color: var(--primary);
  }
  .user-badge, .term-name, .result-book,
  .job-badge.ocr, .job-badge.indexing {
    background: rgba(240, 188, 203, .16);
    border-color: var(--primary-line);
  }
  .cite { background: rgba(240, 188, 203, .16); border-color: var(--primary-line); }
  .tab:hover { background: rgba(240, 188, 203, .14); }
  .btn-ghost { color: var(--text-soft); }
  .book-del { color: var(--text-soft); }
  .progress-bar { background: linear-gradient(90deg, #a8263f, #d98d58); }
  .progress-bar-ocr { background: linear-gradient(90deg, #4a8ab5, #6fb0d0); }
  .tool-download { color: #6fd39c; background: rgba(111, 211, 156, .14); }
}