/* ============================================================
   河北大学公益升学工作台 - 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}
}

/* ============================================================
   欢迎页 · 安静图书馆重制（2026-07-16 claude-quiet-library）
   主视觉 = 抽象图书馆照片；流光 = 低强度建筑照明；四季 = 同机位交叉淡入。
   无 backdrop-filter、无粒子、无液态玻璃。中性单强调色（近黑）。
   ============================================================ */
:root {
  --wc-ink: #1c1e22;          /* 近黑主文本 */
  --wc-ink-soft: #4a4e56;
  --wc-surface: #fbfbfa;      /* 信件面：近白，非暖米黄 */
  --wc-surface-line: rgba(28,30,34,.10);
  --wc-on-photo: #f6f7f8;     /* 照片上的浅色文字 */
  --wc-on-photo-soft: rgba(246,247,248,.82);
}

/* 覆盖旧 .welcome 基座：改为图书馆场景铺满，内容左下静置 */
.welcome#welcome {
  position: fixed; inset: 0; z-index: 2000;
  display: block; padding: 0; color: var(--wc-ink);
  background: #101216; overflow: hidden;
  transition: opacity .5s ease;
}
.welcome#welcome.welcome-hide,
.welcome#welcome.is-hidden { opacity: 0; pointer-events: none; }

.wc-scene { position: absolute; inset: 0; overflow: hidden; }
/* 四季底图：共享同一 size/position → 建筑柱网/楼层线跨季严格一致，无 shader 形变 */
.wc-season {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 60%;
  opacity: 0;
  transition: opacity 2.6s ease;
  will-change: opacity;
}
/* 四季使用同机位独立实景母片：环境真实变化，建筑轮廓与镜头保持一致。 */
.wc-spring { background-image: url("./assets/hbu-season-spring.png?v=2026071802"); }
.wc-summer { background-image: url("./assets/hbu-season-summer.png?v=2026071802"); }
.wc-autumn { background-image: url("./assets/hbu-season-autumn.png?v=2026071802"); }
.wc-winter { background-image: url("./assets/hbu-season-winter.png?v=2026071802"); }
.wc-season::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.wc-summer::after {
  background: radial-gradient(circle at 72% 18%, rgba(255,232,168,.14), transparent 34%);
}
.wc-autumn::after {
  background: linear-gradient(180deg, rgba(210,119,42,.06), rgba(106,54,18,.12));
}
.wc-winter::after {
  background:
    linear-gradient(180deg, rgba(213,230,244,.12) 0%, transparent 45%),
    linear-gradient(180deg, transparent 58%, rgba(239,247,251,.34) 78%, rgba(247,251,253,.48) 100%);
  mix-blend-mode: screen;
}
.welcome[data-season="spring"] .wc-spring,
.welcome[data-season="summer"] .wc-summer,
.welcome[data-season="autumn"] .wc-autumn,
.welcome[data-season="winter"] .wc-winter { opacity: 1; }

/* 压暗层：仅为文字可读性做低对比压暗，不是模糊 */
.wc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,16,28,.34) 0%, rgba(5,16,28,0) 30%),
    linear-gradient(75deg, rgba(6,16,27,.42) 0%, rgba(6,16,27,.12) 40%, rgba(6,16,27,0) 68%),
    linear-gradient(0deg, rgba(6,12,14,.34) 0%, rgba(6,12,14,0) 34%);
}

/* 自然光：位置由系统时间计算，不做循环扫光。 */
.wc-natural-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--wc-sun-strength,.12);
  background:
    radial-gradient(circle at var(--wc-sun-x,72%) var(--wc-sun-y,22%),
      rgba(255,244,211,.62) 0%, rgba(255,207,137,.24) 18%, transparent 48%),
    linear-gradient(var(--wc-ray-angle,118deg),rgba(255,221,164,.16),transparent 38%);
  mix-blend-mode: soft-light;
  transition: opacity 8s linear,background-position 8s linear;
}
.wc-building-lights {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--wc-building-light,0); mix-blend-mode: screen;
  background:
    repeating-linear-gradient(180deg,transparent 0 8.2%,rgba(255,195,91,.38) 8.5% 10.8%,transparent 11.2% 13.5%),
    radial-gradient(ellipse at 69% 50%,rgba(255,185,76,.32),transparent 31%);
  -webkit-mask-image: radial-gradient(ellipse 31% 34% at 69% 49%,#000 12%,rgba(0,0,0,.86) 58%,transparent 78%);
  mask-image: radial-gradient(ellipse 31% 34% at 69% 49%,#000 12%,rgba(0,0,0,.86) 58%,transparent 78%);
  transition: opacity 12s linear;
}
.welcome[data-season="winter"] .wc-building-lights { filter: brightness(1.12); }

/* 品牌：小而克制，左上 */
.wc-top {
  position: absolute; top: clamp(20px, 4vw, 40px); left: clamp(20px, 4vw, 44px);
  display: flex; align-items: center; gap: 14px; z-index: 5;
}
.wc-seal {
  display: grid; place-items: center; width: 68px; height: 68px; padding: 5px;
  border-radius: 50%; background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 4px 18px rgba(5,14,27,.20), inset 0 0 0 1px rgba(25,73,145,.08);
}
.wc-emblem { width: 100%; height: 100%; padding: 0; object-fit: contain; filter: none; opacity: 1; }
.wc-brand-rule { width: 1px; height: 58px; background: rgba(255,255,255,.62); box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.wc-brand-copy { display: grid; gap: 5px; color: var(--wc-on-photo); text-shadow: 0 2px 12px rgba(0,0,0,.46); }
.wc-word {
  font-family: "HbuTitleSerif", "Songti SC", serif;
  font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: .08em; color: var(--wc-on-photo);
}
.wc-university { font-family: Georgia,serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .15em; color: rgba(255,255,255,.82); }

/* 内容：左下静置，宽度受限；信件为实心面板（非毛玻璃） */
.wc-inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(28px, 4vw, 58px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 100%;
}
.wc-envelope {
  position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) auto;
  align-items: center; gap: 0; width: min(520px,100%); min-height: 112px;
  padding: 16px 18px; border: 1px solid rgba(226,201,139,.32); border-radius: 16px;
  background: linear-gradient(112deg,rgba(15,22,27,.46),rgba(18,24,27,.24));
  -webkit-backdrop-filter: blur(24px) saturate(1.32); backdrop-filter: blur(24px) saturate(1.32);
  box-shadow: 0 22px 64px rgba(3,9,13,.30), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06);
  color: var(--wc-on-photo); font: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--ease-out), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow: hidden; isolation: isolate;
}
.wc-envelope::before {
  content: ""; position: absolute; inset: -55% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 18% 16%,rgba(255,255,255,.46),transparent 23%),linear-gradient(108deg,transparent 27%,rgba(255,255,255,.20) 44%,rgba(255,255,255,.04) 57%,transparent 72%);
  transform: translateX(-42%) rotate(-5deg); animation: wc-glass-flow 8s ease-in-out infinite;
}
.wc-envelope::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none; border-radius: 15px;
  border: 1px solid rgba(255,255,255,.17); box-shadow: inset 0 0 22px rgba(255,255,255,.07),inset 14px 0 28px rgba(154,210,224,.06),inset -14px 0 28px rgba(255,221,174,.06);
}
@keyframes wc-glass-flow { 0%,100%{transform:translateX(-42%) rotate(-5deg);opacity:.62} 50%{transform:translateX(48%) rotate(-5deg);opacity:.94} }
.wc-envelope:hover {
  transform: translateY(-3px); border-color: rgba(229,204,142,.56);
  background: linear-gradient(112deg,rgba(30,38,42,.54),rgba(22,29,32,.30));
  box-shadow: 0 22px 52px rgba(6,12,19,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.wc-envelope:active { transform: translateY(0) scale(.99); }
.wc-env-icon {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 0;
  color: #fff; background: transparent; box-shadow: none;
}
.wc-env-icon svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.wc-env-copy { display: grid; gap: 7px; min-width: 0; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.28); }
.wc-env-kicker { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #ddc284; }
.wc-env-title {
  font-family: "HbuTitleSerif","Songti SC",serif; font-size: clamp(22px,2.2vw,29px);
  font-weight: 900; line-height: 1.1; letter-spacing: .045em; text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.wc-env-open { display: inline-flex; align-items: center; gap: 10px; padding-left: 14px; font-size: 11px; color: rgba(255,255,255,.70); white-space: nowrap; }
.wc-env-open span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; font-size: 20px; transition: transform .22s ease, background .22s ease; }
.wc-envelope:hover .wc-env-open span { transform: translate(2px,-2px); background: rgba(255,255,255,.12); }
.wc-envelope:focus-visible { outline: 2px solid var(--wc-on-photo); outline-offset: 4px; }

.wc-card {
  width: min(560px, 100%);
  background: var(--wc-surface);
  border: 1px solid var(--wc-surface-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(12,14,18,.12), 0 30px 70px rgba(12,14,18,.38);
  padding: clamp(22px, 3.4vw, 34px);
  color: var(--wc-ink);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events: none;
  display: none;
}
.welcome.letter-open .wc-card { display: block; }
.welcome.letter-open .wc-envelope { display: none; }
/* 触发一帧后再点亮，保证 display:block → 过渡生效 */
.welcome.letter-settled .wc-card,
.welcome.letter-open .wc-card { opacity: 1; transform: none; pointer-events: auto; }
.wc-kicker { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--wc-ink); }
.wc-line { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: var(--wc-ink-soft); }
.wc-sign { margin: 8px 0 22px; font-size: 14px; color: var(--wc-ink-soft); }
.wc-enter {
  appearance: none; border: 0; cursor: pointer;
  background: var(--wc-ink); color: #fff;
  font: inherit; font-size: 16px; font-weight: 500;
  padding: 12px 30px; border-radius: 10px; min-height: 48px;
  transition: background .2s ease, transform .12s ease;
}
.wc-enter:hover { background: #33363c; }
.wc-enter:active { transform: translateY(1px); }
.wc-enter:focus-visible { outline: 2px solid var(--wc-ink); outline-offset: 3px; }

@media (max-width: 640px) {
  .wc-inner { padding: 20px 18px 26px; gap: 14px; }
  .wc-card { width: 100%; }
  .wc-envelope { grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; min-height: 76px; padding: 12px; }
  .wc-env-icon { width: 44px; height: 44px; border-radius: 10px; }
  .wc-env-icon svg { width: 26px; height: 26px; }
  .wc-env-title { font-size: 20px; }
  .wc-env-kicker { font-size: 9px; }
  .wc-env-open { font-size: 0; gap: 0; }
  .wc-env-open span { width: 30px; height: 30px; font-size: 14px; }
}

/* 关动效：四季不轮换（由 welcome.js 保证不切换），背景与内容仍完整 */
@media (prefers-reduced-motion: reduce) {
  .wc-season { transition: none; }
  .wc-card { transition: none; }
}

/* 欢迎页环境增强：天气 Canvas、系统时间、晨昏光线与四季控制 */
.wc-weather {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; pointer-events: none;
}
.wc-water {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  width: 100%; height: 34%; pointer-events: none; opacity: .48;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 35%);
  mask-image: linear-gradient(to bottom,transparent,#000 35%);
}
.wc-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--wc-light-opacity,.45); transition: background 1.8s ease, opacity 1.8s ease;
  background: linear-gradient(115deg,rgba(255,206,145,var(--wc-warmth,.08)),rgba(10,22,44,var(--wc-night,.05)) 72%);
}
.wc-scene::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--wc-night,0); transition: opacity 3s linear;
  background: linear-gradient(180deg,rgba(5,14,40,.88),rgba(8,21,42,.42) 58%,rgba(2,10,22,.58));
  mix-blend-mode: multiply;
}
.welcome[data-daytime="morning"] .wc-scene::after {
  background: linear-gradient(115deg, rgba(255,205,139,.22), transparent 45%);
}
.welcome[data-daytime="evening"] .wc-scene::after {
  background: linear-gradient(118deg, rgba(255,156,97,.24), transparent 52%), linear-gradient(0deg, rgba(35,28,50,.12), transparent 55%);
}
.welcome[data-daytime="night"] .wc-scene::after {
  opacity: .72; background: linear-gradient(180deg, rgba(10,20,43,.38), rgba(13,24,42,.12) 55%, rgba(5,12,24,.28));
}
.wc-status {
  position: absolute; z-index: 5; top: clamp(22px,4vw,42px); right: clamp(22px,4vw,48px);
  display: grid; justify-items: end; color: var(--wc-on-photo);
  text-align: right; text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.wc-clock {
  font-family: Georgia,"Times New Roman",serif; font-size: clamp(38px,4.6vw,66px); font-weight: 400; line-height: .95;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.wc-date { margin-top: 9px; font-size: 13px; letter-spacing: .03em; color: var(--wc-on-photo-soft); }
.wc-weather-label {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; color: rgba(255,255,255,.9); font-family: Georgia,"Songti SC",serif; font-size: 13px;
  box-shadow: none;
}
.wc-weather-label > span:first-child { font-size: 15px; line-height: 1; }
@media (max-width: 640px) {
  .wc-top { top: max(18px,env(safe-area-inset-top)); left: 18px; gap: 9px; }
  .wc-seal { width: 46px; height: 46px; padding: 4px; }
  .wc-emblem { padding: 0; }
  .wc-brand-rule { height: 34px; }
  .wc-brand-copy { gap: 4px; }
  .wc-word { font-size: 19px; letter-spacing: .07em; }
  .wc-university { max-width: 112px; overflow: hidden; font-size: 6px; letter-spacing: .11em; white-space: nowrap; }
  .wc-status { top: max(19px,env(safe-area-inset-top)); right: 18px; }
  .wc-clock { font-size: 26px; }
  .wc-date { margin-top: 5px; font-size: 10px; }
  .wc-weather-label { margin-top: 6px; padding: 5px 7px; font-size: 10px; }
  .welcome.letter-open .wc-inner { padding-bottom: 20px; }
  .welcome.letter-open .wc-card { max-height: calc(100dvh - 174px); overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-weather, .wc-water { display: none; }
  .wc-scene::after { transition: none; }
  .wc-envelope::before { animation: none; transform: none; }
  .wc-building-lights { transition: none; }
}

/* ============================================================
   AI 问答独立页 · ChatGPT 式（2026-07-16 claude-quiet-library）
   中性单色（弃绿）、居中对话列、底部输入条、附件与联网、无毛玻璃。
   ============================================================ */
:root {
  --ai-bg: #ffffff;
  --ai-surface-2: #f4f4f5;      /* 用户气泡 / 输入条底 */
  --ai-line: #e6e6e8;
  --ai-ink: #1c1e22;            /* 主文本 / 主按钮 */
  --ai-ink-soft: #565a62;
  --ai-muted: #8a8f98;
  --ai-accent: #1c1e22;         /* 单强调色 = 近黑，同欢迎页 */
}
.aichat {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--ai-bg); color: var(--ai-ink);
  font-family: var(--sans);
}
.aichat-col { width: min(760px, 100%); margin: 0 auto; padding: 0 20px; }

/* 顶栏：极简 */
.aichat-top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 22px; background: var(--ai-bg);
  border-bottom: 1px solid var(--ai-line);
}
.aichat-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ai-ink); }
.aichat-brand img { width: 30px; height: 30px; object-fit: contain; }
.aichat-brand .brand-name { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.aichat-nav { display: flex; gap: 16px; margin-left: auto; }
.aichat-nav a { color: var(--ai-ink-soft); text-decoration: none; font-size: 15px; }
.aichat-nav a:hover { color: var(--ai-ink); }
.aichat-top .user-nav { display: flex; align-items: center; gap: 10px; }

/* 对话线程：可滚动区 */
.aichat-thread { flex: 1; overflow-y: auto; padding: 28px 0 12px; }

/* 首屏引导（空态） */
.aichat-hero { padding: 40px 0 8px; text-align: center; }
.aichat-hero h1 { margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; letter-spacing: -.01em; }
.aichat-hero p { margin: 0 auto 22px; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--ai-ink-soft); }
.aichat-suggest { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aichat-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px;
  padding: 9px 14px; border-radius: 12px; min-height: 40px;
  background: var(--ai-bg); border: 1px solid var(--ai-line); color: var(--ai-ink-soft);
  transition: border-color .18s ease, color .18s ease;
}
.aichat-chip:hover { border-color: var(--ai-muted); color: var(--ai-ink); }
.aichat-chip:focus-visible { outline: 2px solid var(--ai-ink); outline-offset: 2px; }

