/* 星辰学习平台 · 组件样式（第一阶段样张）
   施工方只能使用这里定义的类名：不得修改本文件，组件里不得出现 style 属性或 <style>。 */

/* ===== 1. 基础 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 56px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-16)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -64px; z-index: 100;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-s);
  background: var(--night); color: #fff;
}
.skip:focus { top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== 2. 学科 ===== */
.subj-chinese   { --subject: var(--s-chinese);   --subject-tint: var(--s-chinese-tint); }
.subj-math      { --subject: var(--s-math);      --subject-tint: var(--s-math-tint); }
.subj-english   { --subject: var(--s-english);   --subject-tint: var(--s-english-tint); }
.subj-physics   { --subject: var(--s-physics);   --subject-tint: var(--s-physics-tint); }
.subj-chemistry { --subject: var(--s-chemistry); --subject-tint: var(--s-chemistry-tint); }
.subj-morality  { --subject: var(--s-morality);  --subject-tint: var(--s-morality-tint); }
.subj-history   { --subject: var(--s-history);   --subject-tint: var(--s-history-tint); }
.subject-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-14); font-weight: 500; color: var(--ink-2);
}
.subject-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--subject, var(--ink-3));
}

/* ===== 3. 星（你的进度） ===== */
.star { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linejoin: round; }
.star--lit { fill: var(--star); stroke: var(--star); }
.star--half { fill: var(--star-glow); stroke: var(--star); }
.star--weak { stroke: var(--star); stroke-dasharray: 2 2; }

/* ===== 4. 顶栏 ===== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 246, 242, .94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(247, 246, 242, .82); backdrop-filter: saturate(1.4) blur(10px); }
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--night); font-size: var(--fs-17); font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.brand__star { width: 20px; height: 20px; fill: var(--star); }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-15); color: var(--ink-2); }
.site-nav__link > span { padding: 5px 10px; border-radius: var(--r-pill); transition: background var(--t-fast), color var(--t-fast); }
.site-nav__link:hover > span { color: var(--night); }
.site-nav__link[aria-current="page"] > span { background: var(--night-tint); color: var(--night); font-weight: 600; }
.site-nav__link--wide { display: none; }
/* 访客顶栏在 400px 以下放不下品牌、两项导航和「进入课程」，导航字会被挤成竖排；按钮先收起，开篇里有同样的按钮 */
@media (max-width: 399.98px) { .site-header__inner > .btn { display: none; } }
@media (min-width: 1024px) {
  .brand { font-size: var(--fs-18); }
  .site-nav { gap: var(--sp-1); }
  .site-nav__link--wide { display: inline-flex; }
}

/* ===== 5. 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--fs-16); font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn svg { width: 14px; height: 14px; fill: currentColor; }
.btn--primary { background: var(--night); color: #fff; }
.btn--primary:hover { background: var(--night-hover); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--night); }
.btn--ghost:hover { border-color: var(--line-strong); }
.btn--small { min-height: 36px; padding: 0 14px; font-size: var(--fs-15); }

/* ===== 6. 首页开篇 ===== */
.hero { padding: var(--sp-6) 0 var(--sp-5); }
.hero__inner { position: relative; }
.eyebrow { font-size: var(--fs-14); color: var(--ink-3); letter-spacing: .12em; }
.hero__title { margin-top: var(--sp-2); font-size: var(--fs-26); line-height: var(--lh-tight); font-weight: 700; color: var(--night); }
.hero__lead { margin-top: var(--sp-3); max-width: 30em; color: var(--ink-2); }
.hero__sky { position: absolute; top: -10px; right: -4px; width: 150px; height: 90px; pointer-events: none; }
.sky__line { fill: none; stroke: var(--night); stroke-opacity: .22; stroke-width: 1.4; stroke-linejoin: round; }
.sky__pointer { fill: none; stroke: var(--star); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 3 5; }
.sky__dot { fill: var(--night); fill-opacity: .5; }
.sky__dust { fill: var(--night); fill-opacity: .18; }
.sky__glow { fill: var(--star-glow); fill-opacity: .7; }
.sky__polaris { fill: var(--star); }
@media (min-width: 1024px) {
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero__title { font-size: var(--fs-34); }
  .hero__lead { font-size: var(--fs-18); }
  .hero__sky { top: -8px; right: 0; width: 360px; height: 216px; }
}

/* ===== 7. 继续看 ===== */
.continue-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: 72px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast);
}
.continue-card:hover { box-shadow: var(--shadow-2); }
@media (min-width: 1024px) { .continue-card { max-width: 560px; } }
.continue-card .star { width: 22px; height: 22px; }
.continue-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.continue-card__label { font-size: var(--fs-14); color: var(--ink-3); }
.continue-card__title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continue-card__bar { flex: none; width: 100%; margin-top: 6px; }
.continue-card__go { flex: none; font-size: var(--fs-15); font-weight: 600; color: var(--night); }

/* ===== 8. 区块与学科筛选 ===== */
.section { padding-top: var(--sp-7); }
.section-top { padding-top: var(--sp-4); }
.paper-intro { padding-top: var(--sp-4); color: var(--ink-2); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-4); }
.section__title { font-size: var(--fs-20); font-weight: 700; }
.section__note { font-size: var(--fs-14); color: var(--ink-3); }
.section__lead { max-width: 40em; margin: calc(-1 * var(--sp-1)) 0 var(--sp-4); color: var(--ink-2); }
.section__lead strong { color: var(--ink); }
.chips {
  display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) var(--sp-4); padding: 0 var(--gutter) 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-15); color: var(--ink-2);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--subject, transparent); }
.chip--all::before { display: none; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--night); border-color: var(--night); color: #fff; }

/* ===== 9. 卡片 ===== */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
a.card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badge {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--scrim); color: #fff; font-size: var(--fs-14);
}
.card__badge svg { width: 11px; height: 11px; fill: currentColor; }
.card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.card__title { font-size: var(--fs-18); font-weight: 600; line-height: var(--lh-title); }
.card__meta { font-size: var(--fs-14); color: var(--ink-3); }
.card--soon { background: transparent; border-style: dashed; box-shadow: none; }
.card__media--empty { display: grid; place-items: center; align-content: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-15); }
.card__media--empty .star { width: 28px; height: 28px; }
/* 试卷列表：手机上改为左图右文的横条，一屏能看到更多套卷 */
@media (max-width: 639px) {
  .card-grid--rows { gap: var(--sp-2); }
  .card-grid--rows .card { flex-direction: row; align-items: stretch; }
  .card-grid--rows .card__media { flex: none; width: 42%; align-self: center; margin: var(--sp-2) 0 var(--sp-2) var(--sp-2); border-radius: var(--r-s); overflow: hidden; }
  .card-grid--rows .card__media--empty { align-self: stretch; margin: var(--sp-2) 0 var(--sp-2) var(--sp-2); font-size: var(--fs-14); }
  .card-grid--rows .card__media--empty span { display: none; }
  .card-grid--rows .card__badge { left: 6px; bottom: 6px; padding: 1px 7px; }
  .card-grid--rows .card__badge-label { display: none; }
  .card-grid--rows .card__body { flex: 1; min-width: 0; justify-content: center; gap: 2px; padding: var(--sp-2) var(--sp-3); }
  .card-grid--rows .card__title { font-size: var(--fs-16); }
}
/* 窄栏里的卡片（如"今天"右栏）：任何宽度都用左图右文的横条 */
.card-grid--list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.card-grid--list .card { flex-direction: row; align-items: stretch; }
.card-grid--list .card__media { flex: none; width: 42%; align-self: center; margin: var(--sp-2) 0 var(--sp-2) var(--sp-2); border-radius: var(--r-s); overflow: hidden; }
.card-grid--list .card__badge { left: 6px; bottom: 6px; padding: 1px 7px; }
.card-grid--list .card__badge-label { display: none; }
.card-grid--list .card__body { flex: 1; min-width: 0; justify-content: center; gap: 2px; padding: var(--sp-2) var(--sp-3); }
.card-grid--list .card__title { font-size: var(--fs-16); }
.progress-line { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; font-size: var(--fs-14); color: var(--ink-2); }
.progress-line .star { width: 14px; height: 14px; }
progress.bar {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 48px; height: 4px; border: 0; border-radius: 2px;
  background: var(--surface-2); overflow: hidden;
}
progress.bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 2px; }
progress.bar::-webkit-progress-value { background: var(--star); border-radius: 2px; }
progress.bar::-moz-progress-bar { background: var(--star); border-radius: 2px; }

/* ===== 10. 难度 ===== */
.diff { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: var(--ink-2); white-space: nowrap; }
.diff__pips { display: inline-flex; gap: 3px; }
.diff__pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.diff__pips i.on { background: var(--ink); }

/* ===== 11. 面包屑 ===== */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-14); color: var(--ink-3); }
.crumbs a { color: var(--night); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { color: var(--line-strong); }

/* ===== 12. 试卷页开篇 ===== */
.paper-hero { background: var(--subject-tint); border-bottom: 1px solid var(--line); }
.paper-hero__inner { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
.paper-hero__text { display: flex; flex-direction: column; gap: var(--sp-2); }
.paper-hero__title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); }
.paper-hero__meta { font-size: var(--fs-14); color: var(--ink-2); }
.paper-hero__progress { display: flex; align-items: center; gap: var(--sp-2); max-width: 360px; font-size: var(--fs-14); color: var(--ink-2); }
.paper-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.intro-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: box-shadow var(--t-fast);
}
.intro-card:hover { box-shadow: var(--shadow-2); }
.intro-card__media { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; background: var(--surface-2); }
.intro-card__media img { width: 100%; height: 100%; object-fit: cover; }
.intro-card__play {
  position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92);
}
.intro-card__play svg { width: 13px; height: 13px; fill: var(--night); margin-left: 2px; }
.intro-card__text { display: flex; flex-direction: column; min-width: 0; }
.intro-card__label { font-size: var(--fs-14); color: var(--ink-3); }
.intro-card__title { font-weight: 600; line-height: var(--lh-title); }
@media (min-width: 1024px) {
  .paper-hero__inner { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: var(--sp-7); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .paper-hero__title { font-size: var(--fs-28); }
  .intro-card { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
  .intro-card__media { width: 100%; border-radius: 0; }
  .intro-card__play { width: 56px; height: 56px; }
  .intro-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
  .intro-card__text { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
}

/* ===== 13. 分区导航（吸顶） ===== */
/* 页首高 = 内容 56px + 下边线 1px，吸顶位置要让开这条边线，否则贴住时会被页首压 1px */
.section-nav { position: sticky; top: calc(var(--header-h) + 1px); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.section-nav__inner { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--sp-3);
  border-bottom: 2px solid transparent; font-size: var(--fs-15); color: var(--ink-2);
}
.section-nav a[aria-current="true"] { border-bottom-color: var(--night); color: var(--night); font-weight: 600; }

/* ===== 14. 题目分区 ===== */
.q-section { padding-top: var(--sp-6); }
.q-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-3); }
.q-section__title { font-size: var(--fs-18); font-weight: 700; }
.q-section__note { font-size: var(--fs-14); color: var(--ink-3); }

/* 题号方块：选择、填空 */
.q-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 640px) { .q-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .q-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--sp-3); } }
.q-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  min-height: 84px; padding: 10px 10px 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.q-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.q-tile__num { font-size: var(--fs-20); font-weight: 700; line-height: 1; }
.q-tile__foot { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-14); color: var(--ink-3); line-height: 1.2; }
.q-tile .star { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; }
.q-tile__progress { position: absolute; left: 0; right: 0; bottom: 0; }
.q-tile__progress progress.bar { width: 100%; height: 3px; border-radius: 0; }
.q-tile--soon { background: transparent; border-style: dashed; color: var(--ink-3); }
.q-tile--soon .q-tile__num { color: var(--ink-3); font-weight: 600; }

/* 题号横条：解答、阅读、写作 */
.q-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }  /* 不写列宽时，不换行的考点会把整列撑出屏幕 */
@media (min-width: 1024px) { .q-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.q-row {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 72px; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.q-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.q-row__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.q-row__num { min-width: 2ch; font-size: var(--fs-22); font-weight: 700; line-height: 1; }
.q-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.q-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-14); color: var(--ink-2); }
.q-row__tags { font-size: var(--fs-14); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.q-row__spot { position: relative; z-index: 1; padding: 4px 0; font-size: var(--fs-14); font-weight: 600; color: var(--night); white-space: nowrap; }
.q-row__spot:hover { text-decoration: underline; text-underline-offset: 3px; }
.q-row__progress { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 0 0 var(--r-m) var(--r-m); }
.q-row__progress progress.bar { width: 100%; height: 3px; border-radius: 0; }
.q-row--soon { background: transparent; border-style: dashed; color: var(--ink-3); }
.q-row--soon:hover { border-color: var(--line); box-shadow: none; }
.q-row--soon .q-row__num { color: var(--ink-3); font-weight: 600; }

.source-note { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-3); }

