/* =========================================================
   中国高校 12 大学科门类 · 三层浏览（cn.html）
   L1 门类层：明亮撞色 · 灵动
   L2 专业层：学术档案 · 密集
   L3 课程层：培养方案文档 · 学术
   学科色统一用 oklch 固定明度/彩度、只改色相 → 天然和谐
   ========================================================= */

:root {
  --cn-radius: 14px;
  --cn-ease: cubic-bezier(.22, 1, .36, 1);
  --cn-paper: #fbfaff;
  --cn-ink: #191330;
  --cn-body: #453c60;
  --cn-muted: #6d6383;
  --cn-line: #e6dcf7;
}

/* ---------- 外壳：与站内 header/footer 衔接 ---------- */
.cn-shell { min-height: 100vh; background: var(--cn-paper); }
.cn-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* 顶部：层级面包屑 + 返回 */
.cn-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 250, 255, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--cn-line);
}
.cn-bar-in {
  max-width: 1160px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 14px;
}
.cn-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cn-muted); min-width: 0; }
.cn-crumb a { color: var(--cn-muted); text-decoration: none; white-space: nowrap; }
.cn-crumb a:hover { color: var(--navy); }
.cn-crumb .sep { color: #c6b9e4; }
.cn-crumb .cur { color: var(--cn-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-back {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--navy); background: #fff;
  border: 1px solid var(--cn-line); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; font-family: inherit;
  transition: border-color .16s var(--cn-ease), transform .16s var(--cn-ease);
}
.cn-back:hover { border-color: var(--navy); }
.cn-back:active { transform: translateY(1px); }
.cn-back[hidden] { display: none; }

/* 搜索 */
.cn-search { margin-left: auto; position: relative; flex: 0 1 260px; }
.cn-search input {
  width: 100%; font-family: inherit; font-size: 13px; color: var(--cn-ink);
  background: #fff; border: 1px solid var(--cn-line); border-radius: 999px;
  padding: 8px 14px; outline: none;
  transition: border-color .16s var(--cn-ease), box-shadow .16s var(--cn-ease);
}
.cn-search input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(91, 71, 184, .14); }
.cn-res {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--cn-line); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(36, 28, 61, .32);
  max-height: 340px; overflow-y: auto; padding: 6px; display: none;
}
.cn-res.on { display: block; }
.cn-res a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--cn-body);
}
.cn-res a:hover, .cn-res a.sel { background: var(--blue-soft-2); color: var(--navy-700); }
.cn-res a code { font-family: var(--mono); font-size: 11px; color: var(--cn-muted); }
.cn-res .none { padding: 12px 10px; font-size: 12.5px; color: var(--cn-muted); }

/* ---------- 通用入场动效 ---------- */
@keyframes cnUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cn-anim { animation: cnUp .42s var(--cn-ease) both; }

/* =========================================================
   L1 门类层 — 明亮撞色 · 灵动
   ========================================================= */
.cn-l1 { padding: 46px 0 64px; }
.cn-hero { margin-bottom: 34px; }
.cn-hero .kick {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 10px;
}
.cn-hero h1 {
  font-family: var(--serif); font-size: clamp(28px, 4.4vw, 42px);
  color: var(--cn-ink); line-height: 1.18; margin-bottom: 12px;
}
.cn-hero p { font-size: 14.5px; color: var(--cn-muted); max-width: 62ch; line-height: 1.75; }
.cn-hero .stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}
.cn-hero .stats span {
  font-family: var(--mono); font-size: 11.5px; color: var(--navy-700);
  background: var(--blue-soft); border: 1px solid var(--cn-line);
  border-radius: 999px; padding: 4px 12px;
}