/* 消息行 */
.aichat-row { display: flex; margin: 14px 0; }
.aichat-me { justify-content: flex-end; }
.aichat-ai { justify-content: flex-start; }
.aichat-bubble {
  font-size: 16px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  max-width: 92%;
}
.aichat-me .aichat-bubble {
  background: var(--ai-surface-2); color: var(--ai-ink);
  padding: 11px 15px; border-radius: 16px; max-width: 80%;
}
.aichat-ai .aichat-bubble { color: var(--ai-ink); padding: 2px 0; }
/* 回答里的官方链接（"点这里一键直达"）：可点击、可换行，色随主题强调色 */
.aichat-ai .aichat-bubble a {
  color: #2456a6; text-decoration: underline; text-underline-offset: 3px;
  word-break: break-all;
}
.aichat-ai .aichat-bubble a:hover { opacity: .8; }

/* 正在输入 */
.aichat-typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.aichat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai-muted); animation: aichat-blink 1.2s infinite ease-in-out; }
.aichat-typing i:nth-child(2) { animation-delay: .18s; }
.aichat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes aichat-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* 底部输入坞 */
.aichat-dock { position: sticky; bottom: 0; background: var(--ai-bg); padding: 8px 0 14px; border-top: 1px solid transparent; }
.aichat-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; }
.aichat-chip-file {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ai-ink-soft);
  background: var(--ai-surface-2); border: 1px solid var(--ai-line); border-radius: 10px; padding: 5px 8px 5px 10px;
}
.aichat-chip-web { color: var(--ai-ink); }
.aichat-chip-x { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ai-muted); padding: 0 2px; }
.aichat-chip-x:hover { color: var(--ai-ink); }