/* ===== 15. 题目页、视频页 ===== */
.page-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); }
.page-title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); }
.page-sub { font-size: var(--fs-15); color: var(--ink-2); }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--fs-14); color: var(--ink-2); }
.meta-row a { color: var(--night); font-weight: 600; }
.q-layout { display: grid; gap: var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-7); }
.q-main, .q-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (min-width: 1024px) {
  .page-title { font-size: var(--fs-28); }
  .q-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding-top: var(--sp-5); }
  /* .q-main 不吸顶：主列常比视口高，吸顶后下半截滚不到，Tab 焦点也会出视口（F03） */
}
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1118; border-radius: var(--r-m); box-shadow: var(--shadow-2); }
.player img { width: 100%; height: 100%; object-fit: cover; }
.player video { width: 100%; height: 100%; background: #000; }
.player__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.player__play svg { width: 28px; height: 28px; fill: var(--night); margin-left: 4px; }
.player__dur { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: var(--r-s); background: var(--scrim); color: #fff; font-size: var(--fs-14); }
@media (max-width: 639px) {
  .player { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; }
}
.controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.select { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
.select select {
  -webkit-appearance: none; appearance: none;
  min-height: 40px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-15); color: var(--ink);
}
.select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none;
}
.speed { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.speed button { min-height: 34px; min-width: 44px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: var(--fs-14); color: var(--ink-2); }
.speed button[aria-pressed="true"] { background: var(--night); color: #fff; font-weight: 600; }
.resume {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--r-m);
  background: var(--night-tint); color: var(--night); font-size: var(--fs-15);
}
.resume .star { width: 16px; height: 16px; }
.resume__text { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* 面板 */
.panel { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.panel__title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); font-size: var(--fs-17); font-weight: 700; }
.panel__title small { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }

/* 章节 */
.chapters li + li { border-top: 1px solid var(--line); }
.chapter {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 46px; padding: 0 4px;
  border: 0; background: none; text-align: left; font-size: var(--fs-16); color: var(--ink);
}
.chapter:hover { color: var(--night); }
.chapter__t { min-width: 3em; font-size: var(--fs-14); color: var(--ink-3); }
.chapter__mark { width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; }
.chapter.is-current { color: var(--night); font-weight: 600; }
.chapter.is-current .chapter__t { color: var(--night); }
.chapter.is-current .chapter__mark { background: var(--star); }

/* 题干 */
.stem__body { font-size: var(--fs-17); line-height: var(--lh-stem); }
.stem__body p + p { margin-top: var(--sp-1); }
/* Markdown 输出的两种标记：下划线、着重号（字下加点） */
.md-u { text-decoration: underline; text-underline-offset: .2em; }
.md-dot { -webkit-text-emphasis: dot; text-emphasis: dot; -webkit-text-emphasis-position: under; text-emphasis-position: under; }
.stem__fig { margin-top: var(--sp-3); padding: var(--sp-3); background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.stem__fig svg { width: 100%; max-width: 300px; margin: 0 auto; }
.stem__fig img { margin: 0 auto; }
.stem__fig figcaption { margin-top: var(--sp-1); text-align: center; font-size: var(--fs-14); color: var(--ink-3); }
.fig__axis, .fig__curve, .fig__seg, .fig__dash { fill: none; stroke-linecap: round; }
.fig__axis { stroke: #44474F; stroke-width: 1.2; }
.fig__curve { stroke: #1D2330; stroke-width: 1.6; }
.fig__seg { stroke: #1D2330; stroke-width: 1.4; }
.fig__dash { stroke: #44474F; stroke-width: 1.2; stroke-dasharray: 4 4; }
.fig__pt { fill: #1D2330; }
.fig__label { font: italic 14px "Times New Roman", "STIX Two Text", serif; fill: #1D2330; }
.katex { font-size: 1.05em; }
/* 长公式在卡片里横向滚动，不缩小字号 */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* 答案（原生 details，零 JS） */
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.answer > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-4); list-style: none; cursor: pointer;
  font-weight: 600; color: var(--night);
}
.answer > summary::-webkit-details-marker { display: none; }
.answer > summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.5px solid var(--night); border-bottom: 1.5px solid var(--night); transform: rotate(45deg);
  transition: transform var(--t-fast);
}
.answer[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.answer__hint { font-weight: 400; font-size: var(--fs-14); color: var(--ink-3); margin-left: auto; }
.answer__body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-17); line-height: var(--lh-stem); }
.answer__src { margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }

/* 要点 */
.points li { position: relative; padding-left: 18px; }
.points li + li { margin-top: var(--sp-2); }
.points li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }

/* 重点突破入口 */
.spot-link {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: box-shadow var(--t-fast);
}
.spot-link:hover { box-shadow: var(--shadow-2); }
.spot-link__media { flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; }
.spot-link__media img { width: 100%; height: 100%; object-fit: cover; }
.spot-link__text { display: flex; flex-direction: column; min-width: 0; }
.spot-link__label { font-size: var(--fs-14); color: var(--ink-3); }
.spot-link__title { font-weight: 600; color: var(--night); }

/* 上一题 / 下一题 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pager__item {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
a.pager__item:hover { border-color: var(--line-strong); }
.pager__dir { font-size: var(--fs-14); color: var(--ink-3); }
.pager__title { font-weight: 600; color: var(--night); }
.pager__item--next { text-align: right; }
.pager__item--none { background: transparent; border-style: dashed; }
.pager__item--none .pager__title { color: var(--ink-3); font-weight: 500; }

/* 解题清单 */
.checklist { counter-reset: step; display: grid; gap: var(--sp-2); }
.checklist li { counter-increment: step; display: flex; align-items: center; gap: var(--sp-3); }
.checklist li::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--night-tint); color: var(--night); font-size: var(--fs-14); font-weight: 700;
}

/* ===== 16. 关于页 ===== */
.prose { max-width: 40em; padding-top: var(--sp-5); padding-bottom: var(--sp-7); }
.prose h1 { font-size: var(--fs-26); font-weight: 700; color: var(--night); line-height: var(--lh-tight); }
.prose h2 { margin-top: var(--sp-6); font-size: var(--fs-18); font-weight: 700; }
.prose p, .prose ul { margin-top: var(--sp-3); color: var(--ink-2); }
.prose ul li { position: relative; padding-left: 18px; }
.prose ul li + li { margin-top: var(--sp-2); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }
.prose .lead { font-size: var(--fs-18); color: var(--ink); }

/* ===== 17. 404 ===== */
.notfound { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) 0 var(--sp-6); text-align: center; }
.notfound .star { width: 48px; height: 48px; stroke-width: 1.2; }
.notfound__title { font-size: var(--fs-22); font-weight: 700; color: var(--night); }
.notfound__text { color: var(--ink-2); }

/* ===== 19. 平台外壳：顶栏图标、底部标签栏 ===== */
.app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.header-actions { display: flex; align-items: center; gap: var(--sp-1); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--night);
}
.icon-btn:hover { background: var(--night-tint); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--night); color: #fff; font-size: var(--fs-15); font-weight: 700;
}
.site-nav--app .site-nav__link { display: none; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) { .tabbar { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px); } }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 64px; font-size: var(--fs-14); color: var(--ink-3);
}
.tabbar a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--night); font-weight: 600; }
.tabbar a[aria-current="page"] svg { stroke-width: 2; }
.tabbar__scan { position: relative; }
.tabbar__scan span.tabbar__fab {
  display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%;
  background: var(--night); color: #fff; box-shadow: 0 6px 18px rgba(30, 43, 79, .35);
}
.tabbar__scan span.tabbar__fab svg { stroke: #fff; width: 26px; height: 26px; }
/* 手机上"问小星"只放在顶栏图标里，浮动按钮只在桌面出现，免得盖住内容 */
.ask-fab {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 25;
  display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); color: var(--night); font-weight: 600;
}
.ask-fab svg { width: 18px; height: 18px; fill: var(--star); }
/* 底部标签栏是固定定位，键盘聚焦到页面靠下的元素时会被它挡住（WCAG 2.2 · 2.4.11 焦点不被遮挡）。
   给根滚动容器在底部留出标签栏的高度（64px 链接 + 1px 上边线 + 安全区）再加 8px，
   浏览器把聚焦元素滚进视口时会让开这一段。只在显示标签栏的宽度（< 1024px）、带 .app 的页面生效。 */
@media (max-width: 1023.98px) {
  html:has(> body.app) { scroll-padding-bottom: calc(73px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  .app { padding-bottom: 0; }
  .tabbar { display: none; }
  .site-nav--app .site-nav__link { display: inline-flex; }
  .ask-fab { display: inline-flex; }
}

/* ===== 20. 今天 ===== */
.greet { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-5); }
.greet__hi { font-size: var(--fs-22); font-weight: 700; color: var(--night); line-height: var(--lh-tight); }
.greet__sub { margin-top: 2px; font-size: var(--fs-14); color: var(--ink-3); }
.star-count {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--ink);
}
.star-count .star { width: 16px; height: 16px; }
.plan {
  position: relative; overflow: hidden; margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-l); background: var(--night); color: #fff; box-shadow: var(--shadow-2);
}
.plan__head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.plan__title { font-size: var(--fs-18); font-weight: 700; }
.plan__note { font-size: var(--fs-14); color: rgba(255, 255, 255, .74); }
.plan__list { position: relative; display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-m); background: rgba(255, 255, 255, .08); }
.task__num {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); font-size: var(--fs-14); font-weight: 700;
}
.task--done .task__num { background: var(--star); }
.task--done .task__title { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .5); }
.task__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task__title { font-weight: 600; line-height: var(--lh-title); }
.task__meta { font-size: var(--fs-14); color: rgba(255, 255, 255, .74); }
.task__go {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: #fff; color: var(--night); font-size: var(--fs-15); font-weight: 700;
}
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); font-size: var(--fs-15); font-weight: 600;
}
.quick a:hover { border-color: var(--line-strong); }
.quick svg { width: 26px; height: 26px; fill: none; stroke: var(--night); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 七科各一格，第八格是合计：任何宽度都是 4 × 2，不留单个孤格 */
.mastery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.mastery a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--sp-3) 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.mastery a:hover { border-color: var(--line-strong); }
.mastery progress.bar { flex: none; width: 100%; min-width: 0; }
.mastery__num { font-size: var(--fs-18); font-weight: 700; line-height: 1; white-space: nowrap; }
.mastery__num small { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
.mastery .mastery__all { background: var(--night-tint); border-color: transparent; }
.mastery__soon { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--sp-3) 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.mastery__note { font-size: var(--fs-14); color: var(--ink-3); }
.mastery__all .subject-tag::before { display: none; }
@media (min-width: 640px) { .mastery a, .mastery__soon { padding: var(--sp-3); } .mastery__num { font-size: var(--fs-20); } }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-4); }
.list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list__title { font-weight: 600; }
.list__meta { font-size: var(--fs-14); color: var(--ink-3); }
.list__chev { color: var(--line-strong); font-size: var(--fs-20); }
.today-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .today-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .today-grid > div > .section:first-child { padding-top: var(--sp-4); }
}

