:root {
  color-scheme: light;
  /* cx-tokens:start — 与 src/styles.css / src/admin.css / src/mentor.css 三端 :root 保持一致 */
  --cx-brand-start: #19d98a;
  --cx-brand-end: #0fb9b5;
  --cx-brand-gradient: linear-gradient(120deg, var(--cx-brand-start), var(--cx-brand-end));
  --cx-brand-gradient-strong: linear-gradient(120deg, var(--cx-brand-end), #0b968f);
  --cx-brand-ink: #0b5a54;
  --cx-brand-ink-soft: #0f8f78;
  --cx-glass-surface: rgba(255, 255, 255, 0.66);
  --cx-glass-border: rgba(15, 60, 56, 0.12);
  --cx-glass-blur: blur(8px) saturate(1.2);
  --cx-radius-sm: 10px;
  --cx-radius-md: 14px;
  --cx-radius-lg: 18px;
  --cx-radius-pill: 999px;
  --cx-touch: 44px;
  --cx-status-ready: #0f8f78;
  --cx-status-ready-bg: rgba(25, 217, 138, 0.18);
  --cx-status-blocked: #b4451f;
  --cx-status-blocked-bg: rgba(214, 109, 58, 0.16);
  --cx-status-progress: #0fb9b5;
  --cx-status-idle: #6b6f6e;
  /* 层级阴影:低透明、大羽化、轻微下偏移的 Apple 式柔和投影 */
  --cx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
  --cx-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --cx-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 48px rgba(15, 23, 42, 0.12);
  /* 间距刻度:4px 基数的 8 级节拍 */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-space-7: 48px;
  --cx-space-8: 64px;
  /* 字阶:6 级字号,配对应行高与三档字重 */
  --cx-text-xs: 12px;
  --cx-leading-xs: 16px;
  --cx-text-sm: 13px;
  --cx-leading-sm: 18px;
  --cx-text-base: 15px;
  --cx-leading-base: 22px;
  --cx-text-lg: 17px;
  --cx-leading-lg: 24px;
  --cx-text-xl: 20px;
  --cx-leading-xl: 28px;
  --cx-text-2xl: 24px;
  --cx-leading-2xl: 32px;
  --cx-font-medium: 500;
  --cx-font-semibold: 600;
  --cx-font-bold: 700;
  /* 动效:三档时长与标准/弹性缓动 */
  --cx-duration-fast: 120ms;
  --cx-duration-base: 200ms;
  --cx-duration-slow: 320ms;
  --cx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --cx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 焦点环与发丝线::focus-visible 焦点可见、玻璃系细分隔线 */
  --cx-focus-ring: 0 0 0 3px rgba(15, 185, 181, 0.35);
  --cx-hairline: 1px solid rgba(15, 23, 42, 0.08);
  /* cx-tokens:end */
  /* Claude Design 确认版调色板(HANDOFF §1)· 2026-07-04 学生端重构 */
  --bg: #f3fbf6;
  --surface: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-soft: #eef6fb;
  --surface-strong: #f9fbff;
  --text: #10131c;
  --muted: #56625b;
  --ink-weak: #8a948d;
  --line: #e2ebe6;
  --green: #0fa98a;
  --green-dark: #0b8f74;
  --blue: #2563eb;
  --indigo: #4f46e5;
  --amber: #f2a21a;
  --teal: var(--cx-brand-end);
  --coral: #f2654e;
  /* WCAG 文字变体:仅用于 color: 文字用法,达 ≥4.5:1;品牌填充/渐变仍用上面的亮色令牌(审计 R10)。 */
  --teal-text: #0a817f;
  --amber-text: #a06b11;
  --green-text: #0c846c;
  --coral-text: #c2513e;
  --purple: #7b61ff;
  --accent: #0fa98a;
  --cyan-soft: #e8f7f9;
  /* 页面液态玻璃网底 + 玻璃材质 */
  --cx-page-mesh: linear-gradient(180deg, #f3fbf6 0%, #eef6fb 60%, #f5f1ff 100%);
  --cx-glass-card: rgba(255, 255, 255, 0.6);
  --cx-glass-card-border: rgba(255, 255, 255, 0.72);
  --shadow: 0 18px 50px rgba(20, 40, 60, 0.12);
  --shadow-soft: 0 8px 22px rgba(20, 40, 60, 0.06);
  /* 微交互动效令牌(cx-tokens 冻结块外·可用不可乱改语义;prefers-reduced-motion 下由文末全局守卫统一退化为无动画) */
  --cx-motion-fast: 0.12s;
  --cx-motion-base: 0.18s;
  --cx-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --cx-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  /* 上线就绪:不再依赖被墙的 Google Web 字体。正文走系统 UI + 系统中文字体栈
     (苹方/微软雅黑/思源黑体/Noto CJK),低端 Android 零下载、中国大陆直达。 */
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC",
    "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
}

* {
  box-sizing: border-box;
}

button,
textarea,
pre,
code,
strong,
p,
small,
img,
svg,
video,
canvas {
  max-width: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--cx-page-mesh);
  background-attachment: fixed;
  color: var(--text);
}

/* 液态玻璃景深色块见 .app-shell::before/::after(裁切在手机框内)· HANDOFF §1 */

button,
input,
a {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  /* a11y:焦点框改用不透明品牌墨色,对比度 ≥3:1(原 28% 透明蓝约 1.5:1 不达标)。 */
  outline: 3px solid var(--cx-brand-ink);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 自托管图标字体子集(同源,替代被墙的 Google Fonts)。font-display: block 避免
   加载期把 ligature 名字("arrow_back" 等)当正文闪现;同源 367KB,SW 预缓存。 */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url("/public/assets/fonts/material-symbols-rounded-subset.woff2") format("woff2");
}

.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Rounded";
  font-size: 20px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

#app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.site-compliance-footer {
  width: min(100% - 32px, 760px);
  margin: -4px auto 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.site-compliance-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}

.site-compliance-footer a {
  color: var(--cx-brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-icp-link {
  white-space: nowrap;
}

.login-shell {
  width: min(100%, 420px);
  min-height: min(820px, calc(100vh - 36px));
  display: grid;
  place-items: center;
}

.login-card {
  width: 100%;
  padding: 24px;
  border: 1px solid var(--cx-glass-card-border);
  border-radius: 26px;
  background: var(--cx-glass-card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}

.login-logo {
  width: 156px;
  height: auto;
  display: block;
  margin-bottom: 22px;
}

/* SEA 语言切换器(Wire-B):落地/登录页可见,复用 --cx-touch/--cx-radius-pill/--cx-brand-ink 令牌 */
.locale-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.locale-switch-btn {
  min-height: var(--cx-touch);
  padding: 6px 14px;
  border: 1px solid var(--cx-glass-card-border, rgba(15, 60, 56, 0.16));
  border-radius: var(--cx-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  /* 长母语名(Bahasa Indonesia/Bahasa Melayu)不在胶囊内折行破形;整颗 pill 由 .locale-switcher 的 flex-wrap 换行 */
  white-space: nowrap;
  cursor: pointer;
}

.locale-switch-btn.is-active {
  border-color: var(--cx-brand-ink);
  background: var(--cx-brand-ink);
  color: #fff;
}

.locale-switch-btn:focus-visible {
  outline: 3px solid var(--cx-brand-ink);
  outline-offset: 2px;
}

.login-copy h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.login-copy p:not(.eyebrow),
.login-footnote {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.demo-pass {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 20px 0 14px;
  padding: 12px;
  /* 去 off-brand 蓝:收敛为单一品牌绿轻晕 + 中性边框,demo-pass 降权让位于价值主张与主 CTA(绿 rgba(22,132,95,*) 为本规则原有值) */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(22, 132, 95, 0.08), rgba(22, 132, 95, 0.04)), #fff;
}

.demo-pass > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: white;
  color: var(--green-dark);
}

.demo-pass strong,
.account-head h3 {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.demo-pass p,
.account-head p,
.share-status,
.invite-note,
.form-error {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.auth-provider-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(18, 24, 32, 0.08);
  border-radius: 8px;
  background: #fbfdfb;
}

.phone-login-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(31, 143, 95, 0.18);
  border-radius: 8px;
  background: #fff;
}

.regional-login-card {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  /* 合规/区域为次要元数据:退到与 .auth-provider-panel 一致的安静表面,不再以彩色渐变喧宾夺主(#fbfdfb 为文件内既有表面值,复用求同类同治) */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.regional-login-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.regional-login-head > .material-symbols-rounded {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--teal-text);
  background: #e9f8f8;
}

.regional-login-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.regional-login-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.regional-login-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.regional-login-chips span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.regional-login-chips i {
  font-size: 16px;
  color: var(--teal-text);
}

.regional-login-chips b {
  color: var(--text);
}

/* 徽标值(区域名/合规态)用 --text 恢复主信息可读性;min-width:0 + overflow-wrap 保证 id/vi/th/ms 长译文在 390px 不横向溢出 */
.regional-login-chips .regional-chip-value {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.auth-provider-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.auth-provider-head strong {
  font-size: 14px;
}

.auth-provider-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.auth-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-provider-grid.empty {
  display: block;
  padding: var(--cx-space-2) 0;
  color: var(--muted);
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

.auth-provider-button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.auth-provider-button .material-symbols-rounded {
  grid-row: 1 / span 2;
  color: var(--green-dark);
  font-size: 21px;
}

.auth-provider-button span:not(.material-symbols-rounded) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.auth-provider-button small {
  color: var(--muted);
  font-size: 11px;
}

.auth-provider-button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.login-form,
.phone-login-form {
  display: grid;
  gap: 10px;
}

.login-form label,
.phone-login-form label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.login-form input,
.phone-login-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--text);
  outline: none;
}

.login-form input:focus,
.phone-login-form input:focus {
  border-color: rgba(31, 143, 95, 0.65);
  box-shadow: 0 0 0 3px rgba(31, 143, 95, 0.12);
}

.phone-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: end;
}

.phone-code-send {
  min-height: 44px;
  padding: 0 10px;
  white-space: nowrap;
}

.phone-login-submit {
  width: 100%;
}

.legal-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid rgba(22, 135, 141, 0.18);
  border-radius: 8px;
  background: #f7fbfa;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.legal-consent input {
  width: 16px;
  min-height: 16px;
  margin-top: 1px;
  accent-color: var(--green);
}

/* Wave-L 合规(G2):同意勾选下方常驻未成年人年龄/监护人同意声明,弱化层级但不隐藏。 */
.legal-consent-minor {
  display: block;
  margin-top: var(--cx-space-1);
  color: var(--muted);
  font-weight: var(--cx-font-medium);
}

.legal-consent a,
.legal-links a {
  color: var(--green-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-submit {
  width: 100%;
  margin-top: 2px;
}

/* Wave-1 人性化错误态:登录报错从一行红字升级为柔和错误条,留白与圆角令牌化。 */
.form-error {
  margin: var(--cx-space-2) 0 0;
  padding: var(--cx-space-2) var(--cx-space-3);
  border-radius: var(--cx-radius-sm);
  background: #fff0ed;
  color: #9b332b;
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

.invite-note,
.share-status {
  color: var(--green-dark);
}

.invite-note.neutral {
  color: var(--muted);
}

.login-footnote {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.app-shell {
  position: relative;
  width: min(100%, 420px);
  height: min(900px, calc(100vh - 36px));
  min-height: 720px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--cx-page-mesh);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 液态玻璃景深:模糊色块,裁切在手机框内(HANDOFF §1) */
.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.app-shell::before {
  width: 240px;
  height: 240px;
  top: -60px;
  left: -70px;
  background: rgba(110, 235, 180, 0.5);
}
.app-shell::after {
  width: 220px;
  height: 220px;
  bottom: 40px;
  right: -70px;
  background: rgba(190, 170, 255, 0.4);
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: calc(var(--cx-space-4) + env(safe-area-inset-top)) calc(var(--cx-space-4) + env(safe-area-inset-right)) var(--cx-space-2) calc(var(--cx-space-4) + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(20px);
}

.topbar h1,
.section-title h2,
.mission-panel h2,
.reader-card h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: var(--cx-text-2xl);
  line-height: var(--cx-leading-2xl);
  font-weight: var(--cx-font-bold);
  text-wrap: balance;
}

.brand-line {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: block;
}

.brand-copy strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
}

.brand-copy p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--cx-text-xs);
  line-height: var(--cx-leading-xs);
  font-weight: var(--cx-font-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 188px;
}

.status-cluster > span,
.status-cluster > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(220, 229, 238, 0.88);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-cluster > button {
  position: relative;
  width: 30px;
  color: var(--blue);
}

/* a11y/移动:头部状态区图标按钮(打开 AI 助教/分享)视觉保持紧凑,透明伪元素扩大命中区。
   高度扩到 --cx-touch(44px):-8px → 28+16=44。水平方向受 .status-cluster 的 4px gap 约束——
   每侧只能外扩 2px(2+2=4=gap),否则相邻按钮的命中区会重叠导致误触;故宽度 30+4=34px
   (仍满足 WCAG 2.5.8 的 24px 最小目标)。 */
.status-cluster > button::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.status-cluster .material-symbols-rounded {
  color: var(--amber-text);
  font-size: 17px;
}

.segments {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: var(--cx-space-1) var(--cx-space-4) var(--cx-space-2);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--cx-touch);
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.segment.active {
  background: #111827;
  color: white;
  box-shadow: var(--shadow-soft);
}

.segment .material-symbols-rounded {
  font-size: 18px;
}

.system-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cx-space-2);
  margin: 0 0 var(--cx-space-3);
}

.system-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--cx-space-2);
  align-items: center;
  padding: var(--cx-space-2) var(--cx-space-3);
  /* 次要状态条降权:去卡片阴影、软化描边为令牌线、降低底色权重,让「今天要做的」独占第一落点 */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  color: inherit;
  text-align: left;
}

.system-chip .material-symbols-rounded {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--indigo);
  font-size: 18px;
}

.system-chip strong,
.system-chip span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-chip strong {
  font-size: 12px;
  line-height: 1.2;
}

