/* ============================================================
   河北大学公益升学工作台 - Apple-like liquid glass web approximation
   石墨 ink + 冷白 glass + 冷杉绿 accent；网页近似液态玻璃，不是 Apple 原生材料
   ============================================================ */
:root {
  --ink: #122326;
  --ink-2: #405a5d;
  --ink-3: #6f8386;
  --paper: #f4f8f8;
  --paper-2: #e4eeee;
  --paper-3: #f8fbfb;
  --surface: #ffffff;
  --surface-soft: #fdfefe;
  --glass: rgba(255,255,255,.66);
  --glass-strong: rgba(255,255,255,.82);
  --glass-line: rgba(255,255,255,.72);
  --hbu-red: #0f766e;
  --hbu-red-deep: #0a504b;
  --accent-soft: rgba(15,118,110,.10);
  --line: rgba(20,47,50,.10);
  --line-strong: rgba(20,47,50,.18);
  --muted: #728487;

  --rush: #c05a2f;    /* 冲 */
  --steady: #2f6f8f;  /* 稳 */
  --safe: #3f8a5a;    /* 保 */

  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: var(--sans);
  --num: "SF Mono", "Roboto Mono", "Menlo", ui-monospace, monospace;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(19,34,53,.04), 0 18px 48px rgba(19,34,53,.09);
  --shadow-soft: 0 1px 1px rgba(19,34,53,.03), 0 24px 70px rgba(19,34,53,.11);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,250,.92) 46%, rgba(233,242,241,.96)),
    linear-gradient(110deg, rgba(15,118,110,.08), transparent 28%, rgba(94,130,128,.08) 72%, transparent),
    var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(19,34,53,.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(19,34,53,.022) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.42), transparent 72%);
}

.shell { max-width: 1320px; margin: 0 auto; padding: 22px 24px 70px; }

.school-switch {
  display: grid;
  gap: 4px;
  min-width: 138px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.school-switch span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.school-switch select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.2 var(--sans);
}

button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
.file-button:focus-within {
  outline: 2px solid rgba(158,43,37,.7);
  outline-offset: 3px;
}

/* ---------- 欢迎首屏：样式统一在文件末尾"河大启示录欢迎页修正"段 ---------- */

/* ---------- 抬头 masthead ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  position: sticky;
  top: 14px;
  z-index: 30;
  flex-wrap: wrap;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52)),
    rgba(255,255,255,.60);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 18px 52px rgba(19,34,53,.10);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.topbar::after { content: none; }
.masthead-left { display: flex; align-items: center; gap: 16px; }
.brand-seal {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(15,118,110,.16);
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.50)),
    rgba(255,255,255,.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 24px rgba(13,34,36,.08);
  overflow: hidden;
}
.brand-seal img {
  width: 37px;
  height: 37px;
  object-fit: contain;
}

.topbar .eyebrow { margin: 0 0 5px; font-size: 12px; letter-spacing: .08em; color: var(--hbu-red); font-weight: 700; }
.topbar h1 {
  margin: 0; font-family: var(--sans); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.08; letter-spacing: 0; color: var(--ink);
  text-wrap: balance;
}
.topbar-right { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; flex-wrap: wrap; }
.module-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 460px;
}
.module-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 11px;
  border-radius: 999px;
  transition: background .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out);
}
.module-nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.68);
  transform: translateY(-1px);
}
.user-nav { display: flex; align-items: center; gap: 8px; }
.user-nav .nav-link { font-size: 13px; text-decoration: none; color: var(--ink-2); padding: 7px 12px; border-radius: 8px; border: 1px solid transparent; }
.user-nav .nav-link:hover { background: rgba(255,255,255,.72); }
.user-nav .nav-link.primary { background: rgba(169,45,40,.96); color: #fff; border-radius: 999px; }
.user-nav .nav-link.primary:hover { background: var(--hbu-red-deep); }
.user-nav .user-name { font-size: 13px; color: var(--ink); font-weight: 600; }

.ghost-button {
  font-family: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.58); color: var(--ink); border: 1px solid rgba(19,34,53,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.ghost-button:hover { background: rgba(255,255,255,.86); border-color: rgba(19,34,53,.22); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 22px rgba(19,34,53,.10); }
.ghost-button:active { transform: translateY(0); box-shadow: none; }

/* ---------- 工作台栅格 ---------- */
.workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
#predictWorkbench,
#studyHub,
#communityHub,
#moduleRoadmap,
#schoolInfo,
#academicSystem,
#tiebaHub,
#timelineHub,
#majorHub {
  scroll-margin-top: 112px;
}

/* ---------- 产品首屏 ---------- */
.product-hero {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: stretch;
}
.hero-copy,
.hero-panel,
.hero-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.52)),
    rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.18),
    var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(168%);
  -webkit-backdrop-filter: blur(22px) saturate(168%);
}
.hero-copy {
  min-height: 318px;
  padding: clamp(28px, 5vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-copy::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.80), transparent 28%),
    linear-gradient(105deg, rgba(255,255,255,.18), transparent 38%, rgba(15,118,110,.10));
}
.hero-kicker {
  position: relative;
  margin: 0 0 12px;
  color: var(--hbu-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
}
.hero-copy h2 {
  position: relative;
  margin: 0;
  max-width: 760px;
  font-size: clamp(36px, 4.7vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
.hero-copy p:not(.hero-kicker) {
  position: relative;
  margin: 18px 0 0;
  max-width: 640px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.75;
}
.hero-proof {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.hero-proof span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(20,47,50,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  font-size: 12px;
  font-weight: 800;
}
.hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out);
}
.primary-link {
  color: #fff;
  background: linear-gradient(180deg, #bd3a34, var(--hbu-red) 58%, var(--hbu-red-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 30px rgba(129,33,29,.28);
}
.secondary-link {
  color: var(--ink);
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(19,34,53,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.primary-link:hover,
.secondary-link:hover {
  transform: translateY(-1px);
}
.hero-panel {
  min-height: 318px;
  padding: 22px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
}
.hero-panel-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 150px;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(145deg, #17304c, #102033);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px rgba(19,34,53,.20);
}
.hero-panel-main span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 700;
}
.hero-panel-main strong {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.15;
}
.hero-checklist {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.hero-checklist li {
  position: relative;
  padding-left: 15px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  line-height: 1.45;
}
.hero-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
}
.hero-mini-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.hero-mini-grid span {
  min-height: 60px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(19,34,53,.08);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.hero-mini-grid strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.05;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}

.hero-visual {
  min-height: 318px;
  display: grid;
  isolation: isolate;
  background: rgba(12,28,31,.16);
}
.hero-visual img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.hero-visual .hero-emblem-watermark {
  z-index: 0;
  inset: auto 24px 24px auto;
  width: 128px;
  height: 128px;
  object-fit: contain;
  opacity: .14;
  filter: saturate(.8) contrast(1.08);
  transform: none;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,22,24,.32), transparent 42%),
    linear-gradient(180deg, transparent 42%, rgba(7,19,21,.52));
  pointer-events: none;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44);
  pointer-events: none;
}

.asset-credit {
  max-width: 1000px;
  margin: 34px auto 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.7;
  text-align: center;
}
.hero-float {
  position: absolute;
  display: grid;
  gap: 5px;
  max-width: 210px;
  padding: 15px 16px;
  border-radius: 20px;
  color: #f8fffe;
  border: 1px solid rgba(255,255,255,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    rgba(8,28,29,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 18px 44px rgba(4,17,18,.22);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.hero-float span,
.hero-float small {
  color: rgba(248,255,254,.78);
  font-size: 12px;
  font-weight: 700;
}
.hero-float strong {
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
}
.hero-float-main {
  right: 22px;
  top: 22px;
}
.hero-float-sub {
  left: 22px;
  bottom: 22px;
}

/* ---------- 模块路线图 ---------- */
.roadmap-section {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.46)),
    rgba(255,255,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(255,255,255,.16),
    var(--shadow-soft);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
.roadmap-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
}
.roadmap-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(20,47,50,.10);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 14px 34px rgba(13,34,36,.07);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.roadmap-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 42px rgba(13,34,36,.12);
}
.roadmap-card.live {
  color: #f4fffd;
  background:
    radial-gradient(circle at 18% 0%, rgba(107,224,205,.34), transparent 34%),
    linear-gradient(145deg, #163638, #0d2024);
  border-color: rgba(255,255,255,.18);
}
.roadmap-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.roadmap-top strong {
  color: inherit;
  font-size: 21px;
  line-height: 1.2;
}
.roadmap-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.72;
}
.roadmap-card.live p {
  color: rgba(244,255,253,.78);
}
.status-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid transparent;
}
.status-pill.live {
  color: #ebfffb;
  background: rgba(15,118,110,.88);
  border-color: rgba(255,255,255,.20);
}
.status-pill.pending {
  color: #0f5f5a;
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.16);
}
.status-pill.blocked {
  color: #5f516d;
  background: rgba(95,81,109,.10);
  border-color: rgba(95,81,109,.16);
}
.status-pill.risk {
  color: #7a4c2b;
  background: rgba(122,76,43,.11);
  border-color: rgba(122,76,43,.18);
}
.status-pill.planned {
  color: #46596a;
  background: rgba(70,89,106,.10);
  border-color: rgba(70,89,106,.16);
}
.roadmap-actions,
.mini-board,
.safety-list,
.live-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.live-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}
.roadmap-actions a,
.quiet-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}
.roadmap-actions span,
.mini-board span,
.safety-list span,
.live-stack span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(20,47,50,.05);
  font-size: 12px;
  font-weight: 800;
}
.roadmap-card.live .roadmap-actions span {
  color: rgba(244,255,253,.82);
  background: rgba(255,255,255,.10);
}
.roadmap-card.live .live-stack span {
  color: rgba(244,255,253,.88);
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.10);
}
.quiet-action {
  align-self: flex-start;
  margin-top: auto;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(20,47,50,.12);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.58);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

