/* ==========================================================================
   edu-ui.css — 萌新 · 教程列表 / 章节阅读
   与 mx-ui 共用薄荷青与磨砂玻璃；亮/暗主题均保留中国元素
   ========================================================================== */

.edu-page,
.edu-chapter { position: relative; }

/* ---------- 课程总览 ---------- */
.edu-hero {
  position: relative;
  overflow: hidden;
  margin: 6px 0 24px;
  padding: 32px 32px 28px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  background:
    radial-gradient(620px 280px at 86% 10%, rgba(143, 213, 196, .35), transparent 65%),
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(230, 245, 239, .68));
  box-shadow: 0 24px 50px -38px rgba(35, 86, 72, .5);
  backdrop-filter: blur(16px) saturate(.84);
  -webkit-backdrop-filter: blur(16px) saturate(.84);
}
.edu-hero::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -34%;
  height: 74%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(91, 143, 128, .16), transparent 58%),
    radial-gradient(ellipse at 46% 100%, rgba(120, 170, 152, .13), transparent 62%),
    radial-gradient(ellipse at 78% 100%, rgba(61, 111, 98, .12), transparent 60%);
}
.edu-hero::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 34px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fbf2d8, #efd8a6 58%, rgba(231, 201, 140, .18) 72%, transparent 76%);
  opacity: .7;
  pointer-events: none;
}
.edu-hero > * { position: relative; z-index: 1; }
.edu-hero .mx-kicker { margin-bottom: 8px; }
.edu-hero h1 {
  margin: 0 0 8px;
  color: #213b34;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.edu-hero .edu-sub {
  max-width: 610px;
  margin: 0;
  color: #55736a;
  font-size: 14px;
  line-height: 1.8;
}
.edu-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed rgba(80, 130, 116, .28);
}
.edu-stats div { display: flex; align-items: baseline; gap: 7px; }
.edu-stats b { color: #213b34; font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.edu-stats span { color: #6f8a81; font-size: 12px; }
.edu-seal {
  position: absolute;
  right: 30px;
  bottom: 24px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #a33a2b;
  color: #fdf7ea;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 20px;
  box-shadow: 0 6px 18px -8px rgba(163, 58, 43, .5);
}

.edu-continue {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 20px 42px -32px rgba(42, 92, 78, .5);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
  color: #2f4a41;
  text-decoration: none;
}
.edu-continue:hover { text-decoration: none; transform: translateY(-2px); }
.edu-continue-label {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(106, 169, 151, .14);
  color: #3d6f62;
  font-size: 11px;
  font-weight: 600;
}
.edu-continue b { font-size: 14px; line-height: 1.4; }
.edu-continue small { color: #718b81; font-size: 12px; }
.edu-continue-arrow { margin-left: auto; color: #4f8a7b; }

.edu-section { margin-top: 26px; }
.edu-section-head { margin-bottom: 14px; }
.edu-section-head .mx-kicker { margin-bottom: 5px; }
.edu-section-head h2 {
  margin: 0;
  color: #213b34;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.035em;
}
.edu-feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.edu-feature-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 16px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 20px 42px -32px rgba(42, 92, 78, .5);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
  color: #2f4a41;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.edu-feature-card:hover { transform: translateY(-4px); text-decoration: none; box-shadow: 0 26px 48px -30px rgba(42, 92, 78, .55); }
.edu-feature-num {
  color: #a3c4b8;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
}
.edu-feature-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(106, 169, 151, .14);
  color: #3d6f62;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.edu-feature-card h3 { margin: 7px 0 4px; font-size: 16px; letter-spacing: -.02em; }
.edu-feature-card p { margin: 0; color: #668077; font-size: 12.5px; line-height: 1.65; }
.edu-feature-arrow { margin-left: auto; color: #4f8a7b; font-size: 18px; line-height: 1; }

.edu-catalog { margin-top: 30px; }
.edu-catalog .filter-row { margin: 0 0 14px; }
.edu-culture-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background:
    radial-gradient(420px 220px at 10% 100%, rgba(143, 213, 196, .22), transparent 65%),
    rgba(255, 255, 255, .52);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
}
.edu-culture-quote { display: flex; align-items: center; gap: 12px; }
.edu-culture-quote p { margin: 0; color: #38584e; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 15px; }
.edu-culture-quote small { display: block; margin-top: 4px; color: #78998d; font-size: 11.5px; }
.edu-culture-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.edu-culture-items span {
  padding: 12px 8px;
  border: 1px solid rgba(160, 200, 188, .35);
  border-radius: 12px;
  background: rgba(255, 255, 255, .4);
  color: #4f7468;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 14px;
  text-align: center;
}

/* ---------- 章节阅读 ---------- */
.edu-chapter-head {
  position: relative;
  overflow: hidden;
  margin: 4px 0 18px;
  padding: 24px 28px 22px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  background:
    radial-gradient(520px 240px at 88% 6%, rgba(143, 213, 196, .28), transparent 65%),
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(232, 246, 240, .62));
  box-shadow: 0 22px 46px -36px rgba(35, 86, 72, .5);
  backdrop-filter: blur(16px) saturate(.84);
  -webkit-backdrop-filter: blur(16px) saturate(.84);
}
.edu-chapter-head::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fbf2d8, #efd8a6 58%, transparent 74%);
  opacity: .55;
  pointer-events: none;
}
.edu-chapter-head .breadcrumb { margin-bottom: 14px; }
.edu-chapter-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edu-chapter-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(106, 169, 151, .16);
  color: #3d6f62;
  font-size: 11.5px;
  font-weight: 600;
}
.edu-chapter-time { color: #78998d; font-size: 11.5px; }
.edu-chapter-head h1 {
  margin: 12px 0 6px;
  color: #213b34;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -.04em;
}
.edu-chapter-sub { margin: 0; color: #5d7a70; font-size: 13px; }
.edu-progress {
  height: 4px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 169, 153, .18);
}
.edu-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f8a7b, #8fc9b8 62%, #b08b4f);
}
.edu-chapter-seal {
  position: absolute;
  right: 26px;
  bottom: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #a33a2b;
  color: #fdf7ea;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 17px;
  opacity: .9;
}
.edu-article {
  max-width: none;
  padding: 30px 32px 26px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 22px 46px -36px rgba(35, 86, 72, .45);
  backdrop-filter: blur(16px) saturate(.84);
  -webkit-backdrop-filter: blur(16px) saturate(.84);
}
.edu-article > h1:first-child { margin-top: 0; }
.edu-chapter-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, .8fr);
  gap: 14px;
  margin-top: 18px;
}
.edu-related,
.edu-culture-card {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 20px 42px -34px rgba(35, 86, 72, .45);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
}
.edu-related h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.02em; }
.edu-related .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edu-culture-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.edu-culture-card p { margin: 0; color: #38584e; font-family: "Songti SC", "STSong", "SimSun", serif; font-size: 16px; }
.edu-culture-card small { color: #78998d; font-size: 11.5px; line-height: 1.6; }
.edu-culture-card .mx-link { margin-top: auto; }
.edu-culture-card .edu-culture-source {
  color: #9a8b72;
  font-size: 10.5px;
  letter-spacing: .08em;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}
[data-theme="dark"] .edu-culture-card .edu-culture-source { color: #a99a7c; }

/* ---------- 暗色：不只是一片黑 ---------- */
[data-theme="dark"] .edu-hero {
  border-color: rgba(147, 220, 200, .26);
  background:
    radial-gradient(620px 300px at 82% 8%, rgba(147, 220, 200, .22), transparent 64%),
    radial-gradient(440px 240px at 12% 100%, rgba(214, 183, 125, .16), transparent 62%),
    linear-gradient(135deg, #21443a, #1a3730);
}
[data-theme="dark"] .edu-hero::before {
  background:
    radial-gradient(ellipse at 18% 100%, rgba(147, 220, 200, .16), transparent 58%),
    radial-gradient(ellipse at 48% 100%, rgba(143, 213, 196, .12), transparent 62%),
    radial-gradient(ellipse at 80% 100%, rgba(214, 183, 125, .12), transparent 60%);
}
[data-theme="dark"] .edu-hero::after,
[data-theme="dark"] .edu-chapter-head::after {
  background: radial-gradient(circle at 38% 35%, #f4e8c8, #cfb277 58%, transparent 74%);
  opacity: .62;
}
[data-theme="dark"] .edu-hero h1,
[data-theme="dark"] .edu-stats b,
[data-theme="dark"] .edu-section-head h2,
[data-theme="dark"] .edu-chapter-head h1 { color: #e5f1ec; }
[data-theme="dark"] .edu-hero .edu-sub,
[data-theme="dark"] .edu-chapter-sub,
[data-theme="dark"] .edu-continue,
[data-theme="dark"] .edu-feature-card,
[data-theme="dark"] .edu-culture-quote p,
[data-theme="dark"] .edu-culture-card p { color: #c5d8d1; }
[data-theme="dark"] .edu-stats span,
[data-theme="dark"] .edu-chapter-time,
[data-theme="dark"] .edu-culture-quote small,
[data-theme="dark"] .edu-culture-card small { color: #8fa8a0; }
[data-theme="dark"] .edu-continue,
[data-theme="dark"] .edu-feature-card,
[data-theme="dark"] .edu-culture-strip,
[data-theme="dark"] .edu-chapter-head,
[data-theme="dark"] .edu-article,
[data-theme="dark"] .edu-related,
[data-theme="dark"] .edu-culture-card {
  border-color: rgba(147, 220, 200, .24);
  background: rgba(33, 68, 58, .66);
}
[data-theme="dark"] .edu-feature-badge,
[data-theme="dark"] .edu-continue-label,
[data-theme="dark"] .edu-chapter-badge {
  background: rgba(120, 201, 180, .14);
  color: #8fd5c1;
}
[data-theme="dark"] .edu-culture-items span {
  border-color: rgba(120, 201, 180, .16);
  background: rgba(19, 33, 29, .4);
  color: #a9c9bf;
}
[data-theme="dark"] .edu-feature-card p,
[data-theme="dark"] .edu-culture-items span { color: #a9c9bf; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .edu-hero { padding: 24px 20px 22px; border-radius: 16px; }
  .edu-hero::after { right: 20px; top: 20px; width: 44px; height: 44px; }
  .edu-seal { right: 20px; bottom: 18px; width: 34px; height: 34px; font-size: 16px; }
  .edu-feature-row { grid-template-columns: 1fr; }
  .edu-culture-strip { grid-template-columns: 1fr; padding: 18px; }
  .edu-culture-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu-chapter-head { padding: 20px 18px; border-radius: 16px; }
  .edu-chapter-head::after { right: 18px; top: 22px; width: 38px; height: 38px; }
  .edu-chapter-seal { right: 16px; bottom: 16px; width: 32px; height: 32px; font-size: 15px; }
  .edu-article { padding: 20px 18px 18px; border-radius: 14px; }
  .edu-chapter-foot { grid-template-columns: 1fr; }
  .edu-related .tutorial-grid { grid-template-columns: 1fr; }
}

/* ---------- 中国元素装饰层 ---------- */
.cn-decor {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.edu-hero > .cn-decor,
.edu-chapter-head > .cn-decor { position: absolute !important; }
.cn-decor > * { position: absolute; pointer-events: none; }
.cn-cloud {
  width: 240px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 52%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .16) 52%, transparent 72%);
  filter: blur(8px);
  opacity: .34;
  animation: cn-drift 16s ease-in-out infinite alternate;
}
.cn-cloud-a { left: -40px; bottom: 16%; }
.cn-cloud-b { right: -30px; top: 22%; transform: scale(1.25); animation-delay: -7s; opacity: .24; }
@keyframes cn-drift {
  from { transform: translateX(-8px); }
  to { transform: translateX(18px); }
}
.cn-lantern {
  width: 20px;
  height: 27px;
  border-radius: 5px;
  background: linear-gradient(180deg, #cf5a43, #9c3325);
  box-shadow: 0 0 22px rgba(255, 174, 96, .35), inset 0 0 6px rgba(255, 220, 160, .35);
  animation: cn-sway 5s ease-in-out infinite;
}
.cn-lantern::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 9px;
  width: 1px;
  height: 14px;
  background: rgba(163, 58, 43, .55);
}
.cn-lantern::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 9px;
  width: 1px;
  height: 9px;
  background: #c9a25c;
}
.cn-lantern-a { top: 72px; left: 22px; }
.cn-lantern-b { top: 108px; right: 26px; animation-delay: -2.4s; opacity: .75; }
@keyframes cn-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.cn-couplet {
  top: 24%;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  color: #5c5344;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 13px;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  opacity: .72;
}
.cn-couplet span { display: block; }
.cn-seal {
  writing-mode: horizontal-tb;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #a33a2b;
  color: #fdf7ea;
  font-family: var(--font);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(163, 58, 43, .22);
}
.cn-lattice {
  top: -12px;
  right: -12px;
  width: 170px;
  height: 118px;
  opacity: .4;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(79, 138, 123, .22) 17px 18px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(79, 138, 123, .18) 17px 18px);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%);
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.mx-start .cn-couplet { display: none; }
.mx-start .cn-lattice { opacity: .26; }

[data-theme="dark"] body {
  background:
    radial-gradient(1100px 620px at 84% -8%, rgba(147, 220, 200, .13), transparent 62%),
    radial-gradient(900px 520px at 8% 108%, rgba(214, 183, 125, .10), transparent 64%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="dark"] .cn-couplet { color: #e4d2aa; opacity: .8; }
[data-theme="dark"] .cn-cloud {
  background: radial-gradient(ellipse at 34% 52%, rgba(147, 220, 200, .26), rgba(147, 220, 200, .06) 52%, transparent 72%);
  opacity: .3;
}
[data-theme="dark"] .cn-lantern {
  box-shadow: 0 0 30px rgba(255, 182, 104, .55), inset 0 0 7px rgba(255, 220, 160, .45);
  filter: brightness(1.08);
}
[data-theme="dark"] .cn-lattice {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(147, 220, 200, .22) 17px 18px),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(147, 220, 200, .18) 17px 18px);
  opacity: .35;
}

@media (max-width: 900px) {
  .cn-couplet { display: none; }
  .cn-lattice { width: 120px; height: 90px; opacity: .26; }
  .cn-lantern-a { top: 64px; left: 12px; }
  .cn-lantern-b { top: 92px; right: 14px; }
  .cn-cloud { opacity: .22; }
}

/* 新手入口与进阶提示 */
.edu-start-link { margin: 10px 0 0; font-size: 12.5px; }
.edu-start-link a {
  color: #a85f43;
  text-decoration: none;
  border-bottom: 1px dashed rgba(168, 95, 67, .45);
}
.edu-start-link a:hover { color: #8f4a32; border-bottom-style: solid; }
.edu-prereq {
  margin: 10px 0 0;
  padding: 8px 11px;
  border-left: 3px solid #c96f4a;
  border-radius: 0 8px 8px 0;
  background: rgba(201, 111, 74, .08);
  color: #6b5a4a;
  font-size: 12px;
  line-height: 1.65;
}
.edu-prereq a { color: #a85f43; }
[data-theme="dark"] .edu-prereq {
  background: rgba(201, 111, 74, .13);
  color: #d8c6ae;
}
[data-theme="dark"] .edu-prereq a { color: #e0b083; }