/* 12 门类色相（L/C 固定，只变 H） */
.cat-tile[data-c="01"] { --h: 272; }
.cat-tile[data-c="02"] { --h:  78; }
.cat-tile[data-c="03"] { --h:  28; }
.cat-tile[data-c="04"] { --h: 168; }
.cat-tile[data-c="05"] { --h: 348; }
.cat-tile[data-c="06"] { --h:  55; }
.cat-tile[data-c="07"] { --h: 224; }
.cat-tile[data-c="08"] { --h: 205; }
.cat-tile[data-c="09"] { --h: 138; }
.cat-tile[data-c="10"] { --h:  14; }
.cat-tile[data-c="12"] { --h: 292; }
.cat-tile[data-c="13"] { --h: 330; }

.cn-tiles {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.cat-tile {
  --h: 272;
  position: relative; display: block; overflow: hidden;
  border-radius: var(--cn-radius); padding: 22px 22px 20px;
  background:
    radial-gradient(120% 120% at 12% 8%, oklch(0.94 0.05 var(--h)) 0%, oklch(0.90 0.09 var(--h)) 55%, oklch(0.86 0.12 var(--h)) 100%);
  border: 1px solid oklch(0.86 0.09 var(--h));
  color: oklch(0.30 0.10 var(--h));
  text-decoration: none;
  transition: transform .28s var(--cn-ease), box-shadow .28s var(--cn-ease), border-color .28s var(--cn-ease);
}
.cat-tile::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, oklch(0.98 0.06 var(--h) / .9), transparent 68%);
  transition: transform .5s var(--cn-ease);
  pointer-events: none;
}
.cat-tile:hover {
  transform: translateY(-4px);
  border-color: oklch(0.72 0.14 var(--h));
  box-shadow: 0 22px 44px -22px oklch(0.45 0.14 var(--h) / .55);
}
.cat-tile:hover::after { transform: scale(1.22) translate(-8px, -10px); }
.cat-tile:active { transform: translateY(-1px); }

.cat-tile .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cat-tile .num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: oklch(0.42 0.13 var(--h)); opacity: .85;
}
.cat-tile .ico { flex: none; width: 46px; height: 46px; opacity: .9; }
.cat-tile .ico svg { width: 100%; height: 100%; display: block; }
.cat-tile h3 {
  font-family: var(--serif); font-size: 25px; margin: 14px 0 6px;
  color: oklch(0.26 0.11 var(--h)); letter-spacing: .01em;
}
.cat-tile .desc { font-size: 12.8px; line-height: 1.65; color: oklch(0.38 0.09 var(--h)); min-height: 2.6em; }
.cat-tile .foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid oklch(0.80 0.10 var(--h) / .8);
  font-size: 12px; color: oklch(0.40 0.12 var(--h));
}
.cat-tile .foot b { font-family: var(--mono); font-weight: 600; }
.cat-tile .foot .go { transition: transform .24s var(--cn-ease); }
.cat-tile:hover .foot .go { transform: translateX(4px); }

/* 门类层的说明条 */
.cn-note {
  margin-top: 30px; padding: 14px 18px; border-radius: 10px;
  background: #fff; border: 1px solid var(--cn-line);
  font-size: 12.5px; color: var(--cn-muted); line-height: 1.7;
}
.cn-note b { color: var(--navy-700); }

/* =========================================================
   L2 专业层 — 学术档案 · 密集
   ========================================================= */
.cn-l2 { padding: 34px 0 64px; --h: 272; }
.cn-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.cn-head .code {
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  color: oklch(0.48 0.14 var(--h)); background: oklch(0.95 0.05 var(--h));
  border: 1px solid oklch(0.88 0.09 var(--h)); border-radius: 6px; padding: 3px 10px;
}
.cn-head h1 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); color: var(--cn-ink); }
.cn-head .sub { font-size: 13.5px; color: var(--cn-muted); margin-left: auto; }

.cn-rule { height: 1px; background: var(--cn-line); margin: 20px 0 26px; }

/* 专业类 = 章节 */
.grp { margin-bottom: 34px; }
.grp-h {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  padding-left: 12px; border-left: 3px solid oklch(0.62 0.15 var(--h));
}
.grp-h .gc { font-family: var(--mono); font-size: 12px; color: oklch(0.50 0.14 var(--h)); }
.grp-h h2 { font-family: var(--serif); font-size: 17px; color: var(--cn-ink); }
.grp-h .n { font-size: 12px; color: var(--cn-muted); margin-left: auto; }