/* ---------- 考生档案卡 ---------- */
.control-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.52)),
    rgba(255,255,255,.58);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.18),
    var(--shadow-soft);
  padding: 20px;
  position: sticky;
  top: 108px;
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.panel-heading { margin-bottom: 17px; }
.panel-kicker {
  display: inline-flex; align-items: center;
  min-height: 24px;
  font-size: 11.5px; letter-spacing: .08em; font-weight: 700;
  color: var(--hbu-red);
  padding: 4px 9px;
  border: 1px solid rgba(169,45,40,.14);
  border-radius: 999px;
  background: rgba(169,45,40,.07);
  margin-bottom: 10px;
}
.panel-heading strong { display: block; font-family: var(--sans); font-size: 18px; line-height: 1.32; font-weight: 700; color: var(--ink); }

.form-grid { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field > span, .field > legend { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.field input[type="number"], .field select {
  width: 100%; font-family: var(--num); font-size: 16px; padding: 12px 13px;
  border: 1px solid rgba(19,34,53,.14); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  color: var(--ink); outline: none; transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out);
}
.field select { font-family: var(--sans); }
.field input:hover, .field select:hover { border-color: rgba(19,34,53,.26); background: rgba(255,255,255,.86); }
.field input:focus, .field select:focus { border-color: rgba(169,45,40,.62); box-shadow: 0 0 0 4px rgba(169,45,40,.11), inset 0 1px 0 rgba(255,255,255,.90); background: #fff; transform: translateY(-1px); }

.fieldset { border: 1px solid rgba(19,34,53,.10); border-radius: var(--radius-sm); padding: 12px 12px 7px; margin: 0; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.68); }
.fieldset legend { padding: 0 6px; }
.fieldset label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); padding: 5px 0; cursor: pointer; }
.fieldset input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--hbu-red); }
.fieldset label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }

.primary-action {
  margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 700; padding: 13px 16px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #253e5e, var(--ink));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(19,34,53,.25);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease-out);
}
.primary-action:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px rgba(19,34,53,.30); transform: translateY(-1px); filter: saturate(1.05); }
.primary-action:active { transform: translateY(1px); }
.primary-action span { color: #f0b7b2; font-size: 13px; }

.import-box { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(19,34,53,.10); }
.file-button { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 9px 13px; border: 1px solid rgba(19,34,53,.13); border-radius: 999px; background: rgba(255,255,255,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); transition: background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.file-button:hover { background: rgba(255,255,255,.86); border-color: rgba(19,34,53,.22); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 8px 20px rgba(19,34,53,.08); }
.file-button input[type="file"] { display: none; }
.file-button span { color: var(--hbu-red); }
.data-status { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- 结果面板 ---------- */
.result-panel { display: grid; gap: 18px; min-width: 0; }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.summary-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.52)),
    rgba(255,255,255,.58);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 18px 18px 17px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.18),
    var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.summary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(169,45,40,.10), transparent 34%);
  pointer-events: none;
}
.summary-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.92); box-shadow: var(--shadow-soft); }
.summary-card span { font-size: 12px; color: var(--muted); }
.summary-card strong { position: relative; display: block; margin: 6px 0 2px; font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 2.7vw, 31px); line-height: 1.12; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-card .meta { margin: 0; font-size: 11.5px; color: var(--muted); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.segmented { display: inline-flex; background: rgba(232,237,245,.70); border: 1px solid rgba(19,34,53,.08); border-radius: 999px; padding: 4px; }
.segment { font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 17px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink-2); transition: color .16s var(--ease-out), background .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.segment:hover { color: var(--ink); }
.segment.active { background: rgba(255,255,255,.92); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 5px 16px rgba(19,34,53,.11); }
.segment:active { transform: scale(.98); }

/* ---------- 结果表 ---------- */
.table-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)),
    var(--surface);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    var(--shadow);
  overflow: hidden;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 720px; }
thead th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); padding: 13px 16px; background: rgba(248,250,252,.82); border-bottom: 1px solid rgba(19,34,53,.08); white-space: nowrap; }
tbody td { padding: 14px 16px; border-bottom: 1px solid rgba(19,34,53,.07); vertical-align: middle; font-size: 13.5px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s var(--ease-out); }
tbody tr:hover { background: rgba(245,247,251,.70); }

.major-name strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.tag-rush { color: var(--rush); background: rgba(192,90,47,.12); }
.tag-steady { color: var(--steady); background: rgba(47,111,143,.12); }
.tag-safe, .tag-pad { color: var(--safe); background: rgba(63,138,90,.12); }
.tag-risk { color: #8b3a2a; background: rgba(139,58,42,.12); }

/* 概率环 */
.prob { display: flex; align-items: center; gap: 9px; }
.dial { --value: 0%; width: 34px; height: 34px; border-radius: 50%; flex: none; background: conic-gradient(var(--hbu-red) var(--value), rgba(232,237,245,.88) 0); -webkit-mask: radial-gradient(circle 10px at center, transparent 98%, #000 100%); mask: radial-gradient(circle 10px at center, transparent 98%, #000 100%); }
.prob strong { font-family: var(--num); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* 位次刻度尺（签名元素） */
.rank-ruler { min-width: 150px; }
.ruler-track { position: relative; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--safe), var(--steady) 52%, var(--rush)); opacity: .88; box-shadow: inset 0 1px 0 rgba(255,255,255,.38); }
.ruler-dot { position: absolute; top: 50%; width: 3px; height: 16px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.ruler-caption { display: flex; justify-content: space-between; margin-top: 6px; }
.ruler-caption span { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ruler-caption span:nth-child(2) { color: var(--ink-2); font-weight: 600; }

/* 空状态 */
.empty-state { background: rgba(255,255,255,.78); border: 1px dashed rgba(19,34,53,.18); border-radius: var(--radius); padding: 40px 20px; text-align: center; }
.empty-state strong { display: block; font-family: var(--serif); font-size: 17px; margin-bottom: 6px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 测算说明 ---------- */
.method-band { margin-top: 34px; padding: 26px 28px; background: linear-gradient(135deg, rgba(19,34,53,.96), rgba(24,45,70,.94)); color: #e9edf2; border-radius: var(--radius); display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: center; box-shadow: 0 20px 54px rgba(19,34,53,.22); }
.method-band .panel-kicker { color: #f4c2be; border-color: rgba(244,194,190,.28); background: rgba(255,255,255,.06); }
.method-band h2 { margin: 6px 0 0; font-family: var(--serif); font-size: 18px; font-weight: 700; color: #fff; }
.method-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.method-steps span { font-size: 12.5px; color: #c3ccd6; padding-left: 14px; position: relative; font-variant-numeric: tabular-nums; }
.method-steps span::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--hbu-red); }

/* ---------- 学习 / 社区 / 工具模块 ---------- */
.module-section {
  margin-top: 42px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.section-heading {
  max-width: 760px;
  margin-bottom: 22px;
}
.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.16;
  letter-spacing: 0;
  text-wrap: balance;
}
.section-heading p {
  margin: 11px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
}
.section-heading.compact {
  margin-bottom: 18px;
}
.resource-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  gap: 14px;
}
.resource-card,
.post-card {
  border: 1px solid rgba(19,34,53,.09);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.66)),
    rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 32px rgba(19,34,53,.06);
  transition: transform .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.resource-card {
  min-height: 170px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.resource-card:hover,
.post-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 16px 34px rgba(19,34,53,.10);
}
.resource-card.featured {
  color: #fff;
  background:
    linear-gradient(145deg, #172d48, #102033);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 42px rgba(19,34,53,.18);
}
.resource-type {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--hbu-red);
  background: rgba(169,45,40,.08);
  font-size: 12px;
  font-weight: 800;
}
.resource-card.featured .resource-type {
  color: #ffd3cf;
  background: rgba(255,255,255,.10);
}
.resource-card h3 {
  margin: 18px 0 0;
  color: inherit;
  font-size: 18px;
  line-height: 1.32;
}
.resource-card p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.resource-card.featured p {
  color: rgba(255,255,255,.74);
}
.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}
.resource-meta span {
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(19,34,53,.05);
  font-size: 12px;
  font-weight: 700;
}
.resource-card.featured .resource-meta span {
  color: rgba(255,255,255,.80);
  background: rgba(255,255,255,.10);
}
.resource-card button {
  align-self: flex-start;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  font-weight: 800;
  cursor: pointer;
}
.community-list {
  display: grid;
  gap: 12px;
}
.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 16px;
}
.community-tabs button {
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(19,34,53,.10);
  background: rgba(255,255,255,.62);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.community-tabs button.active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- 统一液态玻璃按钮系统 ---------- */
.welcome-enter,
.primary-link,
.primary-action,
.user-nav .nav-link.primary,
.community-tabs button.active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f7fffd;
  border: 1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #1ca89b 0%, #0f766e 54%, #073f3b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,36,33,.30),
    0 12px 24px rgba(10,80,75,.22),
    0 2px 4px rgba(10,80,75,.14);
}

.secondary-link,
.ghost-button,
.file-button,
.roadmap-actions a,
.quiet-link,
.resource-card button,
.community-tabs button:not(.active) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(15,118,110,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
    rgba(255,255,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(15,118,110,.08),
    0 9px 22px rgba(13,34,36,.08);
}

.welcome-enter::before,
.primary-link::before,
.primary-action::before,
.user-nav .nav-link.primary::before,
.community-tabs button.active::before,
.secondary-link::before,
.ghost-button::before,
.file-button::before,
.roadmap-actions a::before,
.quiet-link::before,
.resource-card button::before,
.community-tabs button:not(.active)::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.62), transparent 33%),
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 40%, rgba(255,255,255,.14));
}