.aichat-composer {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--ai-bg); border: 1px solid var(--ai-line); border-radius: 22px;
  padding: 6px 6px 6px 8px; margin-top: 8px;
  box-shadow: 0 1px 2px rgba(20,22,28,.05);
}
.aichat-composer:focus-within { border-color: var(--ai-muted); }
.aichat-attach, .aichat-web, .aichat-send {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 0; background: none;
  color: var(--ai-ink-soft);
}
.aichat-attach:hover, .aichat-web:hover { background: var(--ai-surface-2); color: var(--ai-ink); }
.aichat-web { width: auto; padding: 0 12px; gap: 6px; border-radius: 20px; font: inherit; font-size: 14px; }
.aichat-web span { display: inline-block; }
.aichat-web.is-on { background: var(--ai-ink); color: #fff; }
.aichat-attach:focus-visible, .aichat-web:focus-visible, .aichat-send:focus-visible { outline: 2px solid var(--ai-ink); outline-offset: 2px; }
#aiInput {
  flex: 1; align-self: center; border: 0; outline: 0; resize: none; background: none;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ai-ink);
  padding: 9px 2px; max-height: 180px; min-height: 24px;
}
#aiInput::placeholder { color: var(--ai-muted); }
.aichat-send { background: var(--ai-ink); color: #fff; }
.aichat-send:hover { background: #33363c; }
.aichat-send:disabled { opacity: .4; cursor: default; }
.aichat-foot { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--ai-muted); }
.aichat-foot a { color: var(--ai-ink); font-weight: 600; }
.aichat-err { color: #b42318; }

@media (max-width: 640px) {
  .aichat-col { padding: 0 14px; }
  .aichat-top { padding: 10px 14px; }
  .aichat-nav { gap: 12px; }
  .aichat-hero { padding: 28px 0 4px; }
  .aichat-bubble { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .aichat-typing i { animation: none; opacity: .5; }
}

/* ---------- AI 页 · 抽象图书馆背景 + 极轻流光（2026-07-16 阶段一，欢迎页不受影响） ---------- */
.aichat { position: relative; }
.aichat-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: url("./assets/hbu-library-hero.jpg");
  background-size: cover; background-position: center 68%;
  filter: saturate(.5) contrast(.86);
}
/* 近白洗层：把照片压成低对比“空间秩序”，柱网/窗格/台阶仍可辨，无模糊 */
.aichat-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.92) 100%);
}
/* 单条流光：白色宽光带在照片层上缓慢横移，被洗层再压一次 → 极轻微 */
.aichat-bg-band {
  position: absolute; top: -20%; bottom: -20%; width: 42%; z-index: 1;
  background: linear-gradient(80deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-50vw) rotate(5deg);
  animation: aichat-sweep 16s linear infinite;
  will-change: transform;
}
@keyframes aichat-sweep {
  0%   { transform: translateX(-50vw) rotate(5deg); }
  100% { transform: translateX(140vw) rotate(5deg); }
}
.aichat-top, .aichat-thread, .aichat-dock { position: relative; z-index: 1; }
.aichat-top { background: rgba(255,255,255,.92); }
.aichat-dock { background: rgba(255,255,255,.94); }
@media (prefers-reduced-motion: reduce) {
  .aichat-bg-band { animation: none; transform: translateX(24vw) rotate(5deg); opacity: .5; }
}
/* AI 页作用域：顶栏用户区改中性（不影响其它页面的全局 user-nav 样式） */
.aichat .user-nav a, .aichat .user-nav button {
  background: none; border: 1px solid var(--ai-line); color: var(--ai-ink-soft);
  border-radius: 10px; padding: 7px 14px; font-size: 14px; box-shadow: none;
}
.aichat .user-nav a:hover, .aichat .user-nav button:hover { border-color: var(--ai-muted); color: var(--ai-ink); }
/* AI 页作用域：auth-ui 注入的 .nav-link.primary（免费注册绿胶囊）改中性；小屏顶栏不换行 */
.aichat .user-nav .nav-link.primary {
  background: var(--ai-ink); color: #fff; border: 0; box-shadow: none;
  border-radius: 10px; padding: 8px 14px;
}
.aichat .user-nav .nav-link.primary:hover { background: #33363c; }
@media (max-width: 640px) {
  .aichat-top { flex-wrap: nowrap; gap: 10px; }
  .aichat-brand .brand-name { font-size: 15px; white-space: nowrap; }
  .aichat-nav { display: none; }  /* 小屏只留品牌(可点回主页)与登录区 */
  .aichat .user-nav { margin-left: auto; }
  .aichat .user-nav .nav-link { white-space: nowrap; }
}

/* ============================================================
   AI 工作台 · GPT 式对话布局（Codex 2026-07-16）
   只作用于 ai.html：清晰品牌、可收起历史侧栏、无玻璃背景。
   ============================================================ */
.aichat {
  --ai-bg: #ffffff;
  --ai-sidebar-bg: #f7f7f8;
  --ai-sidebar-active: #e9e9eb;
  --ai-line: #e5e5e7;
  --ai-ink: #1d1d1f;
  --ai-ink-soft: #4b4d52;
  --ai-muted: #74777d;
  --ai-blue: #315f9f;
  display: block;
  min-height: 100dvh;
  background: var(--ai-bg);
  color: var(--ai-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
.aichat .ai-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: 280px;
  flex-direction: column;
  background: var(--ai-sidebar-bg);
  border-right: 1px solid var(--ai-line);
  transition: width 180ms ease, transform 180ms ease;
}
.ai-sidebar-head {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px 18px;
}
.aichat .aichat-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--ai-ink);
  text-decoration: none;
}
.aichat .aichat-brand img {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}
.aichat .aichat-brand .brand-name {
  overflow: hidden;
  color: var(--ai-ink);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
}
.ai-icon-button,
.ai-sidebar-close,
.ai-sidebar-toggle,
.aichat .aichat-attach,
.aichat .aichat-web,
.aichat .aichat-send,
.ai-history-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ai-ink-soft);
  cursor: pointer;
}
.ai-icon-button svg,
.ai-sidebar-link svg,
.ai-new-chat svg,
.ai-history-delete svg,
.aichat .aichat-attach svg,
.aichat .aichat-web svg,
.aichat .aichat-send svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.ai-icon-button:hover,
.ai-sidebar-link:hover,
.ai-new-chat:hover,
.ai-history-delete:hover,
.aichat .aichat-attach:hover,
.aichat .aichat-web:hover { background: #e8e8e9; color: var(--ai-ink); }
.ai-icon-button:focus-visible,
.ai-sidebar-link:focus-visible,
.ai-new-chat:focus-visible,
.ai-history-open:focus-visible,
.ai-history-delete:focus-visible,
.aichat .aichat-attach:focus-visible,
.aichat .aichat-web:focus-visible,
.aichat .aichat-send:focus-visible,
.aichat .aichat-chip:focus-visible { outline: 2px solid var(--ai-blue); outline-offset: 2px; }
.ai-sidebar-close { margin-left: auto; }
.ai-new-chat {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  margin: 4px 12px 18px;
  padding: 0 12px;
  border: 1px solid #d8d8da;
  border-radius: 9px;
  background: #fff;
  color: var(--ai-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ai-new-chat svg { width: 18px; height: 18px; }
.ai-history-label {
  padding: 0 18px 8px;
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 600;
}
.ai-history { overflow-y: auto; padding: 0 8px; }
.ai-history-item { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.ai-history-item.is-active { background: var(--ai-sidebar-active); }
.ai-history-open {
  min-width: 0;
  flex: 1;
  padding: 10px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ai-ink-soft);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ai-history-item.is-active .ai-history-open,
.ai-history-open:hover { color: var(--ai-ink); }
.ai-history-delete { width: 32px; height: 32px; margin-right: 4px; opacity: 0; }
.ai-history-item:hover .ai-history-delete,
.ai-history-item:focus-within .ai-history-delete { opacity: 1; }
.ai-history-delete svg { width: 16px; height: 16px; }
.ai-history-empty { padding: 10px; color: var(--ai-muted); font-size: 12px; line-height: 1.5; }
.ai-sidebar-foot { margin-top: auto; padding: 14px 12px 18px; border-top: 1px solid var(--ai-line); }
.ai-sidebar-link {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 11px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ai-ink-soft);
  font-size: 13px;
  text-decoration: none;
}
.ai-sidebar-link svg { width: 18px; height: 18px; }
.ai-main {
  display: flex;
  min-height: 100dvh;
  margin-left: 280px;
  flex-direction: column;
  background: #fff;
  transition: margin-left 180ms ease;
}
/* 聊天页（AI 问答 / 教学助理，不含预测页）：主区固定一屏高，让对话区内部滚动、输入坞始终钉底。
   否则内容（尤其首屏 hero 还在时）会把主区撑过一屏 → 整页滚动 → sticky 输入坞被顶到视口外，
   表现为“思考中对话框不见了、要往下拉、回答完才自己跳出来”。 */
.aichat:not(.pred) .ai-main { height: 100dvh; min-height: 0; }
.ai-sidebar-collapsed .ai-sidebar { width: 72px; }
.ai-sidebar-collapsed .ai-main { margin-left: 72px; }
.ai-sidebar-collapsed .ai-sidebar-head { justify-content: center; padding: 12px 8px; }
.ai-sidebar-collapsed .ai-sidebar-head .aichat-brand { justify-content: center; }
.ai-sidebar-collapsed .ai-sidebar-head .brand-name,
.ai-sidebar-collapsed .ai-sidebar-close,
.ai-sidebar-collapsed .ai-new-chat span,
.ai-sidebar-collapsed .ai-history-label,
.ai-sidebar-collapsed .ai-history,
.ai-sidebar-collapsed .ai-sidebar-link span { display: none; }
.ai-sidebar-collapsed .ai-new-chat { width: 44px; justify-content: center; margin: 4px auto 18px; padding: 0; }
.ai-sidebar-collapsed .ai-sidebar-link { justify-content: center; padding: 0; }
.ai-main-top {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--ai-line);
  background: #fff;
}
.ai-main-leading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.ai-sidebar-toggle { margin-left: -8px; }
.ai-page-label { color: var(--ai-ink-soft); font-size: 14px; font-weight: 600; }
.ai-mobile-brand { display: none; align-items: center; gap: 8px; color: var(--ai-ink); font-size: 15px; font-weight: 650; text-decoration: none; }
.ai-mobile-brand img { width: 28px; height: 28px; object-fit: contain; }
.aichat .ai-main-top .user-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.aichat .ai-main-top .user-nav a,
.aichat .ai-main-top .user-nav button {
  min-height: 36px;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ai-ink-soft);
  box-shadow: none;
  font-size: 13px;
}
.aichat .ai-main-top .user-nav .nav-link.primary { background: var(--ai-ink); color: #fff; }
.aichat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 0; background: #fff; }
.ai-thread-inner { width: min(820px, 100%); min-height: 100%; margin: 0 auto; padding: 0 28px 32px; }
.aichat .aichat-hero { padding: clamp(124px, 23vh, 210px) 0 28px; text-align: center; }
.ai-hero-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid #d7dbe2;
  border-radius: 50%;
  background: #fff;
}
.ai-hero-mark img { width: 35px; height: 35px; object-fit: contain; }
.aichat .aichat-hero h1 { margin: 0 0 12px; color: var(--ai-ink); font-size: 30px; font-weight: 650; letter-spacing: 0; text-wrap: balance; }
.aichat .aichat-hero p { max-width: 54ch; margin: 0 auto 26px; color: var(--ai-ink-soft); font-size: 15px; line-height: 1.65; }
.aichat .aichat-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; }
.aichat .aichat-chip {
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ai-ink-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.aichat .aichat-chip:hover { border-color: #c4c8d0; background: #f8f8f9; color: var(--ai-ink); }
.aichat .aichat-log { padding-top: 46px; }
.aichat .aichat-row { margin: 22px 0; }
.aichat .aichat-bubble { max-width: 82%; color: var(--ai-ink); font-size: 16px; line-height: 1.72; }
.aichat .aichat-me .aichat-bubble { padding: 11px 15px; border-radius: 14px; background: #f1f1f2; }
.aichat .aichat-ai .aichat-bubble { padding: 2px 0; }
.aichat .aichat-dock { position: sticky; bottom: 0; z-index: 10; padding: 12px 24px 16px; border-top: 1px solid rgba(229,229,231,.75); background: rgba(255,255,255,.98); }
.ai-composer-wrap { width: min(820px, 100%); margin: 0 auto; }
.aichat .aichat-files { padding: 0 0 8px; }
.aichat .aichat-chip-file { border-radius: 8px; }
.aichat .aichat-composer { min-height: 56px; margin: 0; padding: 7px 8px 7px 10px; border: 1px solid #cfd1d5; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(20,22,28,.06); }
.aichat .aichat-composer:focus-within { border-color: #8d9199; box-shadow: 0 0 0 3px rgba(49,95,159,.10); }
.aichat .aichat-attach, .aichat .aichat-web, .aichat .aichat-send { width: 40px; height: 40px; border-radius: 9px; }
.aichat .aichat-web { width: auto; gap: 6px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
.aichat .aichat-web.is-on { background: var(--ai-ink); color: #fff; }
.aichat #aiInput { min-height: 26px; padding: 9px 4px; font-size: 16px; line-height: 1.5; }
.aichat .aichat-send { border-radius: 9px; background: var(--ai-ink); color: #fff; }
.aichat .aichat-send:hover { background: #34363b; }
.aichat .aichat-foot { margin: 8px 0 0; color: var(--ai-muted); font-size: 12px; }
.ai-sidebar-backdrop { display: none; }

@media (max-width: 820px) {
  .aichat .ai-sidebar { width: min(300px, 88vw); transform: translateX(-102%); box-shadow: 14px 0 30px rgba(18,22,28,.12); }
  .aichat.ai-sidebar-open .ai-sidebar { transform: translateX(0); }
  .aichat .ai-sidebar-collapsed .ai-sidebar { width: min(300px, 88vw); }
  .aichat .ai-main, .aichat.ai-sidebar-collapsed .ai-main { margin-left: 0; }
  .aichat.ai-sidebar-collapsed .ai-sidebar-head .brand-name,
  .aichat.ai-sidebar-collapsed .ai-sidebar-close,
  .aichat.ai-sidebar-collapsed .ai-new-chat span,
  .aichat.ai-sidebar-collapsed .ai-history-label,
  .aichat.ai-sidebar-collapsed .ai-history,
  .aichat.ai-sidebar-collapsed .ai-sidebar-link span { display: initial; }
  .aichat.ai-sidebar-collapsed .ai-sidebar-head { justify-content: initial; padding: 12px 14px 10px 18px; }
  .aichat.ai-sidebar-collapsed .ai-sidebar-close { display: inline-flex; margin-left: auto; }
  .aichat.ai-sidebar-collapsed .ai-new-chat { width: auto; justify-content: initial; margin: 4px 12px 18px; padding: 0 12px; }
  .aichat.ai-sidebar-collapsed .ai-sidebar-link { justify-content: initial; padding: 0 10px; }
  .ai-sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(19,23,30,.26); }
  .ai-main-top { min-height: 58px; padding: 9px 14px; }
  .ai-sidebar-toggle { margin-left: 0; }
  .ai-mobile-brand { display: inline-flex; }
  .ai-page-label { display: none; }
  .aichat .ai-main-top .user-nav { gap: 5px; }
  .aichat .ai-main-top .user-nav a, .aichat .ai-main-top .user-nav button { padding: 0 9px; }
  .ai-thread-inner { padding: 0 16px 24px; }
  .aichat .aichat-hero { padding: 96px 0 18px; }
  .aichat .aichat-hero h1 { font-size: 26px; }
  .aichat .aichat-hero p { font-size: 14px; }
  .aichat .aichat-suggest { grid-template-columns: 1fr; max-width: 360px; }
  .aichat .aichat-bubble { max-width: 92%; font-size: 15px; }
  .aichat .aichat-dock { padding: 10px 12px 13px; }
}
@media (max-width: 390px) {
  .ai-mobile-brand span { font-size: 14px; }
  .aichat .ai-main-top .user-nav .nav-link:not(.primary) { display: none; }
  .aichat .ai-main-top .user-nav .nav-link.primary { padding: 0 9px; }
  .aichat .aichat-hero { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .aichat .ai-sidebar, .aichat .ai-main, .ai-library-atmosphere { transition: none; }
  .aichat .aichat-typing i { animation: none; opacity: .5; }
}

/* ============================================================
   AI 工作台 · 图书馆抽象背景与快捷入口（Codex 2026-07-16）
   背景只负责建立河北大学的空间记忆；内容层保持清晰，检索逻辑不在此处修改。
   ============================================================ */
.aichat {
  position: relative;
  isolation: isolate;
  background: #f4f7fb;
}
.ai-library-atmosphere {
  position: fixed;
  inset: 0 0 0 280px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #f4f7fb;
  transition: left 180ms ease;
}
.ai-library-photo {
  position: absolute;
  inset: 0;
  background: url("./assets/hbu-library-hero.jpg") center 46% / cover no-repeat;
  opacity: .105;
  filter: saturate(.26) contrast(1.04);
}
.ai-library-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 8.8vw, rgba(41, 77, 117, .18) 8.8vw 8.92vw, transparent 8.92vw 17.6vw),
    repeating-linear-gradient(0deg, transparent 0 9.2vh, rgba(41, 77, 117, .13) 9.2vh 9.32vh, transparent 9.32vh 18.4vh);
  transform: perspective(900px) rotateX(1deg) scale(1.04);
  transform-origin: center bottom;
}
.ai-library-light {
  position: absolute;
  top: 16%;
  width: 42vw;
  height: 58vh;
  opacity: .15;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, .18) 42%, rgba(255, 255, 255, .86) 50%, rgba(255, 255, 255, .14) 58%, transparent 66%),
    repeating-linear-gradient(90deg, transparent 0 8.8vw, rgba(255, 255, 255, .20) 8.8vw 8.94vw, transparent 8.94vw 17.6vw);
  transform: skewX(-12deg) translateX(-72vw);
  animation: ai-library-sweep 12s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: transform;
}
.ai-library-light-a { left: 14%; }
.ai-library-light-b {
  top: 34%;
  left: 48%;
  width: 28vw;
  height: 38vh;
  opacity: .085;
  animation-delay: -6s;
  animation-duration: 14s;
}
.ai-library-light::after {
  content: "";
  position: absolute;
  inset: 8% -12% 10%;
  background: repeating-linear-gradient(0deg, transparent 0 9.1vh, rgba(255, 255, 255, .22) 9.1vh 9.24vh, transparent 9.24vh 18.2vh);
  opacity: .72;
}
@keyframes ai-library-sweep {
  0%, 18% { transform: skewX(-12deg) translateX(-72vw); }
  72%, 100% { transform: skewX(-12deg) translateX(118vw); }
}
.aichat .ai-main {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .72);
}
.aichat .ai-main-top {
  background: rgba(255, 255, 255, .88);
}
.aichat .aichat-thread {
  background: rgba(255, 255, 255, .28);
}
.aichat .aichat-dock {
  background: rgba(255, 255, 255, .91);
}
.aichat .aichat-hero {
  padding-top: clamp(86px, 15vh, 144px);
}
.aichat .aichat-hero h1 {
  font-size: clamp(30px, 3.2vw, 38px);
  letter-spacing: -.02em;
}
.aichat .aichat-hero p {
  max-width: 50ch;
  color: #4a5868;
}
.aichat .aichat-suggest {
  max-width: 620px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.aichat .aichat-chip {
  display: grid;
  min-height: 64px;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-color: rgba(49, 95, 159, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 22px rgba(34, 55, 80, .06);
  color: #2f3d4c;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.aichat .aichat-chip svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  box-sizing: content-box;
  border-radius: 8px;
  background: #edf3fa;
  color: #315f9f;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.aichat .aichat-chip:hover {
  border-color: rgba(49, 95, 159, .46);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 26px rgba(34, 55, 80, .10);
  color: #1d2733;
  transform: translateY(-2px);
}
.ai-chip-arrow {
  color: #6e8299;
  font-size: 18px;
  line-height: 1;
  opacity: .8;
  transition: transform 180ms ease, color 180ms ease;
}
.aichat .aichat-chip:hover .ai-chip-arrow {
  color: #315f9f;
  transform: translate(2px, -2px);
}
.aichat .aichat-composer {
  border-color: rgba(49, 95, 159, .24);
  box-shadow: 0 8px 24px rgba(34, 55, 80, .08);
}
.aichat .aichat-composer:focus-within {
  border-color: #6f8fb7;
  box-shadow: 0 0 0 3px rgba(49, 95, 159, .12), 0 8px 24px rgba(34, 55, 80, .08);
}
.aichat .aichat-send {
  background: #315f9f;
}
.aichat .aichat-send:hover {
  background: #254e8a;
}
@media (max-width: 820px) {
  .aichat .aichat-hero { padding-top: 66px; }
  .aichat .aichat-suggest { gap: 10px; }
  .aichat .aichat-chip { min-height: 58px; }
  .ai-library-grid { opacity: .16; }
  .ai-library-light { opacity: .10; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-library-light { animation: none; transform: skewX(-12deg) translateX(18vw); }
  .aichat .aichat-chip { transition: none; }
}

/* ============================================================
   AI 工作台 · 可见建筑背景与液态按钮表面（Codex 2026-07-16）
   采用结构化高光和内反射，不依赖大面积 backdrop-filter 模糊。
   ============================================================ */
.ai-library-photo {
  opacity: .285;
  filter: saturate(.34) contrast(1.08);
  mix-blend-mode: multiply;
}
.ai-library-grid { opacity: .30; }
.aichat .ai-main { background: rgba(250, 252, 255, .38); }
.aichat .aichat-thread { background: rgba(255, 255, 255, .12); }
.aichat .ai-main-top { background: rgba(255, 255, 255, .78); }
.aichat .aichat-dock { background: rgba(255, 255, 255, .82); }

.aichat .aichat-chip,
.aichat .ai-new-chat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .84);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .24) 47%, rgba(224, 235, 247, .30)),
    rgba(255, 255, 255, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -12px 22px rgba(115, 145, 178, .11),
    0 12px 28px rgba(29, 57, 88, .10);
}
.aichat .aichat-chip::before,
.aichat .ai-new-chat::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90%;
  left: -55%;
  width: 42%;
  height: 280%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transform: rotate(18deg) translateX(-70%);
  animation: ai-liquid-sheen 9s cubic-bezier(.42, 0, .25, 1) infinite;
  pointer-events: none;
}
.aichat .aichat-chip::after,
.aichat .ai-new-chat::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 42%);
  pointer-events: none;
}
.aichat .aichat-chip > *,
.aichat .ai-new-chat > * { position: relative; z-index: 1; }
.aichat .aichat-chip:hover,
.aichat .ai-new-chat:hover {
  border-color: rgba(255, 255, 255, .98);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .34) 48%, rgba(218, 232, 247, .38)),
    rgba(255, 255, 255, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -12px 24px rgba(93, 129, 167, .14),
    0 16px 34px rgba(29, 57, 88, .16);
}
.aichat .aichat-send {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  background:
    linear-gradient(145deg, rgba(131, 169, 211, .92), rgba(39, 83, 143, .95) 58%, rgba(26, 62, 112, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -8px 12px rgba(10, 37, 73, .22),
    0 7px 16px rgba(39, 83, 143, .25);
}
.aichat .aichat-send::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 55%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
  transform: rotate(18deg);
  animation: ai-liquid-sheen 7s cubic-bezier(.42, 0, .25, 1) infinite;
  pointer-events: none;
}
.aichat .aichat-send:hover { background: linear-gradient(145deg, #9abce1, #315f9f 58%, #244d87); }
@keyframes ai-liquid-sheen {
  0%, 18% { transform: rotate(18deg) translateX(-70%); opacity: 0; }
  28% { opacity: .7; }
  62% { opacity: .24; }
  82%, 100% { transform: rotate(18deg) translateX(360%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aichat .aichat-chip::before,
  .aichat .ai-new-chat::before,
  .aichat .aichat-send::before { animation: none; opacity: .18; transform: rotate(18deg) translateX(30%); }
}

/* ============================================================
   AI 工作台 · 图书馆建筑线稿（Codex 2026-07-16）
   只保留主体结构，流光沿屋檐、楼层、柱网和入口线运行。
   ============================================================ */
.ai-library-atmosphere {
  background: #eef3f8;
}
.ai-library-photo {
  inset: 7% 4% 0 8%;
  opacity: .045;
  clip-path: polygon(19% 92%, 19% 30%, 30% 23%, 73% 11%, 88% 20%, 88% 92%);
  background-position: center 48%;
  background-size: cover;
  filter: grayscale(1) contrast(1.22);
  mix-blend-mode: multiply;
}
.ai-library-grid,
.ai-library-light { display: none; }
.ai-library-linework {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #315f9f;
  pointer-events: none;
}
.ai-building-lines {
  fill: none;
  stroke: rgba(49, 95, 159, .24);
  stroke-width: 1.3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.ai-building-lines path:first-child,
.ai-building-lines path:nth-child(2),
.ai-building-lines path:nth-child(3) {
  stroke: rgba(38, 76, 120, .38);
  stroke-width: 1.8;
}
.ai-building-flow {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26 310;
  vector-effect: non-scaling-stroke;
  animation: ai-building-flow 11s linear infinite;
}
.ai-building-flow path:nth-child(2) { animation-delay: -3s; }
.ai-building-flow path:nth-child(3) { animation-delay: -6s; }
.ai-building-flow path:nth-child(4) { animation-delay: -8s; }
@keyframes ai-building-flow {
  from { stroke-dashoffset: 0; opacity: .26; }
  48% { opacity: .86; }
  to { stroke-dashoffset: -672; opacity: .26; }
}
.aichat .ai-main { background: rgba(249, 251, 254, .30); }
.aichat .aichat-thread { background: rgba(255, 255, 255, .05); }
@media (max-width: 820px) {
  .ai-library-photo { inset: 8% -34% 0 -30%; opacity: .035; }
  .ai-library-linework { width: 158%; left: -29%; }
  .ai-building-lines { stroke: rgba(49, 95, 159, .27); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-building-flow { animation: none; stroke-dasharray: none; opacity: .22; }
}

/* 完整建筑取景：使用 meet 保留屋檐、侧立面与台阶，不再用移动端放大裁切。 */
.ai-library-linework {
  left: 0;
  width: 100%;
}
@media (max-width: 820px) {
  .ai-library-linework { left: 0; width: 100%; }
}

/* 账户按钮、工具按钮、输入框和消息气泡共享同一套液态表面。 */
.aichat .ai-main-top .user-nav a,
.aichat .ai-main-top .user-nav button,
.aichat .aichat-attach,
.aichat .aichat-web,
.aichat .ai-icon-button {
  border: 1px solid rgba(255, 255, 255, .82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .28) 52%, rgba(224, 235, 247, .28)),
    rgba(255, 255, 255, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -8px 14px rgba(115, 145, 178, .09),
    0 7px 16px rgba(29, 57, 88, .08);
}
.aichat .ai-main-top .user-nav a:hover,
.aichat .ai-main-top .user-nav button:hover,
.aichat .aichat-attach:hover,
.aichat .aichat-web:hover,
.aichat .ai-icon-button:hover {
  border-color: rgba(255, 255, 255, .98);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .38) 52%, rgba(218, 232, 247, .36)),
    rgba(255, 255, 255, .32);
}
.aichat .ai-main-top .user-nav .nav-link.primary {
  color: #2e527d;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .30) 52%, rgba(214, 229, 246, .34)),
    rgba(255, 255, 255, .30);
}
.aichat .aichat-composer,
.aichat .aichat-me .aichat-bubble {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .25) 55%, rgba(224, 235, 247, .28)),
    rgba(255, 255, 255, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -12px 22px rgba(115, 145, 178, .10),
    0 12px 28px rgba(29, 57, 88, .11);
}
.aichat .aichat-composer::before,
.aichat .aichat-me .aichat-bubble::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -80%;
  left: -42%;
  width: 30%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .56), transparent);
  transform: rotate(18deg) translateX(-70%);
  animation: ai-dialog-sheen 10s cubic-bezier(.42, 0, .25, 1) infinite;
  pointer-events: none;
}
.aichat .aichat-composer > *,
.aichat .aichat-me .aichat-bubble > * { position: relative; z-index: 1; }
.aichat .aichat-me .aichat-bubble { border-radius: 14px; }
@keyframes ai-dialog-sheen {
  0%, 25% { transform: rotate(18deg) translateX(-70%); opacity: 0; }
  38% { opacity: .72; }
  64% { opacity: .16; }
  84%, 100% { transform: rotate(18deg) translateX(420%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aichat .aichat-composer::before,
  .aichat .aichat-me .aichat-bubble::before { animation: none; opacity: .14; transform: rotate(18deg) translateX(40%); }
}

/* ============================================================
   AI 工作台 · 真实建筑结构提取层
   linework PNG 来自图书馆原图的边缘提取，流光只在真实 alpha 线条上运行。
   ============================================================ */
.aichat .ai-library-photo { display: none; }
.aichat .ai-library-linework,
.aichat .ai-library-flow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  clip-path: polygon(6% 4%, 90% 0, 97% 100%, 3% 100%);
}
.aichat .ai-library-linework {
  opacity: .54;
  filter: brightness(0) saturate(100%) invert(35%) sepia(19%) saturate(1150%) hue-rotate(176deg) brightness(88%) contrast(88%);
  mix-blend-mode: multiply;
}
.aichat .ai-library-flow {
  -webkit-mask: url("./assets/hbu-library-linework.png?v=2026071602") center / contain no-repeat;
  mask: url("./assets/hbu-library-linework.png?v=2026071602") center / contain no-repeat;
  background: linear-gradient(112deg, transparent 0%, transparent 38%, rgba(255,255,255,.08) 43%, rgba(255,255,255,.88) 50%, rgba(142,203,255,.18) 56%, transparent 64%, transparent 100%);
  background-size: 230% 100%;
  opacity: .72;
  animation: ai-extracted-line-sheen 11s cubic-bezier(.42, 0, .25, 1) infinite;
  clip-path: none;
}
@keyframes ai-extracted-line-sheen {
  0%, 18% { background-position: 140% 0; opacity: 0; }
  34% { opacity: .72; }
  55% { opacity: .38; }
  78%, 100% { background-position: -40% 0; opacity: 0; }
}
@media (max-width: 820px) {
  .aichat .ai-library-linework,
  .aichat .ai-library-flow { clip-path: polygon(2% 4%, 96% 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .aichat .ai-library-flow { animation: none; opacity: .20; background: rgba(255,255,255,.78); }
}

/* AI 工作台 · 12 秒无缝建筑线稿视频。视频只作底层环境，不接收交互。 */
.aichat .ai-library-atmosphere {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(142, 207, 235, .055) 0%, rgba(142, 207, 235, .025) 34%, transparent 66%),
    #f4f8fb url("./assets/hbu-library-background-poster.png?v=2026071622") center / contain no-repeat;
}
.aichat .ai-library-atmosphere::before,
.aichat .ai-library-atmosphere::after {
  display: none;
  content: "";
  position: absolute;
  top: -8%;
  bottom: -8%;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
  clip-path: inset(8% 5% 10% 5%);
}
.aichat .ai-library-atmosphere::before {
  left: -42%;
  width: 38%;
  opacity: .72;
  background: linear-gradient(90deg, transparent 0%, rgba(111,202,240,.08) 18%, rgba(255,255,255,.80) 46%, rgba(113,201,239,.34) 62%, transparent 100%);
  filter: blur(16px);
  transform: skewX(-10deg) translateX(0);
  animation: ai-library-facade-light 13.5s cubic-bezier(.38, 0, .22, 1) infinite;
}
.aichat .ai-library-atmosphere::after {
  left: -30%;
  width: 23%;
  opacity: .34;
  background: linear-gradient(90deg, transparent 0%, rgba(44,92,132,.08) 34%, rgba(44,92,132,.22) 54%, transparent 100%);
  filter: blur(24px);
  mix-blend-mode: multiply;
  transform: skewX(-8deg) translateX(0);
  animation: ai-library-facade-shadow 17s cubic-bezier(.42, 0, .28, 1) -6s infinite;
}
@keyframes ai-library-facade-light {
  0%, 12% { transform: skewX(-10deg) translateX(0); opacity: .18; }
  32% { opacity: .56; }
  72% { opacity: .40; }
  90%, 100% { transform: skewX(-10deg) translateX(390%); opacity: .12; }
}
@keyframes ai-library-facade-shadow {
  0%, 16% { transform: skewX(-8deg) translateX(0); opacity: .12; }
  42% { opacity: .28; }
  82%, 100% { transform: skewX(-8deg) translateX(510%); opacity: .08; }
}
.aichat .ai-library-video,
.aichat .ai-library-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: .72;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: normal;
}
.aichat .ai-library-video {
  z-index: 0;
  opacity: .06;
}
.aichat .ai-library-video-poster {
  z-index: 0;
}
.aichat .ai-library-flow-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  mix-blend-mode: normal;
}
.aichat.ai-sidebar-collapsed .ai-library-atmosphere { left: 72px; }
.aichat .ai-library-video[hidden],
.aichat .ai-library-video-poster[hidden] { display: none; }
.aichat .ai-main { background: transparent; }
.aichat .aichat-thread { background: rgba(255, 255, 255, .02); }
@media (prefers-reduced-motion: reduce) {
  .aichat .ai-library-atmosphere::before,
  .aichat .ai-library-atmosphere::after { animation: none; opacity: .08; transform: skewX(-9deg) translateX(190%); }
  .aichat .ai-library-video { display: none; }
  .aichat .ai-library-video-poster { display: block; }
  .aichat .ai-library-flow-overlay { display: none; }
}
@media (max-width: 820px) {
  .ai-library-atmosphere,
  .aichat.ai-sidebar-collapsed .ai-library-atmosphere { left: 0; }
}

/* ==== 我的课表 · timetable.html (Claude 2026-07-16) ==== */
.tt {
  min-height: 100dvh; background: var(--paper);
  font-family: var(--sans); color: var(--ink);
  max-width: 1100px; margin: 0 auto; padding: 18px 22px 60px;
}
.tt-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tt-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 700; }
.tt-brand img { width: 30px; height: 30px; }
.tt-page-label { color: var(--ink-3); font-size: 14px; }
.tt-topbar .user-nav { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }

