/* ==========================================================================
   星图兴趣
   设计系统（浅色主题 / 课堂投影友好）
   ========================================================================== */

:root {
  --bg:          #f4f6fb;
  --bg-soft:     #eef2f9;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e3e9f2;
  --border-2:    #cbd5e1;
  /* 交互态描边：比 --border-2 深一档，悬停底色上仍 ≥3:1（#f8fafc 上 3.1:1） */
  --border-3:    #7f90a6;

  --text:        #1b2437;
  --text-2:      #46536b;
  --muted:       #7b879c;

  --primary:     #2563eb;
  --primary-d:   #1d4ed8;
  --primary-l:   #e8f0fe;

  --accent:      #f59e0b;
  --success:     #10b981;
  --success-l:   #e7f7f1;
  --danger:      #ef4444;
  --danger-l:    #fdecec;
  --purple:      #8b5cf6;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-lg:   22px;

  --shadow-sm:   0 1px 2px rgba(27,36,55,.06), 0 1px 3px rgba(27,36,55,.05);
  --shadow:      0 4px 14px rgba(27,36,55,.07), 0 1px 3px rgba(27,36,55,.05);
  --shadow-lg:   0 14px 40px rgba(27,36,55,.11);

  /* 弹层遮罩：随皮肤走（粉梦给酒红调），不再在各页写死冷蓝黑 */
  --overlay:     rgba(15, 23, 42, .45);

  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 16.5px; color: var(--text);
  letter-spacing: -.2px;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(140deg, #3b82f6, #8b5cf6 55%, #f59e0b);
  color: #fff; display: grid; place-items: center;
  font-size: 17px; box-shadow: 0 3px 10px rgba(59,130,246,.35);
}
/* 新标识（20261111）：「书页星升」图形标以图片呈现，去掉旧的渐变方块底；
   28px 与 16.5px 的品牌文字基线对齐，不改变顶栏高度 */
.brand-mark.brand-mark-img {
  width: 28px; height: 28px; border-radius: 0; display: block;
  background: none; box-shadow: none; object-fit: contain;
}
.brand small {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--muted); letter-spacing: .3px; margin-top: -3px;
}
.topbar-spacer { flex: 1; }
/* 账号挂件挂载点：只做定位锚，不占布局空间（account.js 会把 #acctBox 插到它前面） */
#topAcctAnchor { display: none; }

.crumb {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted); min-width: 0;
}
.crumb b { color: var(--text); font-weight: 650; }
.crumb-sep { opacity: .45; }

/* ---------------------------------------------------------------- 布局 */
.wrap { max-width: 1240px; margin: 0 auto; padding: 30px 24px 90px; }
.wrap.narrow { max-width: 980px; }

/* ---------------------------------------------------------------- 首页
   星图夜空（2026-10-27 品牌视觉）：深蓝星图底 + 星点微光 + 金色星数，
   纯 CSS 离线可用；星点仅做缓慢明暗呼吸，投影不刺眼 */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(720px 340px at 88% -12%, rgba(56,189,248,.26), transparent 68%),
    radial-gradient(560px 300px at 4% 118%, rgba(246,189,96,.20), transparent 70%),
    linear-gradient(158deg, #0a1330 0%, #122252 54%, #1c2f74 100%);
  border-radius: var(--radius-lg);
  padding: 42px 44px 38px;
  color: #fff; margin-bottom: 30px;
  box-shadow: 0 18px 44px rgba(15,30,80,.38);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1.6px 1.6px at 7% 18%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.2px 1.2px at 13% 62%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(2px 2px at 21% 34%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1.1px 1.1px at 29% 80%, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 36% 12%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 56%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.8px 1.8px at 52% 26%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1.1px 1.1px at 61% 74%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 16%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 76% 48%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(2.2px 2.2px at 84% 22%, rgba(255,255,255,.95), transparent 100%),
    radial-gradient(1.1px 1.1px at 91% 66%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1.4px 1.4px at 96% 38%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 48% 92%, rgba(255,255,255,.55), transparent 100%);
  animation: star-breathe 8s ease-in-out infinite alternate;
}
/* 星图轨道环：右上两圈淡环，呼应「星图」意象 */
.hero::after {
  content: ""; position: absolute; right: -120px; top: -150px;
  width: 420px; height: 420px; border-radius: 50%; z-index: 0;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 26px rgba(255,255,255,.05), inset 0 0 60px rgba(147,197,253,.12);
}
@keyframes star-breathe { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: .8; }
}
.hero h1 {
  margin: 0 0 10px; font-size: 33px; line-height: 1.28;
  letter-spacing: -.6px; font-weight: 850; position: relative; z-index: 1;
  text-shadow: 0 0 22px rgba(147,197,253,.35);
}
.hero p {
  margin: 0; max-width: 680px; font-size: 15px;
  color: rgba(255,255,255,.88); position: relative; z-index: 1;
}
.hero-stats {
  display: flex; gap: 34px; flex-wrap: wrap;
  margin-top: 26px; position: relative; z-index: 1;
}
.hero-stat b {
  display: block; font-size: 27px; font-weight: 850;
  letter-spacing: -.5px; line-height: 1.2;
  color: #f6c86a; text-shadow: 0 0 16px rgba(246,189,96,.35);
}
.hero-stat span { font-size: 13px; color: rgba(255,255,255,.74); }

.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 16px;
}
.section-head h2 {
  margin: 0; font-size: 19.5px; font-weight: 800; letter-spacing: -.3px;
}
.section-head .sub { font-size: 13px; color: var(--muted); }
.section-head .line { flex: 1; height: 1px; background: var(--border); }

