/* ============================================================
   化院通关智伴攻略 — 视觉规范
   取向：白底、墨色字、宋体标题、等宽编号、细线分区、
        近乎直角的边框；不使用渐变与投影。
   ============================================================ */

:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --ink: #16161a;
  --ink-soft: #46464d;
  --muted: #7c7c85;
  --rule: #e9e9ed;
  --rule-strong: #d3d3da;

  --accent: #143f39;
  --accent-soft: #e8efec;
  --rust: #9c3d24;
  --rust-soft: #f9ece7;
  --warn: #8f6a1c;
  --warn-soft: #f9f2e0;
  --info: #2f5d7c;
  --info-soft: #ebf0f5;

  --serif: Georgia, "Songti SC", "SimSun", "Times New Roman", serif;
  --sans: "Segoe UI", "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  --mono: Consolas, "Courier New", monospace;

  --radius: 2px;
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 25px;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; }
h1 { font-size: 51px; letter-spacing: .01em; line-height: 1.32; }
h2 { font-size: 31px; letter-spacing: .02em; }
h3 { font-size: 25px; letter-spacing: .04em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }

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

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* ---------- 顶栏 ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule-strong);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 30px;
}
.brand-name { font-family: var(--serif); font-size: 31px; letter-spacing: .03em; }
.brand-sub {
  display: block; font-family: var(--mono); font-size: 17px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.user-area { display: flex; align-items: center; gap: 16px; font-size: 22px; }
.user-chip { display: flex; align-items: baseline; gap: 8px; }
.user-chip .name { font-family: var(--serif); font-size: 25px; }
.user-chip .role {
  font-family: var(--mono); font-size: 17px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--rule-strong); padding: 1px 8px; border-radius: var(--radius);
}

/* ---------- 按钮 ---------- */