/* ===== 21. 星图 ===== */
.seg { align-self: flex-start; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.seg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-15); color: var(--ink-2); }
.seg a[aria-current="true"] { background: var(--night); color: #fff; font-weight: 600; }
.page-head > .chips { margin-bottom: 0; }
.stars-summary { font-size: var(--fs-15); color: var(--ink-2); }
.stars-summary span { white-space: nowrap; }
.stars-summary b { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-14); color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .star { width: 14px; height: 14px; }
.skymap { position: relative; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.skymap svg { width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.map__line { fill: none; stroke: var(--night); stroke-opacity: .25; stroke-width: 1.4; }
.map__prereq { fill: none; stroke: var(--star); stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 4 5; }
.map__group { font-size: 13px; fill: var(--ink-3); letter-spacing: .08em; }
.map__label { font-size: 13px; fill: var(--ink); font-weight: 600; }
.map__star { stroke-width: 1.6; stroke-linejoin: round; }
.map__star--lit { fill: var(--star); stroke: var(--star); }
.map__star--half { fill: var(--star-glow); stroke: var(--star); }
.map__star--off { fill: var(--surface); stroke: var(--line-strong); }
.map__star--weak { fill: var(--surface); stroke: var(--star); stroke-dasharray: 2.5 2.5; }
.map__ring { fill: none; stroke: var(--night); stroke-width: 1.6; }
.map__glow { fill: var(--star-glow); opacity: .55; }
.map__hit { fill: transparent; cursor: pointer; }
.map__hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }
.sheet { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.sheet__title { font-size: var(--fs-18); font-weight: 700; }
.sheet__meta { margin-top: 4px; font-size: var(--fs-14); color: var(--ink-3); }
.sheet__rows { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; font-size: var(--fs-15); color: var(--ink-2); }
.sheet__rows div { display: flex; align-items: center; gap: var(--sp-2); }
.sheet__rows .star { width: 14px; height: 14px; }
.sheet__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chapter-list { display: grid; gap: var(--sp-2); }
.chapter-list__group { padding-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); letter-spacing: .08em; }
.chapter-list__group:first-child { padding-top: 0; }
.chapter-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.chapter-row__name { flex: 1; font-weight: 600; }
.chapter-row__stars { display: inline-flex; gap: 3px; }
.chapter-row__stars .star { width: 13px; height: 13px; }
.chapter-row__count { font-size: var(--fs-14); color: var(--ink-3); min-width: 3.5em; text-align: right; }
.stars-layout { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (min-width: 1024px) { .stars-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } }

/* ===== 22. 知识点课：分步与检查点 ===== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.steps span { height: 4px; border-radius: 2px; background: var(--line); }
.steps span.done { background: var(--star); }
.steps span.now { background: var(--night); }
.steps-label { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-14); color: var(--ink-3); }
.checkpoint { padding: var(--sp-4); border-radius: var(--r-l); background: var(--surface); border: 1.5px solid var(--night); box-shadow: var(--shadow-2); }
.checkpoint__q { font-size: var(--fs-18); font-weight: 700; color: var(--night); }
.checkpoint__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.checkpoint__or { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
.mini-quiz { font-size: var(--fs-17); line-height: var(--lh-stem); }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.choice {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-16); font-weight: 600;
}
.choice--right { border: 2px solid var(--star); background: #FBF5E6; }
.feedback { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-m); background: #FBF5E6; font-size: var(--fs-15); }
.feedback .star { width: 18px; height: 18px; margin-top: 3px; }
.branch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--night-tint); color: var(--night); font-size: var(--fs-15); }
.branch .star { width: 18px; height: 18px; }
.branch a { font-weight: 700; }
.step-list li { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; }
.step-list li + li { border-top: 1px solid var(--line); }
.step-list__num {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-14); font-weight: 700;
}
.step-list .is-done .step-list__num { background: var(--star); color: #fff; }
.step-list .is-now { color: var(--night); font-weight: 700; }
.step-list .is-now .step-list__num { background: var(--night); color: #fff; }
.step-list__t { margin-left: auto; font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
.panel__note { margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--ink-3); }

/* Markdown 渲染结果的容器（_md 字段统一套 .md） */
.md p + p, .md p + ul, .md ul + p, .md p + ol, .md ol + p { margin-top: var(--sp-2); }
.md ul li { position: relative; padding-left: 18px; }
.md ul li + li, .md ol li + li { margin-top: var(--sp-2); }
.md ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }
.md ol { padding-left: 1.4em; list-style: decimal; }
/* 宽表格在卡片里横向滚动：边框画在格子上，块级 + 贴合内容宽度，放得下时外观不变 */
.md table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-top: var(--sp-2); font-size: var(--fs-15); }
.md th, .md td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }

/* ===== 23. 我的：学情档案 ===== */
.profile { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-5); }
.profile .avatar { width: 56px; height: 56px; font-size: var(--fs-22); }
.profile__name { font-size: var(--fs-20); font-weight: 700; }
.profile__meta { font-size: var(--fs-14); color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--night-tint); color: var(--night); font-size: var(--fs-14); font-weight: 600; }
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.week div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.week b { font-size: var(--fs-22); line-height: 1.1; }
.week span { font-size: var(--fs-14); color: var(--ink-3); }
.bars { display: grid; gap: var(--sp-3); }
.bars li { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 3.5em; align-items: center; gap: var(--sp-3); font-size: var(--fs-15); }
.bars li span:last-child { text-align: right; color: var(--ink-3); font-size: var(--fs-14); }
.bars progress.bar { width: 100%; height: 6px; border-radius: 3px; }
.causes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cause { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-15); color: var(--ink); }
.cause b { color: var(--night); }
.cause[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.bars__soon { grid-column: 2 / 4; font-size: var(--fs-14); color: var(--ink-3); }
.insight { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.insight__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night-tint); }
.insight__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--night); stroke-width: 1.8; }
.insight__title { font-weight: 700; }
.insight__text { margin-top: 2px; font-size: var(--fs-15); color: var(--ink-2); }
.profile .badge { margin-left: auto; }
.section__title small { margin-left: 4px; font-size: var(--fs-15); font-weight: 400; color: var(--ink-3); }
.panel__text { font-size: var(--fs-15); color: var(--ink-2); }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.me-grid { display: grid; gap: var(--sp-5); }
.me-grid > div > .section:first-child { padding-top: var(--sp-5); }
@media (min-width: 1024px) { .me-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; } }

/* ===== 24. 落地页（访客） ===== */
/* 手机上居中：星座在上、文字在下；桌面左文右图 */
.landing-hero { position: relative; overflow: hidden; padding: var(--sp-5) 0 var(--sp-7); background: var(--night); color: #fff; }
.landing-hero__inner { position: relative; text-align: center; }
.landing-hero .eyebrow { font-size: var(--fs-15); color: rgba(255, 255, 255, .86); }
.landing-hero__title { margin-top: var(--sp-2); font-size: var(--fs-28); font-weight: 700; line-height: var(--lh-tight); }
.landing-hero__lead { max-width: 30em; margin: var(--sp-3) auto 0; color: rgba(255, 255, 255, .82); font-size: var(--fs-17); }
.landing-hero__sky { display: block; width: 220px; height: 132px; margin: 0 auto var(--sp-3); pointer-events: none; }
.grade-pick { margin-top: var(--sp-5); }
.grade-pick__label { font-size: var(--fs-15); color: rgba(255, 255, 255, .82); }
.grade-pick__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); max-width: 420px; margin: var(--sp-2) auto 0; }
.grade-pick__btns a {
  display: grid; place-items: center; min-height: 52px; border-radius: var(--r-m);
  background: #fff; color: var(--night); font-size: var(--fs-18); font-weight: 700;
}
.grade-pick__btns a:hover { background: var(--star-glow); }
.grade-pick__note { margin-top: var(--sp-2); font-size: var(--fs-14); color: rgba(255, 255, 255, .7); }
.landing-hero .sky__line { stroke: #fff; stroke-opacity: .28; }
.landing-hero .sky__dot { fill: #fff; fill-opacity: .7; }
.landing-hero .sky__dust { fill: #fff; fill-opacity: .3; }
@media (min-width: 1024px) {
  .landing-hero { padding: var(--sp-8) 0; }
  .landing-hero__inner { text-align: left; }
  .landing-hero .eyebrow { font-size: var(--fs-17); }
  /* 限宽，免得长标题伸到右边的星座图下面（1024 宽时右图从约 580px 处开始） */
  .landing-hero__title { max-width: 12.5em; font-size: 2.75rem; }
  .landing-hero__lead { margin-left: 0; font-size: var(--fs-18); }
  .landing-hero__sky { position: absolute; right: 0; top: 50%; width: 440px; height: 264px; margin: -132px 0 0; }
  .grade-pick__btns { margin-left: 0; }
}
/* 手机上图标在左、文字在右，三条不占太多屏 */
.values { display: grid; gap: var(--sp-3); }
.value {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.value__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night-tint); }
.value__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--night); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.value__title { font-size: var(--fs-18); font-weight: 700; }
.value__text { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-15); }
@media (min-width: 640px) {
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value { display: block; }
  .value__title { margin-top: var(--sp-3); }
}
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
.scroller::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .scroller { grid-auto-columns: 40%; } }
@media (min-width: 1024px) { .scroller { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; } }
.scroller .card { height: 100%; }
.parent-split { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .parent-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; } }
.report-card { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.report-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.report-card__title { font-weight: 700; color: var(--night); }
.report-card__head span { font-size: var(--fs-14); color: var(--ink-3); }
.report-card__rows { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-15); color: var(--ink-2); }
.report-card__rows div { display: flex; align-items: baseline; gap: var(--sp-2); }
.report-card__rows b { flex: none; min-width: 4.5em; color: var(--ink); }
.teacher-entry { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.teacher-entry__title { font-size: var(--fs-17); font-weight: 700; }
.teacher-entry__text { margin-top: 2px; font-size: var(--fs-15); color: var(--ink-2); }

/* ===== 25. 第一阶段：七科课程（2026-10-28） ===== */
.landing-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.btn--light { background: #fff; color: var(--night); }
.btn--light:hover { background: var(--star-glow); }
.btn--on-night { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--on-night:hover { border-color: #fff; }
@media (min-width: 1024px) {
  .landing-hero__actions { justify-content: flex-start; }
}
.free-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--night); color: #fff; font-size: var(--fs-14); font-weight: 700; vertical-align: 3px; }
.soon-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-3); vertical-align: 2px; }
.courses { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .courses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
.course {
  display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: "media head" "parts parts";
  gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-1);
}
.course__media { grid-area: media; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-s); background: var(--surface-2); }
.course__media img { width: 100%; height: 100%; object-fit: cover; }
.course__media .card__badge { left: 6px; bottom: 6px; padding: 1px 7px; }
.course__head { grid-area: head; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.course__title { font-size: var(--fs-17); font-weight: 700; line-height: var(--lh-title); }
.course__title a:hover { color: var(--night); }
.course__parts { grid-area: parts; display: grid; gap: 6px; padding-top: var(--sp-2); border-top: 1px solid var(--line); font-size: var(--fs-14); }
.course__parts li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.course__parts li > span:first-child { flex: none; color: var(--ink-2); }
.part { text-align: right; text-wrap: balance; }
.part--live { color: var(--ink); font-weight: 600; }
.part--live::before { content: "✓ "; color: var(--night); }
.part--soon { color: var(--night); font-weight: 700; }
.part--making { color: var(--ink-3); }
@media (min-width: 1024px) {
  .course { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "head" "parts"; }
  .course__media .card__badge { left: 10px; bottom: 10px; padding: 3px 10px; }
}
/* 导读片未上线：不放图片栏和时长角标，单栏只留 head 与 parts（任何宽度都一样） */
.course.course--noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "parts"; }
.course--noimg .course__media { display: none; }
.edges { display: grid; gap: var(--sp-3); }
@media (min-width: 1024px) { .edges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; } }
.edge { padding: var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.edge__no { font-size: var(--fs-14); color: var(--ink-3); letter-spacing: .12em; }
.edge__title { margin-top: var(--sp-2); font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.edge__text { margin-top: var(--sp-2); font-size: var(--fs-15); color: var(--ink-2); }
.modes { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.mode { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-m); background: var(--bg); }
@media (min-width: 640px) { .mode { grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; } }
.edge__points { margin-top: var(--sp-3); font-size: var(--fs-15); color: var(--ink-2); }
/* 卡片下半截的层次：「现在先开放的」「平台正在做的」，和上面的说明用细线分开 */
.edge__layer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); }
.edge__layer .soon-tag { margin-left: 0; }
.edges__close { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-18); font-weight: 700; letter-spacing: .08em; color: var(--night); }
.mode__name { font-weight: 700; }
.mode__text { font-size: var(--fs-14); color: var(--ink-2); }
.soon-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 640px) { .soon-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soon-entry { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-14); color: var(--ink-3); }
.soon-entry b { font-size: var(--fs-15); color: var(--ink-2); }
.tabbar--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-note { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-m); background: var(--night-tint); color: var(--night); font-size: var(--fs-15); }
.course-note .star { width: 18px; height: 18px; margin-top: 3px; }