.welcome-enter::after,
.primary-link::after,
.primary-action::after,
.user-nav .nav-link.primary::after,
.secondary-link::after,
.ghost-button::after,
.file-button::after,
.roadmap-actions a::after,
.quiet-link::after,
.resource-card button::after {
  content: "";
  position: absolute;
  inset: -35% -70%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.42), transparent 64%);
  transform: translateX(-55%) rotate(7deg);
  opacity: 0;
  transition: transform .65s var(--ease-out), opacity .28s var(--ease-out);
}

.welcome-enter:hover,
.primary-link:hover,
.primary-action:hover,
.user-nav .nav-link.primary:hover,
.secondary-link:hover,
.ghost-button:hover,
.file-button:hover,
.roadmap-actions a:hover,
.quiet-link:hover,
.resource-card button:hover {
  transform: translateY(-2px);
}

.welcome-enter:hover::after,
.primary-link:hover::after,
.primary-action:hover::after,
.user-nav .nav-link.primary:hover::after,
.secondary-link:hover::after,
.ghost-button:hover::after,
.file-button:hover::after,
.roadmap-actions a:hover::after,
.quiet-link:hover::after,
.resource-card button:hover::after {
  transform: translateX(55%) rotate(7deg);
  opacity: 1;
}

.welcome-enter:active,
.primary-link:active,
.secondary-link:active,
.ghost-button:active,
.file-button:active,
.primary-action:active,
.roadmap-actions a:active,
.quiet-link:active,
.resource-card button:active,
.user-nav .nav-link.primary:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.26),
    0 4px 12px rgba(13,34,36,.10);
}

.primary-link,
.secondary-link {
  min-height: 46px;
  padding: 11px 22px;
}

.primary-action {
  min-height: 46px;
}

.primary-action span {
  color: rgba(247,255,253,.76);
}