.system-chip span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.scroll-area {
  position: relative;
  z-index: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  padding: 0 var(--cx-space-4) var(--cx-space-4);
  scrollbar-width: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

.mission-panel,
.progress-panel,
.module-strip,
.feed-panel,
.review-panel,
.profile-panel,
.path-panel,
.quest-panel,
.p0-panel,
.student-ai-panel,
.diagnosis-panel,
.report-panel,
.wrong-book-panel,
.bootcamp-panel,
.p1p2-panel,
.delivery-panel,
.offline-upgrade-panel,
.commercial-panel,
.gallery-panel,
.poster-preview-sheet {
  margin: 0 0 var(--cx-space-3);
  padding: var(--cx-space-4);
  /* Wave-1:硬描边升级为令牌发丝线,直角 8px 升级为 --cx-radius-md,投影收敛为 --cx-shadow-sm */
  border: var(--cx-hairline);
  border-radius: var(--cx-radius-md);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--cx-shadow-sm);
}

.mission-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 247, 255, 0.92) 100%);
}

.path-panel {
  background: rgba(255, 255, 255, 0.86);
}

.p0-panel {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(22, 132, 95, 0.08), rgba(233, 154, 23, 0.08)),
    #fff;
}

.student-ai-panel {
  display: grid;
  gap: 10px;
  background: #fff;
}

.student-ai-input {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.student-ai-input textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fbfdfb;
  font: inherit;
  line-height: 1.45;
}

.student-ai-actions,
.student-ai-meta,
.student-ai-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.student-ai-answer {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.student-ai-answer p,
.student-ai-error,
.student-ai-status,
.student-ai-fallback {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.student-ai-live {
  display: grid;
  gap: 10px;
}

.student-ai-status {
  color: var(--muted);
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

/* Wave-L 合规(M15):AI 生成内容固定显式标识,随答案卡常驻可见(生成合成内容标识办法)。 */
.student-ai-generated-note {
  margin: 0;
  padding-top: var(--cx-space-2);
  border-top: var(--cx-hairline);
  color: var(--muted);
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

/* Wave-1 人性化错误态:AI 报错/降级提示加柔和底色条,与正文层级拉开。 */
.student-ai-error,
.student-ai-fallback {
  padding: var(--cx-space-2) var(--cx-space-3);
  border-radius: var(--cx-radius-sm);
  background: rgba(245, 101, 78, 0.08);
  color: #9f3a23;
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

.student-ai-meta span,
.student-ai-citations a,
.student-ai-citations span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--muted);
  background: #eef6f6;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.student-ai-citations strong {
  width: 100%;
  font-size: 12px;
  line-height: 1.3;
}

.student-ai-drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  padding: 14px;
  background: rgba(16, 19, 28, 0.28);
  backdrop-filter: blur(14px);
}

.student-ai-drawer {
  position: relative;
  isolation: isolate;
  max-height: min(78vh, 680px);
  min-width: 0;
  overflow: hidden auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px 30px 34px 34px;
  background: transparent;
  box-shadow: 0 -20px 60px rgba(20, 40, 60, 0.2);
  /* Wave-1:入场换令牌化 spring 缓动,浮层落位带轻微回弹(reduced-motion 下由文末守卫定格) */
  animation: cx-sheet-rise var(--cx-duration-slow) var(--cx-ease-spring);
}

.student-ai-drawer-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 30px 30px 34px 34px;
  background: conic-gradient(from 0deg, rgba(25, 217, 138, 0.9), rgba(91, 107, 255, 0.82), rgba(162, 107, 255, 0.78), rgba(25, 217, 138, 0.9));
  animation: ai-edge-spin 3.2s linear infinite;
}

.student-ai-drawer::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: 28px 28px 32px 32px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
}

@keyframes cx-sheet-rise {
  from {
    transform: translateY(16px);
    opacity: 0.4;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.student-ai-drawer-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.student-ai-drawer-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.student-ai-drawer .student-ai-panel {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@keyframes ai-edge-spin {
  to {
    transform: rotate(360deg);
  }
}

.student-media-coach {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(15, 143, 154, 0.18);
  border-radius: 8px;
  background: #f7fbfa;
}

.student-media-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.student-media-head > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--teal-text);
  background: white;
}

.student-media-head strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.student-media-head p,
.student-media-fallback {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.student-media-actions,
.student-media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.student-media-preview {
  display: grid;
  gap: 8px;
}

.student-media-preview audio,
.student-media-preview video {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  background: #111827;
}

.student-media-preview video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.student-media-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 7px;
  border-radius: 8px;
  color: var(--muted);
  background: white;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.student-media-fallback {
  color: #8a5a12;
}

.ai-highlight-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(123, 97, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(123, 97, 255, 0.08), rgba(25, 217, 138, 0.06)),
    #fff;
}

.ai-highlight-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.ai-highlight-head > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #6f4dff;
  background: #f0ecff;
}

.ai-highlight-head strong,
.ai-highlight-list strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.ai-highlight-head p,
.ai-highlight-list p,
.reading-shadow-feedback p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ai-highlight-list {
  display: grid;
  gap: 8px;
}

.ai-highlight-list article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.ai-highlight-list span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  margin-bottom: 5px;
  border-radius: 8px;
  color: #5d45c9;
  background: #f3f0ff;
  font-size: 11px;
  font-weight: 900;
}

.reading-shadow-feedback {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-top: 8px;
  border-top: 1px solid rgba(123, 97, 255, 0.16);
}

.reading-shadow-feedback .material-symbols-rounded {
  color: var(--teal-text);
  font-size: 22px;
}

.delivery-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.commercial-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.commercial-compact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(22, 135, 141, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(22, 135, 141, 0.12), rgba(242, 162, 26, 0.12)),
    #fff;
}

.commercial-compact h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.commercial-compact p:not(.eyebrow) {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.delivery-hero,
.delivery-block {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.delivery-hero {
  background:
    linear-gradient(135deg, rgba(31, 143, 95, 0.11), rgba(22, 135, 141, 0.09)),
    #fff;
}

.delivery-hero h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0;
}

.delivery-hero p,
.delivery-track-plan p,
.delivery-trust-grid p,
.delivery-roadmap p,
.delivery-evidence-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.delivery-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.fde-project-panel {
  display: grid;
  gap: 12px;
}

.fde-project-status-grid,
.fde-project-form {
  display: grid;
  gap: 10px;
}

.fde-project-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.fde-project-status-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.fde-project-status-grid .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6f6;
  color: var(--teal-text);
}

.fde-project-status-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.fde-project-status-grid p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fde-workflow-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.fde-workflow-chip {
  min-width: 0;
  min-height: 58px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.fde-workflow-chip span,
.fde-workflow-chip small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fde-workflow-chip span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.fde-workflow-chip small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.fde-timeline-preview {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.fde-week-card-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 8px;
}

.fde-week-card-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
}

.fde-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.fde-subhead strong,
.fde-subhead span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fde-subhead span {
  color: var(--muted);
  font-size: 12px;
}

.delivery-mini-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.delivery-mini-grid span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.fde-timeline-preview article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
}

.fde-timeline-preview .material-symbols-rounded {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f4f1;
  color: var(--green-text);
  font-size: 19px;
}

.fde-timeline-preview strong,
.fde-timeline-preview p,
.fde-timeline-preview small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fde-timeline-preview strong {
  font-size: 13px;
  line-height: 1.25;
}

.fde-timeline-preview p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.fde-timeline-preview small {
  color: var(--muted);
  font-size: 11px;
}

.trusted-advisor-panel {
  display: grid;
  gap: 12px;
}

.advisor-training-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.advisor-training-rail article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.advisor-training-rail .material-symbols-rounded {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 18px;
}

.advisor-training-rail strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.advisor-practice-grid {
  display: grid;
  gap: 10px;
}

.advisor-scenario-card,
.advisor-draft-card,
.professional-audit-page {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.advisor-signal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.advisor-signal-list span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(22, 135, 141, 0.22);
  border-radius: 999px;
  background: #eef6f6;
  color: var(--teal-text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.advisor-attempt-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.advisor-attempt-row strong,
.advisor-attempt-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.advisor-attempt-row span {
  color: var(--muted);
}

.advisor-ai-meta,
.advisor-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.advisor-ai-meta span,
.advisor-citations a,
.advisor-citations span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.advisor-citations strong {
  width: 100%;
  color: var(--text);
  font-size: 12px;
}

.advisor-fallback {
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 12px;
  line-height: 1.35;
}

.professional-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.professional-audit-head strong,
.professional-audit-head p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.professional-audit-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.professional-audit-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.professional-audit-head .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6f6;
  color: var(--teal-text);
}

.professional-audit-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.professional-audit-grid div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.professional-audit-grid dt,
.professional-audit-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.professional-audit-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.professional-audit-grid dd {
  color: var(--text);
  font-size: 12px;
}

@media (min-width: 720px) {
  .fde-project-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advisor-practice-grid {
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  }

  .professional-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fde-ops-snapshot {
  margin-top: 10px;
}

.fde-ops-board {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.fde-ops-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.fde-ops-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.fde-ops-card h3 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.fde-ops-pills,
.fde-ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.fde-ops-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.fde-ops-meta-grid div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(220, 229, 238, 0.9);
  border-radius: 8px;
  background: #fff;
}

.fde-ops-meta-grid span,
.fde-ops-controls span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.fde-ops-meta-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.fde-sla-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.fde-sla-strip > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6f6;
  color: var(--teal-text);
}

.fde-sla-strip strong,
.fde-sla-strip em {
  font-size: 13px;
  line-height: 1.25;
}

.fde-sla-strip p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fde-sla-strip em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.fde-sla-strip.ok {
  border-color: rgba(31, 143, 95, 0.28);
  background: #f3fbf6;
}

.fde-sla-strip.warn {
  border-color: rgba(242, 162, 26, 0.42);
  background: #fff9ec;
}

.fde-sla-strip.danger {
  border-color: rgba(230, 93, 79, 0.34);
  background: #fff4f2;
}

.fde-ops-notes {
  display: grid;
  gap: 6px;
}

.fde-ops-notes p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(220, 229, 238, 0.9);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fde-ops-notes strong {
  margin-right: 6px;
  color: var(--text);
}

.fde-ops-notes small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.fde-ops-empty-note {
  color: var(--muted);
}

.fde-ops-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 0.8fr) repeat(2, minmax(180px, 1fr));
  gap: 9px;
  align-items: start;
}

.fde-ops-controls label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.fde-ops-controls input,
.fde-ops-controls textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.fde-ops-controls input {
  min-height: 38px;
  padding: 0 10px;
}

.fde-ops-controls textarea {
  min-height: 72px;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.4;
}

.fde-ops-controls input:focus,
.fde-ops-controls textarea:focus {
  border-color: rgba(31, 143, 95, 0.65);
  box-shadow: 0 0 0 3px rgba(31, 143, 95, 0.12);
}

.fde-danger-action {
  color: #9b332b;
}

.fde-ops-boundary {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(242, 162, 26, 0.32);
  border-radius: 8px;
  background: #fff9ec;
}

.fde-ops-boundary .material-symbols-rounded {
  color: #8a5a12;
  font-size: 20px;
}

.fde-ops-boundary p {
  margin: 0;
  color: #5d4a27;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.commercial-hero,
.commercial-block {
  min-width: 0;
  padding: var(--cx-space-4);
  border: var(--cx-hairline);
  border-radius: var(--cx-radius-md);
  background: #fff;
  box-shadow: var(--cx-shadow-sm);
}

.commercial-hero {
  background:
    linear-gradient(135deg, rgba(31, 143, 95, 0.1), rgba(230, 93, 79, 0.08)),
    #fff;
}

.commercial-hero h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0;
}

.commercial-hero p:not(.eyebrow),
.commercial-status-grid p,
.quota-tier p,
.quota-tier small,
.commercial-plan-card p,
.commercial-plan-card li,
.payment-boundary p,
.invite-reward-grid p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
  overflow-wrap: anywhere;
}

.commercial-status-grid,
.quota-grid,
.commercial-plan-grid,
.invite-reward-grid {
  display: grid;
  gap: var(--cx-space-2);
  margin-top: var(--cx-space-3);
}

.commercial-status-grid {
  grid-template-columns: 1fr;
}

.commercial-status-grid article,
.quota-tier,
.commercial-plan-card,
.invite-reward-grid article {
  min-width: 0;
  padding: var(--cx-space-3);
  border: var(--cx-hairline);
  border-radius: var(--cx-radius-md);
  background: #fbfdfb;
}

.commercial-status-grid article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: start;
}

.commercial-status-grid .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e9f8f8;
  color: var(--teal-text);
}

.commercial-status-grid strong,
.quota-tier strong,
.commercial-plan-head h3,
.invite-reward-grid strong {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.quota-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quota-tier {
  display: grid;
  align-content: start;
  gap: 9px;
}

.quota-tier span,
.commercial-plan-head span,
.payment-state {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 11px;
  font-weight: 900;
}

.quota-tier dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.quota-tier dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.quota-tier dt,
.quota-tier dd {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}

.quota-tier dt {
  color: var(--muted);
}

.quota-tier dd {
  color: var(--green-dark);
}

.commercial-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.commercial-plan-card.selected {
  border-color: rgba(31, 143, 95, 0.42);
  background:
    linear-gradient(180deg, rgba(31, 143, 95, 0.08), transparent 42%),
    #fff;
}

.commercial-plan-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}

.commercial-plan-head strong {
  color: var(--green-dark);
  font-size: 13px;
  line-height: 1.25;
  text-align: right;
}

.commercial-plan-card ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.commercial-plan-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  margin: 0;
  font-weight: 800;
}

.commercial-plan-card li .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 17px;
}

.commercial-plan-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.payment-state {
  margin-top: 10px;
  background: #fff0ef;
  color: #9b332b;
}

.payment-boundary,
.invite-link-box {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--cx-space-2);
  min-width: 0;
  margin-top: var(--cx-space-3);
  padding: var(--cx-space-3);
  border: 1px solid rgba(230, 93, 79, 0.2);
  border-radius: var(--cx-radius-md);
  background: #fff8f2;
}

.payment-boundary .material-symbols-rounded {
  color: var(--coral-text);
  font-size: 24px;
}