/* ===== 18. 页脚 ===== */
.site-footer { margin-top: var(--sp-8); padding: var(--sp-6) 0 var(--sp-7); border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-3); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--sp-3); }
.site-footer__brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--night); font-weight: 700; letter-spacing: .06em; }
.site-footer__brand svg { width: 16px; height: 16px; fill: var(--star); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.site-footer__links a:hover { color: var(--night); }
.site-footer__fine { max-width: 48em; }

/* ===== 26. 题目页 v2：两种模式、作答、播放器设置（2026-10-29 原型，先用在预览站） =====
   html 上的状态类由页首一小段脚本加上（没有脚本时什么都不加，全部内容照常显示）：
   zk-quiz = 边考边讲；没有它 = 评讲模式。zk-locked = 还没作答，[data-gate] 的内容先不显示。zk-theater = 大画面。 */
.zk-locked [data-gate] { display: none !important; }

/* 模式切换 */
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); }
.mode-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.mode-switch button {
  min-height: 38px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast);
}
.mode-switch button[aria-pressed="true"] { background: var(--night); color: #fff; }
.mode-note { font-size: var(--fs-14); color: var(--ink-3); }
@media (max-width: 639px) {
  .mode-switch { display: flex; width: 100%; }
  .mode-switch button { flex: 1; }
}

/* 版面。手机：评讲模式先视频后题目；边考边讲先题目，答完的讲解排在下面 */
.q-layout.q-layout--v2 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }   /* 不写列宽时，宽表格、视频会把列撑出屏幕 */
.zk-quiz .q-layout--v2 .q-main, .zk-quiz .q-layout--v2 .q-side { display: contents; }
.zk-quiz .q-task { order: 1; }
.zk-quiz .q-answer { order: 2; }
.zk-quiz .q-video { order: 3; }
.zk-quiz .q-chapters { order: 4; }
.zk-quiz .q-points { order: 5; }
.zk-quiz .q-spot { order: 6; }
.zk-quiz .q-pager { order: 7; }
@media (min-width: 1024px) {
  /* 评讲模式：视频列加宽；大画面时视频占满一行，下面左题右章节 */
  .q-layout.q-layout--v2 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  .zk-theater:not(.zk-quiz) .q-layout--v2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: "v v" "side ch"; }
  .zk-theater:not(.zk-quiz) .q-layout--v2 .q-main { display: contents; }
  .zk-theater:not(.zk-quiz) .q-layout--v2 .q-video { grid-area: v; }
  .zk-theater:not(.zk-quiz) .q-layout--v2 .q-chapters { grid-area: ch; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .zk-theater:not(.zk-quiz) .q-layout--v2 .q-side { grid-area: side; }
  /* 边考边讲：像做卷子一样，居中一栏；大画面时只有视频放宽 */
  .zk-quiz .q-layout.q-layout--v2 { grid-template-columns: [full-start] minmax(0, 1fr) [col-start] minmax(0, 760px) [col-end] minmax(0, 1fr) [full-end]; }
  .zk-quiz .q-layout--v2 > *, .zk-quiz .q-layout--v2 .q-main > *, .zk-quiz .q-layout--v2 .q-side > * { grid-column: col; }
  .zk-quiz.zk-theater .q-layout--v2 .q-video { grid-column: full; }
  .zk-quiz .q-page > .page-head, .zk-quiz .q-page > .source-note { max-width: 760px; margin-left: auto; margin-right: auto; }
  .zk-theater .q-video { justify-self: center; width: min(100%, calc((100vh - var(--header-h) - 150px) * 16 / 9)); }
}

/* 播放器：画面下只留一条细栏，倍速、清晰度收进「设置」 */
.q-video { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.player-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.player-bar__now { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); color: var(--ink-3); }
.pbar-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; list-style: none;
}
.pbar-btn:hover { border-color: var(--line-strong); color: var(--night); }
.pbar-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player-bar > .pbar-btn, .player-bar > .menu { flex: none; }
.pbar-btn[aria-pressed="true"] { border-color: var(--night); background: var(--night-tint); color: var(--night); }
.pbar-btn--theater { display: none; }
@media (min-width: 1024px) { .pbar-btn--theater { display: inline-flex; } }
.pbar-btn__tag { font-weight: 700; color: var(--night); }
.menu { position: relative; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--night); color: var(--night); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 272px; padding: var(--sp-2) var(--sp-4) var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow-2);
}
.menu__label { margin: var(--sp-2) 0 6px; font-size: var(--fs-14); color: var(--ink-3); }
.menu__panel .speed { display: flex; }
.menu__panel .speed button { flex: 1; min-width: 0; }
.menu__opts { display: grid; gap: 2px; }
.menu__opt { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2); border-radius: var(--r-s); font-size: var(--fs-15); cursor: pointer; }
.menu__opt:hover { background: var(--surface-2); }
.menu__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--night); }
.menu__opt small { margin-left: auto; font-size: var(--fs-14); color: var(--ink-3); }

/* 边考边讲作答前：讲解视频的位置先放一张提示卡 */
.video-lock { display: none; }
.zk-locked .video-lock {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface);
}
.video-lock__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night-tint); }
.video-lock__icon svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--night); }
.video-lock__title { font-weight: 700; }
.video-lock__text { font-size: var(--fs-14); color: var(--ink-3); }

/* 题目面板：标题行右侧是「直接显示」开关（只在边考边讲出现） */
.q-task__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.q-task__head .panel__title { margin-bottom: 0; }
.switch { display: none; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-14); color: var(--ink-2); cursor: pointer; }
.zk-quiz .switch { display: inline-flex; }
.switch__btn { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--t-fast); }
.switch__btn::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1); transition: transform var(--t-fast);
}
.switch__btn[aria-checked="true"] { background: var(--night); }
.switch__btn[aria-checked="true"]::after { transform: translateX(18px); }

/* 作答前「有几成把握」：一行小按钮，可以不选，不挡作答 */
.pre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); margin-top: var(--sp-3); }
.pre__label { flex: 1 1 100%; font-size: var(--fs-14); color: var(--ink-3); }
.pre__label small { margin-left: 6px; font-size: var(--fs-14); }
.pre button {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-14); font-weight: 600; color: var(--ink-2);
}
.pre button[aria-pressed="true"] { border-color: var(--night); background: var(--night-tint); color: var(--night); }

/* 选择题：整行卡片，点一下就判 */
.opts { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.opt {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface);
  text-align: left; font-size: var(--fs-17); line-height: var(--lh-title); color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.opt:not([aria-disabled="true"]):hover { border-color: var(--night); }
.opt[aria-disabled="true"] { cursor: default; }
.opt__key {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); font-size: var(--fs-15); font-weight: 700; color: var(--ink-2);
}
.opt__text { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.opt__tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-14); font-weight: 700; }
.opt__tag svg, .mark svg, .verdict__head svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.opt.is-right { border-color: var(--ok); background: var(--ok-tint); }
.opt.is-right .opt__key { background: var(--ok); color: #fff; }
.opt.is-right .opt__tag { color: var(--ok); }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-tint); }
.opt.is-wrong .opt__key { background: var(--bad); color: #fff; }
.opt.is-wrong .opt__tag { color: var(--bad); }
.opt.is-key { border-color: var(--key-line); background: var(--key-tint); }
.opt.is-key .opt__key { background: var(--key); color: #fff; }
.opt.is-key .opt__tag { color: var(--key); }

/* 判题结果：左边一道色条 + 图标 + 文字 */
.verdict { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-16); }
.verdict--ok { border-left-color: var(--ok); }
.verdict--bad { border-left-color: var(--bad); }
.verdict--key { border-left-color: var(--key-line); }
.verdict__head { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.verdict--ok .verdict__head { color: var(--ok); }
.verdict--bad .verdict__head { color: var(--bad); }
.verdict--key .verdict__head { color: var(--key); }
.verdict__why { margin-top: var(--sp-2); }
.verdict__lead { font-weight: 700; }
.verdict__lead--ok { color: var(--ok); }
.verdict__lead--bad { color: var(--bad); }
.verdict__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.verdict__actions .btn svg { width: 12px; height: 12px; }
.q-task__last { margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--ink-3); }

/* 填空：每空一个输入框；按「确认」才判 */
.blanks { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.blanks__title { font-size: var(--fs-15); font-weight: 700; color: var(--ink-2); }
.blank { display: grid; gap: 6px; }
.blank__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.blank__label { font-size: var(--fs-16); color: var(--ink-2); }
.blank__input {
  flex: 1 1 9em; min-width: 7em; max-width: 18em; min-height: 46px; padding: 0 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface);
  font: 500 var(--fs-18)/1.2 var(--font); color: var(--ink);
}
.blank__input:focus { border-color: var(--night); }
.blank__input[readonly] { background: var(--surface-2); }
.blank__unit { font-size: var(--fs-16); color: var(--ink-2); }
.mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-14); font-weight: 700; }
.mark--ok { color: var(--ok); }
.mark--bad { color: var(--bad); }
.blank.is-right .blank__input { border-color: var(--ok); background: var(--ok-tint); }
.blank.is-wrong .blank__input { border-color: var(--bad); background: var(--bad-tint); }
/* 推断的判断（很可能对 / 很可能不对）：虚线框，不涂底色，旁边写明「请对照答案」 */
.blank.is-likely-right .blank__input { border-style: dashed; border-color: var(--ok); }
.blank.is-likely-wrong .blank__input { border-style: dashed; border-color: var(--bad); }
.blank__fix, .blank__why { font-size: var(--fs-15); color: var(--ink-2); }
.blank__fix b { color: var(--ok); }
.keys { display: flex; flex-wrap: wrap; gap: 6px; }
.keys button {
  min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface-2); font-size: var(--fs-17); color: var(--ink);
}
.keys button:hover { border-color: var(--line-strong); }
.blanks__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.blanks__hint { font-size: var(--fs-14); color: var(--ink-3); }
/* 逐字比对（语文默写、英语拼写）：写错的字标红，漏掉的字在正确答案里标出 */
.diff-bad { background: var(--bad-tint); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.diff-miss { background: var(--key-tint); color: var(--key); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* 大题：纸上做 → 核对结果（可选）→ 对照评分要点自评 */
.steps-check { margin-top: var(--sp-3); }
.steps-check__intro { font-size: var(--fs-15); color: var(--ink-2); }
.steps-check .blanks { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m); }
.steps-check__go { margin-top: var(--sp-3); }
.rubric { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.rubric__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface);
}
.rubric__item.is-done { border-color: var(--ok-line); }
.rubric__item.is-miss { border-color: var(--bad-line); }
.rubric__text { font-size: var(--fs-16); line-height: var(--lh-body); }
.rubric__score { font-size: var(--fs-14); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.rubric__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rubric__btns button {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--fs-15); font-weight: 600; color: var(--ink-2);
}
.rubric__btns button[data-v="1"][aria-pressed="true"] { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); }
.rubric__btns button[data-v="0"][aria-pressed="true"] { border-color: var(--bad); background: var(--bad-tint); color: var(--bad); }
.rubric__seek {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0;
  border: 0; background: none; text-align: left; font-size: var(--fs-15); font-weight: 600; color: var(--night);
}
.rubric__seek svg { width: 12px; height: 12px; fill: currentColor; }
.rubric__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-16); }
.rubric__total b { font-size: var(--fs-22); color: var(--night); }
.rubric__left { font-size: var(--fs-14); color: var(--ink-3); }
.rubric__src { margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }

/* 答案与解析：答完自动展开；「答案 B」用金色 */
.answer__key { font-weight: 700; color: var(--key); }

/* ===== 27. 中考体验（2026-10-29 原型，先用在预览站）=====
   入口页选年级 → 题目页带体验条做 6 道题（已学的直接做，没学的先学再做）→ 结果页给预计分数区间和分享卡。 */
.exp-cta {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-l);
  background: var(--night); color: #fff; box-shadow: var(--shadow-2);
}
.exp-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.exp-cta__label { font-size: var(--fs-14); color: rgba(255, 255, 255, .76); letter-spacing: .04em; }
.exp-cta__title { font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-title); }
.exp-cta__go { flex: none; font-weight: 700; color: var(--star-glow); white-space: nowrap; }
.exp-cta .brand__star { width: 28px; height: 28px; flex: none; }

.exp { max-width: 640px; margin: 0 auto; padding-top: var(--sp-5); padding-bottom: var(--sp-7); display: grid; gap: var(--sp-4); }
.exp__title { font-size: var(--fs-26); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.exp__lead { font-size: var(--fs-16); color: var(--ink-2); }
.exp-step { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.exp-step__title { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-17); font-weight: 700; }
.exp-step__num {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--night-tint); color: var(--night); font-size: var(--fs-14);
}
.exp-step__title small { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
.exp-step__hint { margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
.pick-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.pick-cards button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: var(--sp-2);
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-18); font-weight: 700; color: var(--ink);
}
.pick-cards button small { font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
.pick-cards button[aria-pressed="true"] { border-color: var(--night); background: var(--night-tint); color: var(--night); }
.pick-rows { display: grid; gap: var(--sp-2); }
.pick-rows button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-3);
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: left; font-size: var(--fs-16); color: var(--ink);
}
.pick-rows button[aria-pressed="true"] { border-color: var(--night); background: var(--night-tint); color: var(--night); font-weight: 600; }
.exp-subjects { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.exp-subjects span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-14); color: var(--ink-3); }
.exp-subjects .is-on { border-style: solid; border-color: var(--night); background: var(--night-tint); color: var(--night); font-weight: 700; }
.exp-go { display: grid; gap: var(--sp-2); justify-items: start; }
.exp-go .btn { min-height: 52px; padding: 0 28px; font-size: var(--fs-17); }
.exp-note { font-size: var(--fs-14); color: var(--ink-3); }