.quiet-action {
  position: relative;
  overflow: hidden;
  border-color: rgba(15,118,110,.14);
  background: rgba(255,255,255,.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.post-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}
.post-topic {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(169,45,40,.07);
  color: var(--hbu-red);
  font-size: 12px;
  font-weight: 800;
}
.post-card h3 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.38;
}
.post-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.post-count {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 54px;
  flex: none;
  border-radius: 16px;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(19,34,53,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.post-count strong {
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.post-count span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.post-card.hot .post-count {
  color: #fff;
  background: var(--hbu-red);
  border-color: rgba(169,45,40,.25);
  box-shadow: 0 10px 24px rgba(169,45,40,.18);
}
.post-card.hot .post-count span {
  color: rgba(255,255,255,.76);
}
.module-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.timeline-list li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(19,34,53,.08);
}
.timeline-list li:last-child {
  border-bottom: 0;
}
.timeline-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.timeline-list strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
/* 升学日历：整行横向四步 */
.timeline-section .timeline-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.timeline-section .timeline-list li {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 20px;
  border-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
.timeline-section .tl-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.timeline-section .tl-step::before {
  content: "";
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--hbu-red);
  box-shadow: 0 0 0 4px rgba(169,45,40,.12);
}

/* ---------- 专业浏览器（专业图谱） ---------- */
.explorer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.explorer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
  height: 40px;
  padding: 0 15px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.explorer-search-icon { color: var(--muted); font-size: 17px; line-height: 1; }
.explorer-search input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.explorer-search input::placeholder { color: var(--ink-3); }
.explorer-count {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.major-explorer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.major-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.66)),
    rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 26px rgba(19,34,53,.05);
  transition: box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.major-card:hover { transform: translateY(-2px); }
.major-card.open { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 36px rgba(19,34,53,.11); }
.major-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
}
.mc-title { min-width: 0; }
.mc-title strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mc-chip {
  font-size: 11px;
  color: var(--ink-2);
  background: rgba(19,34,53,.05);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.mc-chip.fee { color: var(--hbu-red); background: rgba(169,45,40,.08); }
.mc-side { text-align: right; }
.mc-rank {
  display: block;
  font-family: var(--num);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.mc-label { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.mc-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.mc-trend.up { color: var(--rush); background: rgba(192,90,47,.10); }
.mc-trend.down { color: var(--safe); background: rgba(63,138,90,.10); }
.mc-trend.flat { color: var(--muted); background: rgba(19,34,53,.05); }
.mc-caret {
  justify-self: end;
  color: var(--ink-3);
  font-size: 12px;
  transition: transform .18s var(--ease-out);
}
.major-card.open .mc-caret { transform: rotate(180deg); }
.major-card-body { padding: 2px 16px 16px; }
.mc-years { display: grid; }
.mc-yearrow {
  display: grid;
  grid-template-columns: 3.4em repeat(3, 1fr);
  gap: 10px;
  padding: 7px 2px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.mc-yearrow > span { text-align: right; }
.mc-yearrow > span:first-child { text-align: left; color: var(--ink-2); font-weight: 600; }
.mc-yearrow.head { border-top: 0; color: var(--muted); }
.mc-yearrow.head > span:first-child { color: var(--muted); font-weight: 600; }
.mc-note { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }
.explorer-empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
}

/* ---------- 弹窗 ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; padding: 20px; display: flex; align-items: center; justify-content: center; background: rgba(19,34,53,.45); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.modal-overlay[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 380px; background: rgba(255,255,255,.82); border-radius: var(--radius); padding: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 24px 70px rgba(19,34,53,.24); text-align: center; border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); }
.modal-card h2 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; }
.modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.modal-foot { font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.modal-foot a, .modal-sub a { color: var(--hbu-red); text-decoration: none; font-weight: 600; }
.modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.contact-qr { width: 240px; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }

/* ---------- 滑块验证码 ---------- */
.cap-wrap { margin: 6px auto; max-width: 300px; }
.cap-track { position: relative; width: 300px; max-width: 100%; height: 42px; background: rgba(232,237,245,.88); border: 1px solid rgba(19,34,53,.15); border-radius: var(--radius-sm); overflow: hidden; }
.cap-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(158,43,37,.14); }
.cap-gap { position: absolute; top: 0; height: 100%; width: 42px; border: 2px dashed var(--line-strong); border-radius: 9px; box-sizing: border-box; }
.cap-handle { position: absolute; left: 0; top: 0; width: 42px; height: 42px; background: var(--hbu-red); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: grab; user-select: none; font-size: 20px; }
.cap-handle.ok { background: var(--safe); } .cap-handle.bad { background: var(--rush); }
.cap-tip { font-size: 12px; color: var(--muted); margin-top: 6px; cursor: pointer; text-align: center; }
.cap-tip.ok { color: var(--safe); } .cap-tip.bad { color: var(--rush); }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef7f5;
    --ink-2: #b8cac8;
    --ink-3: #8fa19f;
    --paper: #081012;
    --paper-2: #101b1e;
    --paper-3: #132125;
    --surface: #101b1e;
    --surface-soft: #142328;
    --glass: rgba(16,27,30,.66);
    --glass-strong: rgba(21,35,38,.82);
    --glass-line: rgba(255,255,255,.16);
    --line: rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.18);
    --muted: #92a4a2;
    --shadow: 0 1px 1px rgba(0,0,0,.24), 0 18px 48px rgba(0,0,0,.32);
    --shadow-soft: 0 1px 1px rgba(0,0,0,.24), 0 24px 70px rgba(0,0,0,.38);
  }
  body {
    background:
      linear-gradient(180deg, rgba(8,16,18,.98), rgba(10,21,23,.96) 48%, rgba(14,27,31,.98)),
      radial-gradient(circle at 16% 0%, rgba(15,118,110,.22), transparent 34%),
      var(--paper);
  }
  body::before {
    background:
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  }
  .topbar,
  .hero-copy,
  .hero-panel,
  .hero-visual,
  .roadmap-section,
  .control-panel,
  .summary-card,
  .toolbar,
  .resource-card,
  .post-card,
  .major-card,
  .modal-card {
    background:
      linear-gradient(145deg, rgba(24,39,43,.78), rgba(14,25,28,.54)),
      rgba(12,22,25,.56);
    border-color: rgba(255,255,255,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(255,255,255,.06),
      var(--shadow);
  }
	  .welcome-body,
	  .school-switch,
	  .fieldset,
  .field input[type="number"],
  .field select,
  .explorer-search,
  .ghost-button,
  .file-button,
  .secondary-link,
  .hero-proof span,
  .roadmap-card,
  .timeline-section .timeline-list li,
  .post-count,
  .table-wrap,
  .empty-state {
    background:
      linear-gradient(145deg, rgba(29,45,49,.82), rgba(16,28,31,.62)),
      rgba(14,25,28,.62);
    border-color: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow);
  }
  .hero-copy::before {
    background:
      radial-gradient(circle at 18% 0%, rgba(255,255,255,.16), transparent 28%),
      linear-gradient(105deg, rgba(255,255,255,.08), transparent 38%, rgba(15,118,110,.12));
  }
  .roadmap-card.live,
  .resource-card.featured,
  .method-band {
    background:
      radial-gradient(circle at 18% 0%, rgba(58,205,183,.24), transparent 34%),
      linear-gradient(145deg, #153437, #0a171a);
  }
  .roadmap-card p,
  .resource-card p,
  .section-heading p,
  .hero-copy p:not(.hero-kicker),
  .post-card p {
    color: var(--ink-2);
  }
	  .status-pill.pending,
	  .status-pill.planned,
  .tag-safe,
  .tag-pad,
  .resource-type,
  .post-topic,
  .panel-kicker {
    color: #6ee7d5;
    background: rgba(15,118,110,.16);
    border-color: rgba(110,231,213,.18);
  }
  .segmented {
    background: rgba(5,12,14,.42);
    border-color: rgba(255,255,255,.10);
  }
  .segment.active,
  .resource-card button,
  .roadmap-actions a,
  .quiet-link {
    color: var(--ink);
    background: rgba(238,247,245,.92);
  }
  .table-wrap {
    background: rgba(12,22,25,.74);
  }
  thead th {
    background: rgba(18,32,36,.82);
    border-bottom-color: rgba(255,255,255,.10);
  }
  tbody td,
  tbody tr {
    border-color: rgba(255,255,255,.08);
  }
  tbody tr:hover {
    background: rgba(255,255,255,.04);
  }
  .dial {
    background: conic-gradient(var(--hbu-red) var(--value), rgba(255,255,255,.12) 0);
  }
  .ruler-dot {
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface);
  }
  .modal-overlay {
    background: rgba(4,10,12,.64);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .welcome-body,
  .topbar,
  .hero-copy,
  .hero-panel,
  .hero-visual,
  .hero-float,
  .roadmap-section,
  .control-panel,
  .summary-card,
  .toolbar,
  .modal-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .product-hero { grid-template-columns: 1fr; }
  .module-nav { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .roadmap-grid { grid-template-columns: repeat(2, 1fr); }
  .roadmap-card.live { grid-row: auto; grid-column: 1 / -1; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel { position: static; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .method-band { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-card.featured { grid-column: 1 / -1; }
  .module-row { grid-template-columns: 1fr; }
  .timeline-section .timeline-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body::before { background-size: 56px 56px; }
  .topbar { align-items: flex-start; gap: 14px; padding: 14px 15px; border-radius: 22px; top: 10px; }
  .module-nav { gap: 1px; scrollbar-width: none; }
  .module-nav::-webkit-scrollbar { display: none; }
  .module-nav a { flex: 0 0 auto; white-space: nowrap; padding: 7px 7px; font-size: 12.5px; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .user-nav { max-width: 100%; flex-wrap: wrap; }
  #predictWorkbench,
  #studyHub,
  #communityHub,
  #moduleRoadmap,
  #schoolInfo,
  #academicSystem,
  #tiebaHub,
  #timelineHub,
  #majorHub { scroll-margin-top: 210px; }
  .product-hero { margin-top: 16px; gap: 14px; }
  .hero-copy,
  .hero-panel,
  .hero-visual { border-radius: 24px; }
  .hero-copy { min-height: auto; padding: 28px 20px; }
  .hero-copy::before { border-radius: 23px; }
  .hero-copy h2 { font-size: clamp(28px, 8.1vw, 34px); line-height: 1.13; }
  .hero-copy p:not(.hero-kicker) { font-size: 15px; }
  .hero-proof { margin-top: 18px; }
  .hero-panel { min-height: auto; padding: 16px; }
  .hero-panel-main { min-height: 120px; border-radius: 20px; }
  .hero-panel-main strong { font-size: 24px; }
  .hero-visual { min-height: 360px; }
  .hero-visual::after { border-radius: 23px; }
  .hero-float { max-width: 184px; border-radius: 18px; padding: 13px 14px; }
  .hero-float-main { right: 14px; top: 14px; }
  .hero-float-sub { left: 14px; bottom: 14px; }
  .roadmap-section { margin-top: 18px; padding: 18px; border-radius: 24px; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .roadmap-card { min-height: auto; border-radius: 20px; }
  .roadmap-top { align-items: flex-start; }
  .live-stack { grid-template-columns: 1fr; }
  .workspace { margin-top: 22px; gap: 18px; }
  .control-panel { padding: 18px; border-radius: 22px; }
  .summary-grid { gap: 10px; }
  .summary-card { padding: 15px; border-radius: 22px; }
  .toolbar { align-items: stretch; border-radius: 22px; padding: 8px; }
  .segmented { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .segment { padding: 8px 10px; }

  .table-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  table { border-collapse: separate; min-width: 0; }
  thead { display: none; }
  tbody { display: grid; gap: 12px; }
  tbody tr {
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: var(--radius);
    background:
      linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.66)),
      rgba(255,255,255,.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      var(--shadow);
  }
  tbody tr:hover { background: rgba(255,255,255,.86); }
  tbody tr:last-child td { border-bottom: 0; }
  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(19,34,53,.08);
    font-size: 13px;
  }
  tbody td::before {
    flex: 0 0 5.5em;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  tbody td:nth-child(1) {
    display: block;
    padding-top: 0;
  }
  tbody td:nth-child(1)::before { content: none; }
  tbody td:nth-child(2)::before { content: "分档"; }
  tbody td:nth-child(3)::before { content: "概率"; }
  tbody td:nth-child(4)::before { content: "门槛"; }
  tbody td:nth-child(5)::before { content: "位次差"; }
  tbody td:nth-child(6)::before { content: "计划"; }
  tbody td:nth-child(7) {
    display: grid;
    gap: 5px;
  }
  tbody td:nth-child(7)::before { content: "依据"; }
  .major-name strong { font-size: 15px; line-height: 1.35; }
  .major-name .meta { display: block; margin-top: 5px; line-height: 1.55; }
  .prob { justify-content: flex-end; }
  .rank-ruler { min-width: 150px; max-width: 190px; margin-left: auto; }
  .ruler-caption span { font-size: 10px; }
  .method-band { padding: 22px 18px; border-radius: 22px; }
  .method-steps { grid-template-columns: 1fr; }
  .module-section { margin-top: 34px; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: auto; }
  .post-card { align-items: flex-start; padding: 16px; }
  .timeline-list li { grid-template-columns: 76px 1fr; }
  .major-explorer { grid-template-columns: 1fr; }
  .explorer-search { flex-basis: 100%; order: -1; }
  .major-card-head { gap: 10px; }
}
@media (max-width: 480px) {
  .shell { padding: 14px 15px 46px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .topbar h1 { font-size: 25px; }
  .topbar .eyebrow { font-size: 11.5px; letter-spacing: .08em; }
  .summary-card strong { font-size: 22px; }
  .hero-actions { width: 100%; }
  .primary-link,
  .secondary-link { flex: 1 1 100%; }
  .hero-visual { min-height: 330px; }
  .hero-float { position: absolute; }
  .hero-float strong { font-size: 18px; }
  .roadmap-top { display: grid; gap: 10px; }
.status-pill { justify-self: start; }
  .import-box .ghost-button,
  .file-button {
    flex: 1 1 100%;
    justify-content: center;
  }
  .hero-mini-grid { grid-template-columns: 1fr; }
  .timeline-section .timeline-list { grid-template-columns: 1fr; }
  .major-card-head { grid-template-columns: minmax(0, 1fr) auto; }
  .major-card-head .mc-caret { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .welcome-inner,
  .welcome-line,
  .welcome-sign,
  .welcome-enter {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
/* ---- 图形验证码组件 ---- */
.imgcap-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.imgcap-img{border:1px solid #d5dae2;border-radius:8px;background:#f2f4f8;cursor:pointer;height:50px;width:150px}
.imgcap-refresh{border:1px solid #d5dae2;background:#fff;border-radius:8px;width:38px;height:38px;font-size:18px;cursor:pointer;line-height:1}
.imgcap-input{flex:1;min-width:120px;padding:9px 12px;border:1px solid #d5dae2;border-radius:8px;font-size:16px;text-transform:uppercase;letter-spacing:2px}
.imgcap-ok{padding:9px 16px;border:0;border-radius:8px;background:#2f6bff;color:#fff;font-weight:600;cursor:pointer}
.imgcap-ok:disabled{opacity:.55;cursor:default}
.imgcap-tip{flex-basis:100%;font-size:13px;min-height:16px;color:#64748b}
.imgcap-tip.ok{color:#0f9d58}
.imgcap-tip.bad{color:#e5484d}

/* ---------- 河大启示录欢迎页修正 ---------- */
@font-face {
  font-family: "HbuTitleSerif";
  src: url("./assets/fonts/hbu-title-serif.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
}

.lg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.welcome {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 0;
  color: #22304e;
  background: #0d141c;
  overflow: hidden;
  transition: opacity .48s ease, transform .48s var(--ease-out);
}

.welcome.welcome-hide,
.welcome.is-hidden {
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
}

.environment-theatre,
.environment-theatre > *,
.season-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.environment-theatre { z-index: 1; }
.environment-theatre > span,
.season-particle { position: absolute; display: block; }

.photo-stack {
  inset: 0;
  transform-origin: 52% 38%;
  animation: welcomeKenBurns 60s ease-in-out infinite alternate;
}

.photo-layer {
  position: absolute;
  inset: 0;
  display: block;
  background: center / cover no-repeat;
}

.photo-layer.season-spring { background-image: url("./assets/hbu-season-spring-glass.jpg"); opacity: 1; }
.photo-layer.season-summer { background-image: url("./assets/hbu-season-summer-glass.jpg"); opacity: 0; }
.photo-layer.season-autumn { background-image: url("./assets/hbu-season-autumn-glass.jpg"); opacity: 0; }
.photo-layer.season-winter { background-image: url("./assets/hbu-season-winter-glass.jpg"); opacity: 0; }

.grade-dawn {
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 238, 206, .52), transparent 33%),
    linear-gradient(115deg, rgba(249, 178, 196, .46), rgba(255, 213, 152, .22) 46%, transparent 76%);
  mix-blend-mode: soft-light;
  opacity: .34;
}

.grade-day {
  inset: 0;
  background:
    radial-gradient(circle at 42% 24%, rgba(255,255,255,.40), transparent 31%),
    linear-gradient(180deg, rgba(186, 225, 255, .20), rgba(126, 173, 102, .14));
  mix-blend-mode: screen;
  opacity: .06;
}

.title-aura {
  top: 2%;
  left: 50%;
  width: min(560px, 72vw);
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.5), rgba(255,244,214,.2) 42%, transparent 72%);
  transform: translate3d(-50%, 0, 0);
  opacity: .32;
}

.light-shaft {
  top: -28%;
  left: -34%;
  width: 168%;
  height: 78%;
  background: linear-gradient(112deg, transparent 0 31%, rgba(255,244,215,0) 38%, rgba(255,248,224,.34) 48%, rgba(255,255,255,.18) 54%, transparent 67%);
  mix-blend-mode: screen;
  opacity: .44;
  transform: rotate(-24deg);
  animation: welcomeShaft 18s ease-in-out infinite alternate;
}

.shaft-b { opacity: .28; transform: rotate(-12deg); animation-duration: 23s; }
.shaft-c { opacity: .18; transform: rotate(-34deg); animation-duration: 27s; }

.ground-fog {
  left: -18%;
  right: -18%;
  bottom: -9%;
  height: 34%;
  background:
    radial-gradient(ellipse at 46% 72%, rgba(255,255,255,.62), rgba(255,255,255,.18) 42%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: .42;
  filter: blur(15px);
  animation: welcomeFog 28s ease-in-out infinite alternate;
}

.fog-b { bottom: -14%; height: 28%; opacity: .26; animation-duration: 36s; }

.canopy-wind,
.water-ripples,
.weather-veil,
.season-tint { display: none; }

.season-particles { z-index: 9; }
.season-particle {
  top: -8%;
  left: var(--x);
  opacity: 0;
}

.particle-petal {
  width: 10px;
  height: 15px;
  border-radius: 80% 20% 70% 30%;
  background: rgba(242, 174, 202, .86);
  animation: welcomeParticleFall var(--dur) linear var(--delay) infinite;
}

.particle-leaf,
.particle-snow,
.particle-firefly,
.particle-rain { display: none; }

.open-dim {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: radial-gradient(62% 74% at 28% 66%, rgba(8, 14, 28, .12), rgba(8, 14, 28, .025) 66%, transparent 88%);
  opacity: 0;
  transition: opacity .55s ease .08s;
}
.letter-open .open-dim { opacity: 1; }

.welcome-inner {
  position: relative;
  z-index: 12;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(32px, 8.5dvh, 92px) 28px clamp(24px, 7dvh, 64px) clamp(28px, 7vw, 110px);
  text-align: left;
  transform: none;
}

.welcome-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
  align-self: center;
}

.welcome-mark {
  width: clamp(68px, 5.6vw, 86px);
  height: clamp(68px, 5.6vw, 86px);
  padding: 7px;
  object-fit: contain;
  border: 1px solid rgba(213, 178, 108, .68);
  border-radius: 50%;
  background: rgba(247, 251, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 0 2.5px rgba(255,255,255,.5),
    0 8px 24px rgba(94,68,22,.2);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: .94;
  animation: welcomeRiseIn .8s var(--ease-out) both;
}

.welcome-title {
  margin: 0;
  color: #d9bc7a;
  font-family: "HbuTitleSerif", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(58px, 6.8vw, 86px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .12em;
  text-indent: .12em;
  background: linear-gradient(180deg, #fff6dc 0%, #f3dca7 38%, #d7ad62 72%, #b88432 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .55px rgba(90, 60, 18, .16);
  filter:
    drop-shadow(0 1px 0 rgba(255,251,238,.58))
    drop-shadow(0 4px 18px rgba(80,55,16,.26))
    drop-shadow(0 8px 28px rgba(26,36,58,.42));
  text-wrap: balance;
  opacity: 0;
  transform: translateY(-20px);
  animation: welcomeDropText 1.28s var(--ease-out) .18s forwards;
}

.welcome-letter {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 14px;
  width: min(610px, 100%);
  margin-top: auto;
}

.welcome-letter::before {
  content: "";
  position: absolute;
  width: min(520px, 100%);
  height: 82%;
  top: 3%;
  left: 50%;
  z-index: 0;
  border-radius: 34px;
  background: radial-gradient(ellipse at center, rgba(8, 44, 99, .16) 0 42%, transparent 72%);
  transform: translate3d(calc(-50% + 10px), 22px, 0);
  opacity: 0;
  transition: opacity .5s ease .2s;
}
.letter-open .welcome-letter::before { opacity: 1; }

.letter-envelope {
  position: absolute;
  left: 6%;
  top: 2%;
  z-index: 3;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.letter-envelope.env-landed { animation: welcomeEnvBob 3.6s ease-in-out .6s infinite alternate; }
.letter-envelope:focus-visible { outline: 2px solid #ffd98f; outline-offset: 6px; border-radius: 22px; }

.env-flight {
  display: grid;
  justify-items: center;
  gap: 12px;
  opacity: 0;
}
.env-landed .env-flight { opacity: 1; }

.env-body {
  position: relative;
  width: 212px;
  height: 134px;
  border-radius: 18px;
  background:
    radial-gradient(130% 160% at 18% 0%, rgba(255,255,255,.38), rgba(236,244,250,.18) 58%),
    rgba(250, 252, 255, .2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 16px 40px rgba(7,15,27,.32);
  transition: transform .3s var(--ease-out);
}
.letter-envelope:hover .env-body { transform: translateY(-4px) rotate(-1.4deg); }

.env-flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transform-origin: top center;
  transition: transform .38s var(--ease-out);
}

.env-seal {
  position: absolute;
  left: 50%;
  top: 56%;
  translate: -50% -50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 46% 54% 49% 51% / 54% 46% 56% 44%;
  background:
    radial-gradient(circle at 62% 78%, rgba(255,170,155,.2), transparent 42%),
    radial-gradient(circle at 34% 28%, #cd544c, #ad322d 44%, #88201c 74%, #741915);
  box-shadow:
    inset 0 2px 4px rgba(255,192,182,.45),
    inset 0 -5px 9px rgba(52,7,5,.55),
    inset 0 0 0 7px rgba(116,22,18,.3),
    0 6px 16px rgba(70,12,9,.42);
  filter: url(#wax-rough) drop-shadow(0 3px 5px rgba(60,10,8,.35));
}

.env-seal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(66,10,8,.55);
}

.env-seal::after {
  content: "";
  position: absolute;
  inset: 14px;
  background: linear-gradient(165deg, #63130f, #7c1d17 55%, #6b1511);
  -webkit-mask: url("./assets/hbu-emblem.png") center / contain no-repeat;
  mask: url("./assets/hbu-emblem.png") center / contain no-repeat;
}

.env-hint {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(15,21,37,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  letter-spacing: .1em;
  color: rgba(246,234,204,.96);
  text-shadow: 0 1px 8px rgba(20,14,2,.5);
}

.letter-open .letter-envelope {
  pointer-events: none;
  animation: none;
  transition: opacity .32s ease .16s, transform .5s var(--ease-out) .06s;
  opacity: 0;
  transform: scale(.8) translateY(8%);
}
.letter-open .env-flap { transform: rotateX(-155deg); }

.welcome-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 30px 34px 28px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 30px;
  background:
    radial-gradient(130% 170% at 16% 0%, rgba(255,255,255,.16), rgba(255,255,255,.018) 56%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(246,250,255,.018) 48%, rgba(255,246,222,.035)),
    rgba(252,253,255,.026);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 0 0 1px rgba(255,255,255,.36),
    inset 0 -16px 30px -18px rgba(255,255,255,.5),
    0 24px 60px rgba(7,15,27,.26);
  opacity: 0;
  visibility: hidden;
  transform: scale(.36) translate3d(-8%, 24%, 0);
  transform-origin: 14% 96%;
  pointer-events: none;
}

.letter-settled .welcome-card {
  backdrop-filter: blur(14px) saturate(210%) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(210%) brightness(1.08);
}

.letter-open .welcome-card {
  visibility: visible;
  pointer-events: auto;
  animation: welcomeCardSpring .64s cubic-bezier(.3, 1.4, .44, 1) .08s both;
}

.welcome-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 16%),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 10%, transparent 90%, rgba(255,255,255,.12));
  pointer-events: none;
}

.welcome-line {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(16,26,38,.94);
  text-shadow: 0 1px 10px rgba(255,255,255,.34);
  font-size: 17px;
  font-weight: 500;
  line-height: 2;
  text-align: left;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(-18px);
  animation: none;
}

.letter-kicker {
  font-weight: 650;
  color: rgba(10,21,34,.96);
}

.letter-open .welcome-line { animation: welcomeDropText .9s var(--ease-out) .3s forwards; }
.letter-open .welcome-line:nth-child(2) { animation-delay: .52s; }
.letter-open .welcome-line:nth-child(3) { animation-delay: .74s; }

.letter-stamp {
  position: relative;
  z-index: 1;
  justify-self: end;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 122px;
  margin-top: 2px;
  color: rgba(18,31,45,.92);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-14px);
}

.letter-stamp img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  opacity: .9;
}
.letter-open .letter-stamp { animation: welcomeDropText .8s var(--ease-out) .86s forwards; }

.glass-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 30px;
  cursor: pointer;
  color: #f7fffd;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #1ca89b 0%, #0f766e 54%, #073f3b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,36,33,.30),
    0 12px 24px rgba(10,80,75,.22),
    0 2px 4px rgba(10,80,75,.14);
  transition: transform .18s var(--ease-out), box-shadow .22s var(--ease-out);
}
.glass-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.62), transparent 33%),
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 40%, rgba(255,255,255,.14));
}
.glass-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(0,36,33,.30),
    0 16px 30px rgba(10,80,75,.30);
}
.glass-button:active { transform: translateY(1px) scale(.985); }
.glass-button:focus-visible { outline: 2px solid #ffd98f; outline-offset: 4px; }

.welcome-button {
  z-index: 1;
  width: max-content;
  min-width: 148px;
  justify-self: center;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}
.letter-open .welcome-button {
  pointer-events: auto;
  animation: welcomeDropText .8s var(--ease-out) .98s forwards;
}

/* ---------- 模块平级权重修正 ---------- */
.roadmap-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.roadmap-card,
.roadmap-card.live,
.resource-card,
.resource-card.featured {
  min-height: 190px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.58)),
    rgba(255,255,255,.62);
  border-color: rgba(20,47,50,.10);
}
.roadmap-card.live p,
.resource-card.featured p {
  color: var(--ink-2);
}
.roadmap-card.live .live-stack span,
.roadmap-card.live .roadmap-actions span,
.resource-card.featured .resource-meta span {
  color: var(--muted);
  background: rgba(255,255,255,.62);
}
.roadmap-card.live,
.resource-card.featured {
  grid-row: auto;
  grid-column: auto;
}
.workspace {
  margin-top: 44px;
}

@keyframes welcomeDropText {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes welcomeRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: .94; transform: translateY(0); }
}
@keyframes welcomeKenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.8%, 1.2%, 0); }
}
@keyframes welcomeShaft {
  from { opacity: .32; transform: rotate(-24deg) translate3d(-18px, 0, 0); }
  to { opacity: .48; transform: rotate(-22deg) translate3d(24px, 0, 0); }
}
@keyframes welcomeFog {
  from { opacity: .30; transform: translate3d(-7%, 0, 0); }
  to { opacity: .42; transform: translate3d(7%, -3%, 0); }
}
@keyframes welcomeParticleFall {
  0% { opacity: 0; transform: translate3d(0, -24px, 0) rotate(0deg); }
  12% { opacity: .88; }
  78% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(var(--drift), 108vh, 0) rotate(320deg); }
}
@keyframes welcomeEnvBob {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-6px) rotate(-1.2deg); }
}
@keyframes welcomeCardSpring {
  0% { opacity: .2; transform: scale(.36) translate3d(-8%, 24%, 0); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); }
}

@media (max-width: 1060px) {
  .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .welcome { align-items: stretch; padding: 0; }
  .photo-layer { background-position: center top; }
  .title-aura {
    top: 5%;
    width: 118vw;
    height: 270px;
    opacity: .48;
  }
  .welcome-inner {
    min-height: 100dvh;
    align-items: center;
    justify-content: flex-start;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    text-align: center;
  }
  .welcome-brand { transform: translateY(-4px); }
  .welcome-mark {
    width: 56px;
    height: 56px;
    padding: 5px;
  }
  .welcome-title {
    margin-top: 0;
    font-size: clamp(38px, 10.4vw, 46px);
    line-height: 1.12;
    letter-spacing: .08em;
  }
  .welcome-letter {
    gap: 12px;
    width: min(100%, 360px);
    justify-items: center;
  }
  .letter-envelope {
    left: 50%;
    translate: -50% 0;
    top: 6%;
  }
  .env-body { width: 186px; height: 118px; }
  .env-seal { width: 56px; height: 56px; }
  .env-hint { font-size: 12px; }
  .welcome-card {
    width: 100%;
    gap: 12px;
    padding: 23px 22px 22px;
    border-radius: 24px;
  }
  .welcome-line {
    font-size: 15.3px;
    line-height: 1.86;
    letter-spacing: 0;
  }
  .letter-stamp {
    min-width: 104px;
    font-size: 12px;
    gap: 4px;
  }
  .letter-stamp img { width: 38px; height: 38px; }
  .welcome-button {
    min-width: 138px;
    min-height: 48px;
    margin-top: 2px;
    padding: 0 28px;
    font-size: 15px;
  }
  .roadmap-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope { display: none !important; }
  .welcome-letter::before,
  .open-dim { opacity: 1; }
  .welcome-title,
  .welcome-line,
  .letter-stamp,
  .welcome-button,
  .welcome-mark,
  .welcome-card {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .season-particle,
  .light-shaft {
    opacity: 0 !important;
  }
}

/* ---------- 液态玻璃 shader 层（v2：有机液膜，零 backdrop-filter） ---------- */
.lg-canvas {
  position: absolute;
  inset: -34px;
  z-index: 0;
  width: calc(100% + 68px);
  height: calc(100% + 68px);
  pointer-events: none;
}
/* shader 首帧成功后卡片全部视觉交给画布：无背景、无边框、无阴影、无 backdrop-filter */
.lg-on .welcome-card,
.lg-on.letter-settled .welcome-card,
.lg-on .letter-settled .welcome-card {
  overflow: visible;
  background: none;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lg-on .welcome-card::after { display: none; }
.lg-on .welcome-letter::before { display: none; } /* 投影由 shader 按光向绘制 */
.lg-on .welcome-line { text-shadow: 0 1px 14px rgba(255, 255, 255, .5); }

/* ---------- 场景层（campus-scene.js：调色 + 微风 + 水面） ---------- */
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-on .photo-layer { opacity: 0 !important; transition: none; }
.scene-on .color-grade,
.scene-on .season-tint { display: none; } /* 调色已在 shader 内完成，避免二次叠色 */

/* ---------- 季节状态机 CSS 回退（无 WebGL 时可见换季） ---------- */
/* 主体感知取景在窄屏会窗口高于原图：回退层露出的上下带用天空→水面渐变承接 */
.js-scene .environment-theatre {
  background: linear-gradient(180deg, #b9d3e8 0%, #cfe0ec 18%, #d8e3e8 46%, #6a7a80 74%, #3c464e 100%);
}
.photo-layer { transition: opacity 2.6s ease; }
.photo-layer.season-summer { filter: saturate(1.28) brightness(1.04) contrast(1.05) hue-rotate(8deg); }
.photo-layer.season-autumn { filter: sepia(.42) saturate(1.25) hue-rotate(-12deg); }
.photo-layer.season-winter { filter: sepia(.2) hue-rotate(168deg) saturate(.5) brightness(1.12); }
#welcome[data-season] .photo-layer { opacity: 0; }
#welcome[data-season="spring"] .photo-layer.season-spring,
#welcome[data-season="summer"] .photo-layer.season-summer,
#welcome[data-season="autumn"] .photo-layer.season-autumn,
#welcome[data-season="winter"] .photo-layer.season-winter { opacity: 1; }

/* ---------- 天气粒子画布（替代 CSS span 粒子） ---------- */
.weather-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* JS 氛围层接管后，旧 CSS span 粒子彻底退役（含 ?noweather 时，避免冬天飘樱花） */
.js-scene .season-particle,
.weather-on .season-particle { display: none !important; }

/* ---------- 季节圆点控件 ---------- */
.season-dots {
  position: absolute;
  right: 20px;
  bottom: 18px;
  z-index: 14;
  display: flex;
  gap: 10px;
}
.season-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, transform .18s var(--ease-out);
}
.season-dot:hover { transform: scale(1.25); }
.season-dot.active {
  background: #d9bc7a;
  border-color: #f3dca7;
  box-shadow: 0 0 10px rgba(217, 188, 122, .65);
}
.season-dot:focus-visible { outline: 2px solid #ffd98f; outline-offset: 3px; }
@media (max-width: 640px) {
  /* 小屏：圆点挪到右上角，避开卡片底部的"进入"按钮区 */
  .season-dots {
    right: 14px;
    bottom: auto;
    top: calc(14px + env(safe-area-inset-top, 0px));
  }
  /* 兜底：真机浏览器工具栏压缩视口时，欢迎层内容可滚动，"进入"永远可达 */
  .welcome { overflow-y: auto; }
  .welcome-inner { min-height: 100%; }
}

/* ---------- 叙事分页区（Apple 产品页式逐段展开） ---------- */
.story-band {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}
.story-head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 16px 8px;
}
.story-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.story-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.story-panel {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: stretch;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.46)),
    rgba(255,255,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    var(--shadow-soft);
}
.story-panel.flip { grid-template-columns: .92fr 1.08fr; }
.story-panel.flip .story-media { order: 2; }
.story-panel.flip .story-copy { order: 1; }
.story-media {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}
.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 6s var(--ease-out);
}
.story-panel.in-view .story-media img { transform: scale(1.08); }
.story-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(26px, 4vw, 52px);
}
.story-index {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--hbu-red);
}
.story-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
.story-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* 展开动画：默认可见（reduced-motion / 无 JS 安全），仅在允许动效时先隐藏 */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .reveal.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 860px) {
  .story-panel,
  .story-panel.flip { grid-template-columns: 1fr; min-height: auto; }
  .story-panel.flip .story-media { order: 0; }
  .story-panel.flip .story-copy { order: 0; }
  .story-media { max-height: 240px; }
  .story-panel { border-radius: 24px; }
  .story-copy { padding: 22px 20px 26px; }
}