/* 分册 */
.volumes { display: grid; gap: 26px; }
.volume {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 26px 26px;
  box-shadow: var(--shadow);
}
.volume-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  flex-wrap: wrap;
}
.volume-badge {
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 100px;
  background: var(--primary-l); color: var(--primary-d);
}
.volume-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.volume-head .term { font-size: 13px; color: var(--muted); }
.volume-bar {
  flex: 1; min-width: 130px; height: 7px; border-radius: 100px;
  background: var(--bg-soft); overflow: hidden;
}
.volume-bar i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.volume-pct { font-size: 13px; font-weight: 700; color: var(--text-2); }

.chapter-grid {
  display: grid; gap: 16px;
  /* W7：同 .controls，最小列宽用 min(285px, 100%) 兜底，极窄屏也不横向溢出 */
  grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr));
}
.chapter-card {
  position: relative; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 18px 16px 20px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: block; color: inherit;
}
.chapter-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ch-color, var(--primary));
}
.chapter-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--border-3); text-decoration: none;
}
.chapter-top {
  display: flex; align-items: center; gap: 11px; margin-bottom: 9px;
}
.chapter-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: var(--ch-soft, var(--primary-l));
}
.chapter-top .no {
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
  color: var(--ch-color, var(--primary)); text-transform: uppercase;
}
.chapter-top h4 { margin: 1px 0 0; font-size: 16px; font-weight: 800; }
.chapter-card p {
  margin: 0 0 12px; font-size: 13px; color: var(--muted);
  line-height: 1.6; min-height: 41px;
}
.chapter-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.chapter-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--border-2); flex: none;
}
.chapter-meta .done {
  margin-left: auto; color: var(--success); font-weight: 700;
}

/* 课时列表 */
.lesson-list { display: grid; gap: 8px; margin-top: 4px; }
.lesson-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  color: inherit; transition: all .15s;
}
.lesson-row:hover {
  border-color: var(--primary); background: #fbfdff;
  transform: translateX(3px); text-decoration: none;
}
.lesson-row .idx {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--bg-soft); color: var(--text-2);
}
.lesson-row.done .idx { background: var(--success-l); color: var(--success); }
.lesson-row .t { font-size: 14px; font-weight: 600; }
.lesson-row .tag {
  margin-left: auto; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: var(--primary-l); color: var(--primary-d);
  white-space: nowrap;
}
.lesson-row .tag.lab { background: #fff5e6; color: #b45309; }

/* ---------------------------------------------------------------- 通用卡 */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 15px;
}
.card-head .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  background: var(--primary-l);
}
.card-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.card-head .hint {
  margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 500;
}

.step-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800;
}

/* ------------------------------------------------ 学科门户（首页）与年级页 */
/* 课程浏览（首页合并板块：学段分组 → 年级行 → 学科入口卡） */
.browse { display: grid; gap: 22px; }
.browse-group { display: grid; gap: 12px; }
.bg-stage {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--muted);
}
.bg-stage::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.grade-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.gr-no { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; }
.gr-no b { font-size: 17px; font-weight: 850; letter-spacing: -.2px; }
.gr-no span { font-size: 12px; font-weight: 650; color: var(--muted); }
.gr-subs { display: grid; gap: 10px; }

.sub-entry {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.sub-entry:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--shadow-lg); border-color: var(--sj-color, var(--primary));
}
.se-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 21px;
  background: var(--sj-soft, var(--primary-l));
}
.se-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.se-name {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 15px; font-weight: 800;
}
.se-name em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.se-sub { font-size: 12px; font-weight: 650; color: var(--text-2); }
.se-track {
  display: block; height: 6px; max-width: 320px;
  border-radius: 100px; background: var(--bg-soft); overflow: hidden;
}
.se-track i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--sj-color, #3b82f6), #8b5cf6);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.se-go {
  font-size: 12.5px; font-weight: 800; color: var(--sj-color, var(--primary)); white-space: nowrap;
}
/* 建设中年级收纳条（2026-10-27）：无内容年级不再各占一行灰条，
   按学段收成一条紧凑提示，避免课程浏览区大面积空置 */
.soon-strip {
  padding: 11px 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px dashed var(--border-2);
  font-size: 12.5px; color: var(--muted); text-align: center;
}
.soon-strip b { color: var(--text-2); font-weight: 750; }

/* 通用工具板块（不分年级的工具型学科入口，如英语背单词）
   全宽行 + 右侧「进入」，与课程浏览的年级行入口卡同一套卡片语言 */
.tool-grid { display: grid; gap: 12px; }
.tool-entry { align-items: flex-start; padding: 16px 18px; }
.tool-entry .se-icon { width: 46px; height: 46px; font-size: 22px; }
.tool-entry .se-sub { line-height: 1.6; }