/* 题目页上的体验条：第几题、已学还是新学、退出 */
.exp-bar {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m);
  background: var(--night); color: #fff; font-size: var(--fs-15);
}
.exp-bar__text { flex: 1; min-width: 0; }
.exp-bar__text b { font-weight: 700; }
.exp-bar progress { width: 84px; height: 6px; accent-color: var(--star); }
.exp-bar a { color: rgba(255, 255, 255, .8); font-size: var(--fs-14); white-space: nowrap; }
.exp-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); font-size: var(--fs-14); }
.zk-exp [data-mode-bar], .zk-exp .switch { display: none !important; }   /* 体验是小测：不切模式、不直接显示 */
/* 「先学」卡：这道题要用、按进度还没学到的规则（正式版换成零起步讲解片段） */
.exp-learn { padding: var(--sp-4); border-radius: var(--r-m); background: var(--night-tint); color: var(--ink); }
.exp-learn__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 700; color: var(--night); }
.exp-learn__label .star { width: 16px; height: 16px; }
.exp-learn__title { margin-top: 4px; font-size: var(--fs-18); font-weight: 700; color: var(--night); }
.exp-learn__body { margin-top: var(--sp-2); font-size: var(--fs-16); line-height: var(--lh-stem); }
.exp-learn__note { margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
.exp-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--night); border-radius: var(--r-m); background: var(--surface); }
.zk-quiz .exp-next { order: 1; }   /* 边考边讲的版面里，紧跟在题目后面 */
.exp-next__text { font-size: var(--fs-15); color: var(--ink-2); }

/* 结果：预计分数 + 区间条 */
.exp-result { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: center; }
.exp-result__lead { font-size: var(--fs-15); color: var(--ink-2); }
.exp-result__score { margin-top: var(--sp-2); font-size: 3.25rem; font-weight: 800; line-height: 1.1; color: var(--night); }
.exp-result__score small { font-size: var(--fs-20); font-weight: 700; }
.exp-result__range { margin-top: var(--sp-1); font-size: var(--fs-17); font-weight: 600; color: var(--ink); }
.exp-result__wide { margin-top: var(--sp-2); font-size: var(--fs-15); color: var(--key); font-weight: 600; }
.range { position: relative; height: 28px; margin: var(--sp-4) 4px 0; }
.range__track { position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px; background: var(--surface-2); }
.range__band { position: absolute; top: 7px; height: 14px; border-radius: 7px; background: var(--night-tint); border: 1.5px solid var(--night); }
.range__mid { position: absolute; top: 2px; width: 4px; height: 24px; margin-left: -2px; border-radius: 2px; background: var(--night); }
.range__ticks { display: flex; justify-content: space-between; margin: 4px 4px 0; font-size: var(--fs-14); color: var(--ink-3); }
.exp-facts { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); text-align: left; }
.exp-facts li { position: relative; padding-left: 18px; font-size: var(--fs-15); color: var(--ink-2); }
.exp-facts li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }
.exp-fine { margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--ink-3); }
.exp-items li { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; }
.exp-items li + li { border-top: 1px solid var(--line); }
.exp-items a { flex: 1; display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; color: var(--ink); }
.exp-items .mark { margin-left: auto; white-space: nowrap; }
.exp-item-tag { display: inline-flex; margin-left: 8px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-14); color: var(--ink-3); }

/* 分享卡：只有分数区间、年级和平台品牌，没有任何个人信息 */
.share-card {
  position: relative; overflow: hidden; padding: 28px 24px 22px; border-radius: var(--r-l);
  background: linear-gradient(160deg, #1E2B4F 0%, #2C3D6B 100%); color: #fff; text-align: left;
}
.share-card__brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-15); font-weight: 700; letter-spacing: .08em; color: var(--star-glow); }
.share-card__brand svg { width: 18px; height: 18px; fill: var(--star); }
.share-card__who { margin-top: var(--sp-4); font-size: var(--fs-15); color: rgba(255, 255, 255, .8); }
.share-card__line { margin-top: 4px; font-size: var(--fs-18); font-weight: 700; }
.share-card__score { margin-top: var(--sp-2); font-size: 2.75rem; font-weight: 800; line-height: 1.1; color: #fff; }
.share-card__score small { font-size: var(--fs-18); font-weight: 600; color: rgba(255, 255, 255, .85); }
.share-card__fine { margin-top: var(--sp-4); font-size: var(--fs-14); color: rgba(255, 255, 255, .7); }
.share-card__range { margin-top: 4px; font-size: var(--fs-15); color: rgba(255, 255, 255, .85); }
.share-card__brand--foot { margin-top: var(--sp-5); font-size: var(--fs-14); }
.share-opt { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin-top: var(--sp-2); font-size: var(--fs-15); color: var(--ink-2); cursor: pointer; }
.share-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--night); }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.share-img { width: 100%; max-width: 360px; margin: var(--sp-3) auto 0; border-radius: var(--r-m); box-shadow: var(--shadow-2); }
/* 分享卡 v2（家长心理分析 4.3，董事长 10-31）：钩子、预计分、掌握成数、条件说明，底部二维码和邀请；邀请卡浅底、不带分数 */
.share-card__hook { font-size: var(--fs-16); font-weight: 700; color: var(--star-glow); }
.share-card__line--soft { margin-top: var(--sp-3); font-weight: 500; color: rgba(255, 255, 255, .9); }
.share-card__score em { margin-left: 8px; font-style: normal; font-size: var(--fs-14); font-weight: 500; color: rgba(255, 255, 255, .8); }
.share-card__fine { color: rgba(255, 255, 255, .85); line-height: 1.6; }
.share-card__bottom { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .18); }
.share-card__qr { flex: none; width: 84px; height: 84px; border-radius: 6px; background: #fff; }
.share-card__qr svg { display: block; width: 100%; height: 100%; }
.share-card__invite { font-size: var(--fs-14); line-height: 1.55; }
.share-card__invite b { display: block; font-size: var(--fs-16); }
.share-card__brand-line { display: block; margin-top: 2px; font-weight: 700; color: var(--star-glow); }
.share-card--light { border: 1px solid #EFE6CF; background: #FFFDF7; color: var(--ink); }
.share-card--light .share-card__who { margin-top: 0; color: var(--ink-3); }
.share-card--light .share-card__bottom { border-top-color: #EFE6CF; }
.share-card--light .share-card__brand-line { color: var(--night); }
.share-card__ask { margin-top: 6px; font-size: 1.5rem; font-weight: 800; line-height: 1.35; }
.share-card__pills { margin-top: var(--sp-3); }
.share-card__pills span { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: var(--r-pill); background: #F3EBD3; font-size: var(--fs-14); }
.share-choice { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.draft-tag { display: inline-flex; margin-top: var(--sp-2); padding: 2px 10px; border: 1px dashed var(--key-line); border-radius: var(--r-pill); font-size: var(--fs-14); color: var(--key); }

/* ===== 28. 首页终局版面（2026-10-30）=====
   首页按产品的完整形态排，所见即所得：每个功能要么能点进去用（「立即体验 ›」），要么是「即将开放」（描边星）。
   每节开头一行小标签写功能名（.lp-label），下面的大标题写你能得到什么（.lp-title）。类名都以 lp- 开头，只用在首页。
   夜蓝底的块（开篇、中考体验条、教师端）把颜色写死，深色模式下也保持深底白字。 */

/* 开篇：标题是配对句，两行 */
.lp-hero { background: #1E2B4F; padding-bottom: calc(var(--sp-7) + 40px); }
.lp-hero .btn--light { color: #1E2B4F; }
.lp-hero__title { font-size: 2rem; letter-spacing: .04em; }
@media (min-width: 1024px) {
  .lp-hero { padding-bottom: calc(var(--sp-8) + 56px); }
  .lp-hero__title { font-size: 3.25rem; line-height: 1.22; }
}

/* 平台全景：压在开篇下沿的一排入口（手机 4 × 2，宽屏一行 8 个） */
.lp-map {
  position: relative; z-index: 1; margin-top: -40px; padding: var(--sp-3) var(--sp-2) var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2);
}
.lp-map__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); padding: 0 var(--sp-2) var(--sp-2); }
.lp-map__title { font-size: var(--fs-15); font-weight: 700; }
.lp-map__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.lp-map__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-2) 2px;
  border-radius: var(--r-m); font-size: var(--fs-14); font-weight: 600; line-height: 1.35; text-align: center; color: var(--ink);
}
.lp-map__item:hover { background: var(--night-tint); }
.lp-map__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--night-tint); }
.lp-map__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--night); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-map__sub { margin-top: -4px; font-size: var(--fs-14); font-weight: 400; color: var(--ink-3); }
@media (min-width: 768px) { .lp-map__list { grid-template-columns: repeat(8, minmax(0, 1fr)); } .lp-map__item { font-size: var(--fs-15); } }
@media (min-width: 1024px) { .lp-map { margin-top: -56px; padding: var(--sp-4) var(--sp-4) var(--sp-3); } .lp-map__icon { width: 48px; height: 48px; } }

/* 状态行：能用的只有右边的「立即体验 ›」；还没做的是描边星 + 「即将开放」 */
.lp-state { display: flex; align-items: center; gap: 6px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-3); }
.lp-state .star { width: 15px; height: 15px; }
.lp-state--on { color: var(--night); }
.lp-state__go { margin-left: auto; white-space: nowrap; color: var(--night); font-weight: 700; }

/* 每节开头：小标签是功能名，大标题写你能得到什么 */
.lp-label { margin-bottom: 4px; font-size: var(--fs-14); font-weight: 700; letter-spacing: .06em; color: var(--night); }
.lp-label .free-badge { vertical-align: 1px; }
.lp-title { font-size: var(--fs-22); line-height: var(--lh-tight); }
@media (min-width: 1024px) { .lp-title { font-size: var(--fs-26); } }