.invite-link-box {
  border-color: rgba(22, 135, 141, 0.22);
  background: #f7fbfa;
}

.invite-link-box:has(.commercial-qr-preview) {
  grid-template-columns: 72px 1fr;
  align-items: center;
}

.invite-link-box .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e9f8f8;
  color: var(--teal-text);
}

.commercial-qr-preview {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(22, 135, 141, 0.18);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.invite-link-box strong {
  display: block;
  color: var(--green-dark);
  font-size: 16px;
  line-height: 1.2;
}

.commercial-copy-url {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.commercial-actions {
  margin-top: 12px;
}

.gallery-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.gallery-hero,
.gallery-boundary,
.gallery-readiness,
.portfolio-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.gallery-hero {
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(22, 135, 141, 0.12), rgba(242, 162, 26, 0.12)),
    #fff;
}

.gallery-hero h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0;
}

.gallery-hero p:not(.eyebrow),
.portfolio-description,
.portfolio-card-head p,
.portfolio-boundary p,
.gallery-boundary p,
.gallery-readiness p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.gallery-hero-actions,
.portfolio-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.gallery-boundary {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 12px;
  background: #fff8e8;
}

.gallery-boundary > .material-symbols-rounded,
.portfolio-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #e9f8f8;
  color: var(--teal-text);
}

.gallery-boundary strong,
.gallery-readiness strong,
.portfolio-card-head h3 {
  display: block;
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.portfolio-card-grid {
  display: grid;
  gap: 10px;
}

.portfolio-card {
  min-width: 0;
  padding: 12px;
}

.portfolio-card.local {
  border-color: rgba(31, 143, 95, 0.32);
  background:
    linear-gradient(180deg, rgba(31, 143, 95, 0.07), transparent 46%),
    #fff;
}

.portfolio-card-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.portfolio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portfolio-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.portfolio-proof-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.portfolio-proof-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  min-width: 0;
  align-items: start;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.portfolio-proof-list .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 18px;
}

.portfolio-boundary {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.portfolio-boundary .material-symbols-rounded {
  color: var(--amber-text);
  font-size: 22px;
}

.gallery-readiness {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fbfdfb;
}

.gallery-readiness article + article {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.delivery-evidence-grid,
.delivery-trust-grid {
  display: grid;
  gap: 8px;
}

.delivery-evidence-grid article {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.delivery-evidence-grid .material-symbols-rounded {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
}

.delivery-evidence-grid strong,
.delivery-track-switcher strong,
.delivery-track-plan strong,
.delivery-trust-grid strong,
.delivery-roadmap strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.delivery-evidence-grid b {
  display: block;
  margin-top: 2px;
  color: var(--green-dark);
  font-size: 18px;
  line-height: 1.1;
}

.delivery-roadmap {
  display: grid;
  gap: 8px;
}

.delivery-roadmap article,
.delivery-milestone-grid article,
.delivery-track-plan,
.delivery-trust-grid article {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.delivery-milestone-grid {
  display: grid;
  gap: 8px;
}

.delivery-milestone-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-milestone-grid ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.delivery-milestone-grid li {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.delivery-milestone-grid li b {
  color: var(--green-dark);
  font-size: 12px;
}

.delivery-milestone-grid li span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-roadmap span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 7px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 12px;
  font-weight: 900;
}

.delivery-roadmap small {
  display: block;
  margin-top: 7px;
  color: var(--teal-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.delivery-track-switcher {
  display: grid;
  gap: 8px;
}

.delivery-track-switcher button {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--text);
  text-align: left;
}

.delivery-track-switcher button.active {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
}

.delivery-track-switcher span,
.delivery-track-plan li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-track-plan {
  margin-top: 8px;
}

.delivery-workbench-grid {
  display: grid;
  gap: 10px;
}

.delivery-workbench-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.delivery-resubmit-lane {
  border-color: rgba(181, 94, 6, 0.38);
  background: #fff8e8;
}

.delivery-resubmit-lane .delivery-workbench-heading > .material-symbols-rounded {
  background: #fff0c2;
  color: #9a4f05;
}

.delivery-workbench-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.delivery-workbench-heading > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef6f6;
  color: var(--teal-text);
}

.delivery-workbench-heading strong,
.delivery-mini-checklist strong,
.delivery-version-list strong,
.delivery-boundary-toggle strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.delivery-workbench-heading p,
.delivery-version-list p,
.delivery-boundary-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.delivery-note-field.compact {
  margin-top: 0;
}

.delivery-note-field input,
.delivery-note-field select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.delivery-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-mini-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.delivery-mini-checklist button,
.delivery-boundary-toggle {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.delivery-mini-checklist button {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  min-height: 42px;
  padding: 8px;
}

.delivery-mini-checklist button.active,
.delivery-boundary-toggle.active {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
}

.delivery-mini-checklist .material-symbols-rounded,
.delivery-boundary-toggle .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 20px;
}

.delivery-status-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.delivery-status-list div,
.delivery-version-list div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.delivery-status-list dt,
.delivery-version-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-status-list dd {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.delivery-version-list {
  display: grid;
  gap: 7px;
}

.delivery-version-list div {
  grid-template-columns: 42px minmax(0, 1fr);
}

.delivery-boundary-toggle {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  min-height: 42px;
  padding: 9px;
}

.delivery-track-plan ul {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.delivery-checklist,
.qa-check-list,
.rubric-check-grid {
  display: grid;
  gap: 8px;
}

.delivery-checklist button,
.rubric-check-grid button {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--text);
  text-align: left;
}

.delivery-checklist button {
  grid-template-columns: 30px 1fr;
  gap: 9px;
  padding: 10px;
}

.delivery-checklist button.active,
.rubric-check-grid button.active {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
}

.delivery-checklist .material-symbols-rounded {
  color: var(--green-dark);
}

.delivery-checklist strong,
.qa-check-list strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.delivery-checklist p,
.qa-check-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.delivery-note-field,
.self-explain-field {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.delivery-note-field span,
.self-explain-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.delivery-note-field textarea,
.self-explain-field textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
}

.qa-check-list article {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.qa-status-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.qa-status-actions button {
  min-height: var(--cx-touch);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.qa-status-actions button.active[data-status="pass"] {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
  color: var(--green-dark);
}

.qa-status-actions button.active[data-status="risk"] {
  border-color: rgba(230, 93, 79, 0.45);
  background: #fff0ef;
  color: #9b332b;
}

.qa-status-actions button.active[data-status="todo"] {
  border-color: rgba(242, 162, 26, 0.5);
  background: #fff8e8;
  color: #77500e;
}

.rubric-check-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.rubric-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rubric-check-grid button {
  gap: 4px;
  padding: 10px;
}

.rubric-check-grid strong {
  font-size: 13px;
  line-height: 1.25;
}

.rubric-check-grid span {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.rubric-check-grid p,
.evidence-list small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.p0-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.p0-copy,
.hint-text,
.report-advice {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.p0-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.path-energy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.path-energy .material-symbols-rounded {
  font-size: 18px;
}

.path-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(52px, 1fr));
  gap: 6px;
  position: relative;
}

.path-node {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 76px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}

.path-node .material-symbols-rounded {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #edf5ef;
  color: var(--green-dark);
}

.path-node strong {
  font-size: 13px;
  line-height: 1.15;
}

.path-node small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.path-node.completed {
  color: var(--green-dark);
  background: #eff9f2;
}

.path-node.current {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.path-node.current small {
  color: rgba(255, 255, 255, 0.82);
}

.path-node.current .material-symbols-rounded {
  color: var(--green-dark);
  background: #fff;
}

.path-node.locked {
  opacity: 0.5;
}

.quest-panel {
  display: grid;
  gap: 9px;
  background: #fff;
}

.human-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.human-feedback-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(22, 135, 141, 0.14);
  border-radius: 8px;
  background: #f8fbfa;
}

.human-feedback-card .material-symbols-rounded {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--teal-text);
  background: #e9f8f8;
}

.human-feedback-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.human-feedback-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quest-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(64px, auto);
  gap: 10px;
  align-items: center;
}

.quest-row .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--green-dark);
}

.quest-row strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.quest-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  line-height: 1.25;
}

.quest-row i,
.lesson-progress i {
  display: block;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efe9;
}

.quest-row b,
.lesson-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--amber));
}

.mission-head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
}

.mission-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(31, 143, 95, 0.18), rgba(22, 135, 141, 0.12)),
    #f4fbf8;
  border: 1px solid rgba(31, 143, 95, 0.18);
}

.mission-badge .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 30px;
}

.lesson-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lesson-progress i {
  margin: 0;
}

.mission-head h2,
.section-title h2 {
  font-size: var(--cx-text-lg);
  line-height: var(--cx-leading-lg);
  font-weight: var(--cx-font-semibold);
}

.memory-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: start;
  margin: 12px 0;
}

.memory-visual {
  height: 116px;
  min-height: 116px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 143, 95, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(31, 143, 95, 0.16), rgba(242, 162, 26, 0.12)),
    #f8fcf9;
}

.memory-image {
  width: 100%;
  height: 100%;
  min-height: 116px;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}

.memory-visual .material-symbols-rounded {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: white;
  color: var(--green-dark);
  font-size: 34px;
  box-shadow: 0 8px 24px rgba(31, 143, 95, 0.12);
}

.memory-copy h3 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.05;
}

.memory-copy strong {
  display: block;
  font-size: 14px;
}

.memory-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.term-card-deck {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.section-title.compact {
  margin-bottom: 2px;
}

.term-card-stage {
  min-height: 380px;
  perspective: 1300px;
  touch-action: pan-y;
  cursor: pointer;
}

.term-card-stage:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
  border-radius: 8px;
}

.term-flip-card {
  position: relative;
  min-height: 380px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.term-flip-card.is-flipped {
  transform: rotateY(180deg);
}

.term-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 26px 24px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 28, 0.05);
  border-radius: 30px;
  box-shadow: 0 26px 60px -18px rgba(20, 40, 60, 0.26), 0 2px 6px rgba(20, 40, 60, 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.term-card-front {
  background: #ffffff;
}

.term-card-back {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, #1b2620, #12181f);
  box-shadow: 0 26px 60px -18px rgba(20, 40, 60, 0.3);
  transform: rotateY(180deg);
}

/* 背面 accent 分隔条(确认版) */
.term-card-back .term-card-kicker {
  order: -1;
}
.term-card-back::after {
  content: "";
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.term-card-kicker {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.term-card-back .term-card-kicker {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.84);
}

.term-card-face strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.03;
  color: #17211c;
}

.term-card-back strong {
  font-size: 42px;
  letter-spacing: 0.5px;
  color: #fff;
}

.term-card-face p {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #3a4038;
  max-width: 260px;
}

.term-card-back p {
  font-weight: 700;
  color: #fff;
}

.term-card-face small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.term-card-back small {
  color: rgba(255, 255, 255, 0.72);
}

.term-card-back code {
  display: block;
  max-height: 70px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.term-card-dots,
.term-card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.term-card-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d8e4df;
}

.term-card-dots span.active {
  width: 24px;
  background: linear-gradient(90deg, var(--green), var(--teal));
}

.term-card-actions {
  justify-content: space-between;
}

.term-card-actions .small {
  flex: 1 1 92px;
}

.mission-head p:not(.eyebrow),
.feedback p,
.question p,
.reader-body p,
.feed-row p,
.settings-row p,
.review-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.code-snippet {
  margin: 14px 0;
  padding: 12px;
  color: #203327;
  background: #edf5ef;
  border: 1px solid #d9e8de;
  border-radius: 8px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.45;
}

.word-detail {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.word-detail div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.word-detail strong {
  font-size: 13px;
}

.word-detail p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.practice-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.practice-modes button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.practice-modes button.active {
  background: var(--teal);
  color: #fff;
}

.practice-modes .material-symbols-rounded {
  font-size: 19px;
}

.question p {
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 800;
}

.choice-grid {
  display: grid;
  gap: 8px;
}

.choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  text-align: left;
}

.choice.correct {
  color: var(--green-dark);
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
}

.choice.wrong {
  color: #9b332b;
  border-color: rgba(230, 93, 79, 0.45);
  background: #fff0ef;
}

.diagnosis-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.diagnosis-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.diagnosis-head {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
}

.diagnosis-head > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
  font-weight: 900;
}

.diagnosis-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.diagnosis-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.diagnosis-choices {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.diagnosis-choice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.diagnosis-choice.selected {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
  color: var(--green-dark);
}

.diagnosis-explain-card {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(22, 135, 141, 0.18);
  border-radius: 8px;
  background: #f8fbfa;
}

.diagnosis-explain-card.correct {
  border-color: rgba(31, 143, 95, 0.28);
  background: #eef9f2;
}

.diagnosis-explain-card.wrong {
  border-color: rgba(242, 162, 26, 0.28);
  background: #fff9eb;
}

.diagnosis-explain-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.diagnosis-explain-head > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--green-dark);
  background: #fff;
}

.diagnosis-explain-head strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.25;
}

.diagnosis-explain-card p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.diagnosis-answer-note {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.diagnosis-answer-note span {
  min-height: 24px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.primary:disabled,
.secondary:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.hint-text {
  margin-top: 10px;
}

.step-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.step-progress i {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efe9;
}

.step-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--amber));
}

.step-card {
  margin-top: 12px;
}

.feedback {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(22, 135, 141, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(22, 135, 141, 0.16);
}

.feedback.correct {
  background: #eaf8ef;
  border-color: rgba(31, 143, 95, 0.35);
}

.feedback.wrong {
  background: #fff0ef;
  border-color: rgba(230, 93, 79, 0.35);
}

.feedback strong {
  font-size: 14px;
}

.mission-actions,
.reader-actions {
  display: flex;
  gap: var(--cx-space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--cx-space-3);
}

.primary,
.secondary,
.source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--cx-radius-sm);
  font-weight: var(--cx-font-bold);
  font-size: 14px;
}

.primary {
  color: white;
  background: #111827;
  box-shadow: var(--shadow-soft);
}

.secondary,
.source-link {
  color: var(--text);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(220, 229, 238, 0.9);
}