.tt-gate { text-align: center; padding: 72px 16px; }
.tt-gate h1 { font-size: 26px; margin: 0 0 10px; }
.tt-gate p { color: var(--ink-2); margin: 0 0 8px; }
.tt-gate-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

.tt-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.tt-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tt-card-head h2, .tt-card-head h3 { font-size: 17px; margin: 0; }
.tt-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tt-week-note { color: var(--ink-3); font-size: 13px; }
.tt-hint { color: var(--ink-3); font-size: 13.5px; line-height: 1.7; margin: 6px 0 12px; }
.tt-err { color: #b4232c; }
.tt-foot { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 8px; min-height: 18px; }
.tt-foot a { color: var(--hbu-red); }

.tt-button {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: 10px; padding: 8px 14px; font-size: 14px;
  cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block;
}
.tt-button:hover { border-color: var(--hbu-red); color: var(--hbu-red); }
.tt-primary { background: var(--hbu-red); border-color: var(--hbu-red); color: #fff; }
.tt-primary:hover { background: var(--hbu-red-deep); color: #fff; }
.tt-danger:hover { border-color: #b4232c; color: #b4232c; }
.tt-sem { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.tt-sem input { border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; font-family: inherit; }

.tt-today-list { display: flex; flex-direction: column; gap: 8px; }
.tt-today-item {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-3);
}
.tt-today-item .tt-slot { font-family: var(--num); font-size: 13px; color: var(--hbu-red); white-space: nowrap; }
.tt-today-item .tt-name { font-weight: 600; }
.tt-today-item .tt-meta { color: var(--ink-3); font-size: 13px; }

.tt-grid-scroll { overflow-x: auto; }
.tt-grid { border-collapse: collapse; width: 100%; min-width: 640px; }
.tt-grid th, .tt-grid td {
  border: 1px solid var(--line); padding: 4px; font-size: 12.5px;
  text-align: center; vertical-align: top; min-width: 84px;
}
.tt-grid thead th { background: var(--paper-2); padding: 8px 4px; }
.tt-grid tbody th { background: var(--paper-3); font-family: var(--num); width: 40px; min-width: 40px; }
.tt-grid .tt-col-today { background: var(--accent-soft); }
.tt-block {
  background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--hbu-red);
  border-radius: 8px; padding: 6px 7px; margin: 2px 0; text-align: left;
}
.tt-block strong { display: block; font-size: 12.5px; line-height: 1.35; }
.tt-block span { display: block; color: var(--ink-3); font-size: 11.5px; line-height: 1.4; }
.tt-block.tt-off { opacity: .45; border-left-color: var(--muted); }

.tt-import-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tt-import-or { color: var(--muted); font-size: 13px; }
#ttPaste {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.7;
  resize: vertical; background: var(--paper-3);
}
#ttPaste:focus { outline: 2px solid var(--hbu-red); outline-offset: 1px; }

#ttDraft { margin-top: 16px; border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.tt-draft-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.tt-draft-table th, .tt-draft-table td { border-bottom: 1px solid var(--line); padding: 6px 5px; font-size: 13px; text-align: left; }
.tt-draft-table input, .tt-draft-table select {
  width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 7px; font-family: inherit; font-size: 13px; background: var(--surface);
}
.tt-draft-table td.tt-slots { display: flex; gap: 4px; align-items: center; border-bottom: none; }
.tt-draft-table .tt-slots input { width: 52px; }
.tt-row-x {
  appearance: none; border: none; background: none; color: var(--muted);
  font-size: 17px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.tt-row-x:hover { color: #b4232c; background: rgba(180,35,44,.08); }
.tt-draft-actions { display: flex; gap: 10px; margin-top: 14px; }

@media (max-width: 640px) {
  .tt { padding: 12px 12px 48px; }
  .tt-card { padding: 14px; }
  .tt-topbar { flex-wrap: wrap; }
  .tt-page-label { display: none; }
  .tt-head-actions { margin-left: 0; width: 100%; }
  .tt-gate { padding: 48px 8px; }
  .tt-gate h1 { font-size: 22px; }
}

/* 课表入口链接（浅色 note / 深色 roadmap 两种底） */
.official-note a { color: var(--hbu-red); font-weight: 600; text-decoration: none; white-space: nowrap; }
.official-note a:hover { text-decoration: underline; }
.future-rows span a { color: #9fe8db; text-decoration: none; white-space: nowrap; }
.future-rows span a:hover { text-decoration: underline; }

/* 640px 全局规则会把裸 table 打散成"分档/概率"卡片（志愿预测表专用）——课表页的表格恢复正常表格布局 */
@media (max-width: 640px) {
  .tt table { display: table; border-collapse: collapse; width: 100%; }
  .tt thead { display: table-header-group; }
  .tt tbody { display: table-row-group; gap: 0; }
  .tt tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .tt th { display: table-cell; }
  .tt tbody td {
    display: table-cell; width: auto; padding: 4px;
    border-bottom: 0; font-size: 12px; justify-content: normal;
  }
  .tt tbody td::before { content: none !important; }
  .tt .tt-grid { min-width: 560px; }
  .tt .tt-grid th, .tt .tt-grid td { border: 1px solid var(--line); }
  .tt .tt-draft-table { min-width: 700px; }
  .tt .tt-draft-table th, .tt .tt-draft-table td { border-bottom: 1px solid var(--line); text-align: left; }
  .tt .tt-draft-table td.tt-slots { display: flex; border-bottom: 0; }
  .tt tbody tr:hover { background: none; }
}

/* ==== 防骗提示 / 特别鸣谢 / 欢迎页鸣谢 (Claude 2026-07-16) ==== */
.fraud-alert {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 4px; padding: 13px 18px;
  border: 1px solid rgba(192, 90, 47, .35); border-left: 4px solid var(--rush);
  border-radius: var(--radius-sm);
  background: rgba(192, 90, 47, .07);
  font-size: 14px; line-height: 1.7; color: var(--ink);
}
.fraud-alert strong { color: var(--rush); white-space: nowrap; letter-spacing: .04em; }
.footer-thanks {
  margin: 10px 0 12px; font-size: 13px; line-height: 1.8; color: var(--ink-2);
  max-width: 62em;
}
.footer-thanks strong { color: var(--hbu-red); margin-right: 8px; letter-spacing: .04em; }
.wc-credit {
  margin: 18px 0 0; font-size: 12px; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78); text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
@media (max-width: 640px) {
  .fraud-alert { font-size: 13px; padding: 11px 13px; }
  .wc-credit { font-size: 11px; padding: 0 16px; }
}

/* ==== 社团分页列表 clubs.html + 详情 club.html (Claude 2026-07-16) ==== */
.cb .cb-head h1, .cb-detail h1 { font-size: 24px; margin: 4px 0 10px; }
.cb .clubs-note { margin-bottom: 14px; }
.cb .clubs-tabs { margin-bottom: 16px; }

.cb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.club-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.club-link:hover { border-color: var(--hbu-red); transform: translateY(-2px); }
.club-link { transition: transform .18s var(--ease-out), border-color .18s; }
.club-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }

/* 卡片媒体位：16:9，暂无素材时用首字+分类占位 */
.club-media { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.club-media img, .club-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-media-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, rgba(15,118,110,.10), rgba(15,118,110,.03));
}
.club-media-initial {
  font-family: var(--serif, serif); font-size: 34px; font-weight: 700; color: var(--hbu-red);
  opacity: .85; line-height: 1;
}
.club-media-cat { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }

.cb-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 22px 0 8px; flex-wrap: wrap;
}
.cb-page-btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: 10px; padding: 9px 18px; font-size: 14px;
  cursor: pointer; font-family: inherit; min-height: 44px;
}
.cb-page-btn:hover:not(:disabled) { border-color: var(--hbu-red); color: var(--hbu-red); }
.cb-page-btn:disabled { opacity: .4; cursor: default; }
.cb-page-info { color: var(--ink-3); font-size: 13px; }

/* 详情页 */
.cb-back-wrap { margin: 2px 0 14px; }
.cb-back { color: var(--hbu-red); text-decoration: none; font-size: 14px; }
.cb-back:hover { text-decoration: underline; }
.cb-detail-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow); max-width: 860px; margin: 0 auto;
}
.cb-hero { aspect-ratio: 21 / 9; background: var(--paper-2); }
.cb-hero img, .cb-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-hero-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(15,118,110,.03));
}
.cb-hero-empty .club-media-initial { font-size: 52px; }
.cb-hero-hint { font-size: 12.5px; color: var(--ink-3); letter-spacing: .05em; }
.cb-detail-body { padding: 22px 26px 26px; }
.cb-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cb-title-row h1 { margin: 0; }
.cb-summary { font-size: 15.5px; line-height: 1.85; color: var(--ink); margin: 8px 0 14px; }
.cb-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin: 0 0 16px; padding: 12px 14px; background: var(--paper-3);
  border: 1px solid var(--line); border-radius: 10px;
}
.cb-meta div { display: flex; flex-direction: column; gap: 2px; }
.cb-meta dt { font-size: 12px; color: var(--muted); }
.cb-meta dd { margin: 0; font-size: 14px; color: var(--ink); }
.cb-detail-body h2 { font-size: 16px; margin: 16px 0 8px; }
.cb-acts { margin: 0; padding-left: 1.2em; line-height: 2; color: var(--ink-2); }
.cb-notes { color: var(--ink-3); font-size: 13.5px; line-height: 1.75; }
.cb-src { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.cb-src a { color: var(--hbu-red); }

/* 首页社团预览区（不再全量展示） */
.clubs-preview { margin-bottom: 6px; }
.clubs-more-wrap { text-align: center; margin: 20px 0 0; }

@media (max-width: 900px) {
  .cb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-detail-body { padding: 16px; }
  .cb-hero { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .club-link { transition: none; }
  .club-link:hover { transform: none; }
}

/* AI 对话液态玻璃：实体半透明表面 + 边缘折射，不使用背景模糊。 */
.aichat .aichat-row {
  position: relative;
  z-index: 2;
}
.aichat .aichat-me .aichat-bubble,
.aichat .aichat-ai .aichat-bubble {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 13px 17px;
  border: 1px solid rgba(255, 255, 255, .90);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(229, 240, 249, .72) 52%, rgba(247, 251, 255, .84)),
    rgba(238, 246, 252, .82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -16px 28px rgba(93, 139, 178, .10),
    inset 1px 0 0 rgba(255, 255, 255, .48),
    0 10px 26px rgba(46, 76, 105, .10),
    0 1px 2px rgba(46, 76, 105, .08);
  color: #182534;
}
.aichat .aichat-ai .aichat-bubble {
  max-width: 88%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(233, 242, 250, .78) 54%, rgba(250, 252, 255, .88)),
    rgba(241, 247, 252, .86);
}
.aichat .aichat-me .aichat-bubble {
  max-width: 78%;
  background:
    linear-gradient(145deg, rgba(244, 250, 255, .94), rgba(213, 232, 247, .78) 55%, rgba(237, 247, 255, .88)),
    rgba(226, 240, 251, .88);
}
.aichat .aichat-bubble::before {
  content: "";
  position: absolute;
  top: -65%;
  bottom: -65%;
  left: -24%;
  z-index: -1;
  width: 17%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
  transform: rotate(12deg) translateX(-180%);
  animation: ai-dialog-reflection 5.4s cubic-bezier(.38, 0, .22, 1) infinite;
  pointer-events: none;
}
.aichat .aichat-bubble::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .46);
  box-shadow: inset 0 -10px 18px rgba(71, 126, 169, .07);
  pointer-events: none;
}
@keyframes ai-dialog-reflection {
  0%, 24% { transform: rotate(12deg) translateX(-180%); opacity: 0; }
  34% { opacity: .58; }
  64% { opacity: .22; }
  78%, 100% { transform: rotate(12deg) translateX(780%); opacity: 0; }
}
.aichat .aichat-dock {
  background: rgba(246, 250, 253, .90);
}
.aichat .aichat-composer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .92);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(226, 239, 249, .78) 58%, rgba(248, 252, 255, .90)),
    rgba(239, 247, 252, .90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -14px 24px rgba(83, 132, 173, .10),
    0 12px 30px rgba(42, 74, 104, .12),
    0 0 0 1px rgba(87, 137, 180, .10);
}
.aichat .aichat-composer::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .98), transparent);
  pointer-events: none;
}
.aichat .aichat-composer:focus-within {
  border-color: rgba(121, 169, 208, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -14px 24px rgba(83, 132, 173, .11),
    0 12px 30px rgba(42, 74, 104, .14),
    0 0 0 3px rgba(72, 139, 194, .12);
}
.aichat #aiInput { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .aichat .aichat-bubble::before { animation: none; opacity: .12; transform: rotate(12deg) translateX(260%); }
}