/* 中考专题：一条带子，七科一行（窄屏 4 + 3） */
.lp-exam { padding: var(--sp-4) var(--sp-3); background: var(--night-tint); border-radius: var(--r-l); }
.lp-exam .section__head { margin-bottom: var(--sp-1); }
.lp-exam__lead { margin-bottom: var(--sp-3); font-size: var(--fs-15); color: var(--ink-2); }
.lp-subjects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.lp-subj {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 14px 4px 8px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color var(--t-fast);
}
.lp-subj::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--subject); }
a.lp-subj:hover { border-color: var(--subject); }
.lp-subj__name { font-size: var(--fs-17); font-weight: 700; color: var(--ink); }
.lp-subj__meta { font-size: var(--fs-14); color: var(--ink-3); white-space: nowrap; }
.lp-exam .exp-cta { margin-top: var(--sp-3); background: #1E2B4F; }
@media (min-width: 900px) { .lp-subjects { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-exam { padding: var(--sp-5); } .lp-subjects { gap: var(--sp-3); } .lp-subj { padding: 16px 8px 12px; } }

/* 功能块：大的带示意图（lp-feature），小的只有标题、一句话、状态（lp-entry）；预留的用虚线框 */
.lp-row { display: grid; gap: var(--sp-3); }
.lp-row + .lp-entries { margin-top: var(--sp-3); }
.lp-feature {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.lp-feature--soon { background: transparent; border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
.lp-feature__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); }
.lp-feature__title { font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.lp-feature__text { font-size: var(--fs-15); color: var(--ink-2); }
.lp-feature__fine { font-size: var(--fs-14); color: var(--ink-3); }
.lp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: auto; }
.lp-act { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-15); font-weight: 700; color: var(--night); }
.lp-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.lp-entries > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.lp-entry {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.lp-entry:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.lp-entry--soon { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.lp-entry__title { font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-title); color: var(--ink); }
.lp-entry__text, .lp-entry__eg { font-size: var(--fs-14); line-height: 1.65; color: var(--ink-2); }
.lp-entry__eg { color: var(--ink-3); }
.lp-entry > .lp-state { margin-top: auto; padding-top: var(--sp-2); }
@media (min-width: 640px) {
  .lp-entries { gap: var(--sp-3); }
  .lp-entry { padding: var(--sp-4); }
  .lp-entry__title { font-size: var(--fs-17); }
  .lp-entry__text { font-size: var(--fs-15); }
}
@media (min-width: 1024px) {
  .lp-row { gap: var(--sp-4); align-items: stretch; }
  .lp-row + .lp-entries { margin-top: var(--sp-4); }
  .lp-row--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .lp-row--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lp-row--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lp-row > .lp-entries { grid-auto-rows: 1fr; }
  .lp-feature { padding: var(--sp-5); }
  .lp-entries--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lp-entries--5 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* 个性化讲解：同一道题，三个同学各自看到的讲解（左边是情况，右边是他看到的） */
.lp-route { padding: var(--sp-3); background: var(--bg); border-radius: var(--r-m); }
.lp-route__q { font-size: var(--fs-14); font-weight: 600; color: var(--ink-3); }
.lp-route__rows { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.lp-route__who { display: block; font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.lp-route__say { display: block; margin-top: 2px; font-size: var(--fs-15); color: var(--ink-2); }
.lp-route__say::before { content: "→"; margin-right: 6px; color: var(--ink-3); }
@media (min-width: 640px) {
  .lp-route__row { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); }
  .lp-route__say { margin-top: 0; }
}
.lp-feature .lp-modes { margin-top: 0; }
.lp-feature .mode { grid-template-columns: minmax(0, 1fr); background: var(--surface); }

/* 星图示意（沿用第 21 节的 map__ 类） */
.lp-sky { padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.lp-sky svg { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }

/* 讲解板（数形结合示意、记忆带练）：和讲题视频同一块深色板、同一套颜色 */
.lp-slate { border-radius: var(--r-m); background: #151B22; color: #EBE8DE; }
.lp-graph svg { width: 100%; height: auto; }
.lp-graph__axis { fill: none; stroke: #C9C5BB; stroke-width: 1.4; stroke-linejoin: round; }
.lp-graph__ghost { fill: none; stroke: #A380FF; stroke-width: 2.4; }
.lp-graph__ghost--1 { stroke-opacity: .28; }
.lp-graph__ghost--2 { stroke-opacity: .5; }
.lp-graph__curve { fill: none; stroke: #A380FF; stroke-width: 3; }
.lp-graph__locus { fill: none; stroke: #FFBD57; stroke-width: 1.6; stroke-dasharray: 5 5; }
.lp-graph__sym { stroke: #57DEC2; stroke-width: 1.4; stroke-dasharray: 4 5; }
.lp-graph__pt { fill: #FFBD57; }
.lp-graph__pt--ghost { fill-opacity: .45; }
.lp-graph__pt--now { stroke: #151B22; stroke-width: 2; }
.lp-graph__cap { padding: 0 var(--sp-3) var(--sp-3); font-size: var(--fs-14); color: #C9C5BB; }
.lp-mnemo { padding: var(--sp-4); }
.lp-mnemo__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-14); color: #A09990; }
.lp-mnemo__steps i { font-style: normal; }
.lp-mnemo__steps b { padding: 1px 10px; border: 1px solid #3A424E; border-radius: var(--r-pill); font-weight: 600; color: #EBE8DE; }
.lp-mnemo__steps b.is-now { border-color: #FFBD57; color: #FFBD57; }
.lp-mnemo__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-3); font-size: var(--fs-17); }
.lp-mnemo__word { padding: 1px 10px; border-radius: var(--r-s); background: rgba(255, 189, 87, .14); font-weight: 700; color: #FFBD57; }
.lp-mnemo__blank { display: inline-block; width: 3.4em; height: 1.75em; border: 1.5px dashed #6B7380; border-radius: var(--r-s); }
.lp-mnemo__src { margin-top: var(--sp-3); font-size: var(--fs-14); color: #A09990; }

/* 升学：制作中的一行，不是链接 */
.lp-list-soon { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-4); color: var(--ink-3); }
.lp-list-soon .list__title { color: var(--ink-2); }

/* 教师端：整条夜蓝底 */
.lp-teacher { margin-top: var(--sp-7); padding: var(--sp-6) 0; background: #1E2B4F; color: #fff; }
.lp-teacher .section__title { color: #fff; }
.lp-teacher .section__lead { color: rgba(255, 255, 255, .82); }
.lp-teacher .lp-label { color: #F6DFA4; }
.lp-teacher .btn--light { color: #1E2B4F; }
.lp-teacher .lp-entry { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
.lp-teacher a.lp-entry:hover { border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.lp-teacher .lp-entry--soon { background: transparent; border-color: rgba(255, 255, 255, .28); }
.lp-teacher .lp-entry__title { color: #fff; }
.lp-teacher .lp-entry__text { color: rgba(255, 255, 255, .8); }
.lp-teacher .lp-state { color: rgba(255, 255, 255, .7); }
.lp-teacher .lp-state--on, .lp-teacher .lp-state__go { color: #F6DFA4; }
.lp-teacher + .site-footer { margin-top: 0; }

/* ----- 28 · v3（2026-10-31，首页商业逻辑_v3.md）-----
   按家长拿主意的顺序排：靠不靠谱（石门星辰计划）→ 跟网课有什么不一样（只做佛山）→ 对我家孩子有什么用 → 先试试（心里有底）→ 划不划算（价格）。
   下面全是新类；上面的旧规则一条没改（平台全景 .lp-map、整条教师端 .lp-teacher 等不再用，留着）。 */

/* 整页：段落少留一个字的末行；.lp-nb 是不拆开的一段（标题、收束句只在这几处换行，手机上不会把「赛道」拆成两行） */
.lp-v3 p, .lp-v3 li { text-wrap: pretty; }
.lp-nb { display: inline-block; }

/* 开篇：按钮下一行小字；手机上两个按钮各占一行，长按钮放不下时只在冒号后折行 */
.lp-hero__fine { max-width: 36em; margin: var(--sp-4) auto 0; font-size: var(--fs-14); line-height: 1.7; color: rgba(255, 255, 255, .78); }
.lp-hero__more { display: inline-block; margin-left: .75em; font-weight: 700; color: #F6DFA4; white-space: nowrap; }
.lp-hero__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-btn-wrap { flex-wrap: wrap; gap: 0; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; line-height: 1.4; }
.lp-btn-wrap > span { white-space: nowrap; }
@media (max-width: 639.98px) {
  .lp-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 400px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) { .lp-hero__fine { max-width: 46em; margin-left: 0; font-size: var(--fs-15); } }

/* 我们是谁：白卡压在开篇下沿（旧版平台全景的位置），四张日期戳卡；手机上日期戳和短标题一行、那句话在下面 */
.lp-trust {
  position: relative; z-index: 1; margin-top: -40px; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2);
}
.lp-trust .section__head { margin-bottom: var(--sp-2); }
.lp-trust .section__lead { margin: 0 0 var(--sp-4); }
.lp-stamps { display: grid; gap: var(--sp-2); }
.lp-stamp {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "date title" "text text"; align-items: center; gap: 6px var(--sp-3);
  padding: var(--sp-3); background: var(--bg); border-radius: var(--r-m);
}
.lp-stamp__date {
  grid-area: date; display: inline-flex; justify-content: center; min-width: 4.8em; padding: 2px 8px;
  border-radius: var(--r-s); background: var(--night); color: var(--surface); font-size: var(--fs-15); font-weight: 800; letter-spacing: .04em;
}
.lp-stamp__title { grid-area: title; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-title); color: var(--ink); }
.lp-stamp__text { grid-area: text; font-size: var(--fs-14); line-height: 1.7; color: var(--ink-2); }
.lp-ext { color: var(--night); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.lp-ext:hover { text-decoration-color: currentColor; }
.lp-trust__more { margin-top: var(--sp-2); font-size: var(--fs-15); color: var(--ink-2); text-wrap: balance; }
.lp-trust__link { display: inline-block; margin-left: .5em; padding: 10px 0; font-weight: 700; color: var(--night); white-space: nowrap; }
.lp-trust__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .lp-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .lp-stamp { padding: var(--sp-4); }
  .lp-trust__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-3); }
}
@media (min-width: 1024px) {
  .lp-trust { margin-top: -56px; padding: var(--sp-5) var(--sp-5) var(--sp-3); }
  .lp-stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-stamp { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .lp-stamp__date { align-self: flex-start; font-size: var(--fs-16); }
  .lp-stamp__title { margin-top: 6px; font-size: var(--fs-17); }
  .lp-stamp__text { font-size: var(--fs-15); }
}

/* 小卡开头一行功能名（佛山的卷、思维训练……）；三张一行（手机上一张一行） */
.lp-kicker { font-size: var(--fs-14); font-weight: 700; letter-spacing: .04em; color: var(--night); }
.lp-entry--soon .lp-kicker { color: var(--ink-3); }
.lp-feature > .lp-kicker + .lp-feature__head { margin-top: -8px; }
.lp-entries--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .lp-entries--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-entries--3 > :last-child:nth-child(odd) { grid-column: auto; }
}
/* 一行一张的小卡（心里有底右边）：左边标题和一句话，右边状态 */
.lp-entries--rows { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.lp-entries--rows > .lp-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4);
}
.lp-entries--rows > .lp-entry > * { grid-column: 1; }
.lp-entries--rows > .lp-entry > .lp-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; padding: 0; }

/* 句中的「即将开放」：描边星 + 字，跟在那一句后面 */
.lp-soon { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--ink-3); white-space: nowrap; vertical-align: 1px; }
.lp-soon .star { width: 14px; height: 14px; }

/* 不管孩子在哪所学校：两种家长各一栏（手机上一栏） */
.lp-duo { display: grid; gap: var(--sp-3); }
.lp-wish {
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1);
}
.lp-wish--alt { background: var(--night-tint); border-color: var(--night-tint); box-shadow: none; }
.lp-wish__eyebrow { font-size: var(--fs-14); font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.lp-wish__title { margin-top: -6px; font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.lp-ticks { display: grid; gap: var(--sp-2); }
.lp-ticks li { position: relative; padding-left: 18px; font-size: var(--fs-15); line-height: 1.7; color: var(--ink); }
.lp-ticks li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }
@media (max-width: 767.98px) { .lp-ticks .lp-soon { display: flex; margin: 2px 0 0; } }   /* 窄屏上「即将开放」单占一行，不挂在标点后面 */
.lp-wish__close { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); font-size: var(--fs-15); font-weight: 600; color: var(--night); }
.lp-close { max-width: 30em; margin: var(--sp-5) auto 0; font-size: var(--fs-17); font-weight: 700; line-height: var(--lh-title); text-align: center; color: var(--night); text-wrap: balance; }
@media (min-width: 768px) { .lp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1024px) {
  .lp-wish { padding: var(--sp-5); }
  .lp-wish__title { font-size: var(--fs-22); }
  .lp-close { font-size: var(--fs-20); }
}

/* 心里有底：结果卡示意（和结果页、分享卡同一套样子），右上角标「示例」 */
.lp-result {
  position: relative; overflow: hidden; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-m);
  background: linear-gradient(160deg, #1E2B4F 0%, #2C3D6B 100%); color: #fff;
}
.lp-result__tag { position: absolute; top: var(--sp-3); right: var(--sp-3); padding: 0 10px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); font-size: var(--fs-14); line-height: 1.7; color: rgba(255, 255, 255, .9); }
.lp-result__label { font-size: var(--fs-15); color: rgba(255, 255, 255, .82); }
.lp-result__big { font-size: var(--fs-20); font-weight: 700; line-height: 1.2; }
.lp-result__big b { margin: 0 6px; font-size: 3.5rem; font-weight: 800; letter-spacing: .01em; color: #F6DFA4; }
.lp-result__small { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .2); font-size: var(--fs-16); color: rgba(255, 255, 255, .9); }
.lp-result__small b { margin: 0 4px; font-size: var(--fs-22); font-weight: 800; color: #fff; }
.lp-result__foot { display: flex; align-items: center; gap: 6px; margin-top: var(--sp-4); font-size: var(--fs-14); color: rgba(255, 255, 255, .75); }
.lp-result__foot svg { width: 15px; height: 15px; flex: none; fill: #F6DFA4; }

/* 平台里有什么：七科下面一行讲法说明；再下面是个性化讲解大卡（宽屏左字右图）+ 三张工具卡 */
.lp-ways { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.lp-ways li { position: relative; padding-left: 18px; font-size: var(--fs-15); color: var(--ink-2); }
.lp-ways li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--night); }
.lp-ways b { font-weight: 700; color: var(--ink); }
.lp-teach { margin-top: var(--sp-4); }
.lp-tools { margin-top: var(--sp-3); }
@media (min-width: 1024px) {
  .lp-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .lp-teach {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "kicker route" "head route" "text route" "acts route"; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5);
  }
  .lp-teach > .lp-kicker { grid-area: kicker; }
  .lp-teach > .lp-feature__head { grid-area: head; }
  .lp-teach > .lp-feature__text { grid-area: text; }
  .lp-teach > .lp-route { grid-area: route; align-self: center; }
  .lp-teach > .lp-acts { grid-area: acts; align-self: end; }
  .lp-tools { margin-top: var(--sp-4); }
}

/* 价格：左灰（在佛山补课）右亮（星辰学习平台），每月花多少放大，一眼能比；手机上一栏 */
.lp-vs { display: grid; gap: var(--sp-3); }
.lp-vs__col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-4); border-radius: var(--r-l); }
.lp-vs__col--them { background: var(--surface-2); }
.lp-vs__col--us { background: var(--surface); border: 2px solid var(--night); box-shadow: var(--shadow-2); }
.lp-vs__name { font-size: var(--fs-17); font-weight: 700; color: var(--ink-2); }
.lp-vs__col--us .lp-vs__name { color: var(--night); }
.lp-vs__item + .lp-vs__item { padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); }
.lp-vs__how { font-size: var(--fs-15); color: var(--ink-2); }
.lp-vs__how b { margin-right: 6px; font-weight: 700; color: var(--ink); }
.lp-vs__sum { margin-top: 2px; font-size: var(--fs-16); font-weight: 600; color: var(--ink-2); }
.lp-vs__sum b { margin: 0 4px; font-size: var(--fs-28); font-weight: 800; line-height: 1.25; letter-spacing: .01em; color: var(--ink-2); }
.lp-vs__col--us .lp-vs__sum { color: var(--night); }
.lp-vs__col--us .lp-vs__sum b { font-size: 3rem; color: var(--night); }
.lp-vs__col--us .lp-state { margin-top: auto; }
.lp-vs__line { margin-top: var(--sp-5); font-size: var(--fs-17); font-weight: 700; line-height: var(--lh-title); text-align: center; color: var(--ink); text-wrap: balance; }
.lp-price-go { display: flex; justify-content: center; margin-top: var(--sp-3); }
.lp-fine { max-width: 48em; margin: var(--sp-4) auto 0; font-size: var(--fs-14); line-height: 1.7; color: var(--ink-3); }
@media (max-width: 399.98px) { .lp-price-go .btn { padding-left: 16px; padding-right: 16px; font-size: var(--fs-15); } }
@media (min-width: 768px) { .lp-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1024px) {
  .lp-vs__col { padding: var(--sp-5); }
  .lp-vs__line { font-size: var(--fs-20); }
}

/* 给老师：缩成一条夜蓝底（宽屏左字右按钮） */
.lp-tstrip { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-4); border-radius: var(--r-l); background: #1E2B4F; color: #fff; }
.lp-tstrip .lp-label { color: #F6DFA4; }
.lp-tstrip__title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); }
.lp-tstrip__lead { margin-top: var(--sp-2); font-size: var(--fs-15); color: rgba(255, 255, 255, .82); }
.lp-tstrip__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-4); margin-top: var(--sp-1); }
.lp-tstrip .lp-act { color: #F6DFA4; }
.lp-tstrip .lp-soon { min-height: 44px; margin-left: 0; color: rgba(255, 255, 255, .72); white-space: normal; }
.lp-tstrip .lp-soon .star { stroke: rgba(255, 255, 255, .6); }
.lp-tstrip .btn--light { justify-self: start; color: #1E2B4F; }
@media (min-width: 1024px) {
  .lp-tstrip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); }
}

/* 关于我们：左边正文、媒体报道、理念；右边石门星辰计划时间线（手机上按 正文 → 时间线 → 报道 → 理念 排） */
.lp-about { display: grid; gap: var(--sp-5); grid-template-areas: "intro" "tl" "press" "motto"; }
.lp-about__intro { grid-area: intro; }
.lp-about__tl { grid-area: tl; }
.lp-about__press { grid-area: press; }
.lp-about__motto { grid-area: motto; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-15); font-weight: 600; color: var(--night); }
.lp-about__text { max-width: 36em; font-size: var(--fs-17); color: var(--ink); }
.lp-about__ai {
  max-width: 36em; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--night); border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--surface); font-size: var(--fs-15); color: var(--ink-2);
}
.lp-about__h { margin-bottom: var(--sp-3); font-size: var(--fs-17); font-weight: 700; color: var(--night); }
.lp-tl { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.lp-tl li { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: var(--sp-3); }
.lp-tl__when { font-weight: 800; color: var(--night); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-tl__what { position: relative; padding: 0 0 var(--sp-4) var(--sp-4); border-left: 2px solid var(--line); font-size: var(--fs-15); color: var(--ink-2); }
.lp-tl li:last-child .lp-tl__what { padding-bottom: 0; }
.lp-tl__what::before { content: ""; position: absolute; left: -7px; top: .5em; width: 12px; height: 12px; border: 2px solid var(--night); border-radius: 50%; background: var(--surface); }
.lp-press { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.lp-press li + li { border-top: 1px solid var(--line); }
.lp-press__item { display: flex; flex-direction: column; gap: 2px; min-height: 60px; padding: var(--sp-3) var(--sp-4); }
.lp-press__meta { font-size: var(--fs-14); color: var(--ink-3); }
.lp-press__title { font-weight: 600; line-height: var(--lh-title); color: var(--ink); }
a.lp-press__item:hover .lp-press__title { color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .lp-about {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "intro tl" "press tl" "motto tl"; column-gap: var(--sp-7); align-items: start;
  }
}

/* ----- 28 · v4（2026-10-31，首页商业逻辑_v4.md；家长心理分析_v1.md 4.1 的几处改法）-----
   首页顺序：开篇 → 现在就能用 → 石门星辰计划（轮播）→ 心里有底 → 只做佛山 → 理念 → 平台里有什么 → 给老师 → 关于我们。介绍页 about.html 也用这里的类。
   每节都配站里真实的画面：讲解视频的封面和关键帧、中考体验的示例卡、数形结合、记忆带练、石门星辰计划的素材（golden/media/home、golden/media/shimen）。
   下面全是新类；上面 v3 和更早的规则一条没改（.lp-trust、.lp-wish、.lp-vs 等 v4 不再用，留着）。 */
.lp-v4 .lp-title { text-wrap: balance; }

/* 图：站里真实的画面，统一 16:9（--32 是 3:2）；还没开放的入口，图褪成灰 */
.lp-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-m); background: #151B22; }
.lp-pic--32 { aspect-ratio: 3 / 2; }
.lp-entry--soon .lp-pic { filter: grayscale(1); opacity: .5; }

/* 截图（中考体验的示例卡）：右上角一枚「示例」；深色模式下也保持夜蓝底白字 */
.lp-shot { position: relative; min-width: 0; margin: 0; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--shadow-2); }
.lp-shot__tag { position: absolute; top: 10px; right: 10px; padding: 0 10px; border-radius: var(--r-pill); background: #1E2B4F; color: #fff; font-size: var(--fs-14); font-weight: 600; line-height: 1.75; }

/* 现在就能用：白卡压在开篇下沿（v3 信任带的位置），里面依次是测评大卡、七科、两张小卡 */
.lp-now {
  position: relative; z-index: 1; margin-top: -40px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2);
}
.lp-now > .section__head { margin-bottom: var(--sp-3); }
.lp-now__part { margin-top: var(--sp-5); }
.lp-now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-3); }
.lp-now__h { margin-top: 2px; font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-title); color: var(--ink); }
.lp-now__lead { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-15); color: var(--ink-2); }
.lp-now .source-note { margin-top: var(--sp-4); }
@media (min-width: 640px) { .lp-now { padding: var(--sp-4); } }
@media (min-width: 1024px) { .lp-now { margin-top: -56px; padding: var(--sp-5); } .lp-now__h { font-size: var(--fs-20); } }

/* 测评大卡：左边一句问话和按钮，右边结果页的示例卡（手机上图在下） */
.lp-test { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-l); background: var(--night-tint); }
.lp-test__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.lp-test__title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); color: var(--night); text-wrap: balance; }
.lp-test__text { font-size: var(--fs-16); color: var(--ink-2); }
.lp-test .lp-acts { margin-top: var(--sp-2); }
@media (min-width: 768px) { .lp-test { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--sp-5); padding: var(--sp-5); } }
@media (min-width: 1024px) { .lp-test__title { font-size: var(--fs-28); } .lp-test__text { font-size: var(--fs-17); } }

