/* 一级科目导览页样式。配色沿用观察台（--bg/--fg/--line 等由主题脚本注入）。 */
:root {
  --lv1-bg: #f6f7f5;
  --lv1-card: #fff;
  --lv1-line: #e3e6e0;
  --lv1-fg: #24312c;
  --lv1-dim: #7b8a83;
  --lv1-accent: #235852;
  --lv1-chip: #f0f4f2;
}
html[data-theme="dark"] {
  --lv1-bg: #14181a;
  --lv1-card: #1b2023;
  --lv1-line: #2b3235;
  --lv1-fg: #dfe6e3;
  --lv1-dim: #8b9a94;
  --lv1-accent: #6fc7b8;
  --lv1-chip: #232a2d;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--lv1-bg); color: var(--lv1-fg);
  font: 15px/1.65 -apple-system, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 80px; }

/* 顶栏 */
.sitebar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; background: var(--lv1-card);
  border-bottom: 1px solid var(--lv1-line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--lv1-accent); color: #fff; font-weight: 800;
}
.brand small { font-weight: 400; color: var(--lv1-dim); margin-left: 6px; }
.sitebar nav { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; }
.sitebar nav a { color: var(--lv1-dim); }
.sitebar nav a:hover, .sitebar nav a.on { color: var(--lv1-accent); }
.sitebar button {
  background: none; border: 1px solid var(--lv1-line); border-radius: 8px;
  width: 34px; height: 30px; cursor: pointer; color: var(--lv1-fg);
}

/* 一级标题 */
.lv1-head { padding: 28px 0 18px; }
.lv1-head h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: .5px; }
.lv1-sub { margin: 0; color: var(--lv1-dim); font-size: 14px; }
.lv1-empty { color: var(--lv1-dim); padding: 30px 0; }
.lv1-empty a { color: var(--lv1-accent); text-decoration: underline; }

/* 二级章卡片 */
.lv2-card {
  background: var(--lv1-card); border: 1px solid var(--lv1-line);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
}
.lv2-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none;
}
.lv2-head:hover { background: var(--lv1-chip); }
.lv2-idx {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--lv1-chip); color: var(--lv1-dim);
}
.lv2-head h3 { margin: 0; font-size: 16px; flex: 1; }
.lv2-count {
  font-size: 12px; color: var(--lv1-dim); background: var(--lv1-chip);
  padding: 2px 9px; border-radius: 20px;
}
.lv2-card.collapsed .lv2-body { display: none; }

/* 三级小节 */
.lv2-body { border-top: 1px solid var(--lv1-line); padding: 6px 18px 14px; }
.lv3-list { list-style: none; margin: 0; padding: 0; }
.lv3-group { padding: 9px 0; border-bottom: 1px dashed var(--lv1-line); }
.lv3-group:last-child { border-bottom: none; }
.lv3-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--lv1-dim); font-weight: 600;
}
.lv3-title em {
  font-style: normal; font-size: 11px; color: var(--lv1-accent);
  background: var(--lv1-chip); padding: 1px 7px; border-radius: 10px;
}
.lv3-title em.dim { color: var(--lv1-dim); opacity: .55; }
.lv3-nodes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.node-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 9px;
  background: var(--lv1-chip); border: 1px solid transparent;
  font-size: 14px; transition: .14s;
}
.node-chip:hover { border-color: var(--lv1-accent); transform: translateY(-1px); }
.chip-rel {
  font-size: 11px; color: #fff; background: var(--lv1-accent);
  padding: 0 6px; border-radius: 8px; line-height: 17px;
}
.chip-rel.dim { background: transparent; color: var(--lv1-dim); }
.lv3-empty { font-size: 13px; color: var(--lv1-dim); opacity: .6; padding: 4px 0 2px; }

@media (max-width: 640px) {
  .wrap { padding: 0 12px 60px; }
  .lv1-head h2 { font-size: 21px; }
  .sitebar { padding: 10px 12px; gap: 8px; }
  /* 手机端：品牌只留图标，科目导航横向可滑，避免竖排换行 */
  .brand small { display: none; }
  .brand { font-size: 15px; white-space: nowrap; }
  .sitebar nav {
    gap: 0; margin-left: auto; font-size: 13px;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sitebar nav::-webkit-scrollbar { display: none; }
  .sitebar nav a {
    white-space: nowrap; padding: 4px 9px; border-radius: 7px;
  }
  .sitebar nav a.on { background: var(--lv1-chip); }
  .sitebar button { flex: 0 0 auto; }
  .node-chip { font-size: 13px; padding: 5px 9px; }
  .lv2-head { padding: 12px 13px; }
  .lv2-body { padding: 4px 13px 12px; }
}