/* 全系统“学习宇宙”界面层：仅覆盖布局与视觉，不读取或改变任何教学状态。 */
:root {
  --universe-ink: #4e405f;
  --universe-muted: #7c708f;
  --universe-line: rgba(126, 106, 176, .19);
  --universe-paper: rgba(255, 253, 255, .9);
  --universe-paper-soft: rgba(255, 252, 255, .72);
  --universe-accent: #9571bd;
  --universe-accent-dark: #725195;
  --universe-coral: #d98697;
  --universe-shadow: 0 20px 48px rgba(104, 79, 144, .13);
}

body {
  color: var(--universe-ink);
  background: #f6f0fb url('assets/learning-universe/universe-dawn-background.webp') center top / 100% auto fixed no-repeat;
}

html:not(.is-learning-system-open),
body:not(.is-learning-system-open) {
  height: 100%;
  overflow: hidden;
}

body.is-learning-system-open { overflow-y: auto; }
html.is-journey-finale-open,
body.is-journey-finale-open { overflow: hidden !important; }

main {
  width: 100%;
  padding-bottom: clamp(48px, 8vw, 104px);
}

/* 只有选择星球后才把系统内容放入页面流；初始滚动不会泄露任何模块。 */
body:not(.is-learning-system-open) main > :not(#learningUniverse),
body:not(.is-learning-system-open) .site-footer,
body:not(.is-learning-system-open) > .flow-toolbar { display: none !important; }

body.is-learning-system-open #learningUniverse {
  min-height: 0;
  height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: height .42s ease, opacity .28s ease;
}

.return-to-universe {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 80;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--universe-line);
  border-radius: 999px;
  color: var(--universe-accent-dark);
  font-weight: 800;
  cursor: pointer;
  background: rgba(255, 253, 255, .9);
  box-shadow: 0 10px 24px rgba(104, 79, 144, .14);
}

body.is-learning-system-open .return-to-universe { display: inline-flex; align-items: center; }

/* 完整完成七个模块后的终章：复用开场的明亮宇宙语言，七颗星球围合成持续运转的学习轨道。 */
.learning-journey-finale[hidden] { display: none !important; }

.learning-journey-finale {
  --finale-orbit-size: min(72vw, 690px);
  --finale-orbit-radius: min(31vw, 318px);
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(135deg, rgba(255, 247, 251, .38), rgba(240, 239, 255, .28)),
    url('assets/learning-universe/universe-dawn-background.webp') center / cover no-repeat;
  transition: opacity .42s ease, visibility .42s ease;
}

.learning-journey-finale::before,
.learning-journey-finale::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(24px);
  animation: journey-finale-nebula 9s ease-in-out infinite alternate;
}

.learning-journey-finale::before {
  width: min(54vw, 720px);
  aspect-ratio: 1;
  left: -16vw;
  top: -28vw;
  background: radial-gradient(circle, rgba(236, 170, 207, .42), transparent 68%);
}

.learning-journey-finale::after {
  width: min(48vw, 640px);
  aspect-ratio: 1;
  right: -13vw;
  bottom: -25vw;
  background: radial-gradient(circle, rgba(125, 188, 230, .4), transparent 68%);
  animation-delay: -4.5s;
}

.learning-journey-finale.is-visible {
  opacity: 1;
  visibility: visible;
}

.journey-finale-sky {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.journey-finale-orbit {
  position: relative;
  width: var(--finale-orbit-size);
  aspect-ratio: 1;
  border: 0;
  box-shadow: none;
  animation: journey-finale-orbit-turn 32s linear infinite;
}

.journey-finale-star-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.journey-star-track-base,
.journey-star-track-glow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-star-track-base {
  stroke: rgba(255, 255, 255, .54);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 6px rgba(141, 111, 184, .25));
}

.journey-star-track-glow {
  stroke: url('#journeyStarTrackGradient');
  stroke-width: 1.35;
  opacity: .48;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .72)) drop-shadow(0 0 10px rgba(124, 157, 218, .28));
}

.journey-star-particle {
  fill: rgba(255, 255, 255, .95);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px rgba(142, 116, 205, .8));
}

.journey-star-particle.is-large {
  fill: #fff5d9;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(226, 174, 214, .92));
}

.journey-finale-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(78px, 9vw, 112px);
  aspect-ratio: 1;
  margin: calc(clamp(78px, 9vw, 112px) / -2);
  transform: rotate(var(--planet-angle)) translateX(var(--finale-orbit-radius)) rotate(calc(-1 * var(--planet-angle)));
}

.journey-finale-planet > span {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: saturate(.72) brightness(1.08);
  animation: journey-finale-planet-ignite 1.15s cubic-bezier(.22, .86, .3, 1.16) var(--planet-delay) forwards;
}