.secondary.small {
  min-height: 34px;
  font-size: 13px;
}

.progress-panel {
  display: grid;
  grid-template-columns: 86px 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: #fbfdfb;
}

.daily-ring {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 70%, transparent 72%),
    conic-gradient(var(--green) calc(var(--pct) * 1%), #e4eee7 0);
}

.daily-ring span {
  font-size: 22px;
  font-weight: 900;
}

.daily-ring small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.progress-panel .study-mini-metrics {
  grid-template-columns: 1fr;
  gap: 6px;
}

.progress-panel .study-mini-metrics div {
  padding: 7px 8px;
}

.progress-panel .study-mini-metrics strong {
  font-size: 14px;
}

.meters {
  display: grid;
  gap: 9px;
}

.meter div {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.meter strong {
  color: var(--text);
}

.meter i,
.module-card i {
  display: block;
  height: 6px;
  margin-top: 5px;
  background: #e7efe9;
  border-radius: 999px;
  overflow: hidden;
}

.meter b,
.module-card b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--teal));
  border-radius: inherit;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cx-space-3);
  margin-bottom: var(--cx-space-3);
}

.icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--text);
}

/* a11y/移动:图标按钮视觉保持 34px,透明伪元素把可点命中区扩到 --cx-touch(44px),
   不改变布局(WCAG 2.5.5/2.5.8)。inset:-5px → 34+10=44。 */
.icon-button::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-card {
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.module-card .material-symbols-rounded {
  color: var(--teal-text);
  margin-bottom: 8px;
}

.module-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.feed-panel {
  background: rgba(255, 255, 255, 0.88);
}

.feed-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -4px 0 12px;
}

.feed-meta span,
.row-meta span:not(.term-chip),
.feed-kind,
.review-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: #23656a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.feed-list {
  display: grid;
  gap: 8px;
}

.feed-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.feed-row:last-child {
  border-bottom: 0;
}

.feed-row.active h3 {
  color: var(--blue);
}

.feed-kind {
  justify-content: center;
  min-height: 28px;
  background: #eef2ff;
  color: var(--indigo);
}

.feed-row h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
}

.feed-row p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.row-meta,
.terms {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.term-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  color: #77500e;
  background: #fff5dc;
  font-size: 12px;
  font-weight: 900;
}

.reader-card {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.reading-check-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.reading-check-card strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.reading-check-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.reading-check-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.reading-check-choices button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.reading-check-choices button.correct,
.reading-check-choices button.answer {
  border-color: rgba(33, 150, 91, 0.45);
  background: #ecfff5;
  color: var(--green-dark);
}

.reading-check-choices button.wrong {
  border-color: rgba(211, 74, 61, 0.35);
  background: #fff2f0;
  color: #9d2e22;
}

.reading-check-feedback {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7fbff;
  font-weight: 900;
}

.reading-check-feedback.correct {
  color: var(--green-dark);
}

.reading-check-feedback.wrong {
  color: #9d2e22;
}

.report-card {
  padding: 14px;
  border: 1px solid rgba(31, 143, 95, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(31, 143, 95, 0.1), rgba(22, 135, 141, 0.08)),
    #fff;
}

.report-top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
}

.report-top > .material-symbols-rounded {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
}

.report-top h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

.report-top p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.report-top > strong {
  min-width: 48px;
  color: var(--green-dark);
  font-size: 30px;
  line-height: 1;
  text-align: right;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}

.report-grid div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.report-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.report-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
}

.report-status,
.report-privacy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.report-status.loading {
  color: var(--green-dark);
}

.learning-report-block {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-metric-grid,
.wrong-book-summary,
.wrong-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.report-metric,
.wrong-book-summary div,
.wrong-answer-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.report-metric span,
.report-metric small,
.wrong-book-summary span,
.wrong-book-summary small,
.wrong-answer-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}

.report-metric strong,
.wrong-book-summary strong,
.wrong-answer-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.study-stats-strip,
.study-mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.study-stats-strip {
  margin-top: 10px;
}

.study-stats-strip div,
.study-mini-metrics div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.study-stats-strip span,
.study-mini-metrics span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.study-stats-strip strong,
.study-mini-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.report-action-list {
  display: grid;
  gap: 8px;
}

.report-action-list span {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.report-action-list .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 18px;
}

.poster-preview-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(11, 23, 17, 0.56);
}

.poster-preview-sheet {
  width: min(100%, 392px);
  max-height: calc(100dvh - 28px);
  margin: 0;
  overflow-y: auto;
  box-shadow: 0 22px 70px rgba(12, 31, 20, 0.24);
}

.poster-preview-frame {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(31, 143, 95, 0.18);
  border-radius: 8px;
  background: #f4faf6;
}

.poster-preview-image {
  display: block;
  width: min(100%, 260px);
  max-height: 54dvh;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 14px 36px rgba(23, 33, 28, 0.14);
  -webkit-touch-callout: default;
  user-select: auto;
}

.poster-save-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.poster-actions {
  margin-top: 10px;
}

.completion-share-actions {
  margin-top: 10px;
}

.mini-day-list,
.day-tabs {
  display: grid;
  gap: 8px;
}

.mini-day {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.mini-day span,
.mini-day small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.mini-day strong {
  font-size: 14px;
  line-height: 1.25;
}

.day-tabs {
  grid-template-columns: repeat(7, minmax(34px, 1fr));
  margin-bottom: 12px;
}

.day-tabs button {
  min-height: 38px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.day-tabs button.active {
  background: var(--green);
  color: white;
}

.day-tabs button.done:not(.active) {
  background: #eaf8ef;
  color: var(--green-dark);
}

.bootcamp-day-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.bootcamp-day-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.bootcamp-day-card > p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.task-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.task-list > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.task-list .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
}

.task-list strong {
  font-size: 13px;
}

.task-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.code-lab-card,
.completion-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.code-editor {
  width: 100%;
  min-height: 176px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d9e8de;
  border-radius: 8px;
  background: #17211c;
  color: #f7faf6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}

.code-editor:focus {
  border-color: rgba(31, 143, 95, 0.7);
  box-shadow: 0 0 0 3px rgba(31, 143, 95, 0.12);
}

.code-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.code-status.passed {
  background: #eaf8ef;
  color: var(--green-dark);
}

.code-status.failed {
  background: #fff0ef;
  color: #9b332b;
}

.code-status.fixed {
  background: #fff7df;
  color: #77500e;
}

.expected-output {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.code-output {
  min-height: 58px;
  margin: 10px 0 0;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  background: #edf5ef;
  color: #203327;
  font-size: 13px;
  line-height: 1.45;
}

.code-explain-card {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(230, 93, 79, 0.24);
  border-radius: 8px;
  background: #fff8f2;
}

.code-explain-card strong {
  display: block;
  font-size: 13px;
}

.code-explain-card p {
  margin: 4px 0 0;
  color: #4c3a2a;
  font-size: 13px;
  line-height: 1.5;
}

.mistake-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.hint-box {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hint-box summary {
  cursor: pointer;
  color: var(--green-dark);
  font-weight: 900;
}

.completion-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.completion-list span {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.completion-list .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 20px;
}

.ops-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.ops-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.ops-metrics span,
.roadmap-week span,
.roadmap-week small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.ops-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.1;
}

.ops-block {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.srs-grid,
.roadmap-grid,
.ops-check-grid,
.track-grid,
.metric-grid,
.template-grid,
.rubric-list,
.backlog-list {
  display: grid;
  gap: 8px;
}

.srs-card,
.roadmap-week,
.ops-check-grid article,
.track-grid article,
.metric-grid div,
.template-option,
.rubric-list article,
.backlog-list article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.srs-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.srs-card.due {
  border-color: rgba(211, 74, 61, 0.28);
  background: #fff8f2;
}

.srs-card.scheduled {
  border-color: rgba(31, 143, 95, 0.18);
}

.srs-card strong,
.roadmap-week strong,
.ops-check-grid strong,
.track-grid strong,
.metric-grid strong,
.template-option strong,
.rubric-list strong,
.backlog-list strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.srs-card p,
.roadmap-week p,
.evidence-list p,
.ops-check-grid p,
.track-grid p,
.template-option p,
.rubric-list p,
.backlog-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.srs-card small {
  display: block;
  margin-top: 5px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.failure-list {
  display: grid;
  gap: 8px;
}

.failure-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff8f2;
  color: #4c3a2a;
  font-size: 13px;
  font-weight: 900;
}

.evidence-list {
  display: grid;
  gap: 8px;
}

.evidence-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.evidence-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.evidence-list .ok {
  background: #eaf8ef;
  color: var(--green-dark);
}

.evidence-list .risk {
  background: #fff0ef;
  color: #9b332b;
}

.evidence-list strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.ops-check-grid ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ops-check-grid b {
  color: var(--text);
}

.metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.import-button {
  position: relative;
  overflow: hidden;
}

.import-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.rating-actions {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 4px;
}

.rating-actions button {
  min-height: var(--cx-touch);
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.template-option {
  display: grid;
  gap: 4px;
  width: 100%;
  color: var(--text);
  text-align: left;
}

.template-option.active {
  border-color: rgba(31, 143, 95, 0.45);
  background: #eaf8ef;
}

.template-option span {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.rubric-list article,
.backlog-list article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px;
  align-items: start;
}

.rubric-list article > span,
.backlog-list article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.reader-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.reader-card h2 {
  font-size: 17px;
  line-height: 1.35;
}

.mode-toggle {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.mode-toggle button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--muted);
  background: #edf3ef;
  font-size: 12px;
  font-weight: 900;
}

.mode-toggle button.active {
  color: white;
  background: var(--teal);
}

.reader-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.reader-body div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.reader-body strong {
  font-size: 13px;
}

.feed-issue {
  margin: 10px 0 0;
  color: #8a5a12;
  font-size: 13px;
  line-height: 1.4;
}

.review-panel {
  background: #fff;
}

.review-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.review-modes button {
  min-height: 48px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.review-modes .material-symbols-rounded {
  font-size: 18px;
}

.review-count {
  background: #fff5dc;
  color: #77500e;
}

.review-row,
.settings-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.review-row:last-child,
.settings-row:last-child {
  border-bottom: 0;
}

.review-row .material-symbols-rounded,
.settings-row .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--green-dark);
}

.review-row strong,
.settings-row strong {
  font-size: 14px;
}

.wrong-review-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.wrong-review-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.wrong-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.wrong-type {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  background: #fff5dc;
  color: #77500e;
  font-size: 11px;
  font-weight: 900;
}

.wrong-review-head small,
.wrong-review-card p,
.wrong-explain {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wrong-review-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.3;
}

.wrong-explain {
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: #fff8f2;
  color: #4c3a2a;
}

.wrong-next-action {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid rgba(31, 143, 95, 0.16);
  border-radius: 8px;
  background: #f3fbf6;
  color: var(--green-dark);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.wrong-next-action .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 18px;
}

.empty-wrong-book {
  display: grid;
  justify-items: center;
  gap: var(--cx-space-2);
  padding: var(--cx-space-6) var(--cx-space-4);
  color: var(--muted);
  text-align: center;
}

/* Wave-1 人性化空态:图标放大到 48px 圆角徽章,主/辅文案分层(题 base/semibold + 述 sm/muted)。 */
.empty-wrong-book .material-symbols-rounded {
  width: 48px;
  height: 48px;
  border-radius: var(--cx-radius-md);
  background: #eaf8ef;
  color: var(--green-dark);
  font-size: 26px;
}

.empty-wrong-book strong {
  color: var(--text);
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-base);
  font-weight: var(--cx-font-semibold);
}

.empty-wrong-book p {
  margin: 0;
  font-size: var(--cx-text-sm);
  line-height: var(--cx-leading-sm);
}

.text-button {
  padding: 0;
  color: var(--green-dark);
  background: transparent;
  font-weight: 900;
}

.profile-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-hero-card,
.profile-growth-card,
.profile-checkin-card,
.profile-certificate-card,
.profile-portfolio-card,
.profile-membership-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.profile-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  background:
    linear-gradient(135deg, rgba(25, 217, 138, 0.14), rgba(91, 107, 255, 0.1)),
    #fff;
}

.profile-hero-card h2,
.profile-growth-card h3,
.profile-checkin-card h3,
.profile-certificate-card h3,
.profile-portfolio-card h3,
.profile-membership-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

.profile-hero-card p:not(.eyebrow),
.profile-checkin-card p,
.profile-membership-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.profile-alias {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  max-width: 130px;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--green-dark);
  background: #eaf8ef;
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.profile-growth-grid {
  display: grid;
  gap: 8px;
}

.profile-growth-line {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfb;
}

.profile-growth-line {
  grid-template-columns: 42px minmax(0, 1fr);
}

.profile-growth-ring {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 68%, transparent 70%),
    conic-gradient(var(--teal) calc(var(--pct) * 1%), #e4eee7 0);
}

.profile-growth-ring .material-symbols-rounded {
  color: var(--green-dark);
  font-size: 21px;
}

.profile-growth-line strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.profile-growth-line p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.profile-day-dots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.profile-day-dots span {
  min-width: 0;
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  background: #f3f7f4;
  font-size: 11px;
  font-weight: 900;
}

.profile-day-dots span.done {
  color: #fff;
  background: var(--green);
}

.profile-day-dots span.current {
  outline: 2px solid rgba(242, 162, 26, 0.35);
  outline-offset: 2px;
}

.settings-list {
  display: grid;
}

.account-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(22, 135, 141, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(22, 135, 141, 0.08), rgba(242, 162, 26, 0.08)),
    #fff;
}

.legal-card {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(31, 143, 95, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.legal-card.needs-consent {
  border-color: rgba(230, 93, 79, 0.24);
  background: #fffafa;
}

.legal-card h3,
.legal-card p {
  margin: 0;
}

.legal-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
}

.account-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
}

.account-head > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green-dark);
}

.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.account-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 8px;
  background: #f3f7f4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.account-actions button {
  min-width: 0;
}

.share-status {
  margin-top: 10px;
}

.settings-list label {
  display: grid;
  grid-template-columns: 72px 1fr 68px;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 800;
}