/* 七科：每格上面是该科拆卷导读片的封面（窄屏 4 + 3，一格约 75px 宽，状态字照旧要短） */
.lp-subjects--img { gap: 6px; }
.lp-subj--img { gap: 2px; padding: 0 2px 10px; }
.lp-subj__img { display: block; width: calc(100% + 4px); max-width: none; height: auto; margin: 0 -2px 6px; aspect-ratio: 16 / 9; object-fit: cover; background: #151B22; }
@media (min-width: 640px) { .lp-subjects--img { gap: var(--sp-2); } }
@media (min-width: 1024px) {
  .lp-subjects--img { gap: var(--sp-3); }
  .lp-subj--img { padding: 0 6px 12px; }
  .lp-subj__img { width: calc(100% + 12px); margin: 0 -6px 8px; }
}

/* 带图的小卡：图压满卡片上沿（数形结合、记忆带练两张一排；只做佛山三张一排） */
.lp-entries--pair { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .lp-entries--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-entry--pic { overflow: hidden; padding-top: 0; }
.lp-entry--pic > .lp-pic { width: calc(100% + 2 * var(--sp-3)); max-width: none; margin: 0 calc(-1 * var(--sp-3)) var(--sp-2); border-radius: 0; }
@media (min-width: 640px) { .lp-entry--pic > .lp-pic { width: calc(100% + 2 * var(--sp-4)); margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); } }

/* 石门星辰计划轮播：一张一幅图或一段视频，下面是日期和一句话。
   手机上左右滑（横向滚动 + 吸附），不自动播放；图按原尺寸居中、不放大；媒体标题图点了新窗口打开原文。
   没有脚本也能横着滑；上一张、下一张和圆点等脚本（/p/carousel.js）跑起来才出现。 */
.lp-car__track {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1);
}
.lp-car__track::-webkit-scrollbar { display: none; }
.lp-car__slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }   /* relative：张里的 .sr-only 不撑宽整页 */
.lp-car__fig { display: flex; flex-direction: column; height: 100%; margin: 0; }
/* 台子固定 16:9（宽屏最高 540px），图和视频绝对定位居中：比台子小的图按原尺寸放，不拉大 */
.lp-car__stage { position: relative; aspect-ratio: 16 / 9; max-height: 540px; background: #151B22; }
.lp-car__stage > img, .lp-car__stage > video, .lp-car__stage > a { position: absolute; inset: var(--sp-2); margin: auto; }
.lp-car__stage > a { display: flex; align-items: center; justify-content: center; }
.lp-car__stage img, .lp-car__stage video { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--r-s); }
.lp-car__stage > img, .lp-car__stage > video { max-width: calc(100% - 2 * var(--sp-2)); max-height: calc(100% - 2 * var(--sp-2)); }
.lp-car__stage video { background: #000; }
.lp-car__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.lp-car__date { display: inline-flex; padding: 2px 8px; border-radius: var(--r-s); background: #1E2B4F; color: #fff; font-size: var(--fs-14); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.lp-car__text { flex: 1 1 12em; min-width: 0; font-size: var(--fs-15); font-weight: 600; line-height: var(--lh-title); color: var(--ink); }
.lp-car__src { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-14); font-weight: 700; color: var(--night); white-space: nowrap; }
.lp-car__src:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-car__bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.lp-car__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--night); }
.lp-car__btn:hover { border-color: var(--night); }
.lp-car__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-car__dots { display: flex; align-items: center; }
.lp-car__dot { display: inline-grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; background: transparent; }
.lp-car__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: transform var(--t-fast), background var(--t-fast); }
.lp-car__dot[aria-current="true"]::before { background: var(--night); transform: scale(1.3); }
@media (min-width: 1024px) {
  .lp-car__stage > img, .lp-car__stage > video, .lp-car__stage > a { inset: var(--sp-4); }
  .lp-car__stage > img, .lp-car__stage > video { max-width: calc(100% - 2 * var(--sp-4)); max-height: calc(100% - 2 * var(--sp-4)); }
  .lp-car__cap { padding: var(--sp-4) var(--sp-5); }
  .lp-car__text { font-size: var(--fs-16); }
}
/* 素材不到 3 张时照 v3 显示四张日期卡：放在白底卡上 */
.lp-stamps--card .lp-stamp { background: var(--surface); border: 1px solid var(--line); }