/* ============================================================
   Apple 式分幕主页（chapters）
   设计读数：variance 7 / motion 6 / density 4。
   单强调色 = 站点既有深青 #0f766e；分幕靠明暗底色交替，不加卡片壳。
   ============================================================ */
.shell.chapters {
  max-width: none;
  padding: 0;
}
.chapters .chapter {
  width: 100%;
  margin: 0;
  padding-block: clamp(52px, 9vh, 88px);
}
.chapter-inner {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.chapters section[id],
.chapters .ch-head[id] { scroll-margin-top: clamp(96px, 12vh, 120px); }
@media (max-width: 640px) {
  .chapters section[id],
  .chapters .ch-head[id] { scroll-margin-top: 190px; }
}
.chapter-light { background: transparent; }
.chapter-parchment {
  background: linear-gradient(180deg, rgba(236, 233, 222, .55), rgba(240, 238, 229, .78));
}
.chapter-dark {
  background:
    radial-gradient(circle at 14% 0%, rgba(58, 205, 183, .16), transparent 40%),
    linear-gradient(160deg, #14282b, #0c1a1d);
  color: #f2fbf9;
}
.chapter-dark h2 { color: #f6fffd; }
.chapter-dark p { color: rgba(230, 246, 243, .82); }

/* ---------- masthead ---------- */
.chapters .topbar {
  border-radius: 0;
  top: 0;
  margin: 0;
  width: 100%;
  padding-inline: clamp(16px, 4vw, 44px);
}
.brand-name {
  margin: 0;
  font-family: "HbuTitleSerif", "Noto Serif SC", "Songti SC", serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--ink);
  line-height: 1.2;
}
.module-nav a[aria-current="true"] {
  color: #0f766e;
  box-shadow: inset 0 -2px 0 #0f766e;
}

/* ---------- 主 hero：一张实景 + 一句话 ---------- */
.chapter-hero {
  position: relative;
  min-height: 86dvh;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 64%;
}
.chapter-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(10, 20, 22, .52));
  pointer-events: none;
}
.hero-title-wrap {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 48px) clamp(40px, 7vh, 72px);
}
.chapter-hero h1 {
  margin: 0;
  max-width: 15em;
  color: #ffffff;
  font-family: "HbuTitleSerif", "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .02em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(8, 14, 16, .55);
}