/* 欢迎入口要优先可读：实体液态表面隔离线稿，保留边缘高光与细反射。 */
.aichat .aichat-suggest {
  position: relative;
  z-index: 5;
}
.aichat .aichat-chip {
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .96);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(241, 248, 253, .91) 53%, rgba(226, 239, 249, .90)),
    rgba(242, 248, 253, .94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -12px 22px rgba(90, 135, 174, .12),
    inset 1px 0 0 rgba(255, 255, 255, .62),
    0 12px 28px rgba(29, 57, 88, .12);
  color: #1e3042;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aichat .aichat-chip::before {
  z-index: 0;
  opacity: .65;
}
.aichat .aichat-chip::after {
  z-index: 0;
  border-color: rgba(255, 255, 255, .58);
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), transparent 44%);
}
.aichat .aichat-chip > * {
  position: relative;
  z-index: 1;
}
.aichat .aichat-chip svg {
  background: rgba(233, 242, 250, .98);
  color: #245b98;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.aichat .aichat-chip .ai-chip-arrow {
  color: #527392;
  text-shadow: none;
}
.aichat .aichat-chip:hover {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(245, 250, 254, .95) 53%, rgba(231, 243, 251, .94)),
    rgba(246, 251, 254, .98);
}

/* 发送按钮固定为 44px 正圆，避免早期圆角方形规则覆盖。 */
.aichat .aichat-send {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
}