/* 年级课程页：hero 内的年级切换 + 参数异常提示 */
.grade-switch { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.grade-tab {
  font-size: 13px; font-weight: 750; padding: 6px 16px; border-radius: 100px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  color: #fff; transition: background .16s;
}
.grade-tab:hover { text-decoration: none; background: rgba(255,255,255,.3); }
.grade-tab.on { background: #fff; color: var(--ch-color, #1e3a8a); border-color: #fff; }

.notice {
  margin: 0 0 18px; padding: 11px 16px; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a;
  font-size: 13.2px; color: #92400e;
}

@media (max-width: 720px) {
  .grade-row { grid-template-columns: 1fr; gap: 8px; }
  .gr-no { flex-direction: row; align-items: baseline; gap: 8px; padding: 4px 0; }
}
@media (max-width: 480px) {
  .sub-entry { padding: 11px 12px; gap: 10px; }
  .se-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  .se-track { max-width: 100%; }
}

/* ---------------------------------------------------------------- 课时页 */
.lesson-hero {
  border-radius: var(--radius-lg); padding: 26px 30px;
  color: #fff; margin-bottom: 22px;
  background: linear-gradient(120deg, var(--ch-color, #2563eb), #1e293b);
  box-shadow: 0 12px 30px rgba(27,36,55,.2);
}
.lesson-hero .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  opacity: .82; text-transform: uppercase;
}
.lesson-hero h1 {
  margin: 5px 0 8px; font-size: 27px; font-weight: 850;
  letter-spacing: -.5px;
}
.lesson-hero .desc { font-size: 14px; opacity: .88; max-width: 720px; }
/* 英雄卡右侧学科插画（js/data/grade-art.js）：纯装饰，右列布局不挤占文字 */
.lesson-hero.hero-with-art { display: flex; align-items: center; gap: 24px; }
.lesson-hero .hero-main { flex: 1 1 auto; min-width: 0; }
.lesson-hero .hero-art {
  flex: 0 0 auto; width: 320px; max-width: 38%; pointer-events: none; user-select: none;
}
.lesson-hero .hero-art svg { display: block; width: 100%; height: auto; animation: heroArtFloat 6s ease-in-out infinite alternate; }
@keyframes heroArtFloat {
  from { transform: translateY(-6px); }
  to { transform: translateY(6px); }
}
/* 无障碍：用户系统开启"减少动态效果"时关闭浮动动画 */
@media (prefers-reduced-motion: reduce) {
  .lesson-hero .hero-art svg { animation: none; }
}
/* 窄屏隐藏插画，把空间让给文字内容 */
@media (max-width: 860px) {
  .lesson-hero.hero-with-art { display: block; }
  .lesson-hero .hero-art { display: none; }
}
.lesson-hero .pills { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.lesson-hero .pills span {
  font-size: 12px; font-weight: 650; padding: 4px 11px;
  border-radius: 100px; background: rgba(255,255,255,.19);
  border: 1px solid rgba(255,255,255,.22);
}
/* 趣味知识课件入口（全册课件；副标题文案取自 js/app.js 的 CW_MAP.sub，只写精简展示文案，勿写长清单） */
.cw-entry {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
  max-width: 100%; flex-wrap: wrap;
  background: linear-gradient(120deg, #fbbf24, #f59e0b 55%, #ea580c);
  color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .3px;
  padding: 13px 26px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cw-entry:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245,158,11,.58), inset 0 1px 0 rgba(255,255,255,.35);
}
.cw-entry:active { transform: translateY(0) scale(.98); }
.cw-entry .cw-sub {
  font-size: 12.5px; font-weight: 600; opacity: .9;
  border-left: 1px solid rgba(255,255,255,.45); padding-left: 12px; letter-spacing: 0;
  max-width: min(56vw, 600px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.objectives { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.objectives li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; color: var(--text-2); line-height: 1.65;
}
.objectives li::before {
  content: "✓"; flex: none; width: 19px; height: 19px; margin-top: 3px;
  border-radius: 6px; background: var(--success-l); color: var(--success);
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}

/* 知识精讲 */
.kp { border-left: 3px solid var(--primary-l); padding-left: 16px; margin: 0 0 18px; }
.kp:last-child { margin-bottom: 0; }
.kp h4 {
  margin: 0 0 6px; font-size: 14.5px; font-weight: 750;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
.kp p { margin: 0 0 7px; font-size: 14px; color: var(--text-2); }
.kp p:last-child { margin-bottom: 0; }
.kp .formula {
  display: inline-block; font-family: var(--mono);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 10px; border-radius: 7px; font-size: 14px;
  font-weight: 700; color: var(--primary-d); margin: 3px 4px 3px 0;
}
.kp .tipbox {
  margin-top: 9px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a;
  font-size: 13.2px; color: #92400e;
}
.kp .tipbox b { color: #78350f; }

/* ------------------------------------------------- 实验台 */
.lab {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.lab-head {
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfdff, var(--surface));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lab-head .ic {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 16px;
  background: linear-gradient(140deg, #fff7ed, #fed7aa);
  border: 1px solid #fdba74;
}
.lab-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.lab-head .hint { font-size: 13px; color: var(--muted); width: 100%; margin-top: -4px; }
.lab-head .btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.lab-body { padding: 20px 22px 22px; }

.stage {
  position: relative; border-radius: var(--radius-sm);
  background: #fbfcfe; border: 1px solid var(--border);
  overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: auto; touch-action: none; }
.stage.grab canvas { cursor: grab; }
.stage.grabbing canvas { cursor: grabbing; }

/* 暂停角标 */
.pause-tag {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  display: none; background: rgba(15,23,42,.78); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .5px;
  padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
.stage.paused .pause-tag { display: block; }

/* 全屏 */
.lab:fullscreen, .lab:-webkit-full-screen {
  background: #f4f7fb; border-radius: 0; overflow-y: auto; padding-bottom: 20px;
}
.lab:fullscreen .lab-head, .lab:-webkit-full-screen .lab-head {
  position: sticky; top: 0; z-index: 6;
}
.lab:fullscreen .lab-body, .lab:-webkit-full-screen .lab-body {
  padding: 18px 28px 20px;
}
.lab:fullscreen .stage, .lab:-webkit-full-screen .stage { margin: 0 auto; }

/* 通用控制按钮：和实验操作按钮区分开 */
.btn.media { border-style: dashed; color: var(--muted); }
.btn.media:hover { border-style: solid; }
.btn.media.play-hint {
  border-style: solid; border-color: var(--primary);
  color: var(--primary-d); background: var(--primary-l);
}

.readouts {
  display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 0;
}
.readout {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 13px; min-width: 108px;
}
.readout .l { font-size: 12px; color: var(--muted); font-weight: 600; display: block; }
.readout .v {
  font-family: var(--mono); font-size: 15px; font-weight: 750;
  color: var(--primary-d); letter-spacing: -.3px;
}
.readout.hi .v { color: var(--danger); }
.readout.ok .v { color: var(--success); }

.controls {
  display: grid; gap: 15px; margin-top: 18px;
  /* W7 修复：最小列宽 255px 在窄屏（如 390px 手机）会把滑块与其数值撑出卡片
     并被裁剪（学生看不到"敲击力度 0.70"这类读数）；改用 min(255px, 100%)
     让列宽随容器自适应，桌面端行为不变 */
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}

/* ---------------- 一课多实验台 ---------------- */
.lab-stack { display: grid; gap: 18px; margin-bottom: 20px; }
.lab-stack > .lab { margin-bottom: 0; }

/* ---------------- 实验分板块 ---------------- */
.lab-groups { display: grid; gap: 14px; margin-top: 18px; }
.lab-group.plain { border: 0; background: transparent; }
.lab-group {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.lg-head {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.lg-head .lg-no { font-size: 14px; font-weight: 800; color: var(--primary-d); }
.lg-head b { font-size: 13.5px; font-weight: 750; }
.lg-head .lg-hint { font-size: 12.5px; color: var(--muted); }
.lg-body { display: block; }
.lg-row {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px;
  padding: 12px 16px; align-items: start;
}
.lg-row + .lg-row { border-top: 1px dashed var(--border); }
.lg-tag {
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 0; text-align: center; white-space: nowrap;
}
.lg-val { min-width: 0; }
.lg-val .controls { margin-top: 0; }
.lg-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-none { font-size: 12.5px; color: var(--muted); }
.ctrl { display: block; }
.ctrl-top {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
.ctrl-top .lb { font-size: 13.2px; font-weight: 650; color: var(--text-2); }
.ctrl-top .vl {
  margin-left: auto; font-family: var(--mono); font-size: 13px;
  font-weight: 750; color: var(--primary-d);
  background: var(--primary-l); padding: 1px 9px; border-radius: 6px;
}
input[type=range] {
  -webkit-appearance: none; width: 100%; height: 6px; border-radius: 100px;
  background: var(--bg-soft); outline: none; margin: 7px 0 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary); cursor: pointer;
  box-shadow: 0 2px 6px rgba(37,99,235,.3); transition: transform .12s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }

.seg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.seg button {
  font-family: inherit; font-size: 13px; font-weight: 650;
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); transition: all .14s;
}
.seg button:hover { border-color: var(--border-3); background: #fff; }
.seg button.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

.switch {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.2px; font-weight: 650; color: var(--text-2); margin-top: 6px;
}
.switch input { display: none; }
.switch .track {
  width: 38px; height: 21px; border-radius: 100px; flex: none;
  background: var(--border-2); position: relative; transition: background .18s;
}
.switch .track::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s;
}
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(17px); }

/* 按钮 */
.btn {
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); transition: all .14s; white-space: nowrap;
}
.btn:hover { border-color: var(--border-3); background: var(--surface-2); }
/* 按下与键盘焦点：与顶栏皮肤切换按钮同一套反馈（1px 下沉 / 2px 主色描边） */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 禁用态：保持「灰、不可点、无悬停/按下反馈」，各页已有更细的覆盖仍按后者生效 */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 9px rgba(37,99,235,.3);
}
.btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn.danger {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn.danger[disabled] { opacity: .6; pointer-events: none; }
.btn.ghost { background: transparent; }
.btn.warn { color: var(--danger); border-color: #fecaca; background: var(--danger-l); }
.btn.sm { font-size: 13px; padding: 6px 12px; }
/* 低权重辅助按钮（如清空进度）：平时不抢主按钮的视觉焦点，悬停才提示风险 */
.btn.quiet {
  background: transparent; border-color: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 650; padding: 6px 10px;
}
.btn.quiet:hover { color: var(--danger); background: var(--danger-l); border-color: #fecaca; }

/* 统一确认弹窗（2026-10-27 起替代原生 confirm） */
.xmodal-veil {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.45); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 20px;
  animation: xm-fade .18s ease;
}
.xmodal {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 16px; padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.3);
  animation: xm-pop .18s ease;
}
.xmodal h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.xmodal p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.xmodal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.xmodal-veil.closing { opacity: 0; transition: opacity .24s ease; }
@keyframes xm-fade { from { opacity: 0; } }
@keyframes xm-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* 数据表 */
.table-wrap { margin-top: 16px; overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.data th {
  background: var(--surface-2); font-weight: 750; color: var(--text-2);
  text-align: left; padding: 9px 12px; border-bottom: 1.5px solid var(--border);
  font-size: 13px; white-space: nowrap;
}
table.data td {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 13px; color: var(--text);
}
table.data tbody tr:hover { background: #fbfdff; }
table.data tbody tr.new { animation: flash 1.1s ease-out; }
@keyframes flash { from { background: #fef3c7; } to { background: transparent; } }
table.data .empty {
  text-align: center; color: var(--muted); padding: 24px;
  font-family: var(--font); font-size: 13px;
}

/* 结论填空 */
.blank {
  display: inline-block; min-width: 108px; padding: 1px 8px;
  border: none; border-bottom: 2px dashed var(--border-2);
  background: transparent; font-family: var(--font); font-size: 14px;
  font-weight: 750; color: var(--primary-d); text-align: center;
  outline: none; transition: all .18s;
}
.blank:focus { border-bottom-color: var(--primary); background: #f0f7ff; }
.blank.right { color: var(--success); border-bottom-color: var(--success); background: var(--success-l); }
.blank.wrong { color: var(--danger); border-bottom-color: var(--danger); background: var(--danger-l); }

.concl-item { font-size: 14.2px; line-height: 2.5; color: var(--text-2); }

/* 测验 */
.quiz-q {
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.quiz-q:last-child { border-bottom: none; }
.quiz-stem {
  font-size: 14.3px; font-weight: 650; margin-bottom: 11px;
  display: flex; gap: 10px; color: var(--text);
}
.quiz-opts { display: grid; gap: 7px; margin-left: 33px; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13.6px; transition: all .14s;
}
.quiz-opt:hover { border-color: var(--primary); background: #fbfdff; }
.quiz-opt .key {
  width: 21px; height: 21px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.quiz-opt.right {
  border-color: var(--success); background: var(--success-l);
}
.quiz-opt.right .key { background: var(--success); border-color: var(--success); color: #fff; }
.quiz-opt.wrong {
  border-color: var(--danger); background: var(--danger-l);
}
.quiz-opt.wrong .key { background: var(--danger); border-color: var(--danger); color: #fff; }
.quiz-why {
  margin: 9px 0 0 33px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: #f0f7ff; border: 1px solid #bfdbfe;
  font-size: 13px; color: #1e40af;
}

/* 底部导航 */
.lesson-nav {
  display: flex; gap: 12px; align-items: center; margin-top: 26px;
  padding-top: 20px; border-top: 1px solid var(--border);
}
.lesson-nav .flex1 { flex: 1; }
.lesson-nav a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  max-width: 46%; transition: all .15s;
}
.lesson-nav a:hover { border-color: var(--primary); text-decoration: none; }
.lesson-nav a .k { font-size: 12px; color: var(--muted); font-weight: 650; }
.lesson-nav a .n { font-size: 13.6px; font-weight: 700; color: var(--text); }
.lesson-nav a.next { margin-left: auto; text-align: right; align-items: flex-end; }

/* 工具 */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #1b2437; color: #fff; padding: 11px 22px; border-radius: 100px;
  font-size: 13.5px; font-weight: 650; box-shadow: var(--shadow-lg);
  z-index: 200; opacity: 0; transition: all .3s cubic-bezier(.34,1.4,.64,1);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 100px; background: var(--bg-soft); color: var(--text-2);
}
.chip.green { background: var(--success-l); color: #047857; }
.chip.blue { background: var(--primary-l); color: var(--primary-d); }
.chip.orange { background: #fff5e6; color: #b45309; }

.note {
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.3px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); margin-top: 14px;
}
.note b { color: var(--text); }

.footer {
  text-align: center; padding: 34px 20px 50px;
  font-size: 13px; color: var(--muted);
}

/* ==========================================================================
   密码框：显示 / 隐藏密码切换（四个登录页共用，交互见 js/pw-toggle.js）
   .pw-wrap 只做定位容器；按钮压在输入框右侧，由脚本切换 input 的 type。
   输入框预留的右侧内边距写成行内 style="padding-right:42px"，
   因为各页内联样式里的 input padding 特异性更高，放这里会被盖掉。
   ========================================================================== */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { box-sizing: border-box; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .14s, color .14s;
}
.pw-toggle:hover { background: var(--bg-soft); color: var(--text-2); }
.pw-toggle[aria-pressed="true"] { color: var(--primary); }

/* ==========================================================================
   键盘可访问性 —— 原来没有任何焦点样式，键盘用户看不到焦点在哪
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.switch input:focus-visible + .track { outline: 3px solid var(--primary); outline-offset: 3px; }
.quiz-opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* 跳到主内容（屏幕阅读器 / 键盘用户） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   首页：完成规则说明
   ========================================================================== */
.hero-rule {
  margin: 16px 0 0; font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  padding: 11px 15px;
}
.hero-rule b { color: #fff; }

/* ==========================================================================
   动手探究：任务清单前置 + 实验台（宽屏并排、任务栏吸附）
   ========================================================================== */
.explore {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 26px;
  margin-left: calc(var(--bleed, 0px) * -1);
  margin-right: calc(var(--bleed, 0px) * -1);
}
.task-rail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px 19px; box-shadow: var(--shadow-sm);
}
.task-rail-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.task-rail-head .ic { font-size: 18px; }
.task-rail-head b { font-size: 15px; }
.task-rail-head .btn { margin-left: auto; }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: t; }
.task-list li { counter-increment: t; }
.task-list label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 14px; line-height: 1.65; color: var(--text-2);
  padding: 10px 13px 10px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); transition: all .15s;
}
.task-list label:hover { border-color: var(--primary); }
.task-list label::before {
  content: counter(t); flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--primary-l); color: var(--primary-d);
}
.task-list input {
  margin: 3px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--primary);
}
.task-list li.checked label { background: var(--success-l); border-color: #a7e5cd; color: var(--text); }
.task-list li.checked label::before { content: "✓"; background: var(--success); color: #fff; }
.task-list li.checked span { text-decoration: line-through; text-decoration-color: #86c9ae; }

/* 宽屏：任务栏吸附在左侧，实验台占满右侧 —— 讲授时任务一直可见 */
@media (min-width: 1240px) {
  .wrap.narrow { --bleed: 128px; }
  .explore { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
  .task-rail { position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow: auto; }
}

/* ==========================================================================
   随堂检测进度条 + 完成条件卡
   ========================================================================== */
.score-bar { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; flex-wrap: wrap; }
.sb-track {
  flex: 1; min-width: 130px; height: 9px; border-radius: 100px;
  background: var(--bg-soft); overflow: hidden;
}
.sb-track i {
  display: block; height: 100%; border-radius: 100px; transition: width .3s;
  background: linear-gradient(90deg, #3b82f6, #10b981);
}
.sb-txt { font-size: 13.5px; color: var(--text-2); font-weight: 650; }

.done-card .done-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 10px;
}
.done-card .done-row:last-child { margin-bottom: 0; }
.done-card .done-row .mk {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: var(--bg-soft); color: var(--muted);
}
.done-card .done-row.ok .mk { background: var(--success); color: #fff; }
.done-card .done-row .txt { display: flex; flex-direction: column; }
.done-card .done-row .txt b { font-size: 14.5px; }
.done-card .done-row .txt i { font-style: normal; font-size: 13.5px; color: var(--muted); }
.done-card.all-ok { border-color: #a7e5cd; background: linear-gradient(180deg, #f2fdf8, #fff); }

/* ==========================================================================
   演示模式（投影讲授用）—— 大字、一步一屏
   ========================================================================== */
.demo-veil {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  padding: 24px; overflow: auto;
}
.demo-veil.show { display: grid; place-items: center; }
.demo-box {
  background: var(--surface); border-radius: var(--radius-lg);
  width: min(940px, 100%); padding: 30px 40px 26px; box-shadow: var(--shadow-lg);
}
.demo-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.demo-tag {
  font-size: 13.5px; font-weight: 800; padding: 5px 14px; border-radius: 100px;
  background: var(--primary-l); color: var(--primary-d);
}
.demo-count { font-size: 14px; color: var(--muted); font-weight: 650; }
.demo-close {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 15px; cursor: pointer; color: var(--text-2); transition: all .15s;
}
.demo-close:hover { background: var(--danger-l); color: var(--danger); border-color: var(--danger); }
.demo-h { font-size: 33px; line-height: 1.36; margin: 0 0 18px; letter-spacing: -.5px; }
.demo-body { min-height: 170px; }
.demo-p { font-size: 22px; line-height: 1.75; color: var(--text-2); margin: 0 0 12px; }
.demo-list { margin: 0; padding-left: 28px; display: grid; gap: 13px; }
.demo-list li { font-size: 22px; line-height: 1.68; }
.demo-tip {
  margin-top: 18px; padding: 15px 19px; border-radius: var(--radius-sm);
  background: #fff8ec; border: 1px solid #fde3b8; font-size: 18px; color: #92400e;
}
.demo-nav {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
}
.demo-dots { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.demo-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.demo-dots i.on { background: var(--primary); transform: scale(1.4); }
.demo-nav .btn { font-size: 15.5px; padding: 11px 22px; }
.demo-nav .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   平板（721 ~ 1100px）中间档适配
   ========================================================================== */
@media (max-width: 1100px) and (min-width: 721px) {
  .wrap, .wrap.narrow { padding: 24px 20px 80px; }
  .hero { padding: 34px 32px; }
  .hero h1 { font-size: 28px; }
  .lesson-hero { padding: 24px 26px; }
  .lesson-hero h1 { font-size: 25px; }
  .quiz-opts { margin-left: 0; }
  .quiz-why { margin-left: 0; }
  .explore { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wrap { padding: 20px 15px 70px; }
  .hero { padding: 30px 22px; }
  .hero h1 { font-size: 24px; }
  .hero-stats { gap: 22px; }
  .hero-stat b { font-size: 21px; }
  .card { padding: 18px 16px; }
  .volume { padding: 18px 16px; }
  .lesson-hero { padding: 20px 20px; }
  .lesson-hero h1 { font-size: 21px; }
  .crumb { display: none; }
  .brand > span:not(.brand-mark) { white-space: nowrap; }
}

/* 窄屏手机：顶栏只保留品牌名与操作按钮，隐藏副标题与账号邮箱，避免逐字挤压 */
@media (max-width: 560px) {
  .topbar-inner { padding: 9px 14px; gap: 8px; }
  .brand { font-size: 15.5px; min-width: 0; }
  .brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .brand small { display: none; }
  #who { display: none; }
  /* 教师端/管理端等纸张主题会重新显示英文副标（css/ui.css），这里用更高优先级收敛，
     避免窄屏被截成半截单词 */
  .topbar .brand small { display: none; }
  .topbar .btn { padding: 8px 12px; }
  /* W7 修复：390px 下顶栏合计仍超出约 9px，
     窄屏再压缩账号区与入口按钮的间距/内边距（不隐藏任何功能入口） */
  .acct { gap: 6px; margin-right: 6px; }
  .acct-btn { padding: 5px 10px; }
  .sync-chip { padding: 3px 8px; }
  .acct-mini { padding: 4px 7px; }
}

/* 超窄屏（375~480px，主流手机竖屏）：顶栏元素较多，进一步取舍——
   品牌名固定可见（超长省略），隐藏副标与同步状态徽标，
   按钮强制单行，避免"加入班级"被挤压成逐字换行 */
@media (max-width: 480px) {
  .topbar-inner { gap: 6px; }
  /* 品牌位不再参与挤压：图形标 + 品牌名整体固定，靠后面的次要按钮让位 */
  .brand { flex: 0 0 auto; min-width: 0; gap: 6px; }
  .brand > span:not(.brand-mark) {
    display: block; min-width: 0; max-width: 48vw; flex: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px;
  }
  .brand-mark.brand-mark-img { width: 24px; height: 24px; }
  #syncBadge { display: none; }
  .acct-btn, .topbar .btn { white-space: nowrap; }
  .topbar .btn { padding: 6px 9px; font-size: 12px; }
  .acct { margin-right: 0; gap: 4px; }
}

/* 320 这类极窄屏：把次要按钮收纳（主题切换点、修改密码/退出登录在账号下拉里都有），
   优先保证品牌名与主操作可见，且不出现横向滚动 */
@media (max-width: 400px) {
  .topbar-inner { padding: 9px 10px; }
  /* 提高一级优先级，压过 css/skin-pink.css 里后加载的 .skin-btn { display:inline-flex } */
  .topbar .skin-btn { display: none; }
  #btnChpw, #btnLogout { display: none; }
}

/* ---- AI 产出统一标注（全场景复用：周报 / 讲题 / 课件）----
   任何 AI 生成内容展示时都应带上此徽标，样式统一在此维护 */
.ai-generated {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 650; color: var(--primary-d);
  background: var(--primary-l); border: 1px solid #d4e4fb;
  border-radius: 999px; padding: 3px 11px; vertical-align: middle;
}
.ai-generated::before { content: "🤖"; font-size: 11px; }

@media print {
  .topbar, .lab-head .btns, .lesson-nav, .toast { display: none !important; }
  body { background: #fff; }
  .card, .lab { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   账号与同步（js/account.js、js/sync.js）
   ========================================================================== */
.acct { display: flex; align-items: center; gap: 6px; margin-right: 10px; }
.acct [hidden], .acct-user-wrap[hidden], .acct-menu[hidden] { display: none !important; }

/* 同步状态胶囊：状态显示与「立即同步」操作合二为一 */
.sync-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 11.5px; font-weight: 650; letter-spacing: .2px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sync-chip:hover { border-color: var(--border-3); box-shadow: var(--shadow-sm); }
.sync-chip:disabled { cursor: default; opacity: .8; }
.sync-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor;
}
.sync-chip.sync-off  { color: var(--muted);     background: var(--bg-soft);   border-color: var(--border); }
.sync-chip.sync-ok   { color: #0b7a5b;          background: var(--success-l); border-color: #bfe8d9; }
.sync-chip.sync-wait { color: #96610a;          background: #fdf3e2;          border-color: #f3ddb5; }
.sync-chip.sync-busy { color: var(--primary-d); background: var(--primary-l); border-color: #c9dcfb; }
.sync-chip.sync-err  { color: var(--danger);    background: var(--danger-l);  border-color: #f6cccc; }
.sync-chip.sync-busy .sync-dot {
  width: 9px; height: 9px; background: transparent;
  border: 1.5px solid currentColor; border-top-color: transparent;
  animation: sync-spin .7s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }

/* 账号触发区：头像 + 姓名 + 下拉箭头 */
.acct-user-wrap { position: relative; }
.acct-user {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 650; color: var(--text-2);
  padding: 3px 8px 3px 3px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  transition: background .15s, border-color .15s;
}
.acct-user:hover, .acct-user[aria-expanded="true"] {
  background: var(--bg-soft); border-color: var(--border);
}
.acct-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--purple));
}
.acct-ava.warn { background: linear-gradient(135deg, var(--accent), var(--danger)); }
.acct-who {
  font-size: 13px; color: var(--text-2); white-space: nowrap; font-weight: 650;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.acct-caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted); transition: transform .15s;
}
.acct-user[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }

/* 账号下拉菜单：全站固定浅色配色（不随页面主题/粉梦皮肤变化），与 css/acct.css 保持一致 */
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 236px; padding: 6px; border-radius: 13px;
  background: #ffffff; border: 1px solid #e3e9f2;
  box-shadow: 0 14px 40px rgba(27,36,55,.11);
  animation: acct-pop .14s ease-out;
}
@keyframes acct-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.acct-menu-head { padding: 9px 10px 10px; border-bottom: 1px solid #e3e9f2; margin-bottom: 4px; }
.acct-menu-name { font-size: 13.5px; font-weight: 800; line-height: 20px; color: #1b2437; }
.acct-menu-sub { font-size: 12px; line-height: 17px; color: #7b879c; margin-top: 1px; }
.acct-menu-note {
  margin-top: 6px; padding: 3px 7px; border-radius: 6px;
  font-size: 11.5px; font-weight: 650; line-height: 17px; color: #b45309;
  background: #fff8ec; border: 1px solid #fde3b8;
}
.acct-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; font-size: 13px; line-height: 22px; color: #46536b; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  text-decoration: none;
}
.acct-item:hover { background: #eef2f9; color: #1b2437; text-decoration: none; }
.acct-item:disabled { opacity: .5; cursor: default; }
/* 菜单项图标位：与「宠物小屋」的小图标同规格，保证五项文字左对齐 */
.acct-item-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.acct-item-ico {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: #eef2f9; box-shadow: inset 0 0 0 1px rgba(27, 36, 55, .04);
  transition: background .15s;
}
.acct-item-ico svg {
  width: 14px; height: 14px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.acct-item-ico svg.solid { fill: currentColor; stroke: none; }
.acct-item-ico.ico-pet { color: #8b5cf6; }
.acct-item-ico.ico-switch { color: #2563eb; }
.acct-item-ico.ico-sync { color: #0b7a5b; }
.acct-item-ico.ico-pwd { color: #b45309; }
.acct-item:hover .acct-item-ico { background: #ffffff; }
.acct-item.danger .acct-item-ico { color: #ef4444; background: #fdecec; box-shadow: none; }
.acct-item-meta { font-size: 11.5px; color: #7b879c; font-weight: 500; }
.acct-item.danger {
  color: #ef4444; margin-top: 4px; border-top: 1px solid #e3e9f2;
  border-radius: 0 0 8px 8px; padding-top: 9px;
}
.acct-item.danger:hover { background: #fdecec; }
/* 门户等页面存在 body a{color:inherit} 的高优先级链接色，这里锁定菜单项文字色 */
.acct .acct-menu .acct-item { color: #46536b; }
.acct .acct-menu .acct-item:hover { color: #1b2437; }
.acct .acct-menu .acct-item.danger { color: #ef4444; }
.acct .acct-menu .acct-item.danger:hover { color: #ef4444; }

.acct-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
  transition: background .15s, border-color .15s, color .15s;
}
.acct-btn:hover { background: var(--primary-l); border-color: var(--primary); color: var(--primary-d); }
.acct-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.acct-btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.acct-btn.ghost { background: transparent; }
.acct-btn:disabled { opacity: .55; cursor: default; }

.acct-mini {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.acct-mini:hover { border-color: var(--border-3); color: var(--text); }

.acct-veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .42);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
/* 从宠物对话面板 / 学习信息面板打开时置顶 */
.acct-veil.acct-top { z-index: 996; }
.acct-veil.show { opacity: 1; pointer-events: auto; }

.acct-modal {
  width: min(460px, 100%); background: var(--surface); border-radius: 16px;
  border: 1px solid var(--border); padding: 24px 24px 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.acct-modal h3 { margin: 0 0 10px; font-size: 18px; color: var(--text); }
.acct-hint { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.acct-hint b { color: var(--text-2); }
.acct-modal label {
  display: block; font-size: 13px; color: var(--text-2); font-weight: 600; margin-bottom: 12px;
}
.acct-modal input {
  display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
  font: inherit; font-size: 14px; font-weight: 400;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
}
.acct-modal input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.acct-msg { font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.acct-msg.err { color: var(--danger); }
.acct-acts { display: flex; justify-content: flex-end; gap: 10px; }
.acct-forgot { margin: 12px 0 0; text-align: right; font-size: 12.5px; color: var(--muted); }
.acct-forgot button {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--primary); cursor: pointer;
}
.acct-forgot button:hover { text-decoration: underline; }

/* ---------- 账户切换器（多孩家庭同设备免密切换） ---------- */
.acct-switch-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto; margin: 2px 0 18px; padding: 2px;
}
.acct-switch-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
  cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
}
.acct-switch-item:hover { border-color: var(--primary); background: var(--primary-l); transform: translateY(-1px); }
.acct-switch-item.active {
  border-color: var(--primary); background: var(--primary-l);
  box-shadow: inset 3px 0 0 var(--primary);
}
.acct-switch-item.active:hover { transform: none; }
.acct-ava-lg {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}
.acct-switch-info { flex: 1; min-width: 0; }
.acct-switch-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 7px;
}
.acct-switch-tag {
  font-size: 10.5px; font-weight: 700; color: var(--primary-d);
  background: #fff; border: 1px solid var(--primary); border-radius: 20px; padding: 1px 8px;
}
.acct-switch-sub {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-switch-remove {
  flex: none; font: inherit; font-size: 12px; color: var(--muted);
  border: 1px solid transparent; background: transparent; border-radius: 8px;
  padding: 6px 9px; cursor: pointer; opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.acct-switch-item:hover .acct-switch-remove { opacity: 1; }
.acct-switch-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-l); }
@media (hover: none) { .acct-switch-remove { opacity: 1; } }

.sync-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: #1b2437; color: #fff; font-size: 13px;
  padding: 10px 18px; border-radius: 10px; z-index: 95;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.sync-toast.show { opacity: .96; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .acct-who { display: none; }
  .sync-chip { font-size: 11px; padding: 3px 8px; }
}

/* ==========================================================================
   移动端 H5 兼容（2026-10-28）
   --------------------------------------------------------------------------
   P0 输入框字号 ≥16px：iOS Safari 对 <16px 的输入框聚焦时会自动放大整页，
                      且无法自动缩回，是最影响手感的移动端兼容问题。
   P1 触摸目标 ≥40~44px：手指点击的可用面积（Web 无障碍惯例 44px，
                      Apple HIG 44pt / Material 48dp），重点是实验台控件与顶栏。
   仅在 ≤720px 生效，桌面版式完全不变。
   ========================================================================== */
@media (max-width: 720px) {
  /* ---------- P0 输入框 ---------- */
  .acct-modal input,
  .acct-modal textarea,
  .blank,
  label.fld input,
  .pv-search { font-size: 16px; }

  /* 兜底：assignments / wrong-book 等页内联写了 `input{font-size:14px}`（特异性 0,0,1），
     这里用属性否定选择器把特异性抬到 0,4,1 压过它；滑块/勾选/单选不参与。 */
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
  textarea,
  select { font-size: 16px; }

  /* ---------- P1 通用按钮 ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; font-size: 14px;
  }
  .btn.sm { min-height: 40px; font-size: 13.5px; }
  .btn.quiet { min-height: 40px; }
  .topbar .btn { min-height: 40px; padding: 8px 13px; }

  /* 顶栏账号区与年级页「我的作业」入口链接：原来只有 30px 高 */
  .acct-btn { min-height: 40px; padding: 8px 12px; }
  .acct-mini { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 10px; }

  /* 密码显示/隐藏：原来 32×30，手指容易点空 */
  .pw-wrap > input { padding-right: 52px; }
  .pw-toggle { width: 40px; height: 40px; right: 3px; font-size: 15px; }

  /* 登录弹层「忘记密码」：padding:0 时只有 20px 高，补到 40px 可点区 */
  .acct-forgot button { min-height: 40px; padding: 10px 6px; }

  /* 顶栏品牌标识（点它回首页）：窄屏只剩图标，30px 太小 */
  .brand-mark { width: 38px; height: 38px; }

  /* ---------- P1 实验台控件（手机上是主要交互区） ---------- */
  .lab-head .btns { gap: 10px; }
  .lab-head .btns .btn { min-height: 40px; padding: 8px 14px; }
  .seg { gap: 8px; }
  .seg button { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
  .switch { min-height: 40px; font-size: 14px; }

  /* 滑杆：轨道加粗 + 拇指放大，方便手指拨动 */
  input[type=range] { height: 8px; margin-top: 13px; }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
}