.settings-list input {
  width: 100%;
  accent-color: var(--green);
}

.settings-list b {
  text-align: right;
  font-size: 13px;
}

.settings-row {
  grid-template-columns: 34px 1fr;
}

.settings-row.danger strong,
.settings-row.danger .material-symbols-rounded {
  color: var(--coral-text);
}

.settings-row.danger .material-symbols-rounded {
  background: #fff0ef;
}

.bottom-nav {
  position: relative;
  z-index: 3;
  overflow: visible;
  padding: 6px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

.bottom-nav-pill {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 8px;
  min-height: 64px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 14px 40px rgba(20, 40, 60, 0.18);
}

.bottom-nav button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  position: relative;
  border-radius: var(--cx-radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--cx-font-bold);
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bottom-nav button.active {
  color: var(--green-dark);
  background: transparent;
}

.bottom-nav .material-symbols-rounded {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  pointer-events: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.bottom-nav button.active .material-symbols-rounded {
  color: #fff;
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  box-shadow: 0 10px 24px rgba(15, 143, 154, 0.28);
  transform: translateY(-8px);
}

.student-bottom-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding-left: 8px;
  padding-right: 8px;
}

.student-bottom-nav button {
  min-height: 54px;
  font-size: 10px;
}

.student-bottom-nav .material-symbols-rounded {
  width: 28px;
  height: 28px;
  font-size: 19px;
}

.student-bottom-nav button.active .material-symbols-rounded {
  transform: translateY(-6px);
}

.spin {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 520px) {
  #app {
    display: block;
    padding: 0;
  }

  .login-shell {
    width: 100%;
    min-height: 100dvh;
  }

  .login-card {
    min-height: 100dvh;
    display: grid;
    align-content: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 360px) {
  .auth-provider-grid {
    grid-template-columns: 1fr;
  }

  .phone-code-row {
    grid-template-columns: 1fr;
  }

  .topbar,
  .segments,
  .scroll-area {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mission-head,
  .progress-panel,
  .feed-row {
    grid-template-columns: 1fr;
  }

  .reading-check-choices {
    grid-template-columns: 1fr;
  }

  .status-cluster span {
    min-height: 28px;
    padding: 0 6px;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .human-feedback-grid,
  .profile-hero-card {
    grid-template-columns: 1fr;
  }

  .profile-alias {
    max-width: 100%;
  }

  .report-metric-grid,
  .wrong-book-summary,
  .wrong-answer-grid,
  .review-row {
    grid-template-columns: 1fr;
  }

  .bottom-nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  .bottom-nav-pill {
    gap: 2px;
  }

  .bottom-nav button {
    min-height: 50px;
    font-size: 10px;
  }

  .bottom-nav .material-symbols-rounded {
    font-size: 19px;
  }

  .system-strip {
    grid-template-columns: 1fr;
  }

  .gallery-hero-actions,
  .portfolio-card-actions {
    display: grid;
  }

  .commercial-compact,
  .commercial-plan-head,
  .payment-boundary,
  .invite-link-box {
    grid-template-columns: 1fr;
  }

  .quota-grid,
  .commercial-plan-grid,
  .delivery-mini-checklist {
    grid-template-columns: 1fr;
  }

  .delivery-status-list div,
  .delivery-version-list div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .fde-ops-card-head,
  .fde-sla-strip,
  .fde-ops-controls {
    grid-template-columns: 1fr;
  }

  .fde-ops-pills,
  .fde-ops-actions {
    justify-content: flex-start;
  }

  .fde-sla-strip > .material-symbols-rounded {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 430px) {
  .quota-grid,
  .commercial-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== D2 任务台五段泳道(学/写/跑/交/复) · 液态玻璃 · 2026-07-03 ===== */
.daily-queue-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 20px 0 4px;
}

/* 「今天要做的」是任务台主线:作用域内略放大标题、与上方次要状态条拉开呼吸,强化第一落点。 */
.daily-queue-panel .section-title h2 {
  font-size: 20px;
}

.queue-blocked {
  background: rgba(254, 233, 228, 0.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid #f9cdc2;
  border-radius: 22px;
  padding: 13px 15px;
  box-shadow: 0 10px 26px rgba(200, 60, 40, 0.1);
}

.queue-blocked strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: #b3402c;
}

.queue-blocked-item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(249, 205, 194, 0.9);
}

.queue-blocked-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.queue-blocked-item p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #3c4a44;
}

.queue-blocked .queue-source {
  display: inline-flex;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #f9cdc2;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #b3402c;
}

.queue-blocked-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0 8px;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff8a70, #dc5549);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(220, 85, 73, 0.28);
}

.queue-lane {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 13px 14px;
  box-shadow: var(--shadow-soft);
}

/* 空泳道降噪:今日无此类任务时收起卡片权重(去玻璃/阴影/描边、压缩留白、弱化徽标、
   隐藏与「0 项」重复的空态段落),让有任务的泳道视觉主导——聚焦该做的那件事。 */
.queue-lane.is-empty {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
  padding: 4px 6px;
}

.queue-lane.is-empty .queue-lane-head {
  margin-bottom: 0;
}

.queue-lane.is-empty .queue-lane-badge {
  opacity: 0.38;
}

.queue-lane.is-empty .queue-lane-empty {
  display: none;
}

.queue-lane-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.queue-lane-badge {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: none;
}

.queue-lane-badge.lane-learn { background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); }
.queue-lane-badge.lane-write { background: linear-gradient(135deg, #3aa0ff, #6e6bff); }
.queue-lane-badge.lane-run { background: linear-gradient(135deg, #8f7bff, #7b61ff); }
.queue-lane-badge.lane-submit { background: linear-gradient(135deg, #1f8f5f, #16878d); }
.queue-lane-badge.lane-review { background: linear-gradient(135deg, #ffb45c, #f2a21a); }

.queue-lane-head strong {
  font-size: 14px;
  font-weight: 800;
}

.queue-lane-head small {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 40, 60, 0.05);
  border-radius: 16px;
  padding: 2px 12px 2px 2px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  min-height: 44px;
}

.queue-item:last-child { margin-bottom: 0; }

.queue-item.is-blocked {
  border-color: rgba(220, 85, 73, 0.45);
  background: rgba(254, 240, 236, 0.85);
}

.queue-item.is-done .queue-item-title {
  color: var(--muted);
  text-decoration: line-through;
}

.queue-check {
  flex: none;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.queue-check-box {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid #bcc9c2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.queue-check.is-checked .queue-check-box {
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  border-color: transparent;
  color: #fff;
}

.queue-item-main {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  border: none;
  background: transparent;
  padding: 6px 0;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}

.queue-item-title {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.queue-item-alert {
  font-size: 18px;
  color: var(--coral-text);
  flex: none;
}

.queue-item small {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.queue-lane-empty {
  margin: 0;
  font-size: var(--cx-text-xs);
  line-height: var(--cx-leading-xs);
  color: var(--muted);
  padding: var(--cx-space-1) var(--cx-space-1);
}

.queue-empty {
  font-size: var(--cx-text-xs);
  line-height: var(--cx-leading-xs);
  color: var(--muted);
  padding: var(--cx-space-1) var(--cx-space-1);
}

.queue-loading {
  display: flex;
  align-items: center;
  gap: var(--cx-space-2);
  padding: var(--cx-space-1);
}

.queue-loading .queue-empty {
  padding: 0;
}

.queue-loading-icon {
  font-size: 20px;
  /* 用 AA 文字变体而非裸 --green,满足 qa_student_text_contrast_a11y(文字用法走 *-text) */
  color: var(--green-text);
  flex: none;
}

/* ===== D2 阶段门禁入口 + 阶段测试视图 · 2026-07-03 ===== */
.stage-gate-entry {
  position: relative;
  z-index: 1;
  margin: 12px 0 4px;
}

.stage-gate-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(243, 240, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1.5px dashed #7b61ff;
  border-radius: 22px;
  padding: 13px 15px;
  box-shadow: var(--shadow-soft);
}

.stage-gate-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #efeaff;
  color: #5a43d8;
  flex: none;
}

.stage-gate-body { flex: 1; min-width: 0; }
.stage-gate-body strong { display: block; font-size: 14px; font-weight: 800; color: #4038c7; }
.stage-gate-body small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.stage-gate-btn {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #8f7bff, #7b61ff);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(123, 97, 255, 0.32);
}

.stage-exam-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}

.stage-exam-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.stage-exam-head h2 { font-size: 20px; font-weight: 800; margin: 2px 0 0; }
.stage-exam-intro { font-size: 12px; color: var(--muted); margin: 5px 0 0; line-height: 1.55; }

.stage-exam-badge {
  flex: none;
  margin-left: auto;
  align-self: center;
  background: #efeaff;
  color: #5a43d8;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}

.stage-exam-questions { display: grid; gap: 10px; }

.stage-exam-question {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  padding: 14px 15px;
  box-shadow: var(--shadow-soft);
}

.stage-exam-prompt { font-size: 14px; font-weight: 600; line-height: 1.55; margin: 0 0 10px; }
.stage-exam-prompt b { color: var(--green-dark); margin-right: 4px; }

.stage-exam-choices { display: grid; gap: 8px; }

.stage-exam-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 40, 60, 0.08);
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 13px;
  color: var(--text);
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.stage-exam-choice:active { transform: scale(0.98); }

.stage-exam-choice-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eef2f0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.stage-exam-choice.is-chosen {
  border-color: var(--green);
  background: rgba(220, 245, 236, 0.85);
}

.stage-exam-choice.is-chosen .stage-exam-choice-mark {
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  color: #fff;
}

.stage-exam-error { font-size: 12px; color: #b3402c; font-weight: 600; }

.stage-exam-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.stage-exam-actions .primary,
.stage-exam-actions .secondary {
  min-height: 44px;
}

.stage-exam-result {
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  padding: 26px 18px;
  box-shadow: var(--shadow);
}

.stage-exam-result .material-symbols-rounded {
  font-size: 44px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  color: #fff;
}

.stage-exam-result.is-pass .material-symbols-rounded { background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); box-shadow: 0 10px 24px rgba(15, 169, 138, 0.32); }
.stage-exam-result.is-fail .material-symbols-rounded { background: linear-gradient(135deg, #ffb45c, #f2a21a); box-shadow: 0 10px 24px rgba(242, 162, 26, 0.3); }

.stage-exam-result h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.stage-exam-score { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.stage-exam-note { font-size: 13px; color: var(--green-dark); }

.stage-exam-makeup {
  text-align: left;
  background: rgba(253, 240, 215, 0.7);
  border: 1px solid #f3dda6;
  border-radius: 18px;
  padding: 13px 15px;
  margin: 12px 0;
}

.stage-exam-makeup strong { display: block; font-size: 13px; font-weight: 800; color: #8a5c08; margin-bottom: 8px; }
.stage-exam-makeup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.stage-exam-makeup li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3c4a44; }
.stage-exam-makeup li .material-symbols-rounded { font-size: 18px; width: auto; height: auto; margin: 0; border-radius: 0; background: none; color: #c77b00; }

.stage-exam-result .stage-exam-actions { justify-content: center; margin-top: 4px; }

@media (max-width: 390px) {
  .stage-gate-card {
    flex-wrap: wrap;
  }

  .stage-gate-btn {
    width: 100%;
  }
}

/* ===== F1 FDE 备考路径 + F3 案例拆解工作台 · 2026-07-04 ===== */
.offer-prep-entry,
.case-workbench-entry {
  position: relative;
  z-index: 1;
  margin: 12px 0 4px;
}

.offer-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(232, 250, 244, 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 13px 15px;
  box-shadow: var(--shadow-soft);
}

.offer-entry-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  color: #fff;
  flex: none;
}

.offer-entry-body { flex: 1; min-width: 0; }
.offer-entry-body strong { display: block; font-size: 14px; font-weight: 800; color: var(--green-dark); overflow-wrap: anywhere; }
.offer-entry-body small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.5; overflow-wrap: anywhere; }

.offer-entry-btn {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 169, 138, 0.32);
}

.queue-source-badge {
  flex: none;
  margin-left: 4px;
  background: rgba(220, 245, 236, 0.9);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

.offer-prep-panel,
.case-workbench-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 4px 0 8px;
}

.offer-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(20, 40, 60, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.offer-prep-hero {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  padding: 15px 16px;
  box-shadow: var(--shadow-soft);
}

.offer-prep-hero h2 { font-size: 20px; font-weight: 800; margin: 2px 0 6px; overflow-wrap: anywhere; }
.offer-positioning { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }

.offer-boundaries { margin-top: 10px; }
.offer-boundaries summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
}
.offer-boundaries summary::before { content: "expand_more"; font-family: "Material Symbols Rounded"; margin-right: 6px; transition: transform 0.15s ease; }
.offer-boundaries[open] summary::before { transform: rotate(180deg); }
.offer-boundaries ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.offer-boundaries li { font-size: 12px; color: var(--muted); line-height: 1.6; padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.offer-boundaries li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); }

.offer-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

.offer-category-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 12px 13px;
  box-shadow: var(--shadow-soft);
}

.offer-category-card strong { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.offer-category-card p { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 6px 0 8px; overflow-wrap: anywhere; }

.offer-evidence-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.offer-evidence-tags span {
  background: rgba(220, 245, 236, 0.9);
  color: var(--green-dark);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
}

.offer-phase-bar { display: grid; gap: 10px; }

.offer-phase {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 12px 13px;
  box-shadow: var(--shadow-soft);
}

.offer-phase.is-active {
  border-color: rgba(25, 217, 138, 0.65);
  background: rgba(25, 217, 138, 0.08); /* 复用既有品牌绿 rgba:当前阶段聚光"你在这" */
  box-shadow: 0 10px 26px rgba(15, 169, 138, 0.18); /* 与 .offer-week-card.is-current 同款抬升 */
}
.offer-phase.is-active .offer-phase-head strong { color: var(--cx-brand-ink); }
.offer-phase.is-done { background: rgba(220, 245, 236, 0.6); } /* 复用既有 banked 绿:已清阶段"已收下" */
.offer-phase.is-done .offer-phase-head small { background: rgba(25, 217, 138, 0.16); border-radius: var(--cx-radius-pill); padding: 2px 8px; }
.offer-phase-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.offer-phase-head strong { font-size: 13px; font-weight: 800; }
.offer-phase-head small { font-size: 11px; font-weight: 700; color: var(--green-dark); }
.offer-phase-track { height: 8px; border-radius: 999px; background: rgba(20, 40, 60, 0.08); margin: 8px 0; overflow: hidden; }
.offer-phase-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); }
.offer-phase p { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 0; overflow-wrap: anywhere; }

.offer-week-list { display: grid; gap: 10px; }

.offer-week-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  padding: 13px 14px;
  box-shadow: var(--shadow-soft);
}

.offer-week-card.is-current {
  border: 1.5px solid rgba(25, 217, 138, 0.8);
  box-shadow: 0 10px 26px rgba(15, 169, 138, 0.18);
}

/* 已过去的周:周号留下"已闯过"痕迹,让 12 周滚动看得见进度轨迹 */
.offer-week-card.is-done .offer-week-no {
  background: rgba(25, 217, 138, 0.16);
  color: var(--green-dark);
}
.offer-week-card.is-done .offer-week-no::before {
  content: "check";
  font-family: "Material Symbols Rounded";
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-size: 13px;
  margin-right: 3px;
  vertical-align: -2px;
}

.offer-week-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer-week-no { flex: none; background: rgba(220, 245, 236, 0.9); color: var(--green-dark); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; }
.offer-week-head strong { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.offer-week-now { margin-left: auto; background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; }
.offer-week-goal { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 7px 0 10px; overflow-wrap: anywhere; }

.offer-week-tasks { display: grid; gap: 7px; }

.offer-week-task {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 40, 60, 0.05);
  border-radius: 16px;
  padding: 8px 8px 8px 10px;
  min-height: 44px;
}

.offer-week-task-body { flex: 1; min-width: 0; }
.offer-week-task-body p { font-size: 12px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.offer-week-task-body small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.offer-task-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 2px;
  padding: 0 4px 0 0;
  border: none;
  background: transparent;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.offer-task-link .material-symbols-rounded { font-size: 15px; }

.offer-queue-btn {
  flex: none;
  min-height: 44px;
  min-width: 78px;
  padding: 0 12px;
  border: 1px solid rgba(25, 217, 138, 0.6);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.offer-queue-btn.is-queued {
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 169, 138, 0.28);
}

.offer-week-submission {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--green-dark);
  line-height: 1.55;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}
.offer-week-submission .material-symbols-rounded { font-size: 16px; flex: none; margin-top: 1px; }

.offer-exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: rgba(243, 240, 255, 0.85);
  border: 1px dashed #7b61ff;
  color: #4038c7;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.offer-exam-badge .material-symbols-rounded { font-size: 16px; flex: none; }

/* --- F3 案例拆解工作台 --- */
.case-picker-grid { display: grid; gap: 10px; }

.case-picker-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  padding: 13px 14px;
  box-shadow: var(--shadow-soft);
}

.case-picker-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-picker-head strong { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.case-difficulty { margin-left: auto; border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 800; background: rgba(220, 245, 236, 0.9); color: var(--green-dark); }
.case-difficulty.extension { background: rgba(243, 240, 255, 0.9); color: #5a43d8; }
.case-picker-card > small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.case-picker-card > p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 7px 0 10px; overflow-wrap: anywhere; }
.case-picker-status { display: inline-block; margin: 0 0 10px; background: rgba(220, 245, 236, 0.9); color: var(--green-dark); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; }
.case-picker-card .offer-entry-btn { width: 100%; }

.case-antipattern-rule {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  background: rgba(254, 240, 236, 0.85);
  border: 1px solid rgba(220, 85, 73, 0.35);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #b3402c;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.case-antipattern-rule .material-symbols-rounded { font-size: 16px; flex: none; margin-top: 1px; }

.case-section-list { display: grid; gap: 10px; }

.case-section-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  padding: 13px 14px;
  box-shadow: var(--shadow-soft);
}

.case-section-card.is-met { border-color: rgba(25, 217, 138, 0.65); }
.case-section-card.is-locked { opacity: 0.72; }

.case-section-head { display: flex; align-items: center; gap: 8px; }
.case-section-index {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.case-section-head strong { font-size: 14px; font-weight: 800; }
.case-section-head small { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.case-section-card.is-met .case-section-head small { color: var(--green-dark); }

.case-section-prompt { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 8px 0 0; overflow-wrap: anywhere; }
.case-section-case-prompt { font-size: 12px; color: var(--green-dark); line-height: 1.6; margin: 6px 0 0; overflow-wrap: anywhere; }

.case-section-input {
  width: 100%;
  min-height: 96px;
  margin-top: 9px;
  border: 1px solid rgba(20, 40, 60, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.case-section-input:focus { outline: 2px solid rgba(25, 217, 138, 0.55); border-color: transparent; }
.case-section-input:disabled { background: rgba(238, 242, 240, 0.8); color: var(--muted); cursor: not-allowed; }

.case-antipattern-warning { font-size: 12px; font-weight: 700; color: #b3402c; line-height: 1.55; margin: 8px 0 0; }
.case-gate-note { font-size: 12px; font-weight: 600; color: #8a5c08; line-height: 1.55; margin: 8px 0 0; }

.case-rubric-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  padding: 13px 14px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
}

.case-rubric-title { font-size: 13px; font-weight: 800; color: var(--green-dark); }
.case-rubric-item { border-top: 1px solid rgba(20, 40, 60, 0.06); padding-top: 10px; }
.case-rubric-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-rubric-head strong { font-size: 13px; font-weight: 800; }
.case-rubric-head small { font-size: 11px; font-weight: 700; color: var(--muted); }
.case-rubric-item p { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 6px 0 0; overflow-wrap: anywhere; }

.case-rubric-self {
  margin-left: auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(25, 217, 138, 0.6);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.case-rubric-self.is-checked { background: linear-gradient(135deg, var(--cx-brand-start), var(--cx-brand-end)); border-color: transparent; color: #fff; }

.case-workbench-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
}

.case-workbench-panel .stage-exam-actions .primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

@media (max-width: 390px) {
  .offer-entry-card { flex-wrap: wrap; }
  .offer-entry-btn { width: 100%; }
  .offer-category-grid { grid-template-columns: 1fr; }
  .offer-week-task { flex-wrap: wrap; }
  .offer-queue-btn { width: 100%; }
  .case-rubric-self { margin-left: 0; width: 100%; }
}

/* ===== F5 Portfolio Builder + F4 客户场景模拟 · 2026-07-04 ===== */
.portfolio-panel, .client-sim-panel {
  position: relative; z-index: 1;
  display: grid; gap: 12px; padding: 4px 0 12px;
}
.portfolio-hint {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  background: rgba(255,255,255,.6); backdrop-filter: blur(14px);
  border: 1px dashed rgba(20,40,60,.16); border-radius: 16px; padding: 12px 14px;
}
.portfolio-material {
  background: var(--surface-glass); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.72); border-radius: 18px; padding: 12px 14px;
}
.portfolio-material-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.portfolio-material-head span { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.portfolio-sections { display: grid; gap: 10px; }
.portfolio-section {
  background: var(--surface-glass); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.72); border-radius: 18px; padding: 13px 14px;
}
.portfolio-section.is-met { border-color: #b6e8d8; }
.portfolio-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.portfolio-section-head strong { font-size: 14px; font-weight: 700; }
.portfolio-section-head span { font-size: 11px; color: var(--muted); }
.portfolio-section.is-met .portfolio-section-head span { color: #0b6b58; font-weight: 600; }
.portfolio-section-prompt { font-size: 12px; color: var(--muted); margin: 5px 0 8px; line-height: 1.5; }
.portfolio-ref-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; margin-bottom: 8px;
  border-radius: 12px; background: #efeaff; color: #5a43d8; font-size: 12px; font-weight: 600; border: 1px solid #dcd2fd;
}
.portfolio-ref-btn .material-symbols-rounded { font-size: 15px; }
.portfolio-section textarea, .client-sim-respond textarea {
  width: 100%; min-height: 72px; border-radius: 12px; border: 1px solid rgba(20,40,60,.12);
  padding: 10px 12px; font-size: 13px; line-height: 1.55; font-family: inherit; background: rgba(255,255,255,.75); resize: vertical;
}
.portfolio-preview {
  background: rgba(220,245,236,.55); border: 1px solid #b6e8d8; border-radius: 18px; padding: 14px 15px;
}
.portfolio-preview h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.portfolio-preview-row { padding: 7px 0; border-top: 1px solid rgba(20,40,60,.08); }
.portfolio-preview-row:first-of-type { border-top: 0; }
.portfolio-preview-row strong { display: block; font-size: 12px; color: #0b6b58; }
.portfolio-preview-row p { font-size: 13px; line-height: 1.55; margin-top: 2px; }
.portfolio-note { margin-top: 10px; font-size: 11px; color: var(--muted); }

.client-sim-picker { display: grid; gap: 10px; }
.client-sim-dialog { display: grid; gap: 8px; }
.client-sim-bubble {
  background: var(--surface-glass); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.72); border-radius: 16px; border-top-left-radius: 4px; padding: 11px 13px;
}
.client-sim-bubble.is-client { background: rgba(243,240,255,.62); border-color: #dcd2fd; }
.client-sim-who { display: inline-block; font-size: 10px; font-weight: 700; color: #5a43d8; margin-bottom: 4px; }
.client-sim-bubble p { font-size: 13px; line-height: 1.6; }
.client-sim-respond { display: grid; gap: 8px; }
.client-sim-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.client-sim-actions .secondary.small { min-height: 44px; }
.client-sim-done { font-size: 12px; color: #0b6b58; font-weight: 600; align-self: center; }
.client-sim-hints { font-size: 12px; color: var(--muted); background: rgba(255,255,255,.55); border-radius: 12px; padding: 8px 12px; }
.client-sim-hints summary { font-weight: 600; cursor: pointer; }
.client-sim-hints ul, .client-sim-evidence ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.client-sim-rubric { display: grid; gap: 6px; }
.client-sim-rubric > strong { font-size: 13px; font-weight: 700; }
.client-sim-evidence {
  background: rgba(253,240,215,.5); border: 1px solid #f3dda6; border-radius: 16px; padding: 11px 13px; font-size: 12px;
}
.client-sim-evidence > strong { font-size: 13px; color: #8a5c08; }

/* ===== D3 能力雷达真值(服务端聚合分)· 2026-07-04 ===== */
.capability-radar-truth {
  margin: 12px 0; padding: 14px 15px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(25,217,138,.10), rgba(15,185,181,.08));
  border: 1px solid rgba(15,185,181,.28);
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.capability-radar-source { font-size: 11px; color: #0f8f78; font-weight: 600; }
.capability-radar-overall {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 12px;
}
.capability-radar-score {
  font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--cx-brand-ink); font-variant-numeric: tabular-nums;
}
.capability-radar-overall-meta { display: flex; flex-direction: column; gap: 2px; }
.capability-radar-overall-meta span { font-size: 13px; font-weight: 600; color: #0b5a54; }
.capability-radar-overall-meta small { font-size: 11px; color: #4f7a74; }
.capability-radar-axes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.capability-radar-axis { display: flex; flex-direction: column; gap: 5px; }
.capability-radar-axis-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.capability-radar-axis-label { font-size: 13px; font-weight: 600; color: #123c38; }
.capability-radar-axis-status {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.65); color: #35635d;
}
.capability-radar-axis-status .material-symbols-rounded { font-size: 14px; }
.capability-radar-axis[data-status="ready"] .capability-radar-axis-status { color: #0f8f78; background: rgba(25,217,138,.18); }
.capability-radar-axis[data-status="blocked"] .capability-radar-axis-status { color: #b4451f; background: rgba(214,109,58,.16); }
.capability-radar-axis[data-status="idle"] .capability-radar-axis-status { color: #6b6f6e; }
.capability-radar-bar {
  position: relative; height: 20px; border-radius: 999px; overflow: hidden;
  background: rgba(15,60,56,.10); display: flex; align-items: center;
}
.capability-radar-bar-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: linear-gradient(90deg, var(--cx-brand-start), var(--cx-brand-end)); border-radius: 999px;
  transition: width .35s ease;
}
.capability-radar-axis[data-status="blocked"] .capability-radar-bar-fill {
  background: linear-gradient(90deg, #e6a15a, #d66d3a);
}
.capability-radar-bar-score {
  position: relative; margin-left: auto; padding-right: 9px; font-size: 11px; font-weight: 700;
  color: #0b3b37; font-variant-numeric: tabular-nums;
}
.capability-radar-note { margin-top: 10px; font-size: 11px; }

/* ===== G2 全站离线状态 banner(body 独立元素,断网常驻顶部)· 2026-07-12 ===== */
.network-status-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cx-touch); padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--cx-brand-ink); color: #fff;
  font-size: 13px; font-weight: 600; text-align: center;
  box-shadow: 0 2px 12px rgba(11,90,84,.30);
}
.network-status-banner[hidden] { display: none; }
.network-status-banner .material-symbols-rounded { font-size: 18px; }

/* ===== F6 公司定向面试准备 · 2026-07-04 ===== */
.targeted-prep-view, .onboarding-sim-view { padding: 4px 2px 24px; display: flex; flex-direction: column; gap: 14px; }
.targeted-prep-head h2, .onboarding-sim-head h2 { margin: 4px 0 6px; font-size: 20px; }
.targeted-prep-banner, .onboarding-sim-banner {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: rgba(25,217,138,.10); border: 1px solid rgba(15,185,181,.26);
}
.targeted-prep-banner .material-symbols-rounded, .onboarding-sim-banner .material-symbols-rounded { color: #0f8f78; }
.targeted-prep-banner ul, .onboarding-sim-banner ul { margin: 5px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.targeted-prep-banner li, .onboarding-sim-banner li { font-size: 12px; color: #2f5a55; }
.targeted-prep-banner small { display: block; margin-top: 5px; font-size: 11px; color: #4f7a74; }
.targeted-prep-chips, .onboarding-sim-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.targeted-prep-chip {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(15,60,56,.16); background: rgba(255,255,255,.7); color: #2f5a55; min-height: var(--cx-touch);
}
.targeted-prep-chip.active { background: linear-gradient(120deg,var(--cx-brand-start),var(--cx-brand-end)); color: #fff; border-color: transparent; }
.targeted-prep-detail { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(15,60,56,.1); }
.targeted-prep-jd { font-size: 13px; line-height: 1.6; color: #234; }
.targeted-prep-subtitle { font-size: 12px; font-weight: 700; color: #0b5a54; display: block; margin-bottom: 6px; }
.targeted-prep-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.targeted-prep-tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: rgba(15,185,181,.12); color: #0b5a54; }
.targeted-prep-tag.ghost { background: rgba(15,60,56,.07); color: #3a5a56; }
.targeted-prep-checklist ul, .targeted-prep-pitfalls ul, .targeted-prep-diff ul, .targeted-prep-cross ul,
.onboarding-sim-exit ul, .onboarding-sim-readiness ul {
  margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px;
}
.targeted-prep-checklist li, .targeted-prep-pitfalls li, .targeted-prep-diff li, .targeted-prep-cross li,
.onboarding-sim-exit li, .onboarding-sim-readiness li { font-size: 12px; line-height: 1.5; color: #2f4a47; }
.targeted-prep-task, .onboarding-sim-task { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(15,60,56,.08); }
.targeted-prep-lane {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #0b5a54; background: rgba(25,217,138,.18);
}
.targeted-prep-task-body p, .onboarding-sim-task .targeted-prep-task-body p { margin: 0; font-size: 13px; line-height: 1.5; color: #223; }
.targeted-prep-task-body small { font-size: 11px; color: #6b8a86; }
.targeted-prep-cross, .targeted-prep-tools { padding: 13px 14px; border-radius: 16px; background: rgba(253,240,215,.4); border: 1px solid #f0e2bf; }
.targeted-prep-cross strong, .targeted-prep-tools strong { display: block; margin-bottom: 8px; font-size: 13px; color: #8a5c08; }
.targeted-prep-tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
.targeted-prep-tool-row .secondary { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }

/* ===== F9 入职 90 天模拟 · 2026-07-04 ===== */
.onboarding-sim-tab {
  flex: 1 1 92px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(15,60,56,.16);
  background: rgba(255,255,255,.7); color: #2f5a55; min-height: 48px;
}
.onboarding-sim-tab strong { font-size: 14px; }
.onboarding-sim-tab small { font-size: 11px; color: #6b8a86; }
.onboarding-sim-tab.active { background: linear-gradient(120deg,var(--cx-brand-start),var(--cx-brand-end)); color: #fff; border-color: transparent; }
.onboarding-sim-tab.active small { color: rgba(255,255,255,.85); }
.onboarding-sim-milestone-goal { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.6); border: 1px solid rgba(15,60,56,.1); }
.onboarding-sim-milestone-goal > p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #223; }
.onboarding-sim-weeks { display: flex; flex-direction: column; gap: 12px; }
.onboarding-sim-week { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(15,60,56,.1); display: flex; flex-direction: column; gap: 9px; }
.onboarding-sim-week-head strong { font-size: 14px; color: #123c38; }
.onboarding-sim-scenario { margin: 0; font-size: 12px; line-height: 1.6; color: #33514d; }
.onboarding-sim-signals { margin-top: 2px; }
.onboarding-sim-reflection { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; color: #6b6108; background: rgba(253,240,215,.5); padding: 8px 10px; border-radius: 12px; }
.onboarding-sim-reflection .material-symbols-rounded { font-size: 16px; color: #b8890c; }
.onboarding-sim-readiness { padding: 13px 14px; border-radius: 16px; background: rgba(25,217,138,.08); border: 1px solid rgba(15,185,181,.22); }
.onboarding-sim-readiness strong { display: block; margin-bottom: 8px; font-size: 13px; color: #0b5a54; }


/* ===== Phase 3 · 「我的」证书/作品墙/月卡(确认版 · 2026-07-04)===== */
/* ============================================================
   Phase 3 · 学生端「我的」页 — 证书 / 作品墙 / 月卡
   自包含,仅依赖 Phase 1 :root token(--cx-glass-card* / --amber /
   --coral / --purple / --accent / --ink-weak / --muted / --text /
   --cx-radius-* / --cx-touch)。状态永不纯色:色 + 图标(markup 内
   .material-symbols-rounded)+ 文案三者必配。390px 无横向溢出。
   ============================================================ */

/* ---- 分区标题(证书与作品 / 会员,复用) ---- */
/* ============================================================
   B. 两类证书卡  .cx-cert-*
   ============================================================ */
.cx-cert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cx-cert-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  min-height: var(--cx-touch);
  border-radius: 20px;
  background: var(--cx-glass-card);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--cx-glass-card-border);
  box-shadow: var(--shadow-soft);
}

/* 未解锁态:去玻璃、降透明、锁形中性色,不制造焦虑 */
.cx-cert-card.is-locked {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: none;
  opacity: 0.72;
}

.cx-cert-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cx-cert-icon .material-symbols-rounded {
  font-size: 23px;
  color: #fff;
  font-variation-settings: 'FILL' 1;
}

/* 基础营证书:琥珀→珊瑚暖色渐变(已获成就感) */
.cx-cert-icon.is-basecamp {
  background: linear-gradient(135deg, var(--amber), var(--coral));
}

/* 项目作品证书:未解锁,中性灰 + 锁形 */
.cx-cert-icon.is-locked {
  background: #e7ebe9;
}

.cx-cert-icon.is-locked .material-symbols-rounded {
  font-size: 22px;
  color: #b4bdb7;
  font-variation-settings: 'FILL' 0;
}

.cx-cert-body {
  flex: 1;
  min-width: 0;
}

.cx-cert-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.cx-cert-card.is-locked .cx-cert-title {
  color: #6b7770;
}

.cx-cert-desc {
  font-size: 11.5px;
  color: var(--ink-weak);
  margin-top: 2px;
  line-height: 1.4;
}

.cx-cert-card.is-locked .cx-cert-desc {
  color: #a0a8a3;
}

/* 状态徽标:色 + 图标 + 文案(与 StatusPill 语义一致) */
.cx-cert-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cx-cert-status .material-symbols-rounded {
  font-size: 13px;
}

/* 待复核私有:琥珀 warning 系(等待,不是错误) */
.cx-cert-status.is-pending {
  background: #fdf0d7;
  color: #8a5c08;
  border-color: #f3dda6;
}

/* 未解锁:中性锁定,不用红 */
.cx-cert-status.is-locked {
  background: #eef2f0;
  color: #68736d;
  border-color: #dfe6e2;
}

/* 合规边界说明(证书与作品共用尾注) */
.cx-cert-note {
  margin: 9px 4px 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9aa39d;
}

/* ============================================================
   C. 作品墙  .cx-workwall-*
   ============================================================ */
/* 作品墙详情:匿名证据卡(别名 + hash,无真实身份/代码) */
.cx-workwall-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: var(--cx-glass-card);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--cx-glass-card-border);
  box-shadow: var(--shadow-soft);
}

.cx-workwall-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cx-workwall-alias {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.cx-workwall-alias .material-symbols-rounded {
  font-size: 15px;
  color: var(--ink-weak);
}

.cx-workwall-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}

/* hash 短码:等宽,弱化,可截断不撑破 390px */
.cx-workwall-hash {
  font-size: 11px;
  color: var(--ink-weak);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 状态徽标:色 + 图标 + 文案 */
.cx-workwall-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.cx-workwall-status .material-symbols-rounded {
  font-size: 13px;
}

/* 私有(默认) */
.cx-workwall-status.is-private {
  background: #eef2f0;
  color: #68736d;
  border-color: #dfe6e2;
}

/* 隐私说明尾注 */
.cx-workwall-note {
  margin: 9px 4px 0;
  font-size: 11px;
  line-height: 1.5;
  color: #9aa39d;
}

/* ============================================================
   D. 小白月卡(草案)  .cx-membership-*
   ============================================================ */
.cx-membership-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(10, 12, 24, 0.22);
  color: #fff;
  isolation: isolate;
}

.cx-membership-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, #1b1d2c, #3a2f52);
}

.cx-membership-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -20px;
  width: 130px;
  height: 130px;
  z-index: -1;
  border-radius: 50%;
  background: var(--purple);
  filter: blur(40px);
  opacity: 0.55;
}

.cx-membership-inner {
  position: relative;
  padding: 18px;
}

.cx-membership-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cx-membership-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 900;
}

.cx-membership-title .material-symbols-rounded {
  font-size: 22px;
  color: #f2c879;
  font-variation-settings: 'FILL' 1;
}

/* 草案·未开通 徽标:半透白中性,不用「立即开通」诱导色 */
.cx-membership-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.cx-membership-badge .material-symbols-rounded {
  font-size: 13px;
}

.cx-membership-benefits {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cx-membership-benefit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.cx-membership-benefit .material-symbols-rounded {
  font-size: 16px;
  color: #f2c879;
  flex: none;
  margin-top: 1px;
}

.cx-membership-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.cx-membership-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.cx-membership-price-num {
  font-size: 20px;
  font-weight: 900;
}

/* 备案前:仅「了解详情」,不出现收款按钮;44px 触控 */
.cx-membership-cta {
  min-height: var(--cx-touch);
  height: var(--cx-touch);
  padding: 0 18px;
  border-radius: 13px;
  background: #fff;
  color: #1b1d2c;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.14s ease;
}

.cx-membership-cta:active {
  transform: scale(0.96);
}

/* 合规边界尾注:不承诺收益/就业/接单 */
.cx-membership-note {
  margin: 12px 4px 4px;
  font-size: 11px;
  line-height: 1.5;
  color: #9aa39d;
  text-align: center;
}

/* ===== W4 留存面:连续学习 streak + 首日保底 + 班级里程碑(复用品牌/玻璃/状态令牌,不碰 cx-tokens 冻结区) ===== */
.retention-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
}

.retention-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.retention-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--cx-brand-ink);
}

.retention-panel-title .material-symbols-rounded {
  font-size: 18px;
}

.retention-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid var(--cx-glass-card-border);
  border-radius: var(--cx-radius-pill);
  background: var(--cx-glass-card);
  color: var(--cx-brand-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.retention-loading,
.retention-empty {
  background: var(--cx-glass-card);
  border: 1px solid var(--cx-glass-card-border);
  border-radius: 22px;
  padding: var(--cx-space-4);
  font-size: var(--cx-text-xs);
  line-height: 1.55;
  color: #3c4a44;
  box-shadow: var(--shadow-soft);
}

.retention-empty {
  display: grid;
  gap: var(--cx-space-3);
  justify-items: start;
}

.retention-empty .retention-refresh-btn {
  min-height: var(--cx-touch);
  padding: 0 16px;
}

.retention-streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cx-glass-card);
  border: 1px solid var(--cx-glass-card-border);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.retention-flame {
  display: grid;
  justify-items: center;
  min-width: 68px;
  padding: 8px 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffb347, #ff7a45);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 122, 69, 0.28);
}

.retention-streak-card.status-broken .retention-flame {
  background: linear-gradient(135deg, #cfd8d3, #9aa39d);
  box-shadow: none;
}
/* 濒断态保留暖色余烬(沿用点亮态渐变),仅收起成就辉光 → 传递"还烧着、今天别断"的紧迫,而非与已断连相同的灰冷"已结束"。 */
.retention-streak-card.status-at_risk .retention-flame {
  box-shadow: none;
}

.retention-flame .material-symbols-rounded {
  font-size: 26px;
}

.retention-flame strong {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.retention-flame small {
  font-size: 10px;
  opacity: 0.92;
}

.retention-streak-meta {
  display: grid;
  gap: 4px;
}

.retention-streak-status {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.retention-streak-status.status-active,
.retention-streak-status.status-recovered {
  color: var(--cx-status-ready);
}

.retention-streak-status.status-at_risk {
  color: var(--cx-status-blocked);
}

.retention-streak-status.status-broken {
  color: var(--cx-status-idle);
}

.retention-streak-next {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-brand-ink-soft);
}

.retention-streak-hint {
  margin: 0;
  font-size: 11px;
  color: #6b7570;
}

/* 里程碑进度轨:大数字讲"现在",这根 4px 细线讲"快到了",合成前进牵引。tint 沿用 retention 既有绿(与 chip 同值),不新增硬编码色。 */
.retention-streak-track {
  height: 4px;
  margin-top: 2px;
  border-radius: var(--cx-radius-pill);
  background: rgba(15, 143, 120, 0.12);
  overflow: hidden;
}
.retention-streak-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cx-brand-gradient);
  transition: width var(--cx-motion-base) var(--cx-ease-emphasized);
}
.retention-streak-card.status-broken .retention-streak-fill {
  background: var(--cx-status-idle);
}

.retention-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.retention-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--cx-radius-pill);
  background: rgba(15, 143, 120, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-brand-ink);
}

.retention-dayone-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.retention-dayone-card .material-symbols-rounded {
  font-size: 22px;
  margin-top: 2px;
}

.retention-dayone-card strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.retention-dayone-card p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.retention-dayone-card.is-won {
  background: var(--cx-status-ready-bg);
  border: 1px solid rgba(15, 143, 120, 0.28);
  color: var(--cx-brand-ink);
}

.retention-dayone-card.is-pending {
  background: var(--cx-glass-card);
  border: 1px solid var(--cx-glass-card-border);
  color: #33413b;
}

.retention-dayone-card.is-pending .material-symbols-rounded {
  color: var(--cx-brand-ink-soft);
}

.retention-dayone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cx-touch);
  margin-top: 9px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: var(--cx-brand-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 185, 181, 0.24);
}

.retention-cohort-card {
  background: var(--cx-glass-card);
  border: 1px solid var(--cx-glass-card-border);
  border-radius: 22px;
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.retention-cohort-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.retention-cohort-head strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--cx-brand-ink);
}

.retention-cohort-phase {
  padding: 2px 9px;
  border-radius: var(--cx-radius-pill);
  background: rgba(15, 143, 120, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-brand-ink);
}

.retention-cohort-signal {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-brand-ink-soft);
}

.retention-milestone-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.retention-milestone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 60, 56, 0.1);
}

.retention-milestone.is-empty {
  justify-content: flex-start;
  font-size: 12px;
  color: #6b7570;
}

.retention-milestone-kind {
  font-size: 12px;
  font-weight: 700;
  color: #33413b;
}

.retention-milestone-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6b7570;
}

.retention-milestone-sla {
  padding: 1px 8px;
  border-radius: var(--cx-radius-pill);
  background: var(--cx-status-ready-bg);
  color: var(--cx-status-ready);
  font-weight: 700;
}

.retention-milestone.sla-due_soon .retention-milestone-sla {
  background: rgba(214, 109, 58, 0.16);
  color: var(--cx-status-blocked);
}

.retention-milestone.sla-breached .retention-milestone-sla {
  background: var(--cx-status-blocked-bg);
  color: var(--cx-status-blocked);
}

.retention-milestone-rate {
  font-weight: 700;
  color: var(--cx-brand-ink-soft);
}

/* 屏读专用可视隐藏(骨架屏加载态保留语义文案给 aria-live) */
.cx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 轻量骨架屏:加载态以卡片轮廓占位替代空白/纯文字。shimmer 收尾在屏外,
   reduced-motion 下由全局守卫定格为静态灰条,不触发前庭不适。 */
.cx-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(20, 40, 60, 0.08);
  border-radius: var(--cx-radius-sm);
}
.cx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: cx-skeleton-shimmer 1.35s var(--cx-ease-standard) infinite;
}
@keyframes cx-skeleton-shimmer {
  to { transform: translateX(100%); }
}

.retention-loading.is-skeleton {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cx-skeleton-flame {
  flex: none;
  width: 68px;
  height: 58px;
  border-radius: 18px;
}
.cx-skeleton-lines {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.cx-skeleton-line {
  height: 12px;
  width: 100%;
}
.cx-skeleton-line.is-short {
  width: 62%;
}

/* 留存达成的克制强调:一次性 pop,收尾即静止态 → reduced-motion 下定格为无动画。 */
@keyframes cx-flame-pop {
  0% { transform: scale(0.86); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.retention-streak-card.status-active .retention-flame,
.retention-streak-card.status-recovered .retention-flame {
  animation: cx-flame-pop 0.5s var(--cx-ease-emphasized) both;
}
@keyframes cx-badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.retention-dayone-card.is-won .material-symbols-rounded {
  animation: cx-badge-pop 0.46s var(--cx-ease-emphasized) both;
}

/* 统一的按压/悬停反馈:令牌化时长缓动,触屏按压即时缩放(reduced-motion 下无位移仅态变)。 */
.retention-dayone-btn,
.retention-refresh-btn {
  transition: transform var(--cx-motion-fast) var(--cx-ease-standard),
    box-shadow var(--cx-motion-base) var(--cx-ease-standard),
    filter var(--cx-motion-base) var(--cx-ease-standard);
}
.retention-dayone-btn:active,
.retention-refresh-btn:active {
  transform: scale(0.97);
}
@media (hover: hover) {
  .retention-dayone-btn:hover {
    filter: brightness(1.04);
  }
}

/* 账号中心只消费服务端 HttpOnly 会话，不把身份、验证码或注销状态写入本机学习状态。 */
.account-center-panel {
  display: grid;
  gap: 18px;
  padding-bottom: 32px;
}

.account-center-toolbar,
.account-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.account-center-toolbar {
  justify-content: space-between;
}

.account-center-hero,
.account-security-section {
  border: 1px solid rgba(22, 92, 69, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(20, 66, 51, 0.06);
}

.account-center-hero {
  padding: clamp(22px, 5vw, 36px);
  background: linear-gradient(145deg, rgba(222, 248, 237, 0.9), rgba(255, 255, 255, 0.96));
}

.account-center-hero h1 {
  margin: 0;
  font-size: 32px;
}

.account-center-hero p:last-child,
.account-boundary-copy {
  color: #52645e;
  line-height: 1.75;
}

.account-security-section {
  padding: clamp(18px, 4vw, 28px);
}

.account-center-live:empty {
  display: none;
}

.account-info-message,
.account-success-message,
.account-error-message,
.account-worker-warning,
.account-empty-note {
  margin: 0;
  padding: 13px 15px;
  border-radius: 14px;
  line-height: 1.6;
}

.account-info-message,
.account-empty-note {
  color: #455d54;
  background: #edf4f0;
}

.account-success-message {
  color: #0e654a;
  background: #e4f7ee;
}

.account-error-message,
.account-worker-warning {
  color: #8b2f27;
  background: #fff0ed;
}

.account-identity-list,
.account-native-reauth-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.account-identity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid #dce9e3;
  border-radius: 16px;
  background: #fbfdfc;
}

.account-identity-card p,
.account-identity-card small {
  display: block;
  margin: 4px 0 0;
  color: #62736c;
}

.account-protected-label {
  color: #65766f;
  font-size: 13px;
  font-weight: 750;
}

.account-reauth-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.account-reauth-form label,
.account-delete-reason {
  display: grid;
  gap: 7px;
  color: #25342f;
  font-weight: 750;
}

.account-reauth-form input,
.account-delete-reason textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #cbded5;
  border-radius: 13px;
  color: #17201c;
  background: #fff;
  font: inherit;
}

.account-reauth-form input:focus,
.account-delete-reason textarea:focus {
  outline: 3px solid rgba(26, 151, 111, 0.2);
  border-color: #16805f;
}

.account-reauth-form .account-inline-actions,
.account-reauth-form > small {
  grid-column: 1 / -1;
}

.account-native-reauth-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.account-native-reauth-list small {
  color: inherit;
  opacity: 0.75;
}

.danger-button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #b7463d;
  border-radius: 13px;
  color: #fff;
  background: #a93b33;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.account-delete-status {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.account-delete-status div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #e3ece7;
}

.account-delete-status dt {
  color: #65766f;
}

.account-delete-status dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-delete-reason {
  margin: 16px 0;
}

.account-delete-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0;
  color: #4d5f58;
  line-height: 1.55;
}

.account-delete-ack input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.account-delete-submit {
  width: 100%;
}

.p0-badge.warning {
  color: #8b3c12;
  background: #ffeddc;
}

@media (max-width: 620px) {
  .account-identity-card,
  .account-reauth-form {
    grid-template-columns: 1fr;
  }

  .account-reauth-form .account-inline-actions,
  .account-reauth-form > small {
    grid-column: auto;
  }

  .account-inline-actions > button {
    flex: 1 1 150px;
  }
}

/* ============================================================
   Wave-1 学生端体验抛光 · 2026-08-01(纯增量覆盖:不改 cx-tokens 冻结块,
   不动 QA 钉死值——44px 触控 / 底导 5 列 / 壳宽 420px / 泳道渐变 / 翻转卡
   动效 / 抽屉 blur(14px);全文禁 vw 字号与负字距;动效由文末
   prefers-reduced-motion 守卫统一降级,位移类反馈在守卫附段归零)
   ============================================================ */

/* W1-① 焦点可见:在既有 3px 不透明品牌墨 outline(对比度 ≥3:1,审计 R10)之外
   叠一层 --cx-focus-ring 柔和光环,键盘导航既有硬保证也有 Apple 式软反馈。 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--cx-focus-ring);
}

/* W1-② 全站按钮微交互:令牌化时长/缓动;按压即时 scale(0.98) 回弹,
   悬停细微提亮。类级规则(如 .stage-exam-choice / .retention-dayone-btn)
   优先级更高,既有定制反馈不受此元素级默认值影响。 */
button {
  transition:
    transform var(--cx-duration-fast) var(--cx-ease-standard),
    box-shadow var(--cx-duration-base) var(--cx-ease-standard),
    filter var(--cx-duration-base) var(--cx-ease-standard),
    background-color var(--cx-duration-fast) var(--cx-ease-standard),
    color var(--cx-duration-fast) var(--cx-ease-standard);
}

button:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  button:not(:disabled):hover {
    filter: brightness(1.03);
  }
}

/* W1-③ 数字读数统一 tabular-nums:进度环/指标/价格/里程碑百分比跳表不错位。 */
.daily-ring span,
.study-mini-metrics strong,
.meter strong,
.quota-tier strong,
.quota-tier dd,
.commercial-plan-head strong,
.retention-milestone-rate,
.capability-radar-score {
  font-variant-numeric: tabular-nums;
}

/* W1-④ 抽屉/浮层:背景淡入,与 .student-ai-drawer 的 spring 入场配对。 */
.student-ai-drawer-backdrop {
  animation: cx-fade-in var(--cx-duration-base) var(--cx-ease-standard);
}

@keyframes cx-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* W1-⑤ 卡片层级:默认 --cx-shadow-sm 轻投影,桌面悬停抬升 2px + --cx-shadow-md,
   过渡全令牌化;移动端无 hover,不引入额外重绘。类级既有抬升(如 .offer-week-card.is-current)
   优先级更高,不受影响。 */
.commercial-plan-card,
.quota-tier,
.module-card,
.case-section-card,
.offer-week-card,
.portfolio-material,
.advisor-scenario-card,
.advisor-draft-card,
.fde-week-card-list article,
.invite-reward-grid article {
  box-shadow: var(--cx-shadow-sm);
  transition:
    transform var(--cx-duration-base) var(--cx-ease-standard),
    box-shadow var(--cx-duration-base) var(--cx-ease-standard),
    border-color var(--cx-duration-fast) var(--cx-ease-standard);
}

@media (hover: hover) {
  .commercial-plan-card:hover,
  .quota-tier:hover,
  .module-card:hover,
  .case-section-card:hover,
  .offer-week-card:hover,
  .portfolio-material:hover,
  .advisor-scenario-card:hover,
  .advisor-draft-card:hover,
  .fde-week-card-list article:hover,
  .invite-reward-grid article:hover {
    transform: translateY(-2px);
    box-shadow: var(--cx-shadow-md);
  }
}

/* W1-⑥ 浮层最高层级:海报预览抽屉用 --cx-shadow-lg,与 AI 抽屉同一 elevation 语义。 */
.poster-preview-sheet {
  box-shadow: var(--cx-shadow-lg);
}

/* W1-⑦ 字阶三级体系:视图 hero=xl(20/28) bold、分区/卡片头=lg(17/24) semibold、
   卡片题=base(15/22) semibold;配合正文 sm(13/18) 与辅助 xs(12/16),替代散落的
   14/17/18/19/20/22px 与 800/900 字重,形成稳定的标题/正文/辅助三层。 */
.commercial-hero h2,
.delivery-hero h2,
.gallery-hero h2,
.offer-prep-hero h2,
.stage-exam-head h2,
.stage-exam-result h2,
.targeted-prep-head h2,
.onboarding-sim-head h2,
.daily-queue-panel .section-title h2 {
  font-size: var(--cx-text-xl);
  line-height: var(--cx-leading-xl);
  font-weight: var(--cx-font-bold);
}

.student-ai-drawer-head h2,
.commercial-compact h2,
.profile-hero-card h2,
.profile-growth-card h3,
.profile-checkin-card h3,
.profile-certificate-card h3,
.profile-portfolio-card h3,
.profile-membership-card h3 {
  font-size: var(--cx-text-lg);
  line-height: var(--cx-leading-lg);
  font-weight: var(--cx-font-semibold);
}

.commercial-plan-head h3,
.portfolio-card-head h3,
.portfolio-preview h3,
.fde-ops-card h3,
.feed-row h3,
.bootcamp-day-card h3,
.wrong-review-card h3 {
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-base);
  font-weight: var(--cx-font-semibold);
}

/* W1-⑧ 会员转化面 premium 抛光:推荐档(季卡)通栏 + 品牌渐变顶条 + 「推荐」胶囊角标 +
   --cx-shadow-md 常驻抬升;价格排版 2xl(推荐档)/xl(常规档)+ tabular-nums(M1 已挂),
   常规半栏卡用 xl 避免长价格带草案文案三行折叠。 */
.commercial-plan-card {
  position: relative;
}

.commercial-plan-head strong {
  font-size: var(--cx-text-xl);
  line-height: var(--cx-leading-xl);
  font-weight: var(--cx-font-bold);
}

.commercial-plan-card.recommended {
  grid-column: 1 / -1;
  background:
    linear-gradient(180deg, rgba(25, 217, 138, 0.09), rgba(15, 185, 181, 0.04) 46%, rgba(255, 255, 255, 0) 100%),
    #fff;
  box-shadow: var(--cx-shadow-md);
}

.commercial-plan-card.recommended::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cx-space-5);
  right: var(--cx-space-5);
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--cx-brand-gradient);
}

.commercial-plan-card.recommended .commercial-plan-head strong {
  font-size: var(--cx-text-2xl);
  line-height: var(--cx-leading-2xl);
}

.commercial-plan-badge {
  position: absolute;
  top: calc(-1 * var(--cx-space-2));
  right: var(--cx-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--cx-space-2);
  border-radius: var(--cx-radius-pill);
  background: var(--cx-brand-gradient);
  color: #fff;
  font-size: var(--cx-text-xs);
  line-height: 1;
  font-weight: var(--cx-font-bold);
  box-shadow: var(--cx-shadow-sm);
}

/* 额度档价格读数提为 lg/bold,与方案卡价格同一族。 */
.quota-tier strong {
  font-size: var(--cx-text-lg);
  line-height: var(--cx-leading-lg);
  font-weight: var(--cx-font-bold);
}

/* 无障碍:尊重系统「减少动态效果」偏好,避免前庭不适(审计 R10)。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Wave-1 附段:位移/缩放类按压与悬停反馈在减动效下整体归零,仅保留态变。 */
  button:active,
  .commercial-plan-card:hover,
  .quota-tier:hover,
  .module-card:hover,
  .case-section-card:hover,
  .offer-week-card:hover,
  .portfolio-material:hover,
  .advisor-scenario-card:hover,
  .advisor-draft-card:hover,
  .fde-week-card-list article:hover,
  .invite-reward-grid article:hover {
    transform: none;
  }
}