/* ==== 志愿预测独立页 predict.html（复用 AI 页外壳，Claude 2026-07-16） ==== */
/* 侧栏考生表单 */
.pred-sidebar { display: flex; flex-direction: column; }
.pred-form { padding: 6px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.pred-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ai-ink-soft); }
.pred-field > span, .pred-fieldset legend { font-size: 12.5px; color: var(--ai-muted); }
.pred-field input[type="number"], .pred-field select {
  width: 100%; border: 1px solid var(--ai-line); border-radius: 10px; padding: 9px 11px;
  font-family: inherit; font-size: 14px; background: var(--ai-bg, #fff); color: var(--ai-ink);
}
.pred-field input:focus, .pred-field select:focus { outline: 2px solid var(--ai-blue); outline-offset: 1px; }
.pred-field-row { display: flex; gap: 10px; }
.pred-field-row .pred-field { flex: 1; }
.pred-fieldset { border: 1px solid var(--ai-line); border-radius: 10px; padding: 9px 11px; gap: 7px; }
.pred-fieldset legend { padding: 0 5px; }
.pred-fieldset label { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ai-ink); cursor: pointer; }
.pred-generate {
  appearance: none; border: none; border-radius: 12px; padding: 12px; margin-top: 2px;
  background: var(--hbu-red); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pred-generate:hover { background: var(--hbu-red-deep); }
.pred-data-status { padding: 8px 16px; font-size: 12px; color: var(--ai-muted); margin: 0; }

/* 主区 */
.pred-thread { flex: 1; overflow-y: auto; }
.pred-inner { width: min(880px, 100%); margin: 0 auto; padding: 24px 28px 48px; }
.pred-hero { text-align: center; padding: 40px 12px 24px; }
.pred-hero .ai-hero-mark { margin: 0 auto 16px; }
.pred-hero h1 { font-size: 27px; margin: 0 0 10px; color: var(--ai-ink); }
.pred-hero p { color: var(--ai-ink-soft); line-height: 1.75; max-width: 44em; margin: 0 auto; }

.pred-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.pred-stat {
  background: var(--ai-bg, #fff); border: 1px solid var(--ai-line); border-radius: 14px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
}
.pred-stat-label { font-size: 12.5px; color: var(--ai-muted); }
.pred-stat-value { font-size: 24px; line-height: 1.1; color: var(--ai-ink); font-variant-numeric: tabular-nums; }
.pred-stat-meta { font-size: 12px; color: var(--ai-ink-soft); }

.pred-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pred-segmented { display: inline-flex; background: var(--ai-sidebar-active, #e9e9eb); border-radius: 11px; padding: 3px; gap: 2px; }
.pred-seg {
  appearance: none; border: none; background: none; border-radius: 8px; padding: 7px 16px;
  font-size: 14px; color: var(--ai-ink-soft); cursor: pointer; font-family: inherit; min-height: 36px;
}
.pred-seg.active { background: var(--ai-bg, #fff); color: var(--ai-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pred-result-count { font-size: 13px; color: var(--ai-muted); }

.pred-results { display: flex; flex-direction: column; gap: 12px; }
.pred-card {
  background: var(--ai-bg, #fff); border: 1px solid var(--ai-line); border-left: 4px solid var(--ai-muted);
  border-radius: 14px; padding: 15px 17px;
}
.pred-card.tier-rush { border-left-color: var(--rush); }
.pred-card.tier-steady { border-left-color: var(--steady); }
.pred-card.tier-safe, .pred-card.tier-pad { border-left-color: var(--safe); }
.pred-card.tier-risk { border-left-color: #b4232c; }
.pred-card-new { border-left-color: var(--ai-muted); border-style: dashed; }
.pred-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pred-card-title strong { display: block; font-size: 16px; color: var(--ai-ink); }
.pred-card-sub { display: block; font-size: 12.5px; color: var(--ai-muted); margin-top: 3px; line-height: 1.55; }
.pred-tier {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #fff;
}
.pred-tier-rush { background: var(--rush); }
.pred-tier-steady { background: var(--steady); }
.pred-tier-safe, .pred-tier-pad { background: var(--safe); }
.pred-tier-risk { background: #b4232c; }
.pred-tier-new { background: var(--ai-muted); font-size: 12px; width: auto; padding: 0 9px; border-radius: 8px; }
.pred-card-metrics { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 14px; align-items: center; margin: 13px 0 4px; }
.pred-prob { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pred-prob-dial {
  width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--hbu-red) calc(var(--v) * 1%), var(--ai-sidebar-active, #e9e9eb) 0);
  -webkit-mask: radial-gradient(circle 15px at center, transparent 98%, #000 100%);
  mask: radial-gradient(circle 15px at center, transparent 98%, #000 100%);
}
.pred-prob-num { font-size: 14px; font-weight: 600; color: var(--ai-ink); }
.pred-prob-cap { font-size: 11px; color: var(--ai-muted); }
.pred-metric { display: flex; flex-direction: column; gap: 2px; }
.pred-metric span { font-size: 11.5px; color: var(--ai-muted); }
.pred-metric strong { font-size: 13.5px; color: var(--ai-ink); font-weight: 600; }
.pred-history { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ai-line); }
.pred-hy { font-size: 12px; color: var(--ai-ink-soft); background: var(--ai-sidebar-bg, #f7f7f8); border-radius: 7px; padding: 3px 8px; }
.pred-hy b { color: var(--hbu-red); margin-right: 4px; font-weight: 700; }
.pred-new-head { font-size: 13px; color: var(--ai-muted); margin: 18px 0 4px; }
.pred-new-note { font-size: 13px; color: var(--ai-ink-soft); line-height: 1.7; margin: 8px 0 0; }
.pred-empty { text-align: center; padding: 40px 16px; color: var(--ai-ink-soft); }
.pred-empty strong { display: block; font-size: 17px; color: var(--ai-ink); margin-bottom: 6px; }

.pred-gate { display: grid; place-items: center; padding: 48px 16px; }
.pred-gate-card { max-width: 360px; text-align: center; }
.pred-gate-msg { color: var(--ai-ink); margin: 0 0 14px; line-height: 1.7; }
.pred-gate-foot { font-size: 13px; color: var(--ai-muted); margin-top: 14px; }
.pred-gate-foot a { color: var(--hbu-red); }

@media (max-width: 820px) {
  .pred-summary { grid-template-columns: repeat(2, 1fr); }
  .pred-inner { padding: 18px 16px 40px; }
}
@media (max-width: 560px) {
  .pred-card-metrics { grid-template-columns: auto 1fr 1fr; }
  .pred-hero h1 { font-size: 22px; }
}

/* 首页志愿预测引流区 */
.predict-teaser { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 20px 0 24px; }
.predict-teaser-item {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(255,255,255,.05); font-size: 13.5px; color: rgba(226,244,241,.78); min-width: 180px;
}
.predict-teaser-item strong { font-size: 14.5px; color: #f2fbf9; }
@media (max-width: 640px) { .predict-teaser-item { min-width: 0; width: 100%; } }

/* AI 思考中/搜索中 状态（动画点 + 文字） */
.aichat-status { display: inline-flex; align-items: center; gap: 9px; }
.aichat-status-text { font-size: 14px; color: var(--ai-muted, #8a8f98); }
@media (prefers-reduced-motion: reduce) { .aichat-status .aichat-typing i { animation: none; } }

/* ==== 志愿预测页增强：意向检索 / 欢迎语 / 背景铺满 / 收起 (Claude 2026-07-16) ==== */
/* 背景：单张主楼线稿铺满、锚定底部、不遮挡内容（无视频/画布叠加，避免重影） */
/* 背景：主楼线稿全幅平铺、锚定底部（放大裁掉素材内边距，让建筑铺满宽度不留白） */
.pred-atmosphere::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("./assets/hbu-library-background-poster.png?v=2026071621") center bottom no-repeat;
  background-size: 132% auto;
  opacity: .28;
}
.pred-atmosphere::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,247,251,.62) 0%, rgba(244,247,251,.06) 30% 58%, rgba(244,247,251,.66) 100%);
}

/* hero：校徽在建筑上方，欢迎语作为主标题（去掉模板化副标题，只留一个焦点） */
.pred-hero { padding: 64px 16px 40px; }
.pred-hero-mark { width: 84px; height: 84px; margin: 0 auto 20px; }
.pred-hero-mark img { width: 100%; height: 100%; }
.pred-hero h1 {
  font-size: clamp(26px, 4vw, 40px); letter-spacing: .01em; line-height: 1.2;
  margin: 0; color: var(--ai-ink); font-weight: 700;
}

/* 底部免责小字 */
.pred-fineprint {
  position: relative; z-index: 1; text-align: center; margin: 0;
  padding: 12px 20px 16px; font-size: 12px; color: var(--ai-muted);
  border-top: 1px solid var(--ai-line); background: rgba(255,255,255,.55);
}

/* 意向专业检索 */
.pred-intent-box { position: relative; }
.pred-intent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pred-intent-chips:empty { margin-bottom: 0; }
.pred-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  background: var(--accent-soft); color: var(--hbu-red); border-radius: 8px; padding: 4px 6px 4px 9px;
}
.pred-chip-x {
  appearance: none; border: none; background: none; color: var(--hbu-red);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7;
}
.pred-chip-x:hover { opacity: 1; }
#predIntentSearch {
  width: 100%; border: 1px solid var(--ai-line); border-radius: 10px; padding: 9px 11px;
  font-family: inherit; font-size: 14px; background: var(--ai-bg, #fff); color: var(--ai-ink);
}
#predIntentSearch:focus { outline: 2px solid var(--ai-blue); outline-offset: 1px; }
.pred-intent-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--ai-bg, #fff); border: 1px solid var(--ai-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(19,34,53,.14); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.pred-suggest-item {
  display: block; width: 100%; text-align: left; appearance: none; border: none; background: none;
  padding: 9px 12px; font-size: 14px; color: var(--ai-ink); cursor: pointer; font-family: inherit;
}
.pred-suggest-item:hover { background: var(--ai-sidebar-active, #e9e9eb); }
.pred-suggest-empty { padding: 10px 12px; font-size: 13px; color: var(--ai-muted); }

/* 意向标记 + 分组标题 */
.pred-intent-mark {
  font-size: 11px; color: var(--hbu-red); background: var(--accent-soft);
  border-radius: 6px; padding: 1px 6px; margin-left: 8px; font-weight: 600; vertical-align: middle;
}
.pred-card-intent { border-left-width: 4px; box-shadow: 0 0 0 1px var(--accent-soft); }
.pred-group-head { font-size: 13px; color: var(--ai-muted); margin: 18px 0 4px; font-weight: 600; }
.pred-group-head:first-child { margin-top: 0; }
.pred-group-miss { color: var(--ai-ink-soft); font-weight: 400; line-height: 1.7; }

/* 桌面收起：72px 轨道里只留校徽，隐藏表单 */
.ai-sidebar-collapsed .pred-form,
.ai-sidebar-collapsed .pred-data-status { display: none; }

/* 预测页折叠：用 .pred 前缀提高优先级，确保 72px 轨道生效（不影响 ai.html） */
.pred.ai-sidebar-collapsed .ai-sidebar { width: 72px; }
.pred.ai-sidebar-collapsed .ai-main { margin-left: 72px; }
@media (max-width: 820px) {
  .pred.ai-sidebar-collapsed .ai-sidebar { width: min(300px, 88vw); }
  .pred.ai-sidebar-collapsed .ai-main { margin-left: 0; }
}

/* ==== 志愿预测 hero 重构：标题上居中 + 台阶下 AI 风格搜索 (Claude 2026-07-16) ==== */
.pred .pred-hero {
  min-height: calc(100dvh - 66px);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 16px; text-align: center;
}
.pred-hero-title {
  margin: 6vh 0 0; font-weight: 700; color: var(--ai-ink);
  font-size: clamp(24px, 3.6vw, 38px); letter-spacing: .02em; line-height: 1.25;
}
.pred-hero-foot { margin-top: auto; margin-bottom: 5vh; width: min(560px, 100%); }
.pred-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.pred-hero-chips:empty { margin: 0; }

/* AI 输入框式搜索条 */
.pred-search-bar {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 7px 8px 7px 14px;
  border: 1px solid #cfd1d5; border-radius: 16px; background: #fff;
  box-shadow: 0 6px 22px rgba(20,22,28,.10);
}
.pred-search-bar:focus-within { border-color: #8d9199; box-shadow: 0 0 0 3px rgba(49,95,159,.12), 0 6px 22px rgba(20,22,28,.10); }
.pred-search-ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--ai-muted); stroke-width: 1.9; stroke-linecap: round; }
.pred-search-bar input {
  flex: 1; border: none; outline: none; background: none;
  font-family: inherit; font-size: 16px; color: var(--ai-ink); min-width: 0;
}
.pred-search-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 11px;
  background: var(--hbu-red); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.pred-search-btn:hover { background: var(--hbu-red-deep); }
.pred-search-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* hero 搜索建议向上弹出（搜索条在底部） */
.pred-hero-foot .pred-intent-suggest { top: auto; bottom: calc(100% + 6px); text-align: left; }
.pred-search-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ai-ink-soft); }

/* 结果区可编辑意向条 */
.pred-intent-active { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pred-intent-active .pred-intent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pred-intent-edit {
  appearance: none; border: 1px solid var(--ai-line); background: var(--ai-bg, #fff);
  color: var(--hbu-red); border-radius: 9px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.pred-intent-edit:hover { border-color: var(--hbu-red); }

@media (max-width: 640px) {
  .pred-hero-title { margin-top: 8vh; }
  .pred-hero-foot { margin-bottom: 4vh; }
}

/* AI 问答页：按既有视觉做局部调整，不影响志愿预测页。 */
@font-face {
  font-family: "Ma Shan Zheng";
  src: url("./assets/fonts/ma-shan-zheng.woff2?v=2026071648") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* 复用志愿预测的单张建筑线稿；标题区保留白色，建筑区用连续渐变柔和隔离。 */
.aichat:not(.pred) .ai-library-atmosphere {
  inset: 0;
  left: 280px;                 /* 背景与建筑只覆盖主内容区，跟随展开侧栏宽度 */
  transition: left .18s var(--ease-out, ease);
  background: linear-gradient(
    180deg,
    #fff 0,
    #fff 150px,
    #f8fafc 220px,
    #eef4f8 62%,
    #f8fafb 84%,
    #fff 100%
  );
}
.aichat:not(.pred).ai-sidebar-collapsed .ai-library-atmosphere { left: 72px; }
.aichat:not(.pred) .ai-library-atmosphere::before {
  display: none;
}
.aichat:not(.pred) .ai-library-video {
  display: none;
}
.aichat:not(.pred) .ai-library-video-poster {
  inset: auto;
  left: calc(50% + 140px);
  top: clamp(184px, 21vh, 212px);
  width: min(78%, 940px);
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: .68;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.aichat.ai-sidebar-collapsed:not(.pred) .ai-library-video-poster {
  left: calc(50% + 36px);
}

/* 校徽保持原样，仅与主标题组成上部横向锁定。 */
.aichat:not(.pred) .ai-hero-heading {
  display: flex;
  width: min(620px, 100%);
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 12px;
}
.aichat:not(.pred) .ai-hero-heading .ai-hero-mark {
  flex: 0 0 52px;
  margin: 0;
}
.aichat:not(.pred) .ai-hero-heading h1 {
  min-width: 0;
  margin: 0;
  font-family: "Ma Shan Zheng", "Kaiti SC", "STKaiti", KaiTi, cursive;
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
}
.aichat:not(.pred) .aichat-hero {
  padding-top: clamp(88px, 13vh, 124px);
}
.aichat:not(.pred) .aichat-suggest {
  margin: clamp(176px, 21vh, 234px) auto 0;
}
/* 教学助理页多了一行说明文案，整体更高：收窄卡片上边距，抵消说明文字高度，
   让标题不被顶栏截断，卡片仍落在建筑立面中部。 */
.aichat.agent:not(.pred) .aichat-suggest {
  margin-top: clamp(122px, 15vh, 172px);
}

/* 使用说明独立放在免责声明上方，字号只比免责声明大一级。 */
#aiApp .ai-context-note {
  margin: 8px 0 0;
  color: var(--ai-ink-soft);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
#aiApp .ai-context-note + .aichat-foot {
  margin-top: 3px;
}

/* 三条杠展开后的功能入口复用原侧栏按钮样式。 */
#aiApp .ai-sidebar-nav {
  display: grid;
  gap: 2px;
  padding: 0 12px 16px;
  border-bottom: 1px solid var(--ai-line);
  margin-bottom: 14px;
}
#aiApp.ai-sidebar-collapsed .ai-sidebar-nav {
  padding-inline: 8px;
}

@media (max-width: 820px) {
  .aichat:not(.pred) .ai-library-atmosphere,
  .aichat:not(.pred).ai-sidebar-collapsed .ai-library-atmosphere {
    left: 0;                    /* 移动端侧栏是浮层，内容区满宽，背景回到全宽 */
    background: linear-gradient(
      180deg,
      #fff 0,
      #fff 230px,
      #f8fafc 286px,
      #eef4f8 60%,
      #f8fafb 78%,
      #fff 100%
    );
  }
  .aichat:not(.pred) .ai-library-video-poster,
  .aichat.ai-sidebar-collapsed:not(.pred) .ai-library-video-poster {
    left: 50%;
    top: 250px;
    width: min(90%, 520px);
    opacity: .66;
  }
  .aichat:not(.pred) .aichat-hero {
    padding-top: 112px;
  }
  .aichat:not(.pred) .ai-hero-heading {
    gap: 12px;
  }
  .aichat:not(.pred) .ai-hero-heading h1 {
    font-size: 24px;
  }
  .aichat:not(.pred) .aichat-suggest {
    margin-top: 100px;
  }
  .aichat.agent:not(.pred) .aichat-suggest {
    margin-top: 52px;
  }
  #aiApp .ai-context-note {
    font-size: 12.5px;
    line-height: 1.45;
  }
  #aiApp.ai-sidebar-collapsed .ai-sidebar-nav {
    padding-inline: 12px;
  }
}

/* ==== 志愿预测：侧栏站内导航 + 柔化割裂边界 (Claude 2026-07-17) ==== */
/* 侧栏导航（汉堡点开可跳转其他页面） */
.pred-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 12px; }
.pred-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px; text-decoration: none;
  color: var(--ai-ink-soft); font-size: 14px;
}
.pred-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pred-nav a:hover { background: var(--ai-sidebar-active, #e9e9eb); color: var(--ai-ink); }
.pred-nav a[aria-current="page"] { color: var(--hbu-red); background: var(--accent-soft); font-weight: 600; }
.ai-sidebar-collapsed .pred-nav a span { display: none; }
.ai-sidebar-collapsed .pred-nav { padding: 10px 4px; align-items: center; }
.ai-sidebar-collapsed .pred-nav a { justify-content: center; padding: 9px; }

/* 柔化割裂：硬 1px 线 → 两端淡出的渐变发丝线；侧栏硬边 → 柔和投影 */
.pred .ai-main-top { border-bottom: none; position: relative; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)); }
.pred .ai-main-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,30,50,.12) 18%, rgba(20,30,50,.12) 82%, transparent);
}
.pred .ai-sidebar { border-right: none; box-shadow: 12px 0 34px -20px rgba(20,30,50,.22); }
.pred.ai-sidebar-collapsed .ai-sidebar { box-shadow: 8px 0 24px -18px rgba(20,30,50,.18); }
.pred .pred-fineprint { border-top: none; position: relative; background: linear-gradient(180deg, rgba(244,247,251,0), rgba(244,247,251,.7) 40%); }
.pred .pred-fineprint::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,30,50,.10) 18%, rgba(20,30,50,.10) 82%, transparent);
}
/* 侧栏底色向右缘轻微过渡到主区色，消除色阶硬边 */
.pred .ai-sidebar { background: linear-gradient(90deg, var(--ai-sidebar-bg, #f7f7f8) 78%, #f5f8fb); }

/* ==== 站内功能菜单（site-nav.js 注入的“功能”下拉，各功能页通用） ==== */
.site-nav { position: relative; display: inline-flex; }
.site-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ai-line, rgba(20,47,50,.12)); background: rgba(255,255,255,.7);
  border-radius: 10px; padding: 7px 11px; font-size: 13.5px; color: var(--ai-ink, #1c1e22);
  cursor: pointer; font-family: inherit; min-height: 38px;
}
.site-nav-btn:hover { border-color: var(--hbu-red); color: var(--hbu-red); }
.site-nav-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.site-nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 184px; padding: 6px; border: 1px solid var(--ai-line, rgba(20,47,50,.12));
  border-radius: 14px; background: #fff; box-shadow: 0 14px 40px rgba(19,34,53,.16);
  display: flex; flex-direction: column; gap: 2px;
}
.site-nav-menu[hidden] { display: none; }
.site-nav-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  text-decoration: none; color: var(--ai-ink-soft, #565a62); font-size: 14px;
}
.site-nav-menu a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site-nav-menu a:hover { background: var(--ai-sidebar-active, #eceef1); color: var(--ai-ink, #1c1e22); }
.site-nav-menu a[aria-current="page"] { color: var(--hbu-red); background: var(--accent-soft, rgba(15,118,110,.10)); font-weight: 600; }
@media (max-width: 480px) { .site-nav-btn span { display: none; } .site-nav-btn { padding: 7px 9px; } }

/* ==== 教学助理 Agent 页（assistant.html）：行动轨迹 ==== */
.agent-hero-note {
  margin: 2px auto 0; max-width: 46ch; text-align: center;
  font-size: 14px; line-height: 1.6; color: var(--ai-ink-soft, #565a62);
}
/* 等待气泡里的实时轨迹：一行一个动作，出现时轻微上浮 */
.agent-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.agent-steps[hidden] { display: none; }
.agent-step {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; color: var(--ai-ink-soft, #565a62);
  animation: agent-step-in .3s ease both;
}
.agent-step::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hbu-red, #b23b2e); opacity: .55; transform: translateY(-2px);
}
@keyframes agent-step-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .agent-step { animation: none; } }
/* 答案气泡顶部的“已查证”摘要 */
.agent-trace {
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--ai-line, rgba(20,47,50,.14));
  font-size: 12.5px; color: var(--ai-muted, #8a8f98);
}

/* ============ 首页精简改版：四助手 + 左侧“更多功能”分页栏（2026-07-17） ============ */
/* 顶栏里两个“即将上线”的导航项 */
.module-nav a.nav-soon { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.module-nav a.nav-soon:hover { color: var(--ink-2); }
.nav-soon-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--hbu-red);
}

/* 左侧“更多功能”竖排分页栏（随屏钉在左边缘） */
.more-rail {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 15px 8px; border: 1px solid var(--glass-line); border-left: 0;
  border-radius: 0 16px 16px 0; background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 30px rgba(19,34,53,.12); cursor: pointer; font-family: inherit;
  transition: background .16s var(--ease-out), transform .2s var(--ease-out);
}
.more-rail:hover { background: var(--surface); transform: translateY(-50%) translateX(2px); }
.more-rail svg { width: 20px; height: 20px; fill: none; stroke: var(--hbu-red); stroke-width: 1.7; }
.more-rail-label { writing-mode: vertical-rl; letter-spacing: .2em; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

/* 抽屉 + 背板 */
.more-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(19,34,53,.34); backdrop-filter: blur(3px); opacity: 0; transition: opacity .26s var(--ease-out); }
.more-backdrop.is-open { opacity: 1; }
.more-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 61; width: min(322px, 86vw);
  padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px rgba(19,34,53,.18); transform: translateX(-102%);
  transition: transform .28s var(--ease-out); display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
}
.more-drawer.is-open { transform: none; }
.more-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.more-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.more-close:hover { background: var(--accent-soft); color: var(--ink); }
.more-links { display: flex; flex-direction: column; gap: 2px; }
.more-links a, .more-links .more-soon {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px;
  text-decoration: none; color: var(--ink); transition: background .15s var(--ease-out);
}
.more-links a:hover { background: var(--accent-soft); }
.more-links svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--hbu-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.more-links span { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; }
.more-links em { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.more-soon { color: var(--ink-3); cursor: default; }
.more-soon svg { stroke: var(--ink-3); }
.more-soon em { color: var(--hbu-red); }

/* 四助手主板块 */
.assistants-chapter { padding: clamp(28px, 5vw, 56px) 0 8px; }
.assistants-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(22px, 4vw, 40px); }
.assistants-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; font-weight: 700; color: var(--hbu-red); text-transform: uppercase; }
.assistants-head h2 { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.assistants-sub { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.assistants-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.6vw, 18px); max-width: 900px; margin: 0 auto; }
.assistant-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  border-radius: var(--radius); text-decoration: none; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.assistant-card.is-live:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: rgba(15,118,110,.4); }
.assistant-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); }
.assistant-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--hbu-red); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.assistant-card h3 { margin: 4px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.assistant-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.assistant-go { font-size: 13.5px; font-weight: 700; color: var(--hbu-red); }
.assistant-badge { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--hbu-red); color: #fff; letter-spacing: .02em; }
.assistant-badge.soon { background: var(--paper-2); color: var(--ink-3); }
.assistant-card.is-soon { cursor: default; opacity: .72; }
.assistant-card.is-soon .assistant-go { color: var(--ink-3); }

@media (max-width: 720px) {
  .assistants-grid { grid-template-columns: 1fr; }
  .more-rail-label { display: none; }
  .more-rail { padding: 12px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .more-drawer, .more-backdrop, .assistant-card, .more-rail { transition: none; }
}