/* ---------- 章节文字 ---------- */
.ch-head { max-width: 720px; }
.ch-head h2,
.ch-copy h2,
.ch-center h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.chapter-dark .ch-center h2 { color: #f6fffd; }
.ch-head p,
.ch-copy > p,
.ch-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 40em;
}
.ch-lead { color: rgba(230, 246, 243, .85); }

/* ---------- 校园信息：图文分栏 ---------- */
.ch-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ch-media { margin: 0; }
.ch-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 3px 5px 30px rgba(0, 0, 0, .22);
}
.fact-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 18px;
  padding: 0;
}
.fact-link {
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(20, 47, 50, .16);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out);
}
.fact-link:hover { transform: translateY(-1px); border-color: #0f766e; }
.fact-link:active { transform: scale(.97); }
.fact-link:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.ch-link {
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  text-decoration: none;
}
.ch-link:hover { text-decoration: underline; }

/* ---------- AI 章：深色整幕 ---------- */
#aiHub .ch-center {
  text-align: center;
  display: grid;
  justify-items: center;
}
#aiHub .ch-lead { margin-top: 4px; }
.ai-objects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 34px;
}
.ai-object {
  min-width: 96px;
  min-height: 48px;
  padding: 12px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #eafffb;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .18s var(--ease-out), background .18s var(--ease-out);
}
.ai-object:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); }
.ai-object:active { transform: scale(.97); }
.ai-object:focus-visible { outline: 2px solid #6ee7d5; outline-offset: 2px; }
.pill-button {
  min-height: 48px;
  padding: 12px 34px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f7fffd;
  background: linear-gradient(180deg, #15968a, #0f766e 58%, #0a4f4a);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 24px rgba(6, 48, 45, .34);
  transition: transform .18s var(--ease-out), box-shadow .22s var(--ease-out);
}
.pill-button:hover { transform: translateY(-1px); }
.pill-button:active { transform: scale(.96); }
.pill-button:focus-visible { outline: 2px solid #6ee7d5; outline-offset: 3px; }

/* ---------- 社团与活动 ---------- */
.clubs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 18px;
}
.clubs-tab {
  min-height: 44px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(20, 47, 50, .14);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s var(--ease-out);
}
.clubs-tab[aria-selected="true"] {
  color: #f7fffd;
  background: #0f766e;
  border-color: #0f766e;
}
.clubs-tab:active { transform: scale(.97); }
.clubs-tab:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.clubs-note {
  margin: 0 0 4px;
  max-width: 62em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}
.clubs-note strong { color: var(--ink); font-weight: 700; }
.fresh-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 5px 0 2px;
  border-radius: 50%;
  vertical-align: middle;
}
.fresh-recent { background: #0f766e; }
.clubs-groupnote {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  max-width: 60em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rush, #b06a2f);
}
.clubs-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.club-item {
  padding: 18px 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(20, 47, 50, .12);
  border-radius: 18px;
}
.club-unverified {
  background: rgba(255, 253, 247, .7);
  border-style: dashed;
  border-color: rgba(176, 106, 47, .4);
}
.club-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.club-item strong { display: block; font-size: 16.5px; margin-bottom: 6px; }
.club-item p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.club-activity { display: block; margin-top: 10px; font-size: 12.5px; color: #0f766e; }
.club-flag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.flag-recent { color: #0b5f57; background: rgba(15, 118, 110, .12); }
.flag-roster { color: var(--muted); background: rgba(20, 47, 50, .06); }
.flag-unverified { color: #9a5a22; background: rgba(176, 106, 47, .13); }
.club-src { margin-top: 8px; display: inline-block; font-size: 12px; color: #0f766e; }

/* 官方系统外链章 */
.official-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.official-link {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(20, 47, 50, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: transform .18s var(--ease-out), border-color .18s var(--ease-out);
}
.official-link:hover { transform: translateY(-2px); border-color: #0f766e; }
.official-link:active { transform: scale(.98); }
.official-link:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.official-link strong { font-size: 16px; color: var(--ink); }
.official-link span { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.official-link em { font-size: 12.5px; color: #0f766e; font-style: normal; letter-spacing: .02em; }
.official-note {
  margin: 20px 0 0;
  max-width: 60em;
  padding: 14px 18px;
  border-left: 3px solid #0f766e;
  background: rgba(15, 118, 110, .06);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  border-radius: 0 12px 12px 0;
}
.clubs-empty {
  grid-column: 1 / -1;
  padding: 44px clamp(20px, 4vw, 40px);
  border: 1px dashed rgba(20, 47, 50, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
  max-width: 560px;
}
.clubs-empty strong { display: block; font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.clubs-empty p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.clubs-source { font-size: 13px; color: var(--muted); }

/* ---------- 保留的功能区在无壳布局下的宽度约束 ---------- */
.chapters > .workspace,
.chapters > .method-band {
  width: min(1120px, calc(100% - clamp(40px, 10vw, 96px)));
  margin-inline: auto;
}
.chapters > .workspace { margin-top: 8px; }
.chapter-predict-head { padding-bottom: 20px !important; }
.chapters > .method-band { margin-block: 28px 0; }
.chapters .module-section { margin-top: 0; }

/* ---------- 未来规划 ---------- */
.future-rows {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  max-width: 760px;
}
.future-rows li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.future-rows li:last-child { border-bottom: 0; }
.future-rows strong { font-size: 17px; color: #f2fbf9; }
.future-rows span { font-size: 15px; line-height: 1.65; color: rgba(226, 244, 241, .74); }

/* ---------- 页脚 ---------- */
.site-footer { padding-block: clamp(36px, 6vh, 56px) !important; }
.footer-brand {
  margin: 0 0 12px;
  font-family: "HbuTitleSerif", "Noto Serif SC", "Songti SC", serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
}
.footer-brand span {
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .08em;
}
.chapters .asset-credit { margin: 0; max-width: 64em; }

/* ---------- AI 独立页 ---------- */
.ai-page .ai-chat-band {
  min-height: calc(100dvh - 96px);
  display: flex;
  align-items: stretch;
}
.ai-chat-inner {
  display: grid;
  align-content: start;
  gap: 18px;
  width: min(760px, 100%);
}
.ai-chat-head h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #f6fffd;
  text-wrap: balance;
}
.ai-page .ai-objects { justify-content: flex-start; margin: 4px 0 2px; }
.ai-log-page {
  max-height: none;
  min-height: 240px;
  flex: 1;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}
.ai-log-page .ai-ai span {
  background: rgba(255, 255, 255, .1);
  color: #eefffb;
  border-color: rgba(255, 255, 255, .14);
}
.ai-page .ai-input-row input {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  color: #f4fffd;
}
.ai-page .ai-input-row input::placeholder { color: rgba(230, 246, 243, .55); }
.ai-page-msg { margin: 0; min-height: 20px; font-size: 14px; color: rgba(230, 246, 243, .8); }
.ai-page-msg a { color: #6ee7d5; font-weight: 700; }
@media (max-width: 640px) {
  .ai-page .ai-chat-band { min-height: calc(100dvh - 150px); }
  .ai-log-page { min-height: 180px; }
}

/* ---------- AI 弹窗 ---------- */
.ai-card { width: min(560px, calc(100vw - 32px)); }
.ai-log {
  display: grid;
  gap: 10px;
  max-height: 44vh;
  min-height: 120px;
  overflow-y: auto;
  margin: 14px 0;
  padding: 4px 2px;
}
.ai-row { display: flex; }
.ai-row span {
  max-width: 86%;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.65;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-me { justify-content: flex-end; }
.ai-me span { background: #0f766e; color: #f4fffd; border-bottom-right-radius: 4px; }
.ai-ai span {
  background: rgba(20, 47, 50, .07);
  color: var(--ink);
  border: 1px solid rgba(20, 47, 50, .1);
  border-bottom-left-radius: 4px;
}
.ai-input-row { display: flex; gap: 10px; }
.ai-input-row input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 47, 50, .18);
  border-radius: 12px;
}
.ai-input-row input:focus-visible { outline: 2px solid #0f766e; outline-offset: 1px; }
.ai-input-row .pill-button { min-height: 46px; padding: 10px 24px; font-size: 15px; }
#aiMsg a { color: #0f766e; font-weight: 700; }

/* ---------- 响应式 ---------- */
@media (max-width: 1068px) {
  .ch-split { grid-template-columns: 1fr; }
  .ch-split .ch-media { order: -1; }
  .clubs-list { grid-template-columns: repeat(2, 1fr); }
  .official-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 834px) {
  .chapters .chapter { padding-block: clamp(44px, 7vh, 60px); }
  .chapter-hero { min-height: 78dvh; }
  .future-rows li { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  .clubs-list { grid-template-columns: 1fr; }
  .official-grid { grid-template-columns: 1fr; }
  .ai-objects { gap: 9px; }
  .ai-object { min-width: 74px; padding: 11px 16px; flex: 1 1 40%; }
  .chapter-hero h1 { font-size: clamp(26px, 7.4vw, 32px); }
  .brand-name { font-size: 20px; }
  .chapters > .workspace,
  .chapters > .method-band { width: calc(100% - 30px); }
}
@media (prefers-reduced-motion: reduce) {
  .fact-link, .ai-object, .pill-button, .clubs-tab { transition: none; }
}

/* ---- 校园贴吧 ---- */
.forum{margin-top:8px}
.forum-bar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:14px}
.forum-tabs{display:flex;flex-wrap:wrap;gap:8px}
.forum-tab{border:1px solid #d7dce5;background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;font-size:14px;color:#334}
.forum-tab.active{background:#2f6bff;border-color:#2f6bff;color:#fff}
.forum-count{opacity:.7;font-size:12px}
.forum-actions{display:flex;gap:8px;align-items:center}
.inbox-badge{background:#e5484d;color:#fff;border-radius:999px;padding:1px 7px;font-size:12px;margin-left:4px}
.forum-list{display:flex;flex-direction:column;gap:10px}
.thread-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e6e9f0;border-radius:12px;padding:14px 16px;background:#fff;cursor:pointer;transition:box-shadow .15s}
.thread-row:hover{box-shadow:0 4px 16px rgba(20,40,90,.08)}
.thread-main h3{margin:0 0 4px;font-size:16px;color:#1b2a4a}
.thread-meta{font-size:13px;color:#7a8699}
.thread-stat{text-align:center;min-width:48px}
.thread-stat strong{display:block;font-size:18px;color:#2f6bff}
.thread-stat span{font-size:12px;color:#7a8699}
.thread-detail{border:1px solid #e6e9f0;border-radius:12px;padding:18px;background:#fff;margin:12px 0}
.thread-detail h3{margin:0 0 6px}
.thread-body{margin-top:12px;line-height:1.7;color:#243}
.reply-list{display:flex;flex-direction:column;gap:10px}
.reply-item{border:1px solid #eef0f5;border-radius:10px;padding:12px 14px;background:#fbfcfe}
.reply-meta{font-size:13px;color:#7a8699;margin-bottom:4px}
.reply-body{line-height:1.6;color:#243}
.reply-form{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.reply-form textarea,#ntTitle,#ntBody{width:100%;padding:10px 12px;border:1px solid #d7dce5;border-radius:10px;font-size:15px;font-family:inherit}
.forum-msg,.modal-foot.bad{font-size:13px;color:#e5484d}
.forum-msg.bad{color:#e5484d}
.forum-empty,.forum-loading,.forum-hint{color:#7a8699;font-size:14px;padding:8px 0}
.inbox-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.inbox-item{border:1px solid #eef0f5;border-radius:10px;padding:12px 14px}
.inbox-item.unread{border-left:3px solid #e5484d;background:#fff7f7}
.inbox-title{font-weight:600;color:#1b2a4a}
.inbox-body{font-size:14px;color:#334;margin:4px 0}
.inbox-time{font-size:12px;color:#98a2b3}
@media (max-width:600px){
  .forum-bar{flex-direction:column;align-items:stretch}
  .forum-actions{justify-content:space-between}
}