.journey-finale-planet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(102, 75, 147, .22));
  animation: journey-finale-counter-turn 32s linear infinite;
}

.journey-finale-copy {
  position: relative;
  z-index: 2;
  width: min(92vw, 620px);
  padding: 0;
  border: 0;
  text-align: center;
  color: #514466;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: opacity .72s ease .48s, transform .8s cubic-bezier(.2, .8, .2, 1) .48s;
}

.learning-journey-finale.is-visible .journey-finale-copy {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.journey-finale-copy h2 {
  margin: 0;
  font-family: "STKaiti", "FangSong", "KaiTi", serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.3;
  letter-spacing: .025em;
  background: linear-gradient(105deg, #935ea6, #c86482 30%, #517fba 62%, #8b65b3);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, .95)) drop-shadow(0 7px 18px rgba(89, 62, 122, .2));
  animation: journey-finale-title-flow 7s ease-in-out infinite;
}

.journey-finale-copy h2 span { display: block; }

.journey-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.journey-finale-actions .button {
  min-width: 150px;
  border-radius: 999px;
}

.journey-finale-actions .button.primary {
  border-color: transparent;
  background: linear-gradient(105deg, #956db7, #d17e91 52%, #6599bd);
  box-shadow: 0 10px 24px rgba(120, 83, 158, .2);
}

.journey-finale-actions .button.secondary {
  color: #654f82;
  background: rgba(255, 255, 255, .7);
}

@keyframes journey-finale-orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes journey-finale-counter-turn {
  to { transform: rotate(-360deg); }
}

@keyframes journey-finale-planet-ignite {
  0% { opacity: 0; transform: scale(.42); filter: saturate(.2) brightness(1.4) blur(4px); }
  62% { opacity: 1; transform: scale(1.12); filter: saturate(1.05) brightness(1.16) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: saturate(.9) brightness(1.08) blur(0); }
}

@keyframes journey-finale-nebula {
  from { transform: translate3d(-2%, -1%, 0) scale(.94); opacity: .66; }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: 1; }
}

@keyframes journey-finale-title-flow {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 700px), (max-height: 720px) {
  .learning-journey-finale {
    --finale-orbit-size: min(92vw, 520px);
    --finale-orbit-radius: min(37vw, 210px);
    padding: 18px;
  }
  .journey-finale-planet {
    width: clamp(58px, 15vw, 82px);
    margin: calc(clamp(58px, 15vw, 82px) / -2);
  }
  .journey-finale-copy { width: min(88vw, 440px); }
  .journey-finale-copy h2 { font-size: clamp(26px, 7vw, 36px); }
  .journey-finale-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-finale-orbit,
  .journey-finale-planet img,
  .learning-journey-finale::before,
  .learning-journey-finale::after,
  .journey-finale-copy h2 { animation: none !important; }
  .journey-finale-planet > span { animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .journey-star-particle { display: none; }
  .journey-finale-copy { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

.universe-direct-advanced {
  align-self: flex-end;
  margin: 14px 0 0 auto;
  padding: 7px 12px;
  border: 1px solid rgba(115, 109, 193, .22);
  border-radius: 999px;
  color: #59618e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(255, 255, 255, .48);
}

/* 星球文字使用各自的高对比墨色，轻微漂浮而不产生机械化跳动。 */
.universe-planet-copy {
  z-index: 2;
  animation: universe-label-drift 6.8s ease-in-out infinite;
  transform-origin: center;
}

.universe-planet:first-child .universe-planet-copy {
  inset: 0;
  align-content: center;
  justify-content: center;
}

.universe-planet img {
  position: relative;
  z-index: 0;
}

.universe-planet strong {
  color: #513d5e;
  font-family: "STKaiti", "FangSong", "KaiTi", serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .66), 0 2px 10px rgba(42, 34, 72, .2);
  -webkit-text-stroke: .18px rgba(50, 35, 73, .34);
  animation: universe-label-breathe 5.6s ease-in-out infinite;
}

.universe-planet strong > span { display: block; }

.universe-planet em,
.universe-planet-index {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 7px rgba(255, 250, 255, .78);
}

.universe-planet:nth-child(1) strong { color: #7d3b1a; }
.universe-planet:nth-child(2) strong { color: #4d3c75; }
.universe-planet:nth-child(3) strong { color: #285d83; }
.universe-planet:nth-child(4) strong { color: #8d3d58; }
.universe-planet:nth-child(5) strong { color: #874d53; }
.universe-planet:nth-child(6) strong { color: #4d407d; }
.universe-planet:nth-child(7) strong { color: #29528a; }

.universe-planet:nth-child(1) strong > span:first-child { color: #c65123 !important; }
.universe-planet:nth-child(1) strong > span:last-child { color: #91401c !important; }
.universe-planet:nth-child(2) strong > span:first-child { color: #7657c4 !important; }
.universe-planet:nth-child(2) strong > span:last-child { color: #365d9d !important; }
.universe-planet:nth-child(3) strong > span:first-child { color: #2589b7 !important; }
.universe-planet:nth-child(3) strong > span:last-child { color: #216598 !important; }
.universe-planet:nth-child(4) strong > span:first-child { color: #c94876 !important; }
.universe-planet:nth-child(4) strong > span:last-child { color: #9c315e !important; }
.universe-planet:nth-child(5) strong > span:first-child { color: #c65f55 !important; }
.universe-planet:nth-child(5) strong > span:last-child { color: #a5444d !important; }
.universe-planet:nth-child(6) strong > span:first-child { color: #7b56bd !important; }
.universe-planet:nth-child(6) strong > span:last-child { color: #57378f !important; }
.universe-planet:nth-child(7) strong > span:first-child { color: #247dbd !important; }
.universe-planet:nth-child(7) strong > span:last-child { color: #245895 !important; }

.universe-planet.is-locked {
  opacity: .58;
  filter: saturate(.38) brightness(.82);
}

.universe-planet.is-locked img {
  opacity: .68;
  filter: drop-shadow(0 8px 12px rgba(78, 70, 112, .12)) saturate(.38) brightness(.84);
}

.learning-universe:not(.is-first-overview) .universe-planet.is-locked strong > span {
  color: #777286 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .72) !important;
}

/* 第一次启动探索时展示完整明亮的七星总览；锁定只限制进入，不压暗视觉。 */
.learning-universe.is-first-overview .universe-planet.is-locked {
  opacity: 1;
  filter: none;
}

.learning-universe.is-first-overview .universe-planet.is-locked img {
  opacity: 1;
  filter: drop-shadow(0 11px 15px rgba(96, 82, 151, .12)) saturate(.9);
}

/* 七个模块各自使用一组柔和双主色；只改变材质与强调色，不改变模块结构。 */
#assessment { --module-accent: #d38b70; --module-accent-2: #e8b66e; --module-ink: #754638; --module-wash: #fff3ed; --module-glow: rgba(219, 139, 103, .2); }
.flow-panel[data-flow-panel="1"] { --module-accent: #8f79bd; --module-accent-2: #b59bd4; --module-ink: #554778; --module-wash: #f5f1fc; --module-glow: rgba(143, 121, 189, .2); }
.flow-panel[data-flow-panel="2"] { --module-accent: #609db7; --module-accent-2: #82c5bf; --module-ink: #35677c; --module-wash: #edf8fa; --module-glow: rgba(96, 157, 183, .2); }
.flow-panel[data-flow-panel="3"] { --module-accent: #bd7194; --module-accent-2: #d99aae; --module-ink: #7d425d; --module-wash: #fcf0f5; --module-glow: rgba(189, 113, 148, .2); }
.flow-panel[data-flow-panel="4"] { --module-accent: #c78362; --module-accent-2: #e2b178; --module-ink: #7b4c36; --module-wash: #fff4ec; --module-glow: rgba(199, 131, 98, .2); }
.flow-panel[data-flow-panel="5"] { --module-accent: #7e70ae; --module-accent-2: #ad91c8; --module-ink: #524675; --module-wash: #f4f1fb; --module-glow: rgba(126, 112, 174, .21); }
.flow-panel[data-flow-panel="6"] { --module-accent: #4f89b8; --module-accent-2: #76b7a9; --module-ink: #315f80; --module-wash: #eef7fb; --module-glow: rgba(79, 137, 184, .2); }

.flow-panel[data-flow-panel] {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--module-accent) 36%, white);
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--module-accent-2) 20%, transparent), transparent 34%),
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--module-accent) 15%, transparent), transparent 30%),
    linear-gradient(125deg, rgba(255, 255, 255, .9), color-mix(in srgb, var(--module-wash) 72%, white), rgba(255, 255, 255, .84));
  background-size: 140% 140%, 150% 150%, 180% 180%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 20px 52px var(--module-glow);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  animation: module-surface-flow 14s ease-in-out infinite alternate;
}

.flow-panel[data-flow-panel]::before {
  background: linear-gradient(90deg, var(--module-accent), var(--module-accent-2), var(--module-accent));
  background-size: 220% 100%;
  animation: module-border-flow 8s linear infinite;
}

.flow-panel[data-flow-panel]::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(115deg, color-mix(in srgb, var(--module-accent) 70%, white), rgba(255, 255, 255, .78), color-mix(in srgb, var(--module-accent-2) 65%, white)) border-box;
  background-size: 220% 100%;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: .82;
  animation: module-border-flow 8s linear infinite;
}

.flow-panel[data-flow-panel] .section-title h2,
.flow-panel[data-flow-panel] .feature-section-heading h3,
.flow-panel[data-flow-panel] .advanced-learning-hero h2 { color: var(--module-ink); }
.flow-panel[data-flow-panel] .section-title .eyebrow,
.flow-panel[data-flow-panel] .advanced-learning-hero .eyebrow { color: var(--module-accent); }

.flow-panel[data-flow-panel] .button.primary,
.flow-panel[data-flow-panel] .button.secondary:hover {
  border-color: transparent;
  background: linear-gradient(105deg, var(--module-accent), var(--module-accent-2));
  box-shadow: 0 10px 24px var(--module-glow);
}

.flow-panel[data-flow-panel] .button.secondary {
  border-color: color-mix(in srgb, var(--module-accent) 50%, white);
  color: var(--module-ink);
  background: rgba(255, 255, 255, .7);
}

.flow-panel[data-flow-panel] .question-block,
.flow-panel[data-flow-panel] .scale-list fieldset,
.flow-panel[data-flow-panel] .quiz fieldset,
.flow-panel[data-flow-panel] .analysis-box,
.flow-panel[data-flow-panel] .case-basis,
.flow-panel[data-flow-panel] .output,
.flow-panel[data-flow-panel] .professional-literacy-post,
.flow-panel[data-flow-panel] .teaching-goal-record-section,
.flow-panel[data-flow-panel] .learning-record-summary article {
  border-color: color-mix(in srgb, var(--module-accent) 23%, white);
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), color-mix(in srgb, var(--module-wash) 48%, white));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 9px 25px color-mix(in srgb, var(--module-glow) 58%, transparent);
}

.flow-panel[data-flow-panel] .scale label:has(input:checked),
.flow-panel[data-flow-panel] .quiz label:has(input:checked) {
  border-color: var(--module-accent);
  background: linear-gradient(100deg, var(--module-wash), color-mix(in srgb, var(--module-accent-2) 16%, white));
}

@keyframes module-border-flow {
  to { background-position: 220% 50%; }
}

@keyframes module-surface-flow {
  from { background-position: 0% 0%, 100% 0%, 0% 50%; }
  to { background-position: 12% 8%, 88% 12%, 100% 50%; }
}

/* 首屏地图不加载或显示浮动助教。 */
body:not(.is-learning-system-open) .ai-tutor { display: none !important; }

.universe-planet:nth-child(2) .universe-planet-copy { animation-delay: -1.1s; }
.universe-planet:nth-child(3) .universe-planet-copy { animation-delay: -2.2s; }
.universe-planet:nth-child(4) .universe-planet-copy { animation-delay: -3.3s; }
.universe-planet:nth-child(5) .universe-planet-copy { animation-delay: -4.4s; }
.universe-planet:nth-child(6) .universe-planet-copy { animation-delay: -5.5s; }
.universe-planet:nth-child(7) .universe-planet-copy { animation-delay: -6.1s; }

.universe-planet:nth-child(2) strong { animation-delay: -.8s; }
.universe-planet:nth-child(3) strong { animation-delay: -1.6s; }
.universe-planet:nth-child(4) strong { animation-delay: -2.4s; }
.universe-planet:nth-child(5) strong { animation-delay: -3.2s; }
.universe-planet:nth-child(6) strong { animation-delay: -4s; }
.universe-planet:nth-child(7) strong { animation-delay: -4.8s; }

@keyframes universe-label-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -1.5px, 0) rotate(-.35deg); }
}

@keyframes universe-label-breathe {
  0%, 100% { opacity: .92; transform: scale(.992); }
  50% { opacity: 1; transform: scale(1.012); }
}

@font-face {
  font-family: "ProjectSTKaiti";
  src: url("stkaiti-welcome.woff2?v=20260919-title-subset-v1") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.topbar { display: none; }

/* 进入动画：先以雾层聚焦欢迎语，再展示完整星球航线。 */
.universe-welcome {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(246, 239, 250, .34);
  backdrop-filter: blur(13px) saturate(.82);
}

.universe-welcome[hidden],
.universe-route[hidden] { display: none !important; }

.universe-welcome.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity .42s ease, transform .42s ease;
}

.universe-welcome-copy {
  display: grid;
  justify-items: center;
  max-width: min(94vw, 960px);
  color: #4d3e69;
  text-align: center;
}

.universe-welcome h1 {
  display: flex;
  gap: .06em;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "ProjectSTKaiti", "STKaiti", "FangSong", "KaiTi", serif;
  font-size: clamp(24px, 5.2vw, 72px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
  text-shadow: none;
  -webkit-text-stroke: 0;
  white-space: nowrap;
}

.universe-welcome h1[data-font-state]:not([data-font-state="ready"]) {
  visibility: hidden;
}

.universe-welcome h1[data-font-state]:not([data-font-state="ready"]) span {
  animation: none;
}

.universe-welcome h1 span {
  display: inline-block;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(105deg, #8d1f70 8%, #c94779 58%, #df755f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: inset(0 100% 0 0);
  filter: none;
  white-space: nowrap;
  will-change: clip-path;
}

.universe-welcome h1 span:last-child {
  background-image: linear-gradient(105deg, #216faf 5%, #3457ae 52%, #67459d 100%);
}

.universe-welcome h1 span:first-child { animation: universe-title-type 1.05s .2s steps(5, end) both; }
.universe-welcome h1 span:last-child { animation: universe-title-type 1.35s 1.1s steps(5, end) both; }

.reveal-universe-button {
  min-height: 50px;
  margin-top: 28px;
  padding: 0 25px;
  border: 1px solid rgba(125, 91, 165, .28);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  background: #9a74c2;
  box-shadow: 0 14px 28px rgba(118, 83, 157, .22);
  animation: universe-welcome-rise .78s .5s cubic-bezier(.2,.8,.2,1) both, universe-welcome-breathe 3.8s 1.3s ease-in-out infinite;
}

.reveal-universe-button:hover,
.reveal-universe-button:focus-visible { background: #805ba8; transform: translateY(-2px); outline: none; }

.learning-universe.is-exploring .universe-route { animation: universe-route-reveal .72s cubic-bezier(.2,.8,.2,1) both; }

.universe-lock-toast[hidden] { display: none !important; }

.global-flow-notice[hidden] { display: none !important; }

.global-flow-notice {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 1600;
  width: min(420px, calc(100% - 44px));
  padding: 14px 18px;
  border: 1px solid rgba(178, 96, 106, .28);
  border-radius: 17px;
  color: #74404b;
  background: rgba(255, 247, 248, .96);
  box-shadow: 0 16px 36px rgba(98, 64, 85, .18);
  animation: global-notice-in .34s cubic-bezier(.2, .9, .25, 1) both;
}

.global-flow-notice[data-state="info"] {
  border-color: rgba(106, 94, 158, .25);
  color: #56467a;
  background: rgba(250, 247, 255, .96);
}

@keyframes global-notice-in {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.universe-lock-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(34px, 8vh, 86px);
  z-index: 30;
  padding: 13px 22px;
  border: 1px solid rgba(118, 72, 145, .24);
  border-radius: 999px;
  color: #6f356e;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(255, 248, 253, .94);
  box-shadow: 0 18px 42px rgba(85, 52, 118, .2);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.universe-lock-toast.is-showing { animation: universe-lock-toast-pop .64s cubic-bezier(.2,1.35,.34,1) both; }
.universe-planet.is-denied img { animation: universe-locked-planet-jump .62s cubic-bezier(.2,.9,.3,1) both; }

@keyframes universe-welcome-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes universe-welcome-pop {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.035); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes universe-welcome-breathe {
  0%,100% { box-shadow: 0 14px 28px rgba(118, 83, 157, .22); }
  50% { box-shadow: 0 19px 36px rgba(118, 83, 157, .34); }
}

@keyframes universe-title-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes universe-route-reveal {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes universe-lock-toast-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.82); }
  55% { opacity: 1; transform: translateX(-50%) translateY(-7px) scale(1.06); }
  76% { transform: translateX(-50%) translateY(2px) scale(.98); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes universe-locked-planet-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-13px) scale(1.035); }
  62% { transform: translateY(3px) scale(.99); }
}

/* 航行设置：保留全部配置项，改为信息更聚焦的两层控制台。 */
#api {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1240px, calc(100% - 40px));
  margin: clamp(42px, 7vw, 90px) auto 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--universe-line);
  border-radius: 32px;
  background: var(--universe-paper);
  box-shadow: var(--universe-shadow);
}

#api > .api-header,
#api > .shared-qwen-api-panel,
#api > #normalApiPanel,
#api > #enhancedApiPanel,
#api > .advanced-entry-strip,
#api > .ensemble-progress { grid-column: 1 / -1; }

.api-header {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--universe-line);
}

.api-title-icon {
  color: #fff;
  background: var(--universe-accent);
  box-shadow: 0 11px 22px rgba(118, 83, 157, .25);
}

.api-title strong,
.section-title h2,
.feature-section-heading h3 { color: var(--universe-ink); }

.api-title p,
.section-title p,
.muted,
.feature-section-heading p { color: var(--universe-muted); }

.api-config-surface,
.shared-qwen-api-panel,
.enhanced-api-panel {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--universe-line);
  border-radius: 24px;
  background: var(--universe-paper-soft);
}

.api-section-heading > div > span,
.api-subsection-title > span,
.candidate-models legend > span {
  color: #fff;
  background: var(--universe-accent);
}

.api-grid,
.enhanced-api-grid,
.normal-api-grid { gap: 16px; }

.api-field,
.api-grid label,
.normal-model-selector,
.candidate-model-card,
.ensemble-route,
.symptom-evidence-control,
.advanced-entry-strip {
  border-color: var(--universe-line);
  background: rgba(255, 255, 255, .65);
}

.normal-model-selector {
  border: 1px solid rgba(126, 106, 176, .36);
  box-shadow: inset 0 0 0 1px rgba(126, 106, 176, .16);
  overflow: visible;
}

input[type="text"],
input[type="password"],
textarea,
select,
.api-grid input,
.api-grid select {
  border-color: rgba(126, 106, 176, .23);
  color: var(--universe-ink);
  background: rgba(255, 255, 255, .88);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--universe-accent);
  outline-color: rgba(149, 113, 189, .18);
}

.generation-mode-switch,
.normal-model-options,
.advanced-count-switch {
  border-color: var(--universe-line);
  background: rgba(255, 255, 255, .62);
}

.generation-mode-switch label:has(input:checked) span,
.advanced-count-switch label:has(input:checked) span {
  color: #fff;
  background: var(--universe-accent);
  box-shadow: 0 8px 16px rgba(118, 83, 157, .22);
}

/* 普通模型选中态从左向右柔和铺开，避免文字后方突然出现整块紫色。 */
.api-strip .normal-model-options label {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
}

.api-strip .normal-model-options label::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(231, 218, 247, .96), rgba(222, 237, 252, .94));
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .52s cubic-bezier(.22, .72, .25, 1);
}

.api-strip .normal-model-options label:has(input:checked) {
  border-color: rgba(138, 112, 181, .46);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 7px 16px rgba(107, 83, 145, .12);
}

.api-strip .normal-model-options label:has(input:checked)::before { transform: scaleX(1); }

.api-strip .normal-model-options label:has(input:checked) > span {
  position: relative;
  z-index: 1;
  color: #59446f;
  background: transparent;
  box-shadow: none;
}

.api-strip .normal-model-options label:has(input:checked) b { color: #4f3b68; }

.button.primary,
.api-reset-button,
.advanced-generate-button,
.advanced-submit-button,
.flow-actions .button,
.page-button {
  color: #fff;
  background: var(--universe-accent);
  box-shadow: 0 10px 20px rgba(118, 83, 157, .2);
}

.button.primary:hover,
.api-reset-button:hover,
.advanced-generate-button:hover,
.advanced-submit-button:hover,
.flow-actions .button:hover,
.page-button:hover { background: var(--universe-accent-dark); }

.button.secondary {
  border-color: rgba(149, 113, 189, .42);
  color: var(--universe-accent-dark);
  background: rgba(255, 255, 255, .72);
}

.api-connection-row {
  align-items: center;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--universe-line);
}

.advanced-entry-strip {
  margin: 0;
  padding: 20px 24px;
  border-radius: 22px;
  box-shadow: none;
}

/* 症状划词：与主控制台同宽独立呈现，避免成为无主的横条。 */
.symptom-evidence-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: min(1240px, calc(100% - 40px));
  margin: 18px auto 0;
  padding: 19px 24px;
  border: 1px solid var(--universe-line);
  border-radius: 24px;
  box-shadow: 0 13px 34px rgba(104, 79, 144, .08);
}

.symptom-evidence-control-title strong { color: var(--universe-ink); }
.symptom-evidence-control-title #symptomEvidenceStatus { color: #6f5b7d; }
.symptom-evidence-control-grid { justify-content: stretch; }
.symptom-evidence-switch input:checked + .symptom-switch-orb { background: linear-gradient(90deg, #9f73bf, #6eaaa8); }

/* 七个学习模块：统一单列阅读节奏，病例任务内部保留双栏工作台。 */
.cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: min(1240px, calc(100% - 40px));
  min-height: 0;
  margin: 24px auto 0;
}

.student-pane,
.ai-pane { display: contents; }

.console-card {
  border: 1px solid var(--universe-line);
  border-radius: 30px;
  background: var(--universe-paper);
  box-shadow: var(--universe-shadow);
}

.console-card { padding: clamp(22px, 3.4vw, 38px); }
.console-card::before { height: 5px; background: var(--universe-accent); }

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--universe-line);
}

.section-title.compact { margin-bottom: 22px; }
.section-title .eyebrow {
  color: #9b75bd;
  letter-spacing: .14em;
}

.question-block {
  gap: 18px;
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--universe-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .58);
}

.question-block:first-of-type { border-top: 1px solid var(--universe-line); }

.scale-list { gap: 12px; }
.scale-list fieldset,
.quiz fieldset,
.professional-literacy-post,
.knowledge-extraction-card,
.teaching-goal-record-section,
.case-score-card,
.analysis-box,
.case-basis,
.output {
  border-color: var(--universe-line);
  background: rgba(255, 255, 255, .68);
}

.scale label,
.quiz label {
  border-color: var(--universe-line);
  color: var(--universe-ink);
  background: rgba(248, 244, 252, .82);
}

.scale label:hover,
.quiz label:hover { border-color: rgba(149, 113, 189, .52); }

.scale label:has(input:checked),
.quiz label:has(input:checked) {
  border-color: var(--universe-accent);
  background: rgba(240, 231, 249, .95);
  box-shadow: inset 0 0 0 1px rgba(149, 113, 189, .16);
}

input[type="radio"] { accent-color: var(--universe-accent); }

.post-case-workspace {
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--universe-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .52);
}

.case-question-answer,
.case-question-answer-list > label {
  border-color: var(--universe-line);
  background: rgba(255, 255, 255, .6);
}

.learning-record-panel,
#advanced-learning {
  width: min(1240px, calc(100% - 40px));
  margin: 24px auto 0;
}

.learning-record-panel { border-top-color: var(--universe-accent); }

.learning-record-summary article,
.learning-record-grid > section,
.teaching-goal-record-card {
  border-color: var(--universe-line);
  background: rgba(255, 255, 255, .68);
}

.learning-record-summary strong { color: var(--universe-accent-dark); }

/* 底部翻页控制位于页面内容之后，不悬浮、不吸附，也不跟随视口滚动。 */
.flow-toolbar {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto;
  width: min(1000px, calc(100% - 40px));
  margin: 26px auto 0 !important;
  border: 1px solid var(--universe-line);
  border-radius: 22px;
  background: rgba(255, 253, 255, .98);
  box-shadow: 0 16px 34px rgba(104, 79, 144, .16);
  backdrop-filter: none !important;
  transform: none !important;
}

.flow-caption span {
  color: var(--universe-accent-dark);
  background: rgba(242, 232, 250, .9);
}

#flowNext {
  min-width: 170px;
  white-space: nowrap;
}

#flowNext[hidden] { display: none !important; }

.flow-planet-chain {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  padding: 10px 14px 2px;
}

.flow-planet-chain::before {
  position: absolute;
  top: 38px;
  right: 8%;
  left: 8%;
  z-index: 0;
  height: 1px;
  background: rgba(135, 111, 181, .24);
  content: "";
}

.flow-planet-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: #766985;
  font: inherit;
  text-align: center;
  background: transparent;
  cursor: pointer;
}

.flow-planet-step:focus-visible {
  outline: 2px solid rgba(116, 76, 164, .62);
  outline-offset: 4px;
  border-radius: 14px;
}

.flow-planet-step img {
  width: clamp(42px, 5vw, 58px);
  height: clamp(42px, 5vw, 58px);
  object-fit: contain;
  filter: saturate(.72) opacity(.62);
  transition: filter .3s ease, transform .3s ease;
}

.flow-planet-step small {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-planet-step.is-complete img { filter: saturate(.84) opacity(.82); }
.flow-planet-step.is-locked { opacity: .48; cursor: not-allowed; }
.flow-planet-step:not(.is-locked):hover img { transform: translateY(-4px) scale(1.04); }
.flow-planet-step.is-active { color: var(--universe-accent-dark); }
.flow-planet-step.is-active img { filter: saturate(1) opacity(1) drop-shadow(0 8px 10px rgba(110, 76, 153, .2)); }
.flow-planet-step.is-arriving img { animation: flow-planet-arrive .72s cubic-bezier(.2,1.2,.3,1) both; }

@keyframes flow-planet-arrive {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-13px) scale(1.12); }
  68% { transform: translateY(2px) scale(.98); }
}

/* 浮动助教保留原功能，降低科技装置感，使其成为同一视觉系统中的学习伙伴。 */
.ai-tutor {
  border: 0;
  border-radius: 26px;
  background: rgba(255, 253, 255, .96);
  box-shadow: 0 24px 64px rgba(104, 79, 144, .2);
}

.ai-tutor-head { background: rgba(239, 229, 249, .95); }
.ai-tutor-head h2 { color: var(--universe-ink); }
.ai-tutor-head span { color: var(--universe-muted); }
.ai-tutor-head span::before { background: #a58ac1; }
.ai-tutor-message.assistant,
.ai-tutor-input,
.ai-tutor-attachment { background: rgba(250, 246, 253, .92); }
.ai-tutor-message.user { background: rgba(231, 216, 244, .9); }
.ai-tutor-attach { color: var(--universe-accent-dark); background: rgba(242, 233, 250, .86); }

.site-footer {
  width: min(1240px, calc(100% - 40px));
  margin: 30px auto 0;
  color: #746985;
  text-align: center;
}

@keyframes universe-panel-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

.console-card.flow-panel.is-active { animation: universe-panel-in .5s cubic-bezier(.2, .8, .2, 1) both; }

/* 模块前进时，短暂回到完整七星航线，再落入下一模块。 */
html.is-module-transitioning,
body.is-module-transitioning { overflow: hidden !important; }

body.is-learning-system-open.is-module-transitioning #learningUniverse {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  padding: clamp(28px, 4.4vw, 72px) clamp(22px, 5vw, 86px) clamp(42px, 5vw, 76px);
  opacity: 1;
  pointer-events: none;
  background: #eee7fb url('assets/learning-universe/universe-dawn-background.webp') center / cover no-repeat;
}

body.is-module-transitioning #learningUniverse .universe-route {
  display: flex !important;
  min-height: calc(100svh - clamp(70px, 10vw, 148px));
  animation: module-route-transition-in .48s ease-out both;
}

body.is-module-transitioning #learningUniverse .universe-welcome { display: none !important; }
.universe-route-scroll:focus-visible { outline: none; }

.universe-planet:focus-visible {
  outline: none;
}

.universe-planet:focus-visible img {
  filter: drop-shadow(0 0 11px rgba(126, 83, 169, .5)) saturate(1.04);
}

.universe-planet.is-transition-departing img {
  animation: module-planet-depart .65s ease-in both !important;
}

.universe-planet.is-transition-arriving img {
  animation: module-planet-arrive 1s cubic-bezier(.18, 1.35, .34, 1) both !important;
}

@keyframes module-route-transition-in {
  from { opacity: 0; transform: translateX(34px) scale(1.01); }
  to { opacity: 1; transform: none; }
}

@keyframes module-planet-depart {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  55% { transform: translateY(-18px) scale(1.08); opacity: 1; }
  100% { transform: translateX(-22px) scale(.92); opacity: .6; }
}

@keyframes module-planet-arrive {
  0% { transform: translateY(18px) scale(.82); opacity: .45; }
  48% { transform: translateY(-20px) scale(1.12); opacity: 1; }
  72% { transform: translateY(4px) scale(.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 820px) {
  #api,
  .symptom-evidence-control { width: min(100% - 28px, 1240px); }

  #api { grid-template-columns: 1fr; padding: 18px; border-radius: 24px; }
  .api-header,
  .initial-assessment-heading,
  .row-title { align-items: flex-start; flex-direction: column; }
  .api-header-controls,
  .symptom-evidence-control-grid { justify-content: flex-start; }
  .symptom-evidence-control { grid-template-columns: 1fr; gap: 14px; }
  .cockpit,
  .learning-record-panel,
  #advanced-learning { width: min(100% - 28px, 1240px); }
  .console-card { padding: 20px; border-radius: 24px; }
  .question-block { padding: 16px; border-radius: 18px; }
  .scale-list { grid-template-columns: 1fr; }
  .post-case-workspace { grid-template-columns: 1fr; padding: 16px; }
  .flow-toolbar { width: min(100% - 28px, 1000px); }
  .flow-planet-chain { gap: 3px; padding-inline: 2px; }
  .flow-planet-step small { font-size: 9px; }
  .learning-record-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-panel[data-flow-panel],
  .flow-panel[data-flow-panel]::before,
  .flow-panel[data-flow-panel]::after,
  .flow-panel.is-active,
  .universe-planet-copy,
  .universe-planet strong,
  .universe-planet.is-denied img,
  .universe-lock-toast.is-showing,
  .flow-planet-step.is-arriving img,
  .universe-welcome h1 span,
  .reveal-universe-button { animation: none; }

  .universe-welcome h1 span { clip-path: inset(0); }
  .api-strip .normal-model-options label::before { transition: none; }
}