.btn {
  font-family: var(--sans); font-size: 23px; letter-spacing: .05em;
  padding: 12px 28px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn:hover { background: #0e2f2a; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.small { padding: 8px 18px; font-size: 21px; }
.btn.plain {
  background: transparent; border-color: transparent; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong); border-radius: 0; padding: 2px 0;
}
.btn.plain:hover { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- 表单 ---------- */

.field { display: block; margin-bottom: 26px; }
.field > .label {
  display: block; font-family: var(--mono); font-size: 17px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  padding: 9px 2px; font-family: var(--sans); font-size: 25px; color: var(--ink);
  transition: border-color .15s;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: #b9b9c0; }
.field .hint { font-size: 20px; color: var(--muted); margin-top: 6px; }

/* ---------- 提示条 ---------- */

.notice {
  border-left: 2px solid var(--rule-strong); background: var(--surface-2);
  padding: 12px 16px; font-size: 23px; margin: 0 0 18px;
}
.notice.error { border-color: var(--rust); background: var(--rust-soft); color: #6f2a19; }
.notice.ok { border-color: var(--accent); background: var(--accent-soft); color: #0f322c; }
.notice[hidden] { display: none; }

/* ---------- 主布局：左侧编号导航 + 内容 ---------- */

.layout { display: grid; grid-template-columns: 292px 1fr; gap: 48px; padding-top: 36px; padding-bottom: 80px; }

.sidenav { border-top: 1px solid var(--rule-strong); align-self: start; position: sticky; top: 24px; }
.navitem {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 15px 4px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 23px; color: var(--ink-soft);
  transition: color .15s, background .15s;
}
.navitem .num { font-family: var(--mono); font-size: 18px; color: var(--muted); letter-spacing: .08em; }
.navitem:hover { color: var(--ink); background: var(--surface-2); }
.navitem.active { color: var(--accent); font-weight: 600; }
.navitem.active .num { color: var(--accent); }
.navitem .lock {
  margin-left: auto; font-family: var(--mono); font-size: 16px; letter-spacing: .1em;
  color: var(--muted); border: 1px solid var(--rule-strong); padding: 0 7px; border-radius: var(--radius);
}

.panel { display: none; }
.panel.active { display: block; }

.panel-head { border-bottom: 1px solid var(--rule-strong); padding-bottom: 16px; margin-bottom: 26px; }
.panel-head .kicker {
  font-family: var(--mono); font-size: 17px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px;
}
.panel-head p { margin: 9px 0 0; font-size: 23px; color: var(--ink-soft); max-width: 62ch; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }

/* ---------- 结果区 ---------- */

.result { margin-top: 30px; }
.result[hidden] { display: none; }

.score-block { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.score-block .score { font-family: var(--serif); font-size: 76px; line-height: 1; color: var(--accent); }
.score-block .score-label { font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.block-title {
  font-family: var(--mono); font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}

.risk { border-left: 2px solid var(--rule-strong); padding: 11px 0 11px 16px; margin-bottom: 14px; }
.risk .tag { font-family: var(--mono); font-size: 17px; letter-spacing: .1em; margin-right: 9px; }
.risk .risk-title { font-weight: 600; font-size: 23px; }
.risk .risk-body { font-size: 22px; color: var(--ink-soft); margin-top: 3px; }
.risk .risk-sug { font-size: 22px; color: var(--muted); margin-top: 4px; }
.risk.high { border-color: var(--rust); } .risk.high .tag { color: var(--rust); }
.risk.mid { border-color: var(--warn); } .risk.mid .tag { color: var(--warn); }
.risk.low { border-color: var(--info); } .risk.low .tag { color: var(--info); }

.kv { display: grid; grid-template-columns: 152px 1fr; gap: 5px 18px; font-size: 23px; }
.kv dt { font-family: var(--mono); font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.kv dd { margin: 0; color: var(--ink-soft); }

.stage { border-top: 1px solid var(--rule); padding: 16px 0; }
.stage .stage-name { font-family: var(--serif); font-size: 25px; }
.stage .stage-goal { font-size: 22px; color: var(--muted); margin: 2px 0 8px; }
.stage ul { margin: 0; padding-left: 22px; font-size: 23px; color: var(--ink-soft); }

.quiz-item { border-top: 1px solid var(--rule); padding: 16px 0; }
.quiz-item .q { font-size: 23px; margin-bottom: 8px; }
.quiz-item ol { list-style: upper-alpha; margin: 0; padding-left: 24px; font-size: 23px; color: var(--ink-soft); }
.quiz-item .ans { font-family: var(--mono); font-size: 20px; color: var(--accent); margin-top: 8px; }

/* ---------- 空状态 / 登录拦截 ---------- */

.empty {
  border: 1px dashed var(--rule-strong); background: var(--surface-2);
  padding: 34px 30px; text-align: left;
}
.empty .empty-title { font-family: var(--serif); font-size: 29px; margin-bottom: 6px; }
.empty p { font-size: 23px; color: var(--ink-soft); margin: 0 0 20px; max-width: 54ch; }

/* ---------- 05 知识库 ---------- */

.kb-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule-strong); }
.kb-stat { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 20px 18px; }
.kb-stat:last-child { border-right: 0; }
.kb-stat .num { display: block; font-family: var(--serif); font-size: 53px; line-height: 1; color: var(--accent); }
.kb-stat .lbl {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.kb-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 28px; }
.kb-actions { grid-column: 1 / -1; }

.kb-card { border-top: 1px solid var(--rule); padding: 16px 0; }
.kb-card .kb-name { font-family: var(--serif); font-size: 25px; }
.kb-card .kb-cat {
  font-family: var(--mono); font-size: 16px; letter-spacing: .1em; color: var(--muted);
  border: 1px solid var(--rule-strong); padding: 0 7px; border-radius: var(--radius);
  margin-left: 10px; white-space: nowrap;
}
.kb-card .kb-obj { font-size: 22px; color: var(--ink-soft); margin: 6px 0 0; }
.kb-card .kb-meta { font-family: var(--mono); font-size: 18px; color: var(--muted); margin-top: 7px; }
.kb-card .kb-tags { margin-top: 9px; }
.kb-card .kb-tags .tag {
  display: inline-block; font-family: var(--mono); font-size: 16px; color: var(--info);
  background: var(--info-soft); border-radius: var(--radius); padding: 1px 8px; margin: 0 6px 6px 0;
}
.kb-card .kb-tags .tag.haz { color: var(--rust); background: var(--rust-soft); }
.kb-empty {
  border: 1px dashed var(--rule-strong); background: var(--surface-2);
  padding: 22px 20px; font-size: 23px; color: var(--muted);
}

/* ---------- 结果来源标识：本地部署知识库 / 联网大模型 ---------- */

.origin-legend {
  display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0 0 18px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--rule-strong);
  font-family: var(--mono); font-size: 17px; letter-spacing: .08em; color: var(--muted);
}
.origin-legend .lg { display: inline-flex; align-items: center; gap: 8px; }
.origin-legend .lg i { width: 13px; height: 13px; display: inline-block; }
.origin-legend .lg-local i { background: var(--accent); }
.origin-legend .lg-ai i { background: var(--info); }

.origin {
  border: 1px solid var(--rule-strong); border-left-width: 4px;
  padding: 18px 22px 20px; margin: 0 0 20px;
}
.origin-local { border-left-color: var(--accent); background: var(--accent-soft); }
.origin-ai { border-left-color: var(--info); background: var(--info-soft); }

.origin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.origin-badge {
  font-family: var(--mono); font-size: 16px; letter-spacing: .12em;
  color: var(--paper); padding: 2px 10px; border-radius: var(--radius);
}
.origin-local .origin-badge { background: var(--accent); }
.origin-ai .origin-badge { background: var(--info); }
.origin-title { font-family: var(--serif); font-size: 25px; }
.origin-local .origin-title { color: var(--accent); }
.origin-ai .origin-title { color: var(--info); }

.origin-body { font-size: 23px; color: var(--ink); }
.origin-body > :first-child { margin-top: 0; }
.origin-body .block-title { margin-top: 20px; border-color: var(--rule-strong); }

.ref-chip {
  display: inline-block; font-family: var(--mono); font-size: 17px;
  color: var(--accent); background: var(--paper); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 2px 10px; margin: 0 8px 8px 0;
}
.origin-foot { font-size: 19px; color: var(--muted); margin: -6px 0 22px; }


/* ---------- 登录页 ---------- */

.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-aside {
  background: var(--surface-2); color: var(--ink);
  border-right: 1px solid var(--rule-strong);
  padding: 60px 56px; text-align: center;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside .aside-mark {
  font-family: var(--mono); font-size: 17px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.auth-aside h1 { color: var(--ink); font-size: 62px; line-height: 1.28; margin: 28px 0 18px; }
.auth-aside .lede { font-size: 23px; color: var(--ink-soft); max-width: 40ch; margin: 0 auto; }
.auth-caps { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.auth-caps li {
  display: flex; gap: 13px; align-items: baseline; justify-content: center;
  border-bottom: 1px solid var(--rule-strong); padding: 11px 0; font-size: 23px; color: var(--ink-soft);
}
.auth-caps .num { font-family: var(--mono); font-size: 17px; color: var(--muted); letter-spacing: .1em; }
.auth-aside .aside-foot { font-size: 20px; color: var(--muted); font-family: var(--mono); letter-spacing: .04em; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 52px 34px; background: var(--paper); }
.auth-form { width: 100%; max-width: 462px; text-align: center; }
.auth .field > .label { text-align: center; }
.auth .field input, .auth .field select { text-align: center; }
.auth .btn-row { justify-content: center; }

.auth-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 30px; justify-content: center; }
.auth-tab {
  background: none; border: 0; padding: 0 0 12px; cursor: pointer;
  font-family: var(--serif); font-size: 29px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent); }

.auth-foot { margin-top: 22px; font-size: 22px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; }
.auth-note {
  margin-top: 28px; font-size: 21px; color: var(--muted);
  border: 1px solid var(--rule-strong); padding: 14px 16px;
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 26px; }
  .sidenav { position: static; display: flex; overflow-x: auto; }
  .navitem { border-bottom: 0; border-right: 1px solid var(--rule); white-space: nowrap; padding: 12px 17px; }
  .cols { grid-template-columns: 1fr; }
  .kb-stats { grid-template-columns: repeat(2, 1fr); }
  .kb-stat:nth-child(2n) { border-right: 0; }
  .kb-controls { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { padding: 38px 30px; border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .auth-aside h1 { font-size: 46px; }
}

/* ---------- 我有疑问 ---------- */
.doubt-entry { border-top: 1px dashed var(--rule-strong); padding-top: 10px; }
.doubt-box { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.doubt-input {
  flex: 1 1 260px; min-width: 220px; font-size: 20px; padding: 7px 10px;
  border: 1px solid #d0d0d0; border-radius: 6px;
}