/* 心里有底：左边分享卡示例，右边四行；影片那一行带一张小图 */
.lp-sharecard { justify-content: center; }
.lp-entry__thumb { display: block; width: 72px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); background: #151B22; }
.lp-entries--rows > .lp-entry--thumb { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: var(--sp-3); }
.lp-entries--rows > .lp-entry--thumb > * { grid-column: 2; }
.lp-entries--rows > .lp-entry--thumb > .lp-entry__thumb { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.lp-entries--rows > .lp-entry--thumb > .lp-state { grid-column: 3; }
@media (min-width: 640px) {
  .lp-entry__thumb { width: 112px; }
  .lp-entries--rows > .lp-entry--thumb { grid-template-columns: 112px minmax(0, 1fr) auto; }
}

/* 理念：三栏，下面一排四科讲解的画面，最后一句收束 */
.lp-pillars { display: grid; gap: var(--sp-3); }
.lp-pillar { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.lp-pillar__name { display: block; font-size: var(--fs-20); font-weight: 800; letter-spacing: .06em; color: var(--night); }
.lp-pillar__text { display: block; margin-top: 4px; font-size: var(--fs-15); color: var(--ink-2); }
.lp-wallfig { margin: var(--sp-4) 0 0; }
.lp-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.lp-wallfig figcaption { margin-top: var(--sp-2); font-size: var(--fs-14); color: var(--ink-3); }
@media (min-width: 768px) {
  .lp-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
}
@media (min-width: 1024px) { .lp-pillar { padding: var(--sp-5); } .lp-pillar__name { font-size: var(--fs-22); } }

/* 平台里有什么：个性化讲解大卡配数学第 1 题两段讲法的画面（宽屏左字右图）；实验室一条，图在左 */
@media (min-width: 1024px) {
  .lp-teach.lp-teach--img {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "kicker pic" "head pic" "text pic" "route pic" "acts pic";
  }
  .lp-teach--img > .lp-pic { grid-area: pic; align-self: center; }
}
.lp-entry--side { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); }
.lp-entry--side > * { grid-column: 2; }
.lp-entry--side > .lp-pic { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
@media (min-width: 640px) { .lp-entry--side { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--sp-5); } }
@media (min-width: 1024px) { .lp-entry--side { margin-top: var(--sp-4); } }

/* 给老师：夜蓝一条，前面加一张课上投屏的画面（宽屏图在左） */
.lp-tstrip--pic > .lp-pic { max-width: 360px; border: 1px solid rgba(255, 255, 255, .18); }
@media (min-width: 1024px) { .lp-tstrip.lp-tstrip--pic { grid-template-columns: 280px minmax(0, 1fr) auto; } }

/* 关于我们（首页一小节）：左图右字，两句话，「了解更多 ›」到介绍页 */
.lp-us { display: grid; gap: var(--sp-4); align-items: center; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.lp-us__text { margin-top: var(--sp-2); font-size: var(--fs-16); color: var(--ink-2); }
.lp-us__text b { font-weight: 700; color: var(--ink); }
.lp-us .lp-act { margin-top: var(--sp-1); }
@media (min-width: 768px) { .lp-us { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-5); padding: var(--sp-5); } }

/* 介绍页 about.html：小一号的开篇；白卡压在下沿放石门星辰计划（轮播、时间线、媒体报道）；来源和隐私沿用 .prose */
.lp-hero--sub { padding-bottom: calc(var(--sp-6) + 40px); }
.lp-hero--sub .landing-hero__title { font-size: var(--fs-28); }
.lp-hero__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-4); margin-top: var(--sp-3); }
.lp-hero__jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: #F6DFA4; white-space: nowrap; }
.lp-hero__jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .lp-hero--sub { padding-top: var(--sp-7); padding-bottom: calc(var(--sp-7) + 56px); }
  .lp-hero--sub .landing-hero__title { max-width: none; font-size: 2.5rem; }
  .lp-hero__jump { justify-content: flex-start; }
}
.lp-ab { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.lp-ab__note { margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--ink-3); }
@media (min-width: 1024px) { .lp-ab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-6); align-items: start; } }
.lp-tl--dates li { grid-template-columns: 6.2em minmax(0, 1fr); }
.lp-tl__year { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-15); font-weight: 800; letter-spacing: .06em; color: var(--ink-3); }
.lp-tl__year:first-child { margin-top: 0; }
.lp-ab__go { margin-top: var(--sp-5); }
.lp-prose { padding-top: 0; }

/* ----- 28 · v5（2026-11-01，site_design/网站_v5要求.md：董事长 10-31 修改稿）-----
   首页顺序：开篇（按年级看）→ 现在就能用 → 中考专题 → 月考专题 → 个性化讲解 → 理念 → 教师端 → 家长端。
   石门星辰计划在首页只留开篇里的一行，链内页 shimen.html（轮播 .lp-car 只在内页用）；介绍页 about.html、石门内页也用这里的类。
   下面全是新类；上面 v4 和更早的规则一条没改。 */

/* 首页四个版本：通用、初一、初二、初三（董事长 11-01）。四版的开篇、推荐、月考卷都写在页面里，页首一小段脚本给 html 设 data-lp-grade。
   .lp-gv 的 data-g 写它属于哪几版（0 = 通用，7、8、9 = 初一到初三，可以写几个，空格隔开），不属于当前这一版的不显示。
   对外不提供年级选择：没登录、没有脚本时都是通用版；登录上线后按账号的年级显示。各节里不放任何年级按钮。 */
html:not([data-lp-grade]) .lp-gv:not([data-g~="0"]),
html[data-lp-grade="7"] .lp-gv:not([data-g~="7"]),
html[data-lp-grade="8"] .lp-gv:not([data-g~="8"]),
html[data-lp-grade="9"] .lp-gv:not([data-g~="9"]) { display: none; }

/* 开发者测试切换：只在内网地址由首页页尾脚本画出来（对外网站上不画，页面上没有它）。
   放在页眉最左边、居中内容框的外面，做得小，标「测试」；页眉两边留不下的窄屏，挂在页眉下沿 */
.lp-devgrade {
  position: absolute; left: 6px; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px;
  border: 1px dashed #C2410C; border-radius: var(--r-s); background: #FFF7ED; color: #C2410C;
  font-size: 12px; font-weight: 700; line-height: 1.3;
}
.lp-devgrade select { padding: 1px 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (max-width: 1339.98px) { .lp-devgrade { top: calc(100% + 4px); transform: none; } }

/* 顶栏右边的「登录」：还没开放，不是链接，虚线框；手机上两行（登录 / 即将开放），640px 以上一行；360px 以下放不下，先收起 */
.lp-login {
  display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 2px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-m); line-height: 1.25; white-space: nowrap; cursor: default;
}
.lp-login__name { font-size: var(--fs-14); font-weight: 700; color: var(--ink-2); }
.lp-login__soon { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-14); color: var(--ink-3); }
.lp-login__soon .star { width: 12px; height: 12px; }
@media (min-width: 640px) { .lp-login { flex-direction: row; gap: var(--sp-2); min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); } }
@media (max-width: 359.98px) { .lp-login { display: none; } }

/* 现在就能用：测评大卡下面两张推荐，按年级换（手机上一行一张、左图右字；768px 以上两张一排） */
.lp-picks { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.lp-pick {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--sp-3); align-items: start;
  min-width: 0; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.lp-pick:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.lp-pick > * { grid-column: 2; }
.lp-pick > .lp-pic { grid-column: 1; grid-row: 1 / -1; align-self: center; border-radius: var(--r-s); }
.lp-pick__title { margin-top: 2px; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-title); color: var(--ink); }
.lp-pick__text { margin-top: 2px; font-size: var(--fs-14); line-height: 1.65; color: var(--ink-2); }
.lp-pick > .lp-state { align-self: end; padding-top: var(--sp-1); }
@media (min-width: 768px) {
  .lp-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
  .lp-pick { grid-template-columns: 168px minmax(0, 1fr); column-gap: var(--sp-4); padding: var(--sp-4); }
  .lp-pick__title { font-size: var(--fs-17); }
}

/* 中考专题：白卡里依次是七科格子、往年原题（即将开放）、「进入中考专题」 */
.lp-zk { padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.lp-zk > .lp-kicker { margin-bottom: var(--sp-3); }
.lp-zk__go { margin-top: var(--sp-4); }
@media (min-width: 640px) { .lp-zk { padding: var(--sp-4); } }
@media (min-width: 1024px) { .lp-zk { padding: var(--sp-5); } }

/* 排了计划、还没开放的内容：一排虚线小框，名字 + 「即将开放」 */
.lp-plan { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.lp-plan__item {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-3); min-height: 44px; padding: 6px var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-m); font-size: var(--fs-15); font-weight: 600; color: var(--ink-2);
}
@media (min-width: 640px) { .lp-plan { gap: var(--sp-3); } .lp-plan__item { padding: 6px var(--sp-4); } }

/* 月考专题：学校只写代号，代号正下方跟那句八字话（.lp-school；make_preview 的 school_label() 从 site_design/月考学校代号.json 读，各处都用它）。
   通用版：只放各校的概览（代号 + 八字句）；初一到初三版：每校一张卷子卡（代号 + 八字句、这个年级的科目、即将开放）。
   没有年级按钮；入口全部「即将开放」，所以都是虚线框 */
.lp-school { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lp-school__code {
  display: inline-flex; padding: 1px 12px; border-radius: var(--r-s); background: var(--night); color: var(--surface);
  font-size: var(--fs-17); font-weight: 800; letter-spacing: .12em; white-space: nowrap;
}
.lp-school__motto { font-size: var(--fs-14); font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.lp-subjs { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); }
.lp-mk { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-l); }
.lp-mk__schools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.lp-papers { display: grid; gap: var(--sp-2); }
.lp-paper {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-4);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-m);
}
.lp-paper > .lp-state { align-self: stretch; margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--line); }
@media (min-width: 640px) { .lp-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (min-width: 768px) { .lp-mk__schools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-mk { padding: var(--sp-5); } .lp-papers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp-paper { padding: var(--sp-5); } }

/* 个性化讲解：一句结果，一张讲解的画面（768px 以上左字右图） */
.lp-solo { display: grid; gap: var(--sp-4); align-items: center; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-1); }
.lp-solo__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.lp-solo__title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.lp-solo__text { font-size: var(--fs-16); color: var(--ink-2); }
.lp-solo .lp-acts { margin-top: var(--sp-2); }
@media (min-width: 768px) { .lp-solo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-6); padding: var(--sp-5); } }
@media (min-width: 1024px) { .lp-solo__title { font-size: var(--fs-28); } .lp-solo__text { font-size: var(--fs-18); } }
.lp-solo__more { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: var(--sp-1); font-size: var(--fs-15); color: var(--ink-2); }

/* 学习工具：理念上面一排 6 张（宽屏一行 6 张，平板 3 张，手机 2 张）。标题写好处，功能名是小标签，下面写几科、哪几科。
   能用的两张配站里真实的画面；还没开放的四张是虚线框，配一个简单的图标（不放假截图） */
.lp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.lp-tools > li { display: flex; min-width: 0; }
.lp-tool {
  display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding: var(--sp-2) var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.lp-tool:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.lp-tool--soon { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.lp-tool > .lp-pic, .lp-tool__icon { margin-bottom: var(--sp-1); border-radius: var(--r-s); }
.lp-tool__icon { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--surface-2); }
.lp-tool__icon svg { width: 40px; height: 40px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-tool--soon .lp-kicker { color: var(--ink-3); }
.lp-tool__title, .lp-tool__subjs { word-break: keep-all; overflow-wrap: anywhere; }   /* 窄卡里只在标点处换行，不把「道法」拆成两行 */
.lp-tool__title { font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-title); color: var(--ink); }
.lp-tool__subjs { font-size: var(--fs-14); line-height: 1.6; color: var(--ink-2); }
.lp-tool__subjs b { display: inline-flex; margin-right: 6px; padding: 0 6px; border-radius: var(--r-s); background: var(--night-tint); color: var(--night); font-weight: 700; }
.lp-tool > .lp-state { margin-top: auto; padding-top: var(--sp-2); }
@media (min-width: 768px) { .lp-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } .lp-tool { padding: var(--sp-3) var(--sp-3) var(--sp-4); } }
@media (min-width: 1024px) { .lp-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 家长端：教师端下面一条浅色带（宽屏左字右入口），入口还没开放 */
.lp-pstrip { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-5) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.lp-pstrip__title { font-size: var(--fs-22); font-weight: 700; line-height: var(--lh-tight); color: var(--night); }
.lp-pstrip__lead { margin-top: var(--sp-2); font-size: var(--fs-16); color: var(--ink-2); }
.lp-pstrip .lp-ticks { margin-top: var(--sp-3); }
.lp-pstrip__go {
  justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-3); min-height: 44px; padding: 6px 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-pill); font-weight: 700; color: var(--ink-2); white-space: nowrap; cursor: default;
}
@media (min-width: 1024px) {
  .lp-pstrip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); }
  .lp-pstrip__title { font-size: var(--fs-26); }
}

/* 介绍页：石门星辰计划内页的入口，一张横卡 */
.lp-smlink { display: grid; gap: 4px; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
a.lp-smlink:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.lp-smlink__title { font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-title); color: var(--night); }
.lp-smlink__text { font-size: var(--fs-15); color: var(--ink-2); }
.lp-smlink > .lp-state { padding-top: var(--sp-2); }
@media (min-width: 768px) {
  .lp-smlink { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-5); padding: var(--sp-5); }
  .lp-smlink > * { grid-column: 1; }
  .lp-smlink > .lp-state { grid-column: 2; grid-row: 1 / span 3; padding-top: 0; }
}

/* 石门星辰计划内页 shimen.html：开篇一段简介；下面一张白卡压在开篇下沿，放时间线。董事长选好材料后，轮播放在时间线上面 */
.lp-lift { position: relative; z-index: 1; margin-top: -40px; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-2); }
.lp-lift > .lp-tl { padding: 0; border: 0; border-radius: 0; background: transparent; }
.lp-lift > .lp-car { margin-bottom: var(--sp-5); }
@media (min-width: 1024px) { .lp-lift { margin-top: -56px; padding: var(--sp-5) var(--sp-6); } }