/* 专业 = chip 流（密集、可扫） */
.mj-flow { display: flex; flex-wrap: wrap; gap: 9px; }
.mj-chip {
  position: relative; display: inline-flex; align-items: baseline; gap: 7px;
  background: #fff; border: 1px solid var(--cn-line); border-radius: 10px;
  padding: 9px 13px; font-size: 13.5px; color: var(--cn-body);
  text-decoration: none; cursor: pointer;
  transition: border-color .16s var(--cn-ease), background .16s var(--cn-ease),
              transform .16s var(--cn-ease), box-shadow .16s var(--cn-ease);
}
.mj-chip:hover {
  border-color: oklch(0.66 0.15 var(--h));
  background: oklch(0.975 0.025 var(--h));
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px oklch(0.50 0.14 var(--h) / .6);
}
.mj-chip:active { transform: none; }
.mj-chip .mc { font-family: var(--mono); font-size: 10.5px; color: var(--cn-muted); }
.mj-chip .mn { color: var(--cn-ink); font-weight: 500; }
.mj-chip .mk {
  font-size: 10px; padding: 1px 6px; border-radius: 5px;
  background: #f1ecfb; color: var(--navy-700); border: 1px solid var(--cn-line);
}
.mj-chip .mk.t { background: #fff4e2; color: #8a5a12; border-color: #f2dfba; }
.mj-chip .mk.k { background: #ffe9ee; color: #97344f; border-color: #f6cfd8; }
.mj-chip .mk.tk { background: #fdeaf3; color: #963062; border-color: #f4cfe0; }

/* =========================================================
   L3 课程层 — 培养方案文档 · 学术
   ========================================================= */
.cn-l3 { padding: 34px 0 70px; --h: 272; }

/* 纸张细网格底纹 */
.sheet {
  position: relative; background: #fff;
  border: 1px solid var(--cn-line); border-radius: var(--cn-radius);
  padding: 30px 32px;
  background-image:
    linear-gradient(oklch(0.97 0.012 var(--h)) 1px, transparent 1px);
  background-size: 100% 30px;
}
.sheet + .sheet { margin-top: 22px; }

.mj-title { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mj-title .seal {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center;
  background: oklch(0.94 0.07 var(--h)); border: 1px solid oklch(0.86 0.10 var(--h));
}
.mj-title .seal svg { width: 32px; height: 32px; }
.mj-title h1 { font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); color: var(--cn-ink); line-height: 1.2; }
.mj-title .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mj-title .meta .mono { font-family: var(--mono); font-size: 12px; color: var(--cn-muted); }
.mj-title .meta .tag {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: oklch(0.95 0.05 var(--h)); color: oklch(0.44 0.14 var(--h));
  border: 1px solid oklch(0.88 0.09 var(--h));
}
.mj-title .meta .tag.k { background: #ffe9ee; color: #97344f; border-color: #f6cfd8; }
.mj-title .meta .tag.t { background: #fff4e2; color: #8a5a12; border-color: #f2dfba; }

/* 本硕双栏 */
.deg {
  display: grid; gap: 18px; margin-top: 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deg-col {
  border: 1px solid var(--cn-line); border-radius: 12px; padding: 18px 20px;
  background: oklch(0.988 0.006 var(--h));
}
.deg-col.ug { border-top: 3px solid oklch(0.58 0.16 var(--h)); }
.deg-col.pg { border-top: 3px solid var(--navy-700); }
.deg-col h3 {
  font-family: var(--serif); font-size: 16px; color: var(--cn-ink);
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px;
}
.deg-col h3 .lv {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: #fff; background: oklch(0.52 0.16 var(--h)); border-radius: 4px; padding: 2px 7px;
}
.deg-col.pg h3 .lv { background: var(--navy-700); }
.deg-col .cap { font-size: 12px; color: var(--cn-muted); margin-bottom: 14px; }

.clist { list-style: none; margin: 0; padding: 0; }
.clist li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 8px 0; border-bottom: 1px dashed var(--cn-line);
  font-size: 13.8px; color: var(--cn-body); line-height: 1.6;
}
.clist li:last-child { border-bottom: 0; }
.clist li .idx {
  flex: none; font-family: var(--mono); font-size: 11px; color: var(--cn-muted);
  min-width: 20px; text-align: right;
}
.clist li .cn { color: var(--cn-ink); }
.clist li .fl {
  margin-left: auto; flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: 5px;
  background: #f4f1fb; color: var(--cn-muted); border: 1px solid var(--cn-line);
}

/* 院校层次分档 */
.lv-grid {
  display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.lv-card {
  border: 1px solid var(--cn-line); border-radius: 12px; padding: 15px 17px;
  background: #fff;
}
.lv-card .lh { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.lv-card .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lv-card h4 { font-size: 14px; color: var(--cn-ink); font-family: var(--sans); font-weight: 600; }
.lv-card .cnt {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--cn-muted);
}
.lv-card .cs { font-size: 12.8px; color: var(--cn-body); line-height: 1.7; }
.lv-card .cs .more { color: var(--navy); }
.lv-card.pend { background: #fcfbfe; }
.lv-card.pend .cs { color: var(--cn-muted); font-size: 12.3px; }
.lv-card .src {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--cn-line);
  font-size: 11.5px; color: var(--cn-muted);
}
.lv-card .src a { color: var(--navy); }

/* 层次色 */
.lv-card[data-l="985"] .dot { background: #7b3fc4; }
.lv-card[data-l="211"] .dot { background: #2f6fd0; }
.lv-card[data-l="syl"] .dot { background: #c2453f; }
.lv-card[data-l="mil"] .dot { background: #3d7a4f; }
.lv-card[data-l="yb"]  .dot { background: #d08a1e; }
.lv-card[data-l="zb"]  .dot { background: #5f6b8a; }

/* 数据来源与免责 */
.cn-src {
  margin-top: 22px; padding: 16px 20px; border-radius: 12px;
  background: var(--blue-soft-2); border: 1px solid var(--cn-line);
  font-size: 12.3px; color: var(--cn-muted); line-height: 1.75;
}
.cn-src b { color: var(--navy-700); }
.cn-src ul { margin: 8px 0 0; padding-left: 18px; }
.cn-src li { margin-bottom: 3px; }

/* 相邻专业 */
.cn-next { margin-top: 24px; }
.cn-next .t { font-size: 12px; color: var(--cn-muted); margin-bottom: 10px; font-family: var(--mono); letter-spacing: .08em; }
.cn-next .row { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-next .row a {
  font-size: 12.8px; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--cn-line); color: var(--cn-body);
}
.cn-next .row a:hover { border-color: oklch(0.66 0.15 var(--h)); color: oklch(0.44 0.15 var(--h)); }

/* ---------- 空/错误态 ---------- */
.cn-empty { padding: 70px 0; text-align: center; color: var(--cn-muted); }
.cn-empty h2 { font-family: var(--serif); font-size: 22px; color: var(--cn-ink); margin-bottom: 8px; }
.cn-empty a { color: var(--navy); }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .deg { grid-template-columns: 1fr; }
  .cn-bar-in { flex-wrap: wrap; gap: 10px; }
  .cn-search { flex: 1 1 100%; margin-left: 0; order: 3; }
  .sheet { padding: 22px 18px; }
}
@media (max-width: 640px) {
  .cn-wrap, .cn-bar-in { padding: 0 16px; }
  .cn-tiles { grid-template-columns: 1fr; }
  .cn-l1, .cn-l2, .cn-l3 { padding-top: 24px; }
  .mj-title .seal { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-anim { animation: none; }
  .cat-tile, .mj-chip, .cn-back { transition-duration: .01ms; }
  .cat-tile::after { transition: none; }
}