/* === 设计契约 v1（蓝方案）：全站唯一颜色令牌块。第二处旧 :root（暖色/近黑覆盖）已废除并入此块。 === */
:root {
  --ink: #1F2A44;
  --ink-2: #3D4B6B;
  --muted: #5A6B87;
  --paper: #FFFFFF;
  --paper-2: #F2F6FC;
  --panel: #FFFFFF;
  --line: #D9E2F0;
  --line-2: #E8EEF7;
  --brand: #0056D2;
  --brand-dark: #0043A8;
  --brand-soft: #EAF1FD;
  --player: #101B33;
  --cover-1: #EAF1FD;
  --cover-2: #E7F0EA;
  --cover-3: #EFEEFA;
  --cover-4: #FDF1E7;
  --cover-5: #F5F6F8;
  --success: #147a4b;
  --success-soft: #e8f5ed;
  --warning: #a45c00;
  --warning-soft: #fff3dd;
  --danger: #b42318;
  --danger-soft: #feeceb;
  --focus: #0056D2;
  --guide-card-mid: #16305C;
  --guide-card-glow: rgba(120, 168, 255, .55);
  --guide-card-glow-2: rgba(0, 86, 210, .45);
  --guide-card-shadow: rgba(0, 86, 210, .14);
  --scrim: rgba(16, 27, 51, .34);
  --on-dark-soft: rgba(255, 255, 255, .68);
  --header-bg: rgba(255, 255, 255, .92);
  --wash: 242, 246, 252;
  --brand-line: rgba(0, 86, 210, .18);
  --shadow: 0 18px 50px rgba(31, 42, 68, .10);
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 34px;
  --header: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
img, video { max-width: 100%; }

/* Consent has to stay reachable to be valid, but it must not compete with the page: a small
   corner card instead of a full-width slab, with compact controls. */
.privacy-banner {
  position: fixed; z-index: 9500; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 14px;
  max-width: 440px; padding: 11px 13px 11px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255,255,255,.94);
  box-shadow: 0 6px 18px rgba(31,42,68,.1); backdrop-filter: blur(8px);
  font-size: 12px; line-height: 1.5;
}
.privacy-banner p { margin: 0; color: var(--muted); }
.privacy-banner p button { border: 0; padding: 0; background: transparent; color: var(--brand); text-decoration: underline; cursor: pointer; font-size: 12px; }
.privacy-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.privacy-banner .btn { min-height: 0; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; }
@media (max-width: 680px) {
  .privacy-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 9px 11px; gap: 10px; font-size: 11px; }
  .privacy-banner p button { font-size: 11px; }
  .privacy-banner .btn { padding: 7px 11px; font-size: 11px; }
  /* 手机上同意卡和底部 WhatsApp 按钮都固定在屏幕底边，不给它们排序就会落在同一条上：
     实测两者 bottom 都是 10px、高 53px 与 54px，同意卡把按钮**整个盖住**，访客点不到。
     卡片占那条边（它必须先被回答），按钮按卡片自己的高度往上让；高度由 render() 量好放进
     --privacy-banner-height，因为卡片文字在窄屏会多折一行（320px 宽时 70px，375px 宽时 53px），
     写死数字在窄屏上会重新压回去。页脚再把这整条的高度留出来，否则页面最后一行永远被压在下面。 */
  body.has-privacy-banner .mobile-cta { bottom: calc(var(--privacy-banner-height, 53px) + 20px); }
  body.has-mobile-cta:not(.has-privacy-banner) .site-footer { padding-bottom: 74px; }
  body.has-privacy-banner .site-footer { padding-bottom: calc(var(--privacy-banner-height, 53px) + 24px); }
  body.has-privacy-banner.has-mobile-cta .site-footer { padding-bottom: calc(var(--privacy-banner-height, 53px) + 88px); }
}

:focus-visible {
  outline: 3px solid rgba(28, 110, 172, .34);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  left: 16px;
  top: -80px;
  padding: 10px 14px;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(760px, calc(100% - 48px)); margin: 0 auto; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 4.9vw, 68px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.lead { max-width: 620px; color: var(--ink-2); font-size: 18px; }
.kicker { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -.02em;
}
.brand-seal {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: var(--brand);
  border-radius: 9px 9px 9px 3px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.08em;
}
.brand small { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header);
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px);
}
.site-header.scrolled { border-color: var(--line); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 28px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a, .nav-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.site-nav a:hover, .nav-link:hover { color: var(--brand); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.locale-switcher { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .03em; }
.locale-switcher button { min-width: 28px; padding: 5px 2px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; }
.locale-switcher button:hover, .locale-switcher button.active { color: var(--brand); }
.locale-switcher button.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.icon-btn.menu-toggle { display: none; }

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--brand); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; }
.btn-soft { color: var(--brand-dark); background: var(--brand-soft); border-color: transparent; }
.btn-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.btn-sm { min-height: 36px; padding: 7px 11px; font-size: 13px; }
.btn-lg { min-height: 52px; padding: 13px 22px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .46; cursor: not-allowed; transform: none; }
.price-tbc { display: inline-block; font-family: var(--font-sans); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.icon-btn {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  cursor: pointer;
}
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.hero {
  min-height: calc(100svh - var(--header));
  padding: 38px 0 42px;
  overflow: hidden;
}
.hero-grid { display: grid; min-height: calc(100svh - 154px); align-items: center; grid-template-columns: minmax(0, .9fr) minmax(530px, 1.1fr); gap: 48px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .lead { margin: 26px 0 30px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proof-line { display: flex; margin-top: 28px; color: var(--muted); font-size: 13px; gap: 18px; flex-wrap: wrap; }
.proof-line span { display: inline-flex; align-items: center; gap: 7px; }
.proof-line i { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }
.hero-trust { max-width: 570px; margin: 16px 0 0; padding-left: 12px; color: var(--muted); border-left: 2px solid var(--line); font-size: 12px; }
.hero-reassurance { display: grid; gap: 5px; max-width: 570px; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: 12px; background: var(--brand-soft); }
.hero-reassurance span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.hero-reassurance .icon { width: 16px; height: 16px; color: var(--brand); }
.hero-reassurance small { color: var(--muted); line-height: 1.55; }
.trust-strip-section { padding-top: 34px; padding-bottom: 34px; }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 22px 22px 22px 0; }
.trust-strip-item + .trust-strip-item { padding-left: 22px; border-left: 1px solid var(--line); }
.trust-strip-icon, .deliverable-num { color: var(--brand); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.trust-strip-item strong { display: block; font-size: 14px; }
.trust-strip-item p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.deliverable-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.deliverable-card { min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.deliverable-card h3 { margin: 26px 0 9px; font-size: 17px; }
.deliverable-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px; }
.deliverable-card small { display: inline-block; margin-top: 20px; color: var(--brand); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.readiness-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 88px; align-items: start; }
.readiness-list { border-top: 1px solid var(--line); }
.readiness-list article { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.readiness-list article > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; }
.readiness-list strong { font-size: 15px; }
.readiness-list p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.product-stage {
  position: relative;
  min-height: 620px;
  padding: 34px;
  overflow: hidden;
  background: #26322c;
  border-radius: 32px 32px 32px 8px;
  box-shadow: var(--shadow);
}
.stage-browser { position: relative; z-index: 2; overflow: hidden; background: #fff; border-radius: 17px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.browser-bar { display: flex; height: 40px; align-items: center; gap: 6px; padding: 0 14px; background: #f1eee9; border-bottom: 1px solid #ded9d0; }
.browser-bar i { width: 8px; height: 8px; background: #bcb5aa; border-radius: 50%; }
.browser-address { width: 42%; height: 7px; margin-left: 10px; background: #d9d3c9; border-radius: 8px; }
.lesson-demo { display: grid; min-height: 410px; grid-template-columns: 1fr 162px; }
.lesson-screen { position: relative; display: grid; place-items: center; overflow: hidden; background: #eadfce; }
.bookcase { position: absolute; inset: 0; opacity: .76; background-image: linear-gradient(#8b684f 1px, transparent 1px), linear-gradient(90deg, #8b684f 1px, transparent 1px); background-size: 100% 72px, 72px 100%; }
.lesson-light { position: absolute; right: 14%; top: 15%; width: 110px; height: 180px; border-radius: 60% 60% 15px 15px; background: rgba(255, 244, 211, .72); }
.instructor-card { position: relative; width: 58%; height: 78%; background: transparent; }
.instructor-head { position: absolute; z-index: 2; top: 9%; left: 34%; width: 32%; aspect-ratio: 1; background: #c99b77; border: 8px solid #3e322c; border-radius: 50% 50% 45% 45%; box-shadow: 0 9px 18px rgba(70,49,35,.18); }
.instructor-body { position: absolute; right: 5%; bottom: 0; left: 5%; height: 61%; background: #6d7b74; border-radius: 48% 48% 16px 16px; box-shadow: 0 15px 38px rgba(81, 53, 33, .18); }
.lesson-caption { position: absolute; z-index: 3; right: 20px; bottom: 18px; left: 20px; padding: 10px 14px; color: #fff; background: rgba(24,32,28,.86); border-radius: 8px; font-size: 13px; text-align: center; }
.lesson-caption strong { margin-right: 7px; color: #BBD2F7; font-family: var(--font-display); font-size: 20px; }
.lesson-outline { padding: 22px 16px; background: #fff; border-left: 1px solid var(--line-2); }
.outline-label { margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.outline-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; font-size: 11px; line-height: 1.35; }
.outline-dot { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; color: var(--muted); background: var(--paper-2); border-radius: 50%; font-size: 9px; }
.outline-item.active .outline-dot { color: #fff; background: var(--brand); }
.outline-item.active { color: var(--brand-dark); font-weight: 750; }
.stage-foot { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; }
.stage-progress { width: 48%; height: 6px; overflow: hidden; background: #ece8e2; border-radius: 999px; }
.stage-progress span { display: block; width: 38%; height: 100%; background: var(--brand); }
.stage-chip { padding: 5px 9px; color: var(--success); background: var(--success-soft); border-radius: 999px; font-size: 10px; font-weight: 800; }
.floating-note { position: absolute; z-index: 3; right: 16px; bottom: 26px; width: 210px; padding: 16px; background: #fff; border-radius: 14px 14px 14px 3px; box-shadow: var(--shadow); }
.floating-note strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 18px; }
.floating-note p { margin: 0; color: var(--muted); font-size: 12px; }
.floating-seal { position: absolute; z-index: 1; top: 36px; right: 30px; color: rgba(255,255,255,.11); font-family: var(--font-display); font-size: 110px; line-height: 1; }

.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }
.section-white { background: #fff; }
.section-dark { color: #fff; background: var(--ink); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.section-head p { max-width: 520px; margin: 0; color: var(--muted); }
.section-dark .section-head p { color: #b8c0bb; }

.friction-layout { display: grid; align-items: start; grid-template-columns: .82fr 1.18fr; gap: 90px; }
.friction-intro { position: sticky; top: 118px; }
.friction-intro .lead { margin: 22px 0; font-size: 16px; }
.text-link { display: inline-flex; align-items: center; padding: 8px 0; color: var(--brand-dark); border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; gap: 8px; font-weight: 800; }
.text-link .icon { width: 16px; }
.friction-list { border-top: 1px solid var(--line); }
.friction-list article { display: grid; min-height: 175px; align-items: start; grid-template-columns: 64px 1fr; padding: 28px 0; border-bottom: 1px solid var(--line); gap: 24px; }
.friction-list article > span { color: var(--brand); font-family: var(--font-display); font-size: 26px; }
.friction-list h3 { max-width: 570px; margin: 0 0 8px; font-family: var(--font-display); font-size: 27px; font-weight: 500; line-height: 1.15; }
.friction-list p { max-width: 530px; margin: 0; color: var(--muted); }

.lesson-anatomy { background: var(--paper-2); }
.lesson-timeline { display: grid; grid-template-columns: 1.3fr .9fr .8fr; gap: 12px; }
.timeline-card { display: flex; min-height: 300px; flex-direction: column; justify-content: space-between; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.timeline-card.timeline-primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.timeline-card.timeline-end { background: var(--brand-soft); }
.timeline-time { font-family: var(--font-display); font-size: 38px; line-height: 1; }
.timeline-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 27px; font-weight: 500; line-height: 1.1; }
.timeline-card p { margin: 0; color: var(--muted); }
.timeline-primary p { color: rgba(255,255,255,.75); }

.learning-proof-layout { display: grid; align-items: center; grid-template-columns: .82fr 1.18fr; gap: 78px; }
.learning-proof-copy > p:not(.eyebrow) { max-width: 500px; color: #b8c0bb; }
.proof-checks { display: grid; margin: 28px 0 32px; padding: 0; list-style: none; gap: 12px; }
.proof-checks li { display: flex; align-items: center; color: #e2e7e4; gap: 10px; }
.proof-checks li::before { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; color: var(--ink); background: #fff; border-radius: 50%; content: "✓"; font-size: 11px; font-weight: 900; }
.learning-center-card { overflow: hidden; color: var(--ink); background: #f7f8f6; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.lc-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: #fff; border-bottom: 1px solid #e3e7e4; }
.lc-brand { font-weight: 850; }
.lc-welcome { min-height: 310px; padding: 42px 36px; color: #fff; background: #2a3931; }
.lc-welcome small { color: #b9c6bf; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lc-welcome h3 { margin: 58px 0 8px; font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1; }
.lc-meta { display: flex; margin-bottom: 12px; color: #bdc7c1; font-size: 12px; gap: 20px; }
.lc-progress { height: 6px; margin-bottom: 22px; overflow: hidden; background: rgba(255,255,255,.16); border-radius: 999px; }
.lc-progress span { display: block; width: 32%; height: 100%; background: #fff; }
.lc-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e1e6e2; }
.lc-bottom article { display: flex; align-items: center; padding: 22px; background: #fff; gap: 12px; }
.lc-bottom strong, .lc-bottom small { display: block; }
.lc-bottom small { color: var(--muted); }
.lc-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--brand); border-radius: 10px; font-family: var(--font-display); }

.preview-proof-layout { display: grid; align-items: center; grid-template-columns: 1.05fr .95fr; gap: 82px; }
.preview-board-card { position: relative; display: grid; min-height: 500px; align-content: center; justify-items: center; overflow: hidden; color: #fff; background: var(--player); border-radius: 28px 28px 28px 7px; box-shadow: var(--shadow); }
.preview-board-card::before { position: absolute; width: 340px; height: 340px; background: rgba(0,86,210,.18); border-radius: 50%; content: ""; filter: blur(2px); }
.preview-label { position: absolute; z-index: 2; top: 22px; left: 24px; padding: 7px 10px; color: #d7dfda; background: rgba(255,255,255,.08); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.preview-hanzi, .preview-pinyin, .preview-meaning { position: relative; z-index: 2; }
.preview-hanzi { font-family: var(--font-display); font-size: 138px; line-height: .9; }
.preview-pinyin { margin-top: 14px; color: #BBD2F7; font-size: 20px; letter-spacing: .12em; }
.preview-meaning { color: #c4cec8; }
.preview-track { position: absolute; right: 24px; bottom: 22px; left: 24px; height: 5px; overflow: hidden; background: rgba(255,255,255,.18); border-radius: 999px; }
.preview-track span { display: block; width: 42%; height: 100%; background: var(--brand); }
.preview-proof-copy .lead { font-size: 16px; }
.trust-note { display: grid; margin: 26px 0; padding: 17px 18px; background: var(--paper); border-left: 3px solid var(--success); gap: 3px; }
.trust-note span { color: var(--muted); font-size: 13px; }

.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fit-card { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.fit-card.fit-positive { color: #fff; background: #26342d; border-color: #26342d; }
.fit-label { display: block; margin-bottom: 24px; font-family: var(--font-display); font-size: 28px; }
.fit-card ul { display: grid; margin: 0; padding: 0; list-style: none; gap: 14px; }
.fit-card li { display: flex; gap: 10px; }
.fit-card li::before { color: var(--brand); content: "—"; font-weight: 900; }
.fit-positive li::before { color: #8FBCF5; content: "✓"; }

.support-layout { display: grid; align-items: start; grid-template-columns: .75fr 1.25fr; gap: 74px; }
.support-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-card { display: flex; min-height: 340px; flex-direction: column; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.support-card.human-support { background: #fff; }
.support-mark { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; background: var(--ink); border-radius: 12px; font-size: 12px; font-weight: 900; }
.human-support .support-mark { background: var(--brand); }
.support-card h3 { margin: 38px 0 10px; font-family: var(--font-display); font-size: 27px; font-weight: 500; }
.assistant-usage-card { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.assistant-usage-card h3 { margin:4px 0 0; }
.assistant-usage-grid { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:16px; width:min(100%,360px); }
.assistant-usage-grid div { display:flex; flex-direction:column; gap:3px; }
.assistant-usage-grid strong { font-size:25px; }
.assistant-usage-grid span,.assistant-usage-grid small { color:var(--muted); }
.support-card p { margin: 0 0 26px; color: var(--muted); }
.support-card .btn { margin-top: auto; }

.evidence-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.evidence-main, .evidence-side { min-height: 420px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.evidence-main { display: flex; flex-direction: column; justify-content: space-between; background: var(--paper-2); }
.evidence-side { display: grid; background: #fff; gap: 18px; }
.evidence-block { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--paper); border-radius: 16px; }
.evidence-number { color: var(--brand); font-family: var(--font-display); font-size: 62px; line-height: 1; }
.evidence-copy h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.evidence-copy p { margin: 0; color: var(--ink-2); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.steps-five { grid-template-columns: repeat(5, 1fr); }
.step { min-height: 230px; padding: 26px 26px 26px 0; border-right: 1px solid rgba(255,255,255,.14); }
.step + .step { padding-left: 26px; }
.step:last-child { border-right: 0; }
.step-num { display: inline-grid; width: 32px; height: 32px; margin-bottom: 52px; place-items: center; color: var(--ink); background: #fff; border-radius: 50%; font-size: 12px; font-weight: 850; }
.step h3 { margin: 0 0 8px; font-size: 18px; }
.step p { margin: 0; color: #adb8b1; font-size: 14px; }

.pricing-grid { display: grid; align-items: stretch; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-card { position: relative; display: flex; min-height: 420px; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.price-card.recommended { border: 2px solid var(--brand); box-shadow: 0 16px 40px rgba(0,86,210,.13); }
.price-badge { position: absolute; top: 16px; right: 16px; padding: 5px 9px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.price-card h3 { margin: 16px 0 4px; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.price { margin: 22px 0 18px; font-family: var(--font-display); font-size: 58px; letter-spacing: -.05em; line-height: 1; }
.price sup { margin-right: 2px; font-family: var(--font-sans); font-size: 16px; font-weight: 800; vertical-align: 25px; }
.price-card ul { margin: 6px 0 26px; padding: 0; list-style: none; }
.price-card li { display: flex; gap: 9px; margin: 10px 0; color: var(--ink-2); font-size: 14px; }
.price-card li::before { content: "✓"; color: var(--success); font-weight: 900; }
.price-card .btn { margin-top: auto; }
.pending-copy { color: var(--warning); background: var(--warning-soft); border-radius: 8px; padding: 8px 10px; font-size: 12px; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 22px 0; border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-size: 21px; text-align: left; }
.faq-answer { display: none; max-width: 720px; padding: 0 0 24px; color: var(--ink-2); }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question svg { transform: rotate(45deg); }

.final-cta { display: grid; min-height: 420px; align-content: center; justify-items: center; padding: 64px; color: #fff; background: var(--brand); border-radius: 30px 30px 30px 6px; text-align: center; }
.final-cta h2 { max-width: 760px; margin: 0 0 28px; font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.final-cta > p:not(.eyebrow) { max-width: 560px; margin: -12px 0 26px; color: rgba(255,255,255,.78); }
.final-cta .btn { color: var(--ink); background: #fff; border-color: #fff; }
.final-cta .btn-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,.55); }
.final-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.site-footer { padding: 56px 0 30px; color: #b3bcb6; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .6fr); gap: 40px; }
.footer-title { margin-bottom: 14px; color: #fff; font-weight: 800; }
.footer-links { display: grid; gap: 10px; }
.footer-links button { padding: 0; color: #b3bcb6; border: 0; background: none; cursor: pointer; text-align: left; }
.footer-links button:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; }

.page-hero { padding: 82px 0 54px; }
.page-hero-grid { display: grid; align-items: end; grid-template-columns: 1fr 360px; gap: 60px; }
.breadcrumb { display: flex; margin-bottom: 25px; color: var(--muted); font-size: 13px; gap: 8px; }
.course-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { padding: 22px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact strong { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500; }
.fact span { color: var(--muted); font-size: 12px; }
.course-layout { display: grid; grid-template-columns: 1fr 360px; gap: 46px; }
.sticky-card { position: sticky; top: 100px; align-self: start; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.curriculum { border-top: 1px solid var(--line); }
.curriculum-row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.curriculum-row .lock { color: var(--muted); }

.preview-shell { min-height: calc(100svh - var(--header)); padding: 34px 0 60px; background: var(--paper-2); }
.preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.preview-player { position: relative; min-height: 560px; overflow: hidden; background: var(--player); border-radius: 18px; }
.preview-content { position: absolute; inset: 0; display: grid; place-items: center; }
.preview-board { text-align: center; color: #fff; }
.preview-board .hanzi { display: block; font-family: var(--font-display); font-size: clamp(90px, 16vw, 190px); line-height: .9; }
.preview-board .pinyin { display: block; margin-top: 12px; color: #BBD2F7; font-size: 22px; letter-spacing: .12em; }
.preview-board .english { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 15px; }
/* 取签名播放地址最长要几秒（实测 0.97–5.78s），这段时间要有可见反馈。 */
.preview-loading .preview-loading-ring { display: block; width: 46px; height: 46px; margin: 0 auto 18px; border: 3px solid rgba(187,210,247,.28); border-top-color: #BBD2F7; border-radius: 50%; animation: preview-loading-spin .8s linear infinite; }
@keyframes preview-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-loading .preview-loading-ring { animation-duration: 2.4s; } }
/* Measured defect: this rule had `position:absolute` but no offsets at all, so
   the button fell back to its static position and parked in the top-left corner
   of the media box (x:1, y:1 inside a 992x600 player -- 457px and 261px away
   from centre). Both hosts it is used in (`.preview-player`, `.lesson-video`)
   are `position:relative`, so pinning all four offsets and letting the auto
   margins centre it lands the overlay correctly in either one. */
.play-trigger { position: absolute; inset: 0; width: 76px; height: 76px; margin: auto; z-index: 3; display: grid; place-items: center; color: var(--brand); background: #fff; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,.24); }
.preview-progress { position: absolute; z-index: 4; right: 20px; bottom: 18px; left: 20px; height: 5px; overflow: hidden; background: rgba(255,255,255,.2); border-radius: 99px; }
.preview-progress span { display: block; width: 0; height: 100%; background: #fff; transition: width 1s linear; }
.preview-counter { position: absolute; z-index: 5; top: 16px; right: 16px; padding: 7px 10px; color: #fff; background: rgba(0,0,0,.45); border-radius: 8px; font-size: 12px; }
.unlock-layer { position: absolute; z-index: 8; inset: 0; display: none; align-content: center; justify-items: center; padding: 40px; color: #fff; background: rgba(19,25,22,.94); text-align: center; }
.unlock-layer.show { display: grid; }
.unlock-layer h2 { max-width: 540px; margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(34px, 5vw, 56px); font-weight: 500; line-height: 1; }
.unlock-layer p { max-width: 520px; margin: 0 0 24px; color: #c2ccc6; }
.unlock-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.preview-sidebar { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.side-head { padding: 20px; border-bottom: 1px solid var(--line-2); }
.lesson-list { padding: 8px; }
.lesson-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 11px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; }
.lesson-row:hover { background: var(--paper); }
.lesson-row.active { background: var(--brand-soft); }
.lesson-row.locked-row { grid-template-columns: 28px 1fr 18px; }
.lesson-row.locked-row:hover { color: var(--brand-dark); background: var(--brand-soft); }
.locked-arrow { display: inline-grid; color: var(--brand); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.lesson-row.locked-row:hover .locked-arrow, .lesson-row.locked-row:focus-visible .locked-arrow { opacity: 1; transform: translateX(0); }
.lesson-index { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--muted); background: var(--paper-2); border-radius: 50%; font-size: 11px; }
.lesson-row.active .lesson-index { color: #fff; background: var(--brand); }
.lesson-row strong { display: block; font-size: 13px; }
.lesson-row small { color: var(--muted); }

.auth-page { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; overflow: hidden; color: #fff; background: var(--ink); }
.auth-character { color: rgba(255,255,255,.08); font-family: var(--font-display); font-size: min(38vw, 520px); line-height: .75; }
.auth-quote { position: relative; z-index: 2; max-width: 530px; }
.auth-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
.auth-panel { display: grid; align-content: center; justify-items: center; padding: 44px; }
.auth-form { width: min(430px, 100%); }
.auth-form h1 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 42px; font-weight: 500; }
.form-group { margin: 18px 0; }
.form-group label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(28,110,172,.12); outline: none; }
.form-help { margin-top: 6px; color: var(--muted); font-size: 12px; }
.form-error { margin-top: 7px; color: var(--danger); font-size: 12px; }
.form-group .form-error { display: none; }
.form-group.invalid .input { border-color: var(--danger); }
.form-group.invalid .form-error { display: block; }
.password-rules { display: grid; margin: 15px 0; padding: 14px; background: var(--paper); border-radius: 9px; gap: 7px; font-size: 12px; }
.rule.ok { color: var(--success); }

.learn-shell { min-height: 100svh; background: #f4f5f3; }
.learn-header { position: sticky; z-index: 30; top: 0; display: flex; height: 68px; align-items: center; justify-content: space-between; padding: 0 28px; background: #fff; border-bottom: 1px solid #e1e5e2; }
.learn-nav { display: flex; gap: 22px; }
.learn-nav button { padding: 8px 0; color: var(--muted); border: 0; background: none; cursor: pointer; font-weight: 700; }
.learn-nav button.active { color: var(--ink); border-bottom: 2px solid var(--brand); }
.learn-header-actions { display: flex; align-items: center; gap: 16px; }
.learn-main { width: min(1240px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 64px; }
.learn-welcome { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; gap: 20px; }
.learn-welcome h1 { margin: 0; font-family: var(--font-display); font-size: 43px; font-weight: 500; }
.learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.panel { background: #fff; border: 1px solid #e1e5e2; border-radius: 14px; }
.panel-pad { padding: 24px; }
.continue-card { position: relative; min-height: 330px; padding: 30px; overflow: hidden; color: #fff; background: #29352f; border-radius: 16px; }
.continue-card::after { position: absolute; right: -22px; bottom: -80px; color: rgba(255,255,255,.07); content: "学"; font-family: var(--font-display); font-size: 300px; line-height: 1; }
.continue-card > * { position: relative; z-index: 2; }
.continue-card h2 { max-width: 600px; margin: 58px 0 10px; font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1.05; }
.continue-meta { display: flex; margin-bottom: 22px; color: #bdc7c1; gap: 12px; font-size: 13px; }
.progress-line { height: 7px; overflow: hidden; background: #e8ebe9; border-radius: 999px; }
.progress-line span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.learning-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; gap: 12px; }
.stat-mini { padding: 18px; background: #fff; border: 1px solid #e1e5e2; border-radius: 12px; }
.stat-mini strong { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.stat-mini span { color: var(--muted); font-size: 12px; }
.assistant-card { display: flex; min-height: 210px; flex-direction: column; padding: 22px; color: #fff; background: var(--brand); border-radius: 14px; }
.assistant-card h3 { margin: 18px 0 6px; font-family: var(--font-display); font-size: 27px; font-weight: 500; }
.assistant-card p { margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: 13px; }
.assistant-card .btn { margin-top: auto; color: var(--brand-dark); background: #fff; border-color: #fff; }
.recent-list { padding: 10px 0 0; }
.recent-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #ecefeb; gap: 10px; }
.recent-item:last-child { border-bottom: 0; }

.path-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }
.level-list { position: sticky; top: 92px; align-self: start; padding: 10px; }
.level-btn { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; }
.level-btn.active { background: var(--brand-soft); }
.level-badge { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--ink); border-radius: 9px; font-size: 12px; font-weight: 800; }
.level-btn.active .level-badge { background: var(--brand); }
.module { margin-bottom: 14px; overflow: hidden; background: #fff; border: 1px solid #e1e5e2; border-radius: 13px; }
.module-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid #edf0ed; }
.module-lesson { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 15px 20px; border-bottom: 1px solid #edf0ed; gap: 12px; }
.module-lesson:last-child { border-bottom: 0; }

.lesson-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.lesson-video { position: relative; display: grid; min-height: 520px; place-items: center; overflow: hidden; color: #fff; background: #202923; border-radius: 14px; }
.lesson-media { width: 100%; height: 100%; min-height: 520px; object-fit: contain; background: #101613; }
/* The Stream provider renders playback in an embedded player iframe. It keeps
   the same box as the video element but supplies its own chrome. */
.lesson-media-embed { display: block; border: 0; }
.lesson-video .hanzi { font-family: var(--font-display); font-size: clamp(100px, 16vw, 190px); }
.video-controls { position: absolute; right: 18px; bottom: 16px; left: 18px; display: flex; align-items: center; gap: 12px; }
.video-controls .progress-line { flex: 1; background: rgba(255,255,255,.2); }
.lesson-tabs { display: flex; margin-top: 18px; border-bottom: 1px solid #dfe4e0; gap: 24px; }
.lesson-tabs button { padding: 13px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-weight: 700; }
.lesson-tabs button.active { color: var(--brand); border-color: var(--brand); }
.lesson-notes { padding: 22px 0; }
.lesson-notes h2 { font-family: var(--font-display); font-size: 31px; font-weight: 500; }
.char-table { width: 100%; border-collapse: collapse; }
.char-table td { padding: 13px 0; border-bottom: 1px solid #e7ebe8; }
.char-table td:first-child { width: 80px; font-family: var(--font-display); font-size: 28px; }

.quiz-shell { width: min(780px, calc(100% - 36px)); margin: 0 auto; padding: 36px 0 70px; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.quiz-card { padding: 36px; background: #fff; border: 1px solid #dfe4e0; border-radius: 16px; }
.quiz-card h1 { margin: 0 0 28px; font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.option { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 14px; border: 1px solid #d9dedb; border-radius: 9px; cursor: pointer; }
.option-list { max-height: 260px; overflow: auto; padding-right: 2px; }
.option:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.option input { width: 18px; height: 18px; accent-color: var(--brand); }
.selection-summary { padding: 13px 14px; color: var(--ink); background: #f5f7f6; border: 1px solid var(--line); border-radius: 9px; font-weight: 750; }
.program-config-modal { width: min(820px, calc(100vw - 32px)); }
.program-config-modal .modal-head { align-items: flex-start; }
.program-config-modal .modal-head h2 { margin: 2px 0 5px; }
.program-config-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.program-config-section:first-of-type { padding-top: 4px; }
.program-config-section:last-child { border-bottom: 0; }
.program-config-heading { display: flex; align-items: flex-start; margin-bottom: 14px; gap: 12px; }
.program-config-heading > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; font-size: 12px; font-weight: 850; }
.program-config-heading h3 { margin: 1px 0 4px; font-size: 16px; }
.program-config-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.program-config-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.program-config-option { position: relative; display: flex; min-height: 68px; align-items: center; padding: 13px 46px 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.program-config-option:hover { border-color: #b9c3bd; }
.program-config-option:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.program-config-option input { position: absolute; opacity: 0; pointer-events: none; }
.program-config-option span { min-width: 0; }
.program-config-option strong,.program-config-option small { display: block; }
.program-config-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.program-config-option small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.program-config-option > i { position: absolute; right: 14px; display: grid; width: 23px; height: 23px; place-items: center; color: transparent; border: 1px solid #cbd2ce; border-radius: 7px; }
.program-config-option > i svg { width: 14px; height: 14px; }
.program-config-option:has(input:checked) > i { color: #fff; background: var(--brand); border-color: var(--brand); }
.program-config-empty { min-height: 92px; }
/* 审核弹窗里学员交上来的原文：可能是长网址，必须能换行，不能把弹窗撑破。 */
.practical-evidence { max-height: 220px; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.quiz-actions { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }
.result-score { margin: 16px 0; color: var(--success); font-family: var(--font-display); font-size: 76px; line-height: 1; }

.certificate { width: min(900px, 100%); margin: 0 auto; padding: 62px; background: #fff; border: 10px solid var(--paper-2); outline: 1px solid var(--line); outline-offset: -22px; text-align: center; }
.certificate .seal-large { display: grid; width: 74px; height: 74px; margin: 0 auto 30px; place-items: center; color: #fff; background: var(--brand); border-radius: 14px 14px 14px 4px; font-family: var(--font-display); font-size: 28px; }
.certificate h1 { font-family: var(--font-display); font-size: 46px; font-weight: 500; }
.certificate-name { margin: 28px 0 12px; font-family: var(--font-display); font-size: 34px; }
.certificate-note { max-width: 620px; margin: 32px auto 0; color: var(--muted); font-size: 12px; }

.admin-shell { min-height: 100svh; background: #f5f6f5; }
.admin-sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: 224px; padding: 18px 14px; overflow-y: auto; background: #fff; border-right: 1px solid #e0e4e1; }
.admin-brand { padding: 4px 7px 20px; }
.admin-context { margin: 5px 6px 16px; padding: 11px; background: #f2f4f2; border-radius: 8px; }
.admin-context strong { display: block; font-size: 12px; }
.admin-context small { color: var(--muted); }
.admin-nav-group { margin: 18px 0; }
.admin-nav-label { margin: 0 10px 7px; color: #9aa19d; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-nav-hint { margin: -2px 10px 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.admin-nav-group-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 0 0 7px; padding: 0 10px; color: #6f7773; border: 0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-align: left; text-transform: uppercase; }
.admin-nav-group-toggle:hover { color: var(--ink); }
.admin-nav-group-toggle i { font-size: 15px; font-style: normal; line-height: 1; transition: transform .16s ease; }
.admin-nav-group.is-collapsed .admin-nav-group-toggle i { transform: rotate(-90deg); }
.admin-nav-group.is-collapsed .admin-nav-items { display: none; }
.admin-nav button { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px; padding: 8px 10px; color: #555f59; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 13px; text-align: left; }
.admin-nav button:hover { color: var(--ink); background: #f5f6f5; }
.admin-nav button.active { color: var(--brand-dark); background: var(--brand-soft); font-weight: 750; }
.admin-nav button svg { width: 17px; height: 17px; }
.admin-main { margin-left: 224px; }
.admin-topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(255,255,255,.94); border-bottom: 1px solid #e0e4e1; backdrop-filter: blur(14px); }
.admin-topbar-left { display: flex; align-items: center; gap: 12px; }
.admin-topbar h1 { margin: 0; font-size: 17px; font-weight: 700; }
.admin-content { padding: 28px; }
.admin-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 20px; }
.admin-page-head h2 { margin: 0 0 3px; font-size: 22px; }
.admin-page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { padding: 18px; background: #fff; border: 1px solid #e0e4e1; border-radius: 10px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.kpi-value { margin: 18px 0 3px; font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.kpi-link { padding: 0; color: var(--brand); border: 0; background: none; cursor: pointer; font-size: 11px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; margin-top: 14px; }
.admin-grid, .admin-grid > *, .admin-panel { min-width: 0; }
.admin-panel { background: #fff; border: 1px solid #e0e4e1; border-radius: 10px; }
.admin-panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border-bottom: 1px solid #e7eae8; }
.admin-panel-head h3 { margin: 0; font-size: 14px; }
.admin-start-guide { margin-bottom: 14px; overflow: hidden; }
.admin-start-guide .admin-panel-head { align-items: center; gap: 16px; }
.admin-start-guide .admin-panel-head > div { min-width: 0; }
.admin-start-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.admin-start-steps li { min-height: 104px; padding: 18px; border-right: 1px solid #e7eae8; }
.admin-start-steps li:last-child { border-right: 0; }
.admin-start-steps strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 12px; }
.admin-start-steps span { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.admin-start-steps li .btn { margin-top: 10px; }
.admin-start-note { margin: 0; padding: 12px 18px; border-top: 1px solid #e7eae8; }
.commission-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 16px; }
.settings-status { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 20px 22px; color: #fff; background: #18201c; border-radius: 11px; }
.settings-status h3 { margin: 11px 0 2px; font-size: 19px; }
.settings-status p { margin: 0; color: #bfc8c3; font-size: 13px; }
.settings-version { min-width: 96px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.16); text-align: right; }
.settings-version span { display: block; color: #aeb8b2; font-size: 11px; }
.settings-version strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.settings-form .panel-pad { padding: 22px; }
.settings-side { display: grid; align-content: start; gap: 14px; }
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 16px; background: #f5f7f5; border: 1px solid #e1e5e2; border-radius: 9px; cursor: pointer; }
.setting-toggle strong, .setting-toggle small { display: block; }
.setting-toggle small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.setting-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.setting-toggle i { position: relative; width: 44px; height: 24px; flex: 0 0 auto; background: #c8cfcb; border-radius: 999px; transition: background .18s ease; }
.setting-toggle i::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; content: ''; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .18s ease; }
.setting-toggle input:checked + i { background: var(--success); }
.setting-toggle input:checked + i::after { transform: translateX(20px); }
.setting-toggle:has(input:focus-visible) { outline: 3px solid rgba(28, 110, 172, .34); outline-offset: 3px; }
.settings-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.scope-list { display: grid; gap: 13px; }
.scope-list span { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13px; }
.scope-list svg { color: var(--success); }
.link-preview { padding: 12px; overflow-wrap: anywhere; color: #385247; background: #eef4f0; border: 1px solid #d8e4dc; border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; }
.showcase-template-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:18px; margin-top:18px; align-items:start; }
.showcase-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.showcase-template-card { display:grid; grid-template-columns:96px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:4px 12px; align-items:center; padding:12px; color:var(--ink); background:#fff; border:1px solid #dfe4e1; border-radius:11px; cursor:pointer; text-align:left; }
.showcase-template-card:hover,.showcase-template-card.selected { border-color:#8eaea0; box-shadow:0 8px 24px rgba(28,55,45,.08); }
.showcase-template-card.selected { outline:3px solid rgba(64,125,98,.13); }
.showcase-template-card strong { font-size:13px; }
.showcase-template-card small { color:var(--muted); font-size:11px; }
.showcase-template-card .status { grid-column:3; grid-row:1 / span 2; }
.showcase-template-art { position:relative; display:block; grid-row:1 / span 2; width:96px; height:64px; overflow:hidden; background:#263f35; border-radius:7px; }
.showcase-template-art i,.showcase-template-art b,.showcase-template-art em { position:absolute; display:block; content:''; border-radius:99px; }
.showcase-template-art i { top:10px; left:10px; width:26px; height:26px; background:#e9b458; }
.showcase-template-art b { top:14px; left:44px; width:38px; height:6px; background:#fff; }
.showcase-template-art em { top:28px; left:44px; width:28px; height:4px; background:rgba(255,255,255,.54); }
.showcase-template-art.style-02 { background:#473b72; }.showcase-template-art.style-03 { background:#934239; }.showcase-template-art.style-04 { background:#244a67; }.showcase-template-art.style-05 { background:#765020; }.showcase-template-art.style-06 { background:#3f3f3f; }.showcase-template-art.style-07 { background:#315e59; }.showcase-template-art.style-08 { background:#713d58; }.showcase-template-art.style-09 { background:#445b2e; }.showcase-template-art.style-10 { background:#824a28; }
.dual-promotion-note { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.dual-promotion-note > div { padding:17px 18px; background:#fff; border:1px solid #e0e4e1; border-radius:10px; }
.dual-promotion-note strong { display:block; margin:10px 0 4px; font-size:15px; }.dual-promotion-note p { margin:0; color:var(--muted); font-size:12px; }
.locked-field-list { display:grid; gap:10px; color:var(--ink-2); font-size:13px; }
.warning-callout.compact { margin-top:12px; padding:10px; font-size:11px; }
.showcase-public { --showcase-accent:#d97755; color:#16221d; background:#f5f3ed; }
.showcase-public-hero { min-height:400px; display:flex; align-items:flex-end; padding:56px 0 40px; color:#fff; background:#173f35; background-position:center; background-size:cover; }
.showcase-public-hero .container { max-width:1120px; }
.showcase-public-avatar { display:grid; width:54px; height:54px; place-items:center; overflow:hidden; margin-bottom:16px; background:var(--showcase-accent); border:3px solid rgba(255,255,255,.7); border-radius:50%; font-size:22px; font-weight:800; }
.showcase-public-avatar img { width:100%; height:100%; object-fit:cover; }
.showcase-public-hero h1 { max-width:760px; margin:6px 0 12px; font-family:var(--font-display); font-size:clamp(30px,3.9vw,48px); line-height:1.04; letter-spacing:-.035em; }
.showcase-public-intro { max-width:620px; margin:0 0 22px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.6; }
/* The hero is a dark band, but .eyebrow and .btn-primary both default to --ink (#1F2A44).
   Against the hero green (#173f35) that is a 1.22:1 contrast ratio, so the kicker line was
   unreadable and the primary button lost its shape entirely.  Same treatment as .catalog-hero. */
.showcase-public-hero .eyebrow { color:var(--on-dark-soft); }
.showcase-public-hero .btn { color:#fff; border-color:rgba(255,255,255,.34); border-radius:999px; background:transparent; }
.showcase-public-hero .btn.btn-primary { color:#151513; border-color:#fff; background:#fff; }
.showcase-public-hero .btn:disabled { color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.22); background:transparent; }
/* Which person shared this link is the one line that differs per link rather than per course. */
.showcase-public-referrer { display:inline-block; margin:0 0 12px; padding:6px 13px; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.1); font-size:13px; font-weight:600; }
.showcase-public .section { padding:64px 0 72px; }
.showcase-section-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:22px; }
.showcase-section-head h2 { margin:5px 0 0; font-size:26px; }.showcase-section-head > span { color:var(--muted); font-size:12px; }
/* Side by side, not stacked: the courses are peers, and full-width rows left most of each card
   empty while stretching the page well past a screenful. */
.showcase-course-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.showcase-course-card { display:flex; flex-direction:column; padding:20px; background:#fff; border:1px solid #e0e4e1; border-radius:14px; }
.showcase-course-index { color:var(--showcase-accent); font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:.08em; line-height:1; }
.showcase-course-card > div { display:flex; flex:1; flex-direction:column; gap:8px; }
.showcase-course-card .eyebrow { margin:0; }
.showcase-course-card h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.showcase-course-card p:not(.eyebrow) { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.showcase-course-card .btn { align-self:flex-start; margin-top:auto; }
/* Steps describe the platform, not the course, so one template serves every program.
   The number badge stays --ink rather than the per-style accent: several accents are pale
   enough that white-on-accent would fail contrast. */
.showcase-step-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.showcase-step { display:flex; gap:14px; padding:20px; background:#fff; border:1px solid #e0e4e1; border-radius:14px; }
.showcase-step-index { display:grid; flex:0 0 auto; width:30px; height:30px; place-items:center; color:#fff; background:var(--ink); border-radius:50%; font-family:var(--font-display); font-size:14px; font-weight:800; }
.showcase-step h3 { margin:2px 0 6px; font-size:17px; letter-spacing:-.02em; }
.showcase-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
/* The one band whose copy the platform can rewrite without re-publishing, so it sits directly
   under the hero where a visitor decides whether to keep reading.  The marker bar is decorative:
   several of the ten accents are pale enough that accent-coloured text would fail contrast, so
   the words stay --ink and --muted like every other card. */
.showcase-highlight-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.showcase-highlight { padding:20px; background:#fff; border:1px solid #e0e4e1; border-radius:14px; }
.showcase-highlight h3 { margin:0; font-size:17px; letter-spacing:-.02em; }
.showcase-highlight h3::before { display:block; width:26px; height:3px; margin-bottom:10px; background:var(--showcase-accent); border-radius:2px; content:""; }
.showcase-highlight p { margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.showcase-public-closing h2 { margin:0 0 8px; font-size:26px; }
.showcase-closing-lead { max-width:620px; margin:0 0 20px; color:var(--muted); font-size:16px; line-height:1.6; }
.showcase-closing-actions { display:flex; flex-wrap:wrap; gap:12px; }
.showcase-public.style-02 { --showcase-accent:#c6a7ff; }.showcase-public.style-02 .showcase-public-hero { background-color:#473b72; }
.showcase-public.style-03 { --showcase-accent:#f0bd77; }.showcase-public.style-03 .showcase-public-hero { background-color:#783a34; }
.showcase-public.style-04 { --showcase-accent:#82c6e8; }.showcase-public.style-04 .showcase-public-hero { background-color:#244a67; }
.showcase-public.style-05 { --showcase-accent:#f1d07a; }.showcase-public.style-05 .showcase-public-hero { background-color:#62461f; }
.showcase-public.style-06 { --showcase-accent:#ddd; }.showcase-public.style-06 .showcase-public-hero { background-color:#292929; }
.showcase-public.style-07 { --showcase-accent:#85d6c6; }.showcase-public.style-07 .showcase-public-hero { background-color:#315e59; }
.showcase-public.style-08 { --showcase-accent:#eca5c8; }.showcase-public.style-08 .showcase-public-hero { background-color:#713d58; }
.showcase-public.style-09 { --showcase-accent:#b8d583; }.showcase-public.style-09 .showcase-public-hero { background-color:#445b2e; }
.showcase-public.style-10 { --showcase-accent:#f2a56f; }.showcase-public.style-10 .showcase-public-hero { background-color:#824a28; }
.showcase-skeleton { width:100%; height:240px; margin-top:30px; background:linear-gradient(100deg,#ecefeb 30%,#f8f9f7 50%,#ecefeb 70%); background-size:220% 100%; border-radius:14px; animation:showcase-loading 1.5s infinite; }
@keyframes showcase-loading { to { background-position-x:-220%; } }
.permission-state { display: grid; min-height: calc(100svh - 140px); place-items: center; align-content: center; padding: 30px; text-align: center; }
.permission-state h2 { margin: 16px 0 6px; }
.permission-state p { max-width: 580px; margin: 0 0 22px; color: var(--muted); }
.permission-icon { display: grid; width: 64px; height: 64px; margin-bottom: 14px; place-items: center; color: var(--warning); background: var(--warning-soft); border-radius: 50%; }
.permission-icon svg { width: 28px; height: 28px; }
.funnel { display: flex; align-items: flex-end; height: 250px; padding: 25px 20px 20px; gap: 10px; }
.funnel-col { display: flex; height: 100%; flex: 1; flex-direction: column; justify-content: flex-end; gap: 8px; }
.funnel-bar { min-height: 4px; background: var(--brand); border-radius: 4px 4px 1px 1px; }
.funnel-label { color: var(--muted); font-size: 10px; line-height: 1.2; }
.funnel-value { font-size: 12px; font-weight: 750; }
.task-list { padding: 8px 17px; }
.task-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-bottom: 1px solid #ecefed; }
.task-item:last-child { border-bottom: 0; }
.task-dot { width: 8px; height: 8px; margin-top: 7px; background: var(--warning); border-radius: 50%; }
.task-item strong { display: block; font-size: 13px; }
.task-item small { color: var(--muted); }
/* 就绪清单：任务行的第三个孩子（操作区）要靠右，文案列必须能被压缩，否则窄屏会溢出。 */
.task-item .task-copy { flex: 1 1 auto; min-width: 0; }
.task-item .row-actions { flex: 0 0 auto; margin-left: auto; align-self: center; }
.checklist-box { margin: 15px 0 0; background: #fbfcfe; border: 1px solid #e3e8f0; border-radius: 9px; }
.checklist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 17px 0; flex-wrap: wrap; }
.checklist-head strong { font-size: 13px; }
.checklist-box .task-item { align-items: center; }
/* 徽标和操作区不许被文案列挤扁：否则「待完成」会断成两行。 */
.checklist-box .task-item > .status { flex: 0 0 auto; white-space: nowrap; }
.enable-hint { margin-top: 14px; padding: 12px 14px; background: #fbfcfe; border: 1px solid #e3e8f0; border-radius: 8px; }
.enable-hint p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.enable-hint .btn { min-height: 36px; margin-top: 10px; padding: 7px 14px; font-size: 12px; }
/* 统一登录页上的合作伙伴提示：和学员登录共用一个门，这里说明会自动分流。 */
.auth-partner-hint { margin-top: 16px; padding: 12px 14px; background: #f4f8ff; border: 1px solid #d6e4fb; border-radius: 8px; }
.auth-partner-hint-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-partner-hint strong { font-size: 12px; }
.auth-partner-hint span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.55; }

.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; }
.search { position: relative; }
.search .input { min-width: 250px; padding-left: 36px; }
.search svg { position: absolute; top: 14px; left: 12px; width: 16px; height: 16px; color: var(--muted); }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e0e4e1; border-radius: 10px; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th { padding: 11px 14px; color: #848c87; background: #fafbfa; border-bottom: 1px solid #e4e8e5; font-size: 10px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf0ee; font-size: 13px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafbfa; }
.row-title { font-weight: 700; }
.row-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status::before { width: 5px; height: 5px; background: currentColor; border-radius: 50%; content: ""; }
.status-success { color: var(--success); background: var(--success-soft); }
.status-warning { color: var(--warning); background: var(--warning-soft); }
.status-danger { color: var(--danger); background: var(--danger-soft); }
.status-neutral { color: #68736d; background: #edf0ee; }
/* 等待开通是这一页的核心状态，所以它的徽标比卡片内的紧凑状态条大一级。 */
.waiting-access-status { padding: 6px 11px; font-size: 12px; }
.row-actions { display: flex; gap: 6px; }
.row-action { padding: 5px 8px; color: var(--brand); border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.row-action:hover { text-decoration: underline; }
.row-action.danger { color: var(--danger); }
.row-action:disabled { color: var(--muted); cursor: not-allowed; opacity: .52; text-decoration: none; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; color: var(--muted); font-size: 12px; }

.account-security-note { display: flex; align-items: center; margin-bottom: 14px; padding: 12px 14px; color: #4f6078; background: #edf4ff; border: 1px solid #dbe8fb; border-radius: 10px; gap: 9px; font-size: 12px; }
.account-security-note svg { width: 17px; height: 17px; flex: 0 0 auto; color: #2f7cf6; }
.account-security-note small { margin-left: auto; white-space: nowrap; color: #607087; font-weight: 750; }
.platform-manager-table { min-width: 1080px; }
.platform-manager-table th:nth-child(1) { width: 16%; }
.platform-manager-table th:nth-child(2) { width: 22%; }
.platform-manager-table th:nth-child(3) { width: 11%; }
.platform-manager-table th:nth-child(4) { width: 16%; }
.platform-manager-table th:nth-child(5) { width: 20%; }
.platform-manager-table .manager-name-edit { display: block; margin-top: 3px; padding-left: 0; font-size: 11px; }
.platform-manager-table .login-email { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.platform-manager-table .expiry-text { color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.platform-manager-table .expiry-text.is-expired { color: var(--danger); font-weight: 750; }
.platform-manager-table tr.is-disabled-account td { background: #fbfcfd; }

.empty-state { display: grid; min-height: 300px; align-content: center; justify-items: center; padding: 34px; text-align: center; }
.empty-state.compact { min-height:90px; padding:18px; }
.empty-icon { display: grid; width: 58px; height: 58px; margin-bottom: 15px; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 16px; }
.empty-state h3 { margin: 0 0 6px; }
.empty-state p { max-width: 390px; margin: 0 0 18px; color: var(--muted); }

.program-entry-state { max-width: 760px; margin: 30px auto; }
.program-picker { display: grid; width: 100%; margin: 22px 0; gap: 9px; }
.program-picker-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; }
.program-picker-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.program-picker-item small { color: var(--muted); }
.program-workspace-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 6px 0 20px; gap: 18px; }
.program-workspace-head h2 { margin: 8px 0 5px; font-size: 30px; }
.program-workspace-head .muted { max-width: 720px; margin: 0; }
.text-link { padding: 0; color: var(--brand); background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.program-tabs { display: flex; margin-bottom: 18px; overflow-x: auto; background: #f4f6f4; border: 1px solid #e0e5e1; border-radius: 11px; }
.program-tabs button { min-height: 45px; flex: 1 0 max-content; padding: 0 16px; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: 13px; font-weight: 750; }
.program-tabs button.active { color: var(--brand-dark); background: #fff; box-shadow: inset 0 -2px 0 var(--brand); }
.program-workspace-body { min-width: 0; }
.program-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr); gap: 16px; }
.program-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 15px; border: 1px solid #e2e6e3; border-radius: 10px; overflow: hidden; }
.program-summary-grid button { display: grid; min-height: 98px; padding: 16px 10px; color: var(--ink); background: #fff; border: 0; border-right: 1px solid #e2e6e3; cursor: pointer; text-align: center; }
.program-summary-grid button:last-child { border-right: 0; }
.program-summary-grid button:hover { background: var(--brand-soft); }
.program-summary-grid strong { font-size: 25px; }
.program-summary-grid span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.program-object-list { display: grid; background: #fff; border: 1px solid #e0e4e1; border-radius: 10px; overflow: hidden; }
.program-object-list > div { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid #edf0ee; gap: 15px; }
.program-object-list > div:last-child { border-bottom: 0; }
.program-object-list strong, .program-object-list small { display: block; }
.program-object-list small { margin-top: 4px; color: var(--muted); }
.program-empty { min-height: 170px; background: #fff; border: 1px dashed #d7dcd8; border-radius: 10px; }

.modal-backdrop { position: fixed; z-index: 200; inset: 0; display: grid; align-items: center; justify-items: center; overflow: hidden; padding: 24px; background: rgba(18,24,21,.6); overscroll-behavior: contain; }
.modal { width: min(620px, 100%); max-height: min(90svh, 780px); overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.modal-sm { width: min(480px, 100%); }
/* Two languages per highlight, so the six slots read as six short blocks instead of one long
   form.  min-width:0 on the fieldset keeps the grid from overflowing its modal. */
.showcase-highlights-modal { width: min(780px, 100%); }
.highlight-editor-row { min-width:0; margin:0 0 14px; padding:14px 16px 2px; border:1px solid #e3e6e4; border-radius:12px; }
.highlight-editor-row legend { padding:0 6px; color:var(--muted); font-size:12px; font-weight:700; }
.highlight-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.highlight-editor-grid .form-group { margin:0 0 12px; }
@media (max-width: 720px) { .highlight-editor-grid { grid-template-columns:1fr; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e3e6e4; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 22px; }
.modal-foot { position: sticky; z-index: 2; bottom: 0; display: flex; justify-content: flex-end; padding: 16px 22px; background: #fff; border-top: 1px solid #e3e6e4; gap: 8px; }
.preflight-box { margin: 16px 0; padding: 15px; background: var(--success-soft); border: 1px solid #badfc9; border-radius: 9px; }
.preflight-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: #276143; font-size: 12px; }
.credential-box { padding: 20px; background: var(--paper-2); border: 1px dashed var(--line); border-radius: 10px; }
.credential-value { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.warning-callout { display: flex; gap: 10px; margin: 15px 0; padding: 13px; color: #7d4700; background: var(--warning-soft); border-radius: 8px; font-size: 12px; }
.local-preview-steps { display: grid; gap: 8px; margin: 18px 0 0; padding-left: 22px; color: var(--ink-2); }
.local-preview-steps li { padding-left: 4px; }
.purchase-modal { width: min(760px, 100%); }
.purchase-modal .modal-head { align-items: flex-start; }
.purchase-modal .modal-head .kicker { display: block; margin-bottom: 3px; }
.purchase-intro { max-width: 650px; margin: 0 0 20px; color: var(--ink-2); }
.purchase-price { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.purchase-price sup { margin-right: 2px; font-family: var(--font-sans); font-size: 12px; vertical-align: 13px; }
.purchase-intro-sub { max-width: 650px; margin: -12px 0 16px; color: var(--muted); font-size: 13px; }
/* 引导框里的套餐清单：一行一个套餐，可勾选，默认全选。 */
.guide-offer-list { display: grid; gap: 8px; }
.guide-offer { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; text-align: left; }
.guide-offer:hover { border-color: var(--brand); }
.guide-offer.checked { background: var(--brand-soft); border-color: var(--brand); }
.guide-offer-box { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; color: transparent; background: #fff; border: 1.5px solid var(--line); border-radius: 6px; }
.guide-offer.checked .guide-offer-box { color: #fff; background: var(--brand); border-color: var(--brand); }
.guide-offer-box svg { width: 13px; height: 13px; }
.guide-offer-text { flex: 1 1 auto; min-width: 0; }
.guide-offer-text strong { display: block; }
.guide-offer .purchase-price { flex: 0 0 auto; font-size: 24px; }
.guide-offer .purchase-price sup { vertical-align: 9px; }
.guide-offer-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 11px; font-size: 13px; }
.guide-offer-note span { flex: 1 1 auto; }
.guide-offer-note svg { flex: 0 0 auto; color: var(--muted); }
.guide-offer-list .preview-loading { min-height: 96px; }
.guide-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.purchase-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 15px; background: var(--paper); border-radius: 9px; gap: 12px; }
.purchase-steps span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.purchase-steps i { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-size: 10px; font-style: normal; }
.purchase-foot { flex-wrap: wrap; }

.drawer-backdrop { position: fixed; z-index: 180; inset: 0; background: rgba(18,24,21,.35); }
.drawer { position: fixed; z-index: 190; top: 0; right: 0; bottom: 0; width: min(520px, 100%); overflow-y: auto; background: #fff; box-shadow: -18px 0 50px rgba(0,0,0,.15); }
.drawer-head { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: #fff; border-bottom: 1px solid #e3e6e4; }
.drawer-body { padding: 22px; }
.detail-list { display: grid; grid-template-columns: 130px 1fr; border-top: 1px solid #e3e6e4; }
.detail-list dt, .detail-list dd { margin: 0; padding: 12px 0; border-bottom: 1px solid #e3e6e4; font-size: 13px; }
.detail-list dt { color: var(--muted); }

.assistant-fab { position: fixed; z-index: 85; right: 24px; bottom: 24px; display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 0 16px; color: #fff; background: var(--ink); border: 0; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.2); cursor: pointer; font-weight: 750; }
.assistant-panel { position: fixed; z-index: 110; right: 24px; bottom: 84px; display: flex; width: min(390px, calc(100% - 32px)); height: min(610px, calc(100svh - 112px)); flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.assistant-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; color: #fff; background: var(--ink); }
.assistant-head strong { display: block; }
.assistant-head small { color: #b8c1bc; }
.assistant-messages { flex: 1; overflow-y: auto; padding: 16px; }

/* Popup surfaces keep native wheel, trackpad, keyboard and touch scrolling,
   while the browser scrollbar itself stays visually hidden. */
.modal,
.drawer,
.option-list,
.assistant-messages {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.modal::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
.option-list::-webkit-scrollbar,
.assistant-messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Prevent the page behind an open modal or drawer from showing a second
   scrollbar. Scrolling stays available inside the active popup surface. */
html:has(#overlay-root .modal-backdrop),
body:has(#overlay-root .modal-backdrop),
html:has(#overlay-root .drawer-backdrop),
body:has(#overlay-root .drawer-backdrop) {
  overflow: hidden;
}
.message { max-width: 88%; margin-bottom: 12px; padding: 10px 12px; background: var(--paper); border-radius: 10px 10px 10px 3px; font-size: 13px; }
.message.user { margin-left: auto; color: #fff; background: var(--brand); border-radius: 10px 10px 3px 10px; }
.quick-prompts { display: flex; flex-wrap: wrap; margin-top: 10px; gap: 6px; }
.quick-prompts button { padding: 6px 8px; color: var(--brand-dark); background: var(--brand-soft); border: 0; border-radius: 99px; cursor: pointer; font-size: 11px; }
.assistant-input { display: flex; padding: 12px; border-top: 1px solid var(--line); gap: 7px; }
.assistant-input .input { min-height: 42px; }

.toast-region { position: fixed; z-index: 500; right: 20px; bottom: 20px; display: grid; width: min(380px, calc(100% - 40px)); gap: 8px; pointer-events: none; }
.toast { padding: 13px 15px; color: #fff; background: var(--ink); border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.2); animation: toast-in .22s ease both; }
.toast.success { background: #0e6240; }
.toast.warning { background: #81500c; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.mobile-cta { display: none; }
.prototype-flag { position: fixed; z-index: 90; left: 14px; bottom: 14px; padding: 6px 9px; color: #fff; background: rgba(24,32,28,.85); border-radius: 6px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .product-stage { min-height: 540px; padding: 24px; }
  .lesson-demo { grid-template-columns: 1fr 132px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .showcase-template-layout { grid-template-columns:1fr; }
  .steps-five { grid-template-columns: repeat(3, 1fr); }
  .steps-five .step:nth-child(3) { border-right: 0; }
}

@media (max-width: 900px) {
  :root { --header: 64px; }
  .showcase-course-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-step-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-highlight-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .container, .narrow { width: min(calc(100% - 32px), 760px); }
  .icon-btn.menu-toggle { display: inline-grid; }
  .site-nav { position: fixed; z-index: 60; top: var(--header); right: 0; left: 0; display: none; align-items: stretch; padding: 18px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 4px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px; }
  .nav-actions .nav-link { display: none; }
  .locale-switcher { margin-right: 2px; }
  .hero { min-height: auto; padding-top: 42px; }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { max-width: 700px; }
  .product-stage { min-height: 570px; }
  .section { padding: 76px 0; }
  .friction-layout, .learning-proof-layout, .preview-proof-layout, .support-layout, .readiness-layout { grid-template-columns: 1fr; gap: 48px; }
  .trust-strip, .deliverable-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip-item:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip-item:nth-child(4) { border-top: 1px solid var(--line); }
  .friction-intro { position: static; }
  .lesson-timeline { grid-template-columns: 1fr; }
  .timeline-card { min-height: 230px; }
  .fit-grid { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 0; }
  .page-hero-grid, .course-layout { grid-template-columns: 1fr; }
  .sticky-card { position: static; }
  .preview-layout { grid-template-columns: 1fr; }
  .preview-sidebar { max-height: 340px; }
  .learn-grid, .lesson-page-layout { grid-template-columns: minmax(0, 1fr); }
  .learn-grid > *, .lesson-page-layout > * { min-width: 0; }
  .path-grid { grid-template-columns: 1fr; }
  .level-list { position: static; display: flex; overflow-x: auto; }
  .level-btn { min-width: 190px; }
  .admin-sidebar { width: 72px; padding: 14px 8px; }
  .admin-sidebar .brand-word, .admin-context, .admin-nav-label, .admin-nav-hint, .admin-nav-group-toggle, .admin-nav button span { display: none; }
  .admin-sidebar .admin-nav-group.is-collapsed .admin-nav-items { display: block; }
  .admin-nav button { justify-content: center; }
  .admin-main { margin-left: 72px; }
  .program-workspace-grid { grid-template-columns: 1fr; }
  .program-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .program-summary-grid button:nth-child(2) { border-right: 0; }
  .program-summary-grid button:nth-child(-n+2) { border-bottom: 1px solid #e2e6e3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 14px; padding-bottom: 72px; }
  .container, .narrow { width: min(calc(100% - 28px), 560px); }
  .site-header .btn-primary { display: none; }
  .display { font-size: 47px; }
  .hero-grid { gap: 34px; }
  .hero-copy .lead { margin: 20px 0 24px; font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .proof-line { gap: 9px 14px; }
  .hero-trust { margin-top: 14px; }
  .hero-reassurance { margin-top: 14px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip-item, .trust-strip-item + .trust-strip-item, .trust-strip-item:nth-child(3), .trust-strip-item:nth-child(4) { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .trust-strip-item:first-child { border-top: 0; }
  .deliverable-grid { grid-template-columns: 1fr; }
  .product-stage { min-height: 430px; margin: 0 -5px; padding: 12px; border-radius: 20px 20px 20px 6px; }
  .floating-seal, .floating-note { display: none; }
  .lesson-demo { min-height: 320px; grid-template-columns: 1fr; }
  .lesson-outline { display: none; }
  .instructor-card { width: 62%; }
  .stage-foot { padding: 12px; }
  .section-head { align-items: start; flex-direction: column; gap: 14px; }
  .friction-list article { min-height: 0; grid-template-columns: 44px 1fr; padding: 24px 0; gap: 10px; }
  .friction-list h3 { font-size: 23px; }
  .timeline-card { min-height: 220px; padding: 23px; }
  .learning-center-card { border-radius: 16px; }
  .lc-welcome { min-height: 290px; padding: 28px 22px; }
  .lc-welcome h3 { margin-top: 48px; font-size: 34px; }
  .lc-bottom { grid-template-columns: 1fr; }
  .preview-board-card { min-height: 420px; border-radius: 20px 20px 20px 6px; }
  .preview-hanzi { font-size: 104px; }
  .fit-card { padding: 24px; }
  .support-cards { grid-template-columns: 1fr; }
  .support-card { min-height: 300px; padding: 24px; }
  .evidence-main, .evidence-side { min-height: 360px; padding: 22px; }
  .steps { grid-template-columns: 1fr; }
  .steps-five { grid-template-columns: 1fr; }
  .steps-five .step:nth-child(3) { border-right: 0; }
  .step, .step + .step { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .step-num { margin-bottom: 24px; }
  .price-card { padding: 22px; }
  .final-cta { min-height: 390px; padding: 34px 22px; }
  .final-actions { width: 100%; }
  .final-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 12px; }
  .course-facts { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .fact:last-child { border-bottom: 0; }
  .curriculum-row { grid-template-columns: 50px 1fr; }
  .curriculum-row > :last-child { grid-column: 2; }
  .preview-player { min-height: 500px; border-radius: 12px; }
  .preview-shell { padding-top: 18px; }
  .preview-top { align-items: start; flex-direction: column; gap: 8px; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { min-height: 100svh; padding: 28px 20px; }
  .learn-header { padding: 0 14px; }
  .learn-nav { display: none; }
  .learn-main { width: min(calc(100% - 28px), 560px); padding-top: 24px; }
  .learn-welcome { align-items: start; flex-direction: column; }
  .learn-welcome h1 { font-size: 36px; }
  .continue-card { min-height: 350px; padding: 24px; }
  .continue-card h2 { margin-top: 62px; font-size: 37px; }
  .learning-stats { grid-template-columns: 1fr; }
  .lesson-video { min-height: 430px; }
  .lesson-media { min-height: 430px; }
  .module-lesson { grid-template-columns: 30px minmax(0, 1fr); }
  .module-lesson > .btn, .module-lesson > .row-action { grid-column: 2; justify-self: start; }
  .module-lesson > :last-child { grid-column: 2; }
  .quiz-card { padding: 24px 18px; }
  .quiz-actions { flex-direction: column-reverse; }
  .quiz-actions .btn { width: 100%; }
  .certificate { padding: 48px 22px; }
  .certificate h1 { font-size: 35px; }
  .admin-sidebar { position: fixed; z-index: 90; top: auto; right: 0; bottom: 0; width: auto; height: 64px; padding: 7px 8px; overflow-x: auto; border-top: 1px solid #dfe3e0; border-right: 0; }
  .admin-brand, .admin-context, .admin-nav-label { display: none; }
  .admin-nav { display: flex; }
  .admin-nav-group { display: contents; }
  .admin-nav button { min-width: 58px; height: 48px; flex-direction: column; gap: 2px; padding: 4px; font-size: 9px; }
  .admin-nav button[data-nav="/admin/settings/whatsapp"] { order: -1; }
  .admin-nav button span { display: block; }
  .admin-nav button svg { width: 18px; height: 18px; }
  .admin-main { margin-left: 0; }
  .admin-topbar { height: 58px; padding: 0 14px; }
  .admin-topbar .btn-sm:not(.mobile-keep) { display: none; }
  .admin-topbar > div:last-child .icon-btn { display: none; }
  .admin-content { padding: 18px 14px 82px; }
  .admin-page-head { align-items: start; flex-direction: column; }
  .admin-page-head .btn { width: 100%; }
  .program-workspace-head { flex-direction: column; }
  .program-workspace-head h2 { font-size: 25px; }
  .program-tabs { margin-right: -2px; border-radius: 8px; }
  .program-tabs button { padding: 0 13px; font-size: 12px; }
  .program-picker-item { align-items: flex-start; flex-direction: column; gap: 4px; }
  .admin-start-guide .admin-panel-head { align-items: flex-start; flex-direction: column; padding: 16px; }
  .admin-start-guide .admin-panel-head .btn { width: 100%; }
  .admin-start-steps { grid-template-columns: 1fr; }
  .admin-start-steps li { min-height: 0; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #e7eae8; }
  .admin-start-steps li:last-child { border-bottom: 0; }
  .settings-status { align-items: flex-start; flex-direction: column; padding: 18px; }
  .settings-version { width: 100%; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; text-align: left; }
  .settings-form .panel-pad { padding: 16px; }
  .setting-toggle { align-items: flex-start; }
  .settings-actions { flex-direction: column-reverse; }
  .settings-actions .btn { width: 100%; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .showcase-template-grid,.dual-promotion-note { grid-template-columns:1fr; }
  .showcase-course-list { grid-template-columns:1fr; }
  .showcase-step-list { grid-template-columns:1fr; }
  .showcase-highlight-list { grid-template-columns:1fr; }
  .showcase-closing-actions .btn { width:100%; }
  .showcase-public .section { padding:40px 0 48px; }
  .showcase-public-hero { min-height:0; padding:44px 0 34px; }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: 23px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-left, .toolbar-right { width: 100%; overflow-x: auto; }
  .search { flex: 1; }
  .search .input { width: 100%; min-width: 0; }
  .ai-usage-table { overflow: visible; border: 0; border-radius: 0; }
  .ai-usage-table .data-table { display: block; min-width: 0; }
  .ai-usage-table thead { display: none; }
  .ai-usage-table tbody { display: grid; gap: 10px; }
  .ai-usage-table tr { display: grid; padding: 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; gap: 8px; }
  .ai-usage-table td { display: grid; grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr); padding: 0; border: 0; gap: 12px; overflow-wrap: anywhere; }
  .ai-usage-table td::before { color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 750; }
  .ai-usage-table td[colspan] { display: block; }
  .ai-usage-table td[colspan]::before { display: none; }
  .ai-usage-table .empty-state { min-height: 130px; padding: 20px 10px; }
  .account-security-note { align-items: flex-start; flex-wrap: wrap; }
  .account-security-note small { width: 100%; margin-left: 26px; }
  .platform-manager-table-wrap { overflow: visible; background: transparent; border: 0; }
  .platform-manager-table { display: block; min-width: 0; }
  .platform-manager-table thead { display: none; }
  .platform-manager-table tbody { display: grid; gap: 10px; }
  .platform-manager-table tr { display: grid; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; gap: 9px; }
  .platform-manager-table td { display: grid; grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr); align-items: center; padding: 0; border: 0; gap: 10px; overflow-wrap: anywhere; }
  .platform-manager-table td::before { color: var(--muted); content: attr(data-label); font-size: 11px; font-weight: 750; }
  .platform-manager-table td[colspan] { display: block; }
  .platform-manager-table td[colspan]::before { display: none; }
  .platform-manager-table .manager-name-edit { justify-self: start; grid-column: 2; }
  .platform-manager-table .expiry-text { white-space: normal; }
  .platform-manager-table .row-action { justify-self: start; padding-left: 0; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { max-height: 92svh; border-radius: 16px 16px 0 0; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .program-config-modal { width: 100%; }
  .program-config-options { grid-template-columns: 1fr; }
  .purchase-steps { grid-template-columns: 1fr; }
  .guide-offer { align-items: flex-start; padding: 12px 13px; }
  .guide-offer .purchase-price { font-size: 19px; }
  .guide-offer .purchase-price sup { vertical-align: 7px; }
  .purchase-foot { flex-direction: column-reverse; }
  .assistant-fab { right: 14px; bottom: 78px; width: 48px; padding: 0; justify-content: center; }
  .assistant-fab span { display: none; }
  .assistant-panel { right: 0; bottom: 0; width: 100%; height: 100svh; max-height: none; border: 0; border-radius: 0; }
  .mobile-cta { position: fixed; z-index: 80; right: 10px; bottom: 10px; left: 10px; display: flex; min-height: 54px; align-items: center; justify-content: center; color: #fff; background: var(--brand); border: 0; border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 86, 210, .22); font-weight: 800; }
  .prototype-flag { display: none; }
  .toast-region { bottom: 82px; }
}

/* v183 — consumer learning-site information architecture.  These classes
   keep public pages editorial and learner-led while the admin interface stays
   operational.  Project facts remain data-driven; local samples are only
   rendered by the loopback review mode. */
.consumer-section-intro { max-width: 760px; margin-bottom: 52px; }
.consumer-section-intro .section-title { max-width: 730px; }
.consumer-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(16,16,14,.22); }
.consumer-choice-grid > article { min-height: 242px; padding: 30px 30px 24px 0; border-bottom: 1px solid rgba(16,16,14,.16); }
.consumer-choice-grid > article + article { padding-left: 30px; border-left: 1px solid rgba(16,16,14,.16); }
.consumer-choice-grid > article > span, .help-topic-grid > article > span { display: block; margin-bottom: 36px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.consumer-choice-grid h3, .help-topic-grid h3 { max-width: 270px; margin: 0 0 12px; font-family: var(--font-sans); font-size: clamp(21px, 2vw, 29px); font-weight: 760; letter-spacing: -.055em; line-height: 1.02; }
.consumer-choice-grid p, .help-topic-grid p { max-width: 330px; margin: 0; color: var(--muted); line-height: 1.6; }
.section-action-row { display: flex; justify-content: flex-end; margin-top: 34px; }
.consumer-program-grid .program-card { min-height: 580px; }
.program-card-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.program-card-facts span { padding: 7px 10px; color: #2e2d29; border: 1px solid rgba(16,16,14,.12); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 11px; font-weight: 700; }
.consumer-learning-story { padding-top: 112px; padding-bottom: 112px; background: var(--paper-2); }
.consumer-center-card .lc-welcome { min-height: 215px; }
.consumer-home-faq { padding-bottom: 92px; }

.consumer-catalog-hero .hero-actions { gap: 10px; }
.consumer-choose-section { background: var(--paper-2); }
.consumer-program-promise { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(44px, 7vw, 128px); align-items: start; }
.consumer-program-promise .section-title, .consumer-stage-section .section-title, .consumer-preview-after .section-title { color: #fff; }
.consumer-check-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid rgba(255,255,255,.28); }
.consumer-check-columns > div { padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.consumer-check-columns span { display: block; margin-bottom: 18px; color: #b9e8e8; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.consumer-check-columns strong { display: block; margin-bottom: 9px; font-size: 18px; letter-spacing: -.03em; }
.consumer-check-columns p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.55; }

.consumer-program-hero .page-hero-grid { align-items: stretch; }
.consumer-fact-card { display: flex; min-height: 294px; flex-direction: column; justify-content: flex-end; }
.program-fact-list { display: grid; gap: 13px; margin-top: 24px; }
.program-fact-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(16,16,14,.11); }
.program-fact-list span { color: var(--muted); font-size: 11px; }
.program-fact-list strong { max-width: 58%; font-size: 13px; line-height: 1.35; text-align: right; }
.consumer-split-section { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(46px, 8vw, 150px); align-items: start; }
.consumer-checks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(16,16,14,.23); }
.consumer-checks li { display: grid; grid-template-columns: 28px 1fr; gap: 15px; align-items: start; padding: 24px 0; border-bottom: 1px solid rgba(16,16,14,.17); }
.consumer-checks li > span { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; border-radius: 50%; background: #151513; }
.consumer-checks li svg { width: 13px; height: 13px; }
.consumer-checks p { margin: 1px 0 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 680; letter-spacing: -.035em; line-height: 1.34; }
.consumer-outcomes-section { background: var(--paper-2); }
.consumer-stage-section { background: var(--ink); }
.consumer-stage-section .section-head p { color: rgba(255,255,255,.68); }
.consumer-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.3); }
.consumer-stage-grid > article { min-height: 240px; padding: 27px 28px 24px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.consumer-stage-grid > article + article { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.2); }
.consumer-stage-grid span { display: block; margin-bottom: 60px; color: #b9e8e8; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.consumer-stage-grid h3 { margin: 0 0 11px; color: #fff; font-family: var(--font-sans); font-size: 24px; letter-spacing: -.05em; }
.consumer-stage-grid p { margin: 0; color: rgba(255,255,255,.67); line-height: 1.55; }
/* The course map is the longest block on the page, so it owns a real two-column
   layout: the curriculum stays in the main column while the preview/access card
   keeps following the reader in the rail column. The rail card was already
   marked as a sticky card, but this container never became a grid, so the card
   used to fall to the bottom of the block at full page width. */
.consumer-curriculum-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: start; gap: 0 46px; }
.consumer-curriculum-section .consumer-curriculum-intro { grid-column: 1 / -1; }
.consumer-curriculum-section .public-course-library { grid-column: 1; }
.consumer-curriculum-section .consumer-preview-rail { grid-column: 2; }
@media (max-width: 1080px) {
  .consumer-curriculum-section { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .consumer-curriculum-section .consumer-curriculum-intro,
  .consumer-curriculum-section .public-course-library,
  .consumer-curriculum-section .consumer-preview-rail { grid-column: 1; }
  /* Stacked, the preview/access card must not sit underneath the whole lesson
     list, where nobody would ever reach it. It keeps the row order it has in
     the two-column layout: intro, then the card, then the course map. */
  .consumer-curriculum-section .consumer-curriculum-intro { grid-row: 1; }
  .consumer-curriculum-section .consumer-preview-rail { grid-row: 2; margin: 30px 0 34px; }
  .consumer-curriculum-section .public-course-library { grid-row: 3; }
}
.consumer-curriculum { margin-top: 38px; border-top: 1px solid rgba(16,16,14,.24); }
.consumer-curriculum-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 28px 0; border-bottom: 1px solid rgba(16,16,14,.15); }
.consumer-curriculum-row > span { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.consumer-curriculum-row h3 { margin: 0 0 8px; font-family: var(--font-sans); font-size: clamp(21px, 1.8vw, 28px); letter-spacing: -.05em; }
.consumer-curriculum-row p { max-width: 580px; margin: 0; color: var(--muted); line-height: 1.55; }
/* Clears the fixed header plus the sticky in-page section nav, so the rail card
   never slides underneath either of them while it follows the scroll. */
.consumer-preview-rail { top: calc(var(--header) + 80px); }
.consumer-optional-section { background: var(--paper-2); }
.consumer-optional-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(16,16,14,.22); }
.consumer-optional-grid article { display: grid; grid-template-columns: 36px 1fr; gap: 15px; min-height: 184px; padding: 28px 30px 28px 0; border-bottom: 1px solid rgba(16,16,14,.15); }
.consumer-optional-grid article + article { padding-left: 30px; border-left: 1px solid rgba(16,16,14,.15); }
.consumer-optional-grid > article > span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; border-radius: 50%; background: #161613; font-size: 13px; }
.consumer-optional-grid h3 { margin: 3px 0 9px; font-size: 22px; letter-spacing: -.045em; }
.consumer-optional-grid p { margin: 0; color: var(--muted); line-height: 1.56; }

.consumer-how-hero { background: var(--paper-2); }
.consumer-how-rail { display: grid; min-height: 448px; padding: 0; overflow: hidden; }
.consumer-how-rail .stock-image { min-height: 310px; }
.consumer-how-rail > div { padding: 24px 27px 28px; background: #191917; }
.consumer-how-rail .kicker { color: #b9e8e8; }
.consumer-how-rail h3 { margin: 9px 0 0; color: #fff; font-size: 25px; letter-spacing: -.055em; }
.consumer-how-steps { background: var(--paper); }
.consumer-steps-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.consumer-steps-four .step { min-height: 250px; }
.consumer-support-promise { padding-bottom: 18px; }

.consumer-preview-shell .preview-top h1 { max-width: 660px; margin: 5px 0 11px; font-family: var(--font-sans); font-size: clamp(33px, 3.8vw, 58px); letter-spacing: -.065em; line-height: .97; }
.consumer-preview-shell .preview-top p { max-width: 590px; margin: 0; color: var(--muted); line-height: 1.55; }
.consumer-preview-explainer { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(48px, 8vw, 150px); align-items: start; }
.consumer-preview-grid { border-top-color: rgba(16,16,14,.22); }
.consumer-preview-grid > article { border-bottom-color: rgba(16,16,14,.16); }
.consumer-preview-grid > article + article { border-left-color: rgba(16,16,14,.16); }
.consumer-preview-grid span { color: var(--muted); }
.consumer-preview-grid h3 { color: var(--ink); }
.consumer-preview-grid p { color: var(--muted); }
.consumer-preview-after { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(44px, 8vw, 145px); align-items: start; }
.consumer-preview-after > div:last-child > p { max-width: 590px; margin: 0 0 28px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.6; }

.consumer-help-hero { background: var(--paper-2); }
.help-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(16,16,14,.22); }
.help-topic-grid > article { min-height: 286px; padding: 31px 42px 29px 0; border-bottom: 1px solid rgba(16,16,14,.16); }
.help-topic-grid > article:nth-child(2n) { padding-right: 0; padding-left: 42px; border-left: 1px solid rgba(16,16,14,.16); }
.help-topic-grid .text-link { margin-top: 28px; }
.consumer-help-faq { background: var(--paper-2); }
.consumer-auth-page .auth-quote { max-width: 430px; }
.auth-brand-steps { display: grid; gap: 9px; margin-top: 28px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.75); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.auth-help-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  .consumer-choice-grid, .consumer-stage-grid, .consumer-steps-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consumer-choice-grid > article:nth-child(3n), .consumer-stage-grid > article:nth-child(3n) { padding-left: 0; border-left: 0; }
  .consumer-choice-grid > article:nth-child(2n), .consumer-stage-grid > article:nth-child(2n) { padding-right: 0; }
  .consumer-program-promise, .consumer-split-section, .consumer-preview-explainer, .consumer-preview-after { grid-template-columns: 1fr; }
  .consumer-how-rail { min-height: 0; }
  .consumer-how-rail .stock-image { min-height: 270px; }
}

@media (max-width: 620px) {
  .consumer-section-intro { margin-bottom: 34px; }
  .consumer-choice-grid, .consumer-stage-grid, .consumer-steps-four, .consumer-check-columns, .consumer-optional-grid, .help-topic-grid { grid-template-columns: 1fr; }
  .consumer-choice-grid > article, .consumer-choice-grid > article + article, .consumer-stage-grid > article, .consumer-stage-grid > article + article, .consumer-optional-grid article, .consumer-optional-grid article + article, .help-topic-grid > article, .help-topic-grid > article:nth-child(2n) { min-height: 0; padding: 24px 0; border-left: 0; }
  .consumer-choice-grid > article > span, .help-topic-grid > article > span { margin-bottom: 21px; }
  .consumer-stage-grid span { margin-bottom: 32px; }
  .consumer-check-columns { gap: 0; }
  .consumer-check-columns > div { padding: 21px 0; }
  .consumer-program-grid .program-card { min-height: 0; }
  .consumer-fact-card { min-height: 0; }
  .consumer-curriculum-row { grid-template-columns: 42px 1fr; }
  .consumer-optional-grid article { grid-template-columns: 34px 1fr; }
  .consumer-preview-shell .preview-top h1 { font-size: clamp(32px, 10vw, 48px); }
  .consumer-preview-explainer, .consumer-preview-after { gap: 38px; }
  .auth-help-link { align-items: flex-start; flex-direction: column; }
}

/* v206 — multi-page global partner recruitment system.  The visual language
   stays aligned with the approved local PartnerHub reference while every page
   keeps this project's own business boundaries and copy. */
.partner-header nav { align-items: center; }
.partner-header nav > button.is-active,
.partner-nav-menu:has(button.is-active) > summary { color: #fff; }
.partner-nav-menu { position: relative; }
.partner-nav-menu > summary { position: relative; padding: 8px 22px 8px 11px; color: rgba(255,255,255,.68); cursor: pointer; font-size: 12px; font-weight: 580; list-style: none; }
.partner-nav-menu > summary::-webkit-details-marker { display: none; }
.partner-nav-menu > summary::after { position: absolute; top: 50%; right: 8px; width: 5px; height: 5px; transform: translateY(-70%) rotate(45deg); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; }
.partner-nav-menu[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.partner-nav-menu > div { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 20; display: grid; width: 260px; padding: 9px; transform: translateX(-50%); background: rgba(12,12,18,.98); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
.partner-nav-menu > div::before { position: absolute; top: -15px; left: 0; width: 100%; height: 15px; content: ""; }
.partner-nav-menu > div button { width: 100%; min-height: 42px; border-radius: 7px; text-align: left; }
.partner-nav-menu > div button:hover,
.partner-nav-menu > div button.is-active { color: #fff; background: rgba(79,70,229,.18); }
.partner-benefit-grid article { display: flex; flex-direction: column; }
.partner-benefit-grid article button { width: fit-content; margin-top: auto; padding: 20px 0 0; color: #a5b4fc; background: transparent; border: 0; cursor: pointer; font-size: 11px; font-weight: 700; }
.partner-benefit-grid article button:hover { color: #fff; }

.partner-detail-page,
.partner-tools-page,
.partner-process-page,
.partner-faq-page { color: #fff; }
.partner-detail-hero { position: relative; overflow: hidden; padding: 118px 0 108px; background: #050507; }
.partner-detail-orb { position: absolute; top: -360px; left: 50%; width: 880px; height: 880px; transform: translateX(-50%); background: radial-gradient(circle,rgba(79,70,229,.23),rgba(79,70,229,.06) 38%,transparent 69%); border-radius: 50%; animation: partner-glow-pulse 8s ease-in-out infinite; pointer-events: none; }
.partner-detail-hero-grid { position: relative; display: grid; align-items: center; grid-template-columns: minmax(0,1.05fr) minmax(380px,.95fr); gap: clamp(56px,8vw,118px); }
.partner-detail-hero h1,
.partner-subpage-hero h1 { margin: 20px 0 25px; color: #fff; font-size: clamp(50px,6vw,78px); font-weight: 620; letter-spacing: -.06em; line-height: .99; }
.partner-detail-hero-grid > div > p:not(.partner-kicker):not(.partner-detail-micro),
.partner-subpage-hero .partner-container > p:not(.partner-kicker) { max-width: 760px; color: rgba(255,255,255,.58); font-size: 16px; line-height: 1.8; }
.partner-detail-hero-grid > figure { position: relative; overflow: hidden; height: 600px; margin: 0; background: #111118; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 38px 90px rgba(0,0,0,.42); }
.partner-detail-hero-grid > figure::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(5,5,7,.82)); content: ""; }
.partner-detail-hero-grid > figure .partner-stock-image { filter: saturate(.78) contrast(1.04) brightness(.76); }
.partner-detail-hero-grid > figure figcaption { position: absolute; right: 20px; bottom: 18px; left: 20px; z-index: 2; color: rgba(255,255,255,.52); font-size: 9px; }
.partner-detail-hero-grid > figure > span { position: absolute; top: 20px; left: 20px; z-index: 2; padding: 9px 11px; color: #fff; background: rgba(5,5,7,.62); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 9px; letter-spacing: .12em; backdrop-filter: blur(10px); }
.partner-detail-micro { margin: 18px 0 0; color: rgba(255,255,255,.36); font-size: 10px; }
.partner-detail-fit,
.partner-detail-benefits,
.partner-detail-steps,
.partner-detail-tools,
.partner-detail-explore { padding: 110px 0; }
.partner-detail-fit { background: #08080c; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-detail-heading { display: grid; margin-bottom: 52px; align-items: end; grid-template-columns: .7fr 1.3fr; gap: 54px; }
.partner-detail-heading h2 { max-width: 800px; margin: 0; color: #fff; font-size: clamp(34px,4vw,54px); letter-spacing: -.045em; line-height: 1.08; }
.partner-fit-list { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.partner-fit-list article { display: grid; min-height: 180px; padding: 28px; grid-template-rows: auto 1fr; background: rgba(255,255,255,.012); border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-fit-list b { color: #818cf8; font-size: 10px; letter-spacing: .13em; }
.partner-fit-list span { align-self: end; max-width: 290px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.5; }
.partner-detail-benefits { background: #050507; }
.partner-detail-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.partner-detail-card-grid article { min-height: 315px; padding: 30px; background: linear-gradient(150deg,rgba(79,70,229,.1),rgba(255,255,255,.018) 52%); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; transition: transform .3s ease,border-color .3s ease; }
.partner-detail-card-grid article:hover { transform: translateY(-7px); border-color: rgba(129,140,248,.34); }
.partner-detail-card-grid article > span { color: #818cf8; font-size: 10px; letter-spacing: .13em; }
.partner-detail-card-grid h3 { margin: 105px 0 14px; color: #fff; font-size: 22px; letter-spacing: -.025em; }
.partner-detail-card-grid p { margin: 0; color: rgba(255,255,255,.48); font-size: 13px; line-height: 1.75; }
.partner-detail-editorial { padding: 0 0 118px; background: #050507; }
.partner-detail-editorial .partner-container,
.partner-tool-data .partner-container,
.partner-process-image .partner-container { display: grid; align-items: center; grid-template-columns: minmax(380px,1.1fr) minmax(0,.9fr); gap: clamp(50px,7vw,100px); }
.partner-detail-editorial figure,
.partner-tool-data figure,
.partner-process-image figure { position: relative; overflow: hidden; height: 560px; margin: 0; background: #111118; border-radius: 16px; }
.partner-detail-editorial figure::after,
.partner-tool-data figure::after,
.partner-process-image figure::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(5,5,7,.7)); content: ""; }
.partner-detail-editorial figcaption,
.partner-tool-data figcaption,
.partner-process-image figcaption { position: absolute; right: 18px; bottom: 16px; left: 18px; z-index: 2; color: rgba(255,255,255,.46); font-size: 9px; }
.partner-detail-editorial h2,
.partner-tool-data h2,
.partner-process-image h2 { margin: 20px 0; color: #fff; font-size: clamp(34px,4vw,54px); letter-spacing: -.05em; line-height: 1.1; }
.partner-detail-editorial > .partner-container > div > p:last-child,
.partner-tool-data > .partner-container > div > p,
.partner-process-image > .partner-container > div > p:last-child { color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.8; }
.partner-detail-steps { background: #08080c; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-detail-step-grid { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4,1fr); list-style: none; }
.partner-detail-step-grid li { position: relative; display: grid; min-height: 215px; padding: 28px; grid-template-rows: auto 1fr; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.partner-detail-step-grid li:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.partner-detail-step-grid li:not(:last-child)::after { position: absolute; top: 35px; right: -9px; z-index: 2; width: 17px; height: 1px; background: #818cf8; content: ""; animation: partner-flow-pulse 3.8s ease-in-out infinite; }
.partner-detail-step-grid b { color: #818cf8; font-size: 10px; letter-spacing: .13em; }
.partner-detail-step-grid span { align-self: end; color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.5; }
.partner-detail-tools { background: #050507; }
.partner-detail-tool-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.partner-detail-tool-grid article { display: grid; min-height: 170px; padding: 26px; grid-template-columns: 54px 1fr; gap: 20px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-detail-tool-grid b { color: #818cf8; font-size: 10px; }
.partner-detail-tool-grid h3 { margin: 0 0 10px; color: #fff; font-size: 18px; }
.partner-detail-tool-grid p { margin: 0; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.7; }
.partner-detail-text-link { width: fit-content; margin-top: 28px; padding: 0; color: #a5b4fc; background: transparent; border: 0; cursor: pointer; font-size: 12px; font-weight: 700; }
.partner-detail-text-link:hover { color: #fff; }
.partner-detail-boundary { position: relative; overflow: hidden; padding: 108px 0; background: #4f46e5; }
.partner-detail-boundary::after { position: absolute; top: -100px; right: -80px; width: 440px; height: 440px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ""; }
.partner-detail-boundary span { font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.partner-detail-boundary h2 { max-width: 980px; margin: 20px 0; color: #fff; font-size: clamp(36px,4.6vw,62px); letter-spacing: -.05em; line-height: 1.08; }
.partner-detail-boundary p { max-width: 760px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.75; }
.partner-detail-explore { background: #08080c; }
.partner-other-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.partner-other-grid button { display: grid; min-height: 240px; padding: 26px; align-content: space-between; color: #fff; background: #0c0c12; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; cursor: pointer; text-align: left; transition: transform .25s ease,border-color .25s ease; }
.partner-other-grid button:hover { transform: translateY(-5px); border-color: rgba(129,140,248,.32); }
.partner-other-grid small { color: #818cf8; font-size: 8px; letter-spacing: .1em; }
.partner-other-grid strong { color: #fff; font-size: 20px; letter-spacing: -.025em; line-height: 1.32; }
.partner-other-grid span { color: rgba(255,255,255,.46); font-size: 11px; }
.partner-detail-final { position: relative; overflow: hidden; padding: 126px 0; background: #050507; text-align: center; }
.partner-detail-final .partner-container { position: relative; z-index: 2; }
.partner-detail-final h2 { max-width: 880px; margin: 18px auto 34px; color: #fff; font-size: clamp(38px,5vw,64px); letter-spacing: -.055em; line-height: 1.07; }
.partner-detail-final .partner-detail-orb { top: -470px; }

.partner-subpage-hero { position: relative; overflow: hidden; padding: 132px 0 116px; background: #050507; text-align: center; }
.partner-subpage-hero .partner-container { position: relative; z-index: 2; }
.partner-subpage-hero h1 { max-width: 1040px; margin-right: auto; margin-left: auto; }
.partner-subpage-hero .partner-container > p:not(.partner-kicker) { margin-right: auto; margin-left: auto; }
.partner-subpage-hero .btn { margin-top: 30px; }
.partner-tools-catalog { padding: 112px 0; background: #08080c; }
.partner-tool-catalog-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.partner-tool-catalog-grid article { min-height: 300px; padding: 32px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-tool-catalog-grid b { color: #818cf8; font-size: 10px; letter-spacing: .13em; }
.partner-tool-catalog-grid h2 { margin: 90px 0 14px; color: #fff; font-size: 26px; letter-spacing: -.035em; }
.partner-tool-catalog-grid p { max-width: 520px; margin: 0; color: rgba(255,255,255,.48); font-size: 13px; line-height: 1.75; }
.partner-tool-compare { padding: 120px 0; background: #050507; }
.partner-tool-compare .partner-container { display: grid; grid-template-columns: .72fr 1.28fr; gap: 82px; }
.partner-tool-compare h2,
.partner-faq-choose h2 { margin: 18px 0 0; color: #fff; font-size: clamp(38px,4.5vw,58px); letter-spacing: -.05em; line-height: 1.07; }
.partner-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.partner-compare-grid article { min-height: 310px; padding: 28px; background: #0c0c12; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; }
.partner-compare-grid article > span { color: #818cf8; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.partner-compare-grid h3 { margin: 100px 0 14px; color: #fff; font-size: 22px; letter-spacing: -.03em; }
.partner-compare-grid p { color: rgba(255,255,255,.46); font-size: 12px; line-height: 1.75; }
.partner-tool-data,
.partner-process-image { padding: 110px 0; background: #08080c; }
.partner-tool-data ul { display: grid; margin: 28px 0 0; padding: 0; gap: 10px; list-style: none; }
.partner-tool-data li { padding: 13px 16px; color: rgba(255,255,255,.67); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 7px; font-size: 12px; }

.partner-path-section { padding: 112px 0; background: #08080c; }
.partner-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.partner-path-block { padding: clamp(30px,4vw,52px); background: #0c0c12; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; }
.partner-path-block > h2 { margin: 18px 0 40px; color: #fff; font-size: clamp(38px,4vw,54px); letter-spacing: -.05em; }
.partner-path-block ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }
.partner-path-block li { display: grid; padding: 21px 0; grid-template-columns: 48px 1fr; border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-path-block li b { color: #818cf8; font-size: 9px; }
.partner-path-block li h3 { margin: 0 0 7px; color: #fff; font-size: 16px; }
.partner-path-block li p { margin: 0; color: rgba(255,255,255,.44); font-size: 11px; line-height: 1.65; }
.partner-auto-section { padding: 112px 0; background: #050507; }
.partner-auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.partner-auto-grid article { min-height: 260px; padding: 30px; background: #0c0c12; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; }
.partner-auto-grid article.is-positive { background: linear-gradient(145deg,rgba(79,70,229,.16),#0c0c12 58%); border-color: rgba(129,140,248,.25); }
.partner-auto-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; color: #a5b4fc; background: rgba(79,70,229,.16); border-radius: 50%; }
.partner-auto-grid h3 { margin: 70px 0 12px; color: #fff; font-size: 22px; }
.partner-auto-grid p { max-width: 500px; margin: 0; color: rgba(255,255,255,.48); font-size: 13px; line-height: 1.7; }

.partner-faq-library { padding: 112px 0; background: #08080c; }
.partner-faq-library .partner-container { display: grid; gap: 70px; }
.partner-faq-library .partner-container > section { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; }
.partner-faq-library header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; color: #fff; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.partner-faq-library header small { color: #818cf8; font-size: 10px; letter-spacing: .12em; }
.partner-faq-choose { padding: 112px 0; background: #050507; }
.partner-faq-choose h2 { max-width: 760px; margin-bottom: 50px; }
.partner-faq-choose .partner-compare-grid h3 { margin-top: 82px; }
.partner-preselect-note { display: grid; margin-top: 28px; padding: 17px; grid-template-columns: auto 1fr; gap: 5px 10px; color: #e8ecff; background: rgba(79,70,229,.13); border: 1px solid rgba(129,140,248,.25); border-radius: 9px; }
.partner-preselect-note b { color: #a5b4fc; font-size: 10px; letter-spacing: .04em; }
.partner-preselect-note span { font-size: 12px; font-weight: 720; }
.partner-preselect-note small { grid-column: 1 / -1; color: rgba(255,255,255,.42); font-size: 9px; }

@media (max-width: 1040px) {
  .partner-detail-hero-grid { grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 46px; }
  .partner-detail-hero-grid > figure { height: 520px; }
  .partner-tool-compare .partner-container { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 820px) {
  .partner-detail-hero { padding: 84px 0; }
  .partner-detail-hero-grid,
  .partner-detail-editorial .partner-container,
  .partner-tool-data .partner-container,
  .partner-process-image .partner-container { grid-template-columns: 1fr; }
  .partner-detail-hero-grid > figure { height: 480px; }
  .partner-detail-heading { grid-template-columns: 1fr; gap: 18px; }
  .partner-detail-card-grid,
  .partner-other-grid { grid-template-columns: 1fr 1fr; }
  .partner-detail-step-grid { grid-template-columns: 1fr 1fr; }
  .partner-detail-step-grid li:nth-child(2) { border-right: 1px solid rgba(255,255,255,.1); }
  .partner-detail-step-grid li::after { display: none; }
  .partner-detail-editorial figure,
  .partner-tool-data figure,
  .partner-process-image figure { height: 440px; order: 2; }
  .partner-detail-editorial .partner-container > div,
  .partner-tool-data .partner-container > div,
  .partner-process-image .partner-container > div { order: 1; }
  .partner-path-grid { grid-template-columns: 1fr; }
  .partner-faq-library .partner-container > section { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .partner-detail-hero h1,
  .partner-subpage-hero h1 { font-size: 42px; }
  .partner-detail-hero-grid > figure { height: 390px; }
  .partner-detail-fit,
  .partner-detail-benefits,
  .partner-detail-steps,
  .partner-detail-tools,
  .partner-detail-explore,
  .partner-tools-catalog,
  .partner-tool-compare,
  .partner-tool-data,
  .partner-path-section,
  .partner-auto-section,
  .partner-process-image,
  .partner-faq-library,
  .partner-faq-choose { padding: 78px 0; }
  .partner-fit-list,
  .partner-detail-card-grid,
  .partner-detail-tool-grid,
  .partner-other-grid,
  .partner-tool-catalog-grid,
  .partner-compare-grid,
  .partner-auto-grid { grid-template-columns: 1fr; }
  .partner-fit-list article { min-height: 145px; }
  .partner-detail-card-grid article { min-height: 250px; }
  .partner-detail-card-grid h3,
  .partner-tool-catalog-grid h2,
  .partner-compare-grid h3 { margin-top: 62px; }
  .partner-detail-step-grid { grid-template-columns: 1fr; }
  .partner-detail-step-grid li { min-height: 150px; border-right: 1px solid rgba(255,255,255,.1); }
  .partner-detail-editorial figure,
  .partner-tool-data figure,
  .partner-process-image figure { height: 340px; }
  .partner-detail-final { padding: 88px 0; }
  .partner-subpage-hero { padding: 92px 0 82px; }
  .partner-tool-catalog-grid article { min-height: 250px; }
  .partner-faq-library header { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v175 — editorial product-system refresh.
   The visual direction takes its cue from sparse editorial software sites:
   warm paper, black typography, generous photography-like stages, and quiet
   motion. It intentionally uses no third-party brand, copy, images or code. */
body { background: var(--paper); letter-spacing: -.012em; }
body::selection { color: #fff; background: var(--ink); }
.container { width: min(1360px, calc(100% - 80px)); }
.narrow { width: min(840px, calc(100% - 48px)); }
.display, .page-title, .section-title, .auth-form h1, .learn-welcome h1, .quiz-card h1, .certificate h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.07em;
}
.display { font-size: clamp(48px, 7.2vw, 104px); line-height: .93; }
.page-title { font-size: clamp(40px, 6vw, 80px); line-height: .96; }
.section-title { font-size: clamp(34px, 4.6vw, 66px); line-height: .98; }
.eyebrow, .kicker { color: var(--ink); font-size: 10px; letter-spacing: .12em; }
.lead { max-width: 650px; color: var(--ink-2); font-size: 18px; line-height: 1.5; }

/* Public shell */
.site-header { height: var(--header); background: var(--header-bg); backdrop-filter: blur(20px); }
.site-header.scrolled { border-color: rgba(16,16,14,.13); }
.header-inner { position: relative; gap: 20px; }
.brand { position: relative; z-index: 2; gap: 9px; }
.brand-seal { width: 42px; height: 30px; color: #fff; background: var(--ink); border-radius: 999px; font-family: var(--font-sans); font-size: 12px; letter-spacing: -.08em; }
.brand-word { color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: -.055em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 7px; letter-spacing: .11em; }
.site-nav { position: absolute; left: calc(50% - clamp(42px, 6vw, 92px)); transform: translateX(-50%); gap: clamp(13px, 1.9vw, 30px); white-space: nowrap; }
.site-nav a, .nav-link { color: #252522; font-size: 13px; font-weight: 650; letter-spacing: -.025em; }
.site-nav a:hover, .nav-link:hover { color: #000; }
.nav-actions { position: relative; z-index: 2; margin-left: auto; gap: 12px; }
.locale-switcher { gap: 2px; color: var(--muted); font-size: 10px; letter-spacing: 0; }
.locale-switcher button { padding: 5px 3px; color: inherit; font-size: 10px; }
.locale-switcher button:hover, .locale-switcher button.active { color: #000; }
.locale-switcher button.active { text-decoration: none; }
.nav-signin { display: none; }
.btn { min-height: 46px; padding: 11px 19px; border-color: rgba(16,16,14,.18); border-radius: 999px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 750; letter-spacing: -.025em; }
.btn:hover { color: #fff; background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.btn-primary, .btn-dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.btn-primary:hover, .btn-dark:hover { color: var(--ink); background: #fff; border-color: #fff; }
.btn-soft { color: var(--ink); background: var(--brand-soft); border-color: transparent; }
.btn-danger { color: var(--danger); background: var(--danger-soft); }
.btn-lg { min-height: 56px; padding: 14px 24px; }
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: 12px; }
.icon-btn { border-color: rgba(16,16,14,.18); border-radius: 50%; background: transparent; }

.hero { min-height: auto; padding: 68px 0 42px; }
.hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 52px; }
.hero-copy { width: min(1010px, 100%); margin: 0 auto; text-align: center; }
.hero-copy .lead { margin: 24px auto 30px; }
.hero-actions { justify-content: center; }
.proof-line { justify-content: center; margin-top: 23px; color: #62615b; font-size: 12px; }
.proof-line i { width: 4px; height: 4px; background: var(--ink); }
.product-stage { width: min(1200px, 100%); min-height: 570px; margin: 0 auto; padding: clamp(20px, 3vw, 46px); background: #ddd8cc; border: 1px solid rgba(16,16,14,.12); border-radius: 36px; box-shadow: none; }
.product-stage::before { position: absolute; inset: 0; background: radial-gradient(circle at 24% 18%, rgba(255,255,255,.86), transparent 32%), linear-gradient(135deg, #d5d0c3, #f0ece3 52%, #c8c2b5); content: ""; }
.stage-browser { background: #fbfaf6; border: 1px solid rgba(16,16,14,.14); border-radius: 24px; box-shadow: 0 24px 55px rgba(38,36,29,.16); }
.browser-bar { height: 48px; background: #f6f3eb; border-bottom-color: #dedad0; }
.browser-bar i { width: 7px; height: 7px; background: #99958b; }
.browser-address { width: 34%; height: 8px; background: #dfdacf; }
.lesson-demo { min-height: 415px; grid-template-columns: 1fr 188px; }
.lesson-screen { background: #d6d1c4; }
.bookcase { opacity: .38; background-image: linear-gradient(rgba(75,70,60,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(75,70,60,.45) 1px, transparent 1px); }
.lesson-light { background: rgba(255,250,225,.68); }
.instructor-head { background: #c49a78; border-color: #2c2a25; }
.instructor-body { background: #181817; }
.lesson-caption { padding: 12px 16px; background: rgba(16,16,14,.9); border-radius: 12px; }
.lesson-caption strong { color: #fff; font-family: var(--font-sans); font-size: 13px; }
.lesson-outline { background: var(--panel); }
.outline-item.active { color: #000; }
.outline-item.active .outline-dot, .stage-progress span { background: var(--ink); }
.floating-note { right: 28px; bottom: 30px; width: 240px; border: 1px solid rgba(16,16,14,.13); border-radius: 18px; box-shadow: 0 18px 36px rgba(16,16,14,.12); }
.floating-note strong { font-family: var(--font-sans); font-size: 17px; font-weight: 800; }

.section { padding: 136px 0; }
.section-tight { padding: 84px 0; }
.section-white { background: transparent; }
.section-dark { color: #fff; background: var(--player); }
.trust-strip-section { padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip { border: 0; }
.trust-strip-item { padding: 17px 20px 17px 0; }
.trust-strip-item + .trust-strip-item { padding-left: 20px; border-color: var(--line); }
.trust-strip-icon, .deliverable-num { color: var(--muted); font-size: 10px; }
.trust-strip-item strong { font-size: 13px; }
.trust-strip-item p { color: var(--muted); font-size: 12px; }
.section-head { align-items: end; margin-bottom: 56px; }
.section-head p { font-size: 15px; line-height: 1.55; }
.friction-layout, .learning-proof-layout, .preview-proof-layout, .support-layout { gap: clamp(46px, 7vw, 120px); }
.friction-intro { top: 112px; }
.friction-list { border-top-color: rgba(16,16,14,.3); }
.friction-list article { min-height: 156px; grid-template-columns: 44px 1fr; padding: 27px 0; border-bottom-color: rgba(16,16,14,.2); gap: 16px; }
.friction-list article > span { color: var(--muted); font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.friction-list h3 { font-family: var(--font-sans); font-size: clamp(23px, 2.4vw, 34px); font-weight: 750; letter-spacing: -.055em; }
.text-link { color: var(--ink); border-bottom-color: var(--ink); }
.pricing-grid { gap: 18px; }
.price-card { min-height: 355px; padding: 30px; overflow: hidden; background: var(--panel); border: 0; border-radius: 26px; box-shadow: none; transition: transform .22s ease, background .22s ease; }
.price-card:nth-child(2n) { background: var(--paper-2); }
.price-card:nth-child(3n) { color: #fff; background: var(--ink); }
.price-card:hover { transform: translateY(-5px); }
.price-card.recommended { border: 0; box-shadow: none; }
.price-card h3 { margin: 28px 0 8px; font-family: var(--font-sans); font-size: clamp(23px, 2.3vw, 31px); font-weight: 780; letter-spacing: -.06em; }
.price-card p, .price-card .tiny { color: var(--muted); }
.price-card:nth-child(3n) p, .price-card:nth-child(3n) .tiny { color: var(--on-dark-soft); }
.price-card .btn { color: var(--ink); background: rgba(255,255,255,.84); border-color: transparent; }
.price-card .btn:hover { color: #fff; background: #000; }
.price-card:nth-child(3n) .btn { color: #fff; background: transparent; border-color: rgba(255,255,255,.42); }
.price-card:nth-child(3n) .btn:hover { color: #000; background: #fff; }
.learning-center-card { border: 1px solid rgba(255,255,255,.2); border-radius: 28px; box-shadow: none; }
.lc-welcome { background: #292925; }
.lc-welcome h3 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.07em; }
.lc-icon { background: var(--ink); border-radius: 50%; }
.preview-board-card { min-height: 550px; background: var(--player); border-radius: 34px; box-shadow: none; }
.preview-board-card::before { width: 560px; height: 560px; background: rgba(255,255,255,.12); filter: blur(22px); }
.preview-label { color: var(--on-dark-soft); background: rgba(255,255,255,.12); }
.preview-hanzi { font-family: var(--font-sans); font-size: 112px; font-weight: 800; letter-spacing: -.1em; }
.preview-pinyin { color: var(--on-dark-soft); font-size: 14px; }
.preview-meaning { color: var(--on-dark-soft); }
.preview-track span { background: #fff; }
.support-card, .fit-card, .timeline-card { border-color: rgba(16,16,14,.13); border-radius: 24px; box-shadow: none; }
.fit-card.fit-positive, .timeline-card.timeline-primary { background: var(--ink); border-color: var(--ink); }
.faq-list { border-top-color: rgba(16,16,14,.3); }
.faq-item { border-bottom-color: rgba(16,16,14,.2); }
.faq-question { font-size: 18px; font-weight: 720; }
.final-cta { color: #fff; background: var(--ink); border-radius: 0; }
.site-footer { padding: 80px 0 28px; color: var(--on-dark-soft); background: var(--ink); }
.footer-grid { grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 36px; }
.footer-intro p { max-width: 310px; margin: 22px 0 0; color: var(--on-dark-soft); font-size: 13px; line-height: 1.6; }
.site-footer .brand-word { color: #fff; }
.site-footer .brand small { color: var(--on-dark-soft); }
.site-footer .brand-seal { color: var(--ink); background: #fff; }
.footer-title { color: #fff; font-size: 12px; font-weight: 750; }
.footer-links { gap: 10px; }
.footer-links button { color: var(--on-dark-soft); font-size: 13px; }
.footer-links button:hover { color: #fff; }
.footer-bottom { margin-top: 68px; padding-top: 18px; color: var(--on-dark-soft); border-color: rgba(255,255,255,.15); font-size: 11px; }

/* Public detail, preview, legal, authentication */
.page-hero { padding: 110px 0 72px; }
.page-hero .container, .page-hero .narrow { text-align: center; }
.page-hero .lead { margin-right: auto; margin-left: auto; }
.course-layout, .preview-layout { gap: 28px; }
.course-main, .course-aside, .preview-sidebar, .preview-player, .panel, .quiz-card, .certificate { border-color: rgba(16,16,14,.15); border-radius: 24px; box-shadow: none; }
.course-aside, .preview-sidebar, .panel, .quiz-card { background: var(--panel); }
.preview-shell { background: var(--paper-2); }
.preview-player { background: var(--player); }
.preview-board .hanzi { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.1em; }
.preview-board .pinyin { color: #BBD2F7; font-size: 13px; }
.preview-board .english { color: rgba(255,255,255,.72); }
.preview-top .brand-word { color: var(--ink); }
.auth-page { background: var(--paper); }
.auth-brand { background: var(--ink); }
.auth-character { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.13em; }
.auth-quote blockquote { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.07em; }
.auth-panel { background: var(--panel); }
.auth-form h1 { font-size: clamp(36px, 4vw, 58px); }
.input, .select, .textarea { border-color: rgba(16,16,14,.22); border-radius: 12px; background: var(--panel); }
.input:focus, .select:focus, .textarea:focus { border-color: #000; box-shadow: 0 0 0 3px rgba(16,16,14,.12); }
.legal-section { padding: 40px; background: var(--panel); border: 1px solid rgba(16,16,14,.14); border-radius: 24px; }

/* Learner experience: same paper-and-ink language, task-first layout. */
.learn-shell { background: var(--paper); }
.learn-header { height: 78px; padding: 0 40px; background: var(--header-bg); border-bottom-color: rgba(16,16,14,.13); backdrop-filter: blur(18px); }
.learn-header .brand-seal { width: 38px; height: 28px; }
.learn-nav { gap: 26px; }
.learn-nav button { color: var(--muted); font-size: 13px; }
.learn-nav button.active { color: #000; border-bottom-color: #000; }
.learn-main { width: min(1360px, calc(100% - 80px)); padding: 68px 0 86px; }
.learn-welcome h1 { font-size: clamp(38px, 5vw, 70px); }
.learn-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; }
.panel { background: var(--panel); }
.panel-pad { padding: 30px; }
.continue-card, .path-card, .lesson-row, .task-item { border-color: rgba(16,16,14,.14); }
.progress-line, .progress-summary { background: var(--line-2); }
.progress-line span { background: var(--ink); }
.quiz-shell { width: min(900px, calc(100% - 48px)); padding-top: 70px; }
.quiz-card { padding: clamp(28px, 5vw, 62px); }
.certificate { padding: clamp(36px, 7vw, 86px); background: var(--panel); border: 1px solid var(--ink); outline: 0; text-align: left; }
.certificate .seal-large { margin: 0 0 30px; color: #fff; background: var(--ink); border-radius: 50%; }
.certificate-name { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.07em; }

/* Admin: a calm operational workspace, not a marketing-site imitation. */
.admin-shell { background: var(--paper); }
.admin-sidebar { width: 254px; padding: 20px 15px; background: var(--ink); border-right: 0; }
.admin-brand { padding: 7px 10px 30px; }
.admin-sidebar .brand-word, .admin-sidebar .brand-word small { color: #fff; }
.admin-sidebar .brand-seal { color: var(--ink); background: #fff; }
.admin-context { margin: 4px 6px 24px; padding: 14px; color: var(--on-dark-soft); background: rgba(255,255,255,.09); border-radius: 14px; }
.admin-context small { color: var(--on-dark-soft); }
.admin-nav-group { margin: 23px 0; }
.admin-nav-label, .admin-nav-group-toggle { color: var(--on-dark-soft); }
.admin-nav-group-toggle:hover { color: #fff; }
.admin-nav-hint { color: var(--on-dark-soft); }
.admin-nav button { min-height: 42px; color: var(--on-dark-soft); border-radius: 10px; }
.admin-nav button:hover { color: #fff; background: rgba(255,255,255,.09); }
.admin-nav button.active { color: var(--ink); background: var(--panel); }
.admin-main { margin-left: 254px; }
.admin-topbar { height: 78px; padding: 0 42px; background: var(--header-bg); border-bottom-color: rgba(16,16,14,.13); backdrop-filter: blur(18px); }
.admin-topbar h1 { font-size: 14px; font-weight: 800; letter-spacing: -.025em; }
.admin-content { padding: 44px 42px 72px; }
.admin-page-head { margin-bottom: 34px; }
.admin-page-head h2, .program-workspace-head h2 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; letter-spacing: -.07em; }
.admin-page-head p { max-width: 650px; font-size: 14px; line-height: 1.55; }
.kpi-grid { gap: 14px; }
.kpi-card { min-height: 154px; padding: 21px; background: var(--panel); border: 0; border-radius: 18px; }
.kpi-card:nth-child(2n) { background: var(--paper-2); }
.kpi-card:nth-child(3n) { color: #fff; background: var(--ink); }
.kpi-card:nth-child(3n) .kpi-top, .kpi-card:nth-child(3n) .kpi-link { color: var(--on-dark-soft); }
.kpi-value { margin-top: 28px; font-size: 38px; font-weight: 800; letter-spacing: -.07em; }
.kpi-link { color: var(--ink); font-weight: 750; }
.admin-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; margin-top: 18px; }
.admin-panel, .table-wrap, .program-object-list { background: var(--panel); border: 1px solid rgba(16,16,14,.14); border-radius: 18px; }
.admin-panel-head { min-height: 64px; padding: 0 22px; border-bottom-color: rgba(16,16,14,.12); }
.admin-panel-head h3 { font-size: 14px; }
.admin-start-guide .admin-panel-head { align-items: flex-start; padding-top: 20px; }
.admin-start-steps li { min-height: 118px; padding: 20px; border-right-color: rgba(16,16,14,.1); }
.admin-start-steps strong { font-size: 13px; }
.data-table th { color: var(--muted); background: var(--paper-2); font-size: 10px; }
.data-table td { border-bottom-color: rgba(16,16,14,.1); }

/* Multi-organization performance and WhatsApp operations */
.performance-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.performance-kpis article { min-height:104px; padding:18px; border:1px solid rgba(16,16,14,.11); border-radius:16px; background:linear-gradient(145deg,#fff 0%,#f7f7f2 100%); box-shadow:0 8px 25px rgba(16,16,14,.035); }
.performance-kpis span { display:block; color:var(--muted); font-size:12px; margin-bottom:12px; }
.performance-kpis strong { display:block; font-family:var(--font-display); font-size:24px; line-height:1.15; overflow-wrap:anywhere; }
.dimension-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:10px; padding:14px; margin:0 0 14px; border:1px solid rgba(16,16,14,.1); border-radius:14px; background:var(--paper-2); }
.admin-filter-more { margin:0 0 14px; }
.admin-filter-more > summary { display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--ink); background:var(--paper-2); border:1px solid rgba(16,16,14,.1); border-radius:14px; font-size:13px; font-weight:700; cursor:pointer; list-style:none; }
.admin-filter-more > summary::-webkit-details-marker { display:none; }
.admin-filter-more > summary::before { content:'+'; color:var(--muted); font-weight:800; }
.admin-filter-more[open] > summary { border-radius:14px 14px 0 0; }
.admin-filter-more[open] > summary::before { content:'−'; }
.admin-filter-more > summary:hover { background:var(--brand-soft); }
.admin-filter-more > .dimension-filter-grid { margin:0; border-top:0; border-radius:0 0 14px 14px; }
.dimension-filter { display:grid; gap:6px; }
.dimension-filter > span { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; }
.dimension-tags { display:flex; flex-wrap:wrap; gap:5px; max-width:420px; }
.dimension-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid rgba(16,16,14,.1); border-radius:999px; background:#fff; color:#373a36; font-size:11px; white-space:nowrap; }
.dimension-tag b { color:#878d87; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.performance-table { min-width:1080px; }
.performance-table td { vertical-align:top; }
.promotion-layout { display:grid; grid-template-columns:minmax(360px,.85fr) minmax(360px,1.15fr); gap:18px; }
.promotion-explainer { background:linear-gradient(150deg,#17211c,#29352e); color:#fff; }
.promotion-explainer .admin-panel-head { border-bottom-color:rgba(255,255,255,.12); }
.routing-steps { display:grid; gap:18px; padding:0; margin:0; list-style:none; }
.routing-steps li { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.routing-steps li > b { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#c9ff65; color:#182018; }
.routing-steps strong,.routing-steps small { display:block; }
.routing-steps small { margin-top:5px; color:rgba(255,255,255,.68); line-height:1.55; }
.channel-choice-grid { display:grid; gap:8px; }
.channel-choice { display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid rgba(16,16,14,.11); border-radius:10px; background:#fff; }
.channel-choice span,.channel-choice strong,.channel-choice small { display:block; }
.channel-choice small { color:var(--muted); margin-top:2px; }
.link-preview.compact { max-width:360px; padding:8px 10px; font-size:11px; }
.inline-grant-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1.4fr) auto; gap:12px; align-items:end; }

@media (max-width: 1100px) {
  .performance-kpis,.dimension-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promotion-layout { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .performance-kpis,.dimension-filter-grid,.inline-grant-form { grid-template-columns:1fr; }
  .performance-kpis article { min-height:88px; }
}
.row-action { color: var(--ink); font-weight: 750; }
.program-picker-item { padding: 18px 20px; background: var(--panel); border-color: rgba(16,16,14,.14); border-radius: 14px; }
.program-picker-item:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.program-tabs { background: var(--paper-2); border: 0; border-radius: 999px; }
.program-tabs button { min-height: 46px; border-radius: 999px; }
.program-tabs button.active { color: #fff; background: var(--ink); box-shadow: none; }
.program-summary-grid { border-color: rgba(16,16,14,.13); border-radius: 18px; }
.program-summary-grid button { background: var(--panel); border-right-color: rgba(16,16,14,.13); }
.program-summary-grid button:hover { color: #fff; background: var(--ink); }
.program-object-list > div { padding: 18px 20px; border-bottom-color: rgba(16,16,14,.1); }
.modal-backdrop { background: rgba(16,16,14,.68); backdrop-filter: blur(5px); }
.modal { background: var(--panel); border-radius: 22px; }
.modal-head, .modal-foot { border-color: rgba(16,16,14,.13); }
.status { border-radius: 999px; }

@media (max-width: 1100px) {
  .container, .learn-main { width: min(100% - 48px, 1180px); }
  .site-nav { position: static; margin-left: auto; transform: none; gap: clamp(10px, 1.5vw, 16px); }
  .site-nav a { font-size: 12px; }
  .product-stage { min-height: 510px; }
  .admin-sidebar { width: 230px; }
  .admin-main { margin-left: 230px; }
  .admin-topbar, .admin-content { padding-right: 28px; padding-left: 28px; }
}

@media (max-width: 900px) {
  .site-header { height: 70px; }
  .site-nav { position: fixed; top: 70px; right: 16px; left: 16px; display: none; padding: 16px; transform: none; background: var(--panel); border: 1px solid rgba(16,16,14,.15); border-radius: 18px; box-shadow: var(--shadow); }
  .site-nav.open { display: grid; gap: 3px; }
  .site-nav a { padding: 12px 8px; }
  .site-nav a:nth-child(4), .site-nav a:nth-child(5) { display: block; }
  .nav-primary, .nav-signin { display: none; }
  .icon-btn.menu-toggle { display: inline-grid; }
  .hero { padding: 48px 0 28px; }
  .hero-copy { text-align: left; }
  .hero-copy .lead { margin-right: 0; margin-left: 0; }
  .hero-actions, .proof-line { justify-content: flex-start; }
  .product-stage { min-height: 435px; border-radius: 25px; }
  .lesson-demo { min-height: 330px; grid-template-columns: 1fr 145px; }
  .section { padding: 86px 0; }
  .friction-layout, .learning-proof-layout, .preview-proof-layout, .support-layout { grid-template-columns: 1fr; }
  .friction-intro { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .learn-header { padding: 0 24px; }
  .learn-main { padding: 46px 0 64px; }
  .learn-grid, .admin-grid { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; width: auto; height: auto; min-height: 0; padding: 16px; }
  .admin-brand { padding-bottom: 12px; }
  .admin-context { display: none; }
  .admin-nav { display: flex; overflow-x: auto; gap: 8px; }
  .admin-nav-group { flex: 0 0 auto; margin: 0; }
  .admin-nav-label, .admin-nav-group-toggle, .admin-nav-hint { display: none; }
  .admin-nav-items { display: flex; gap: 6px; }
  .admin-nav button { width: auto; white-space: nowrap; }
  .admin-main { margin-left: 0; }
  .admin-topbar { height: 68px; padding: 0 20px; }
  .admin-content { padding: 28px 20px 56px; }
}

@media (max-width: 620px) {
  .container, .learn-main { width: calc(100% - 32px); }
  .brand-word { font-size: 12px; }
  .brand small { display: none; }
  /* 窄屏隐藏的只有公开站页头那个切换器（那里没地方）。后台顶栏、学习中心页头和
     登录/注册这一族页面里的都必须留着，不然手机上进了后台、学习中心或注册页，
     就再也切不回中文。学习中心窄屏时导航整条收起，这块地方是空的。
     注意：每多一个 :not() 就多一层权重，会把下面 .auth-form .auth-locale-switcher
     的 inline-flex 压掉——所以认证页那个必须一并排除，不能只靠后面的规则去覆盖。 */
  .locale-switcher:not(.admin-locale-switcher):not(.learn-locale-switcher):not(.auth-locale-switcher) { display: none; }
  .display { font-size: clamp(42px, 13vw, 62px); }
  .page-title { font-size: clamp(36px, 11vw, 52px); }
  .section-title { font-size: clamp(31px, 9vw, 44px); }
  .hero-actions .btn { width: 100%; }
  .product-stage { min-height: 330px; padding: 12px; }
  .stage-browser { border-radius: 16px; }
  .browser-bar { height: 36px; }
  .lesson-demo { min-height: 250px; grid-template-columns: 1fr 105px; }
  .lesson-outline { padding: 12px 9px; }
  .outline-item { margin-bottom: 10px; font-size: 9px; }
  .outline-dot { width: 16px; height: 16px; }
  .floating-note { display: none; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip-item + .trust-strip-item { border-left: 0; }
  .trust-strip-item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .trust-strip-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pricing-grid, .deliverable-grid, .support-cards, .fit-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 280px; }
  .section-head { margin-bottom: 34px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { display: grid; gap: 8px; margin-top: 42px; }
  .learn-header { height: auto; min-height: 66px; padding: 14px 16px; flex-wrap: wrap; }
  .learn-nav { width: 100%; overflow-x: auto; gap: 18px; order: 3; }
  .learn-welcome h1 { font-size: 39px; }
  .panel-pad, .quiz-card { padding: 22px; }
  .admin-page-head { align-items: flex-start; flex-direction: column; }
  .admin-page-head .btn { width: 100%; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .admin-start-steps, .program-summary-grid { grid-template-columns: 1fr 1fr; }
  .admin-start-steps li:nth-child(2n), .program-summary-grid button:nth-child(2n) { border-right: 0; }
  .admin-start-steps li:nth-child(n+3), .program-summary-grid button:nth-child(n+3) { border-top: 1px solid rgba(16,16,14,.1); }
  .modal-backdrop { padding: 14px; }
}

/* v176 — local, licensed stock imagery and a fuller visual rhythm.
   All image files are served from ./assets/stock/ through the same origin.
   They are generic learning/work scenes, never course or instructor claims. */
.stock-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.product-stage { overflow: hidden; background: #1d1d19; }
.product-stage::before { z-index: 0; background: linear-gradient(118deg, rgba(15,15,13,.56), rgba(15,15,13,.1) 44%, rgba(243,241,235,.24)); }
.stage-stock-image { position: absolute; inset: 0; z-index: 0; object-position: center; opacity: .93; }
.product-stage .floating-seal, .product-stage .stage-browser, .product-stage .floating-note { position: relative; z-index: 2; }
.lesson-screen { overflow: hidden; background: #1f1e1b; }
.lesson-screen::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,11,.38), rgba(12,12,11,.05) 62%); content: ""; pointer-events: none; }
.lesson-screen .stage-stock-image { position: absolute; inset: 0; object-position: center; opacity: .75; }
.lesson-screen .bookcase, .lesson-screen .lesson-light, .lesson-screen .instructor-card, .lesson-screen .lesson-caption { position: relative; z-index: 1; }
.lesson-screen .instructor-card { box-shadow: 0 12px 24px rgba(0,0,0,.25); }

.image-story-section { padding-top: 28px; padding-bottom: 136px; }
.image-story-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(20px, 3.6vw, 58px); align-items: end; }
.image-story-layout figure { margin: 0; }
.image-story-main { position: relative; min-height: 640px; overflow: hidden; background: var(--paper-2); border-radius: 34px; }
.image-story-main .stock-image { position: absolute; inset: 0; }
.image-story-main::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(16,16,14,.76)); content: ""; }
.image-story-main figcaption { position: absolute; z-index: 1; right: 32px; bottom: 30px; left: 32px; max-width: 400px; color: #fff; font-size: 18px; font-weight: 680; line-height: 1.35; }
.image-story-side { display: grid; gap: 34px; }
.image-story-side figure { height: 320px; overflow: hidden; border-radius: 24px; background: var(--paper-2); }
.image-story-side .stock-image { object-position: center; }
.image-story-side .section-title { margin: 9px 0 18px; font-size: clamp(34px, 3.8vw, 54px); }

.program-card { display: flex; min-height: 520px; flex-direction: column; padding: 0; background: var(--panel); }
.program-card:nth-child(2n), .program-card:nth-child(3n) { color: var(--ink); background: var(--panel); }
.program-card:nth-child(3n) p, .program-card:nth-child(3n) .tiny { color: var(--muted); }
.program-card:nth-child(3n) .btn { color: #fff; background: #111; border-color: #111; }
.program-card:nth-child(3n) .btn:hover { color: #111; background: #fff; border-color: #111; }
.program-card-media { position: relative; height: 235px; margin: 0; overflow: hidden; background: var(--paper-2); }
.program-card-media .stock-image { transition: transform .45s ease; }
.program-card:hover .program-card-media .stock-image { transform: scale(1.04); }
.program-card-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,16,14,.02), rgba(16,16,14,.45)); content: ""; }
.program-card-media figcaption { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; color: #fff; font-size: 11px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.program-card-body { display: flex; min-height: 285px; flex: 1; flex-direction: column; padding: 25px 28px 28px; }
.program-card .kicker { margin-bottom: 14px; }
.program-card h3 { margin: 0 0 11px; }
.program-card .proof-line { justify-content: flex-start; margin: 17px 0 10px; }
.program-card .tiny { margin-top: auto; }
.program-card .btn { margin-top: 18px; }
.scheduled-program-card { padding: 0; overflow: hidden; background: var(--panel); border-color: rgba(16,16,14,.12); }
.scheduled-program-media { height: 220px; margin: 0; overflow: hidden; background: var(--paper-2); }
.scheduled-program-media .stock-image { transition: transform .45s ease; }
.scheduled-program-card:hover .stock-image { transform: scale(1.035); }
.scheduled-program-copy { padding: 25px 26px 28px; }
.scheduled-program-copy h3 { margin: 12px 0 10px; }

.page-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, rgba(var(--wash), .96) 0%, rgba(var(--wash), .9) 48%, rgba(var(--wash), .63) 100%), url("./assets/stock/learning-library.jpg") center/cover; border-bottom: 1px solid rgba(16,16,14,.11); }
.page-hero > .container, .page-hero > .narrow { position: relative; z-index: 1; }
.page-hero .hero-actions { margin-top: 29px; }
.preview-player { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(16,27,51,.88), rgba(16,27,51,.45)), url("./assets/stock/workflow-on-screen.jpg") center/cover; }
.preview-player::before { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,16,14,.16), rgba(16,16,14,.48)); content: ""; }
.preview-player .preview-content { z-index: 1; }
.preview-player .play-trigger { z-index: 3; }
.preview-player .preview-progress { z-index: 4; }
.preview-player .preview-counter { z-index: 5; }
.preview-player .unlock-layer { z-index: 8; }
.preview-player .preview-board { text-shadow: 0 4px 20px rgba(0,0,0,.45); }

.learning-center-card { position: relative; overflow: hidden; background: #20201c; }
.learning-center-card::after { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(16,16,14,.86), rgba(16,16,14,.48)), url("./assets/stock/learning-library.jpg") center/cover; content: ""; opacity: .42; }
.learning-center-card > * { position: relative; z-index: 1; }

.auth-brand { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(150deg, rgba(15,15,13,.92), rgba(15,15,13,.55)), url("./assets/stock/learning-collaboration.jpg") center/cover; }
.auth-brand > * { position: relative; z-index: 1; }

.learn-welcome { position: relative; overflow: hidden; padding: 0 0 36px; border-bottom: 1px solid rgba(16,16,14,.14); }
.learn-welcome::after { position: absolute; right: 0; bottom: 0; width: min(39vw, 520px); height: 100%; background: linear-gradient(90deg, var(--paper), transparent 42%), url("./assets/stock/workflow-on-screen.jpg") center/cover; content: ""; opacity: .3; pointer-events: none; }
.learn-welcome > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .image-story-section { padding-top: 18px; padding-bottom: 86px; }
  .image-story-layout { grid-template-columns: 1fr; }
  .image-story-main { min-height: min(76vw, 560px); }
  .image-story-side { grid-template-columns: minmax(0, .8fr) 1fr; align-items: center; }
  .image-story-side figure { height: 270px; }
  .page-hero { background-position: 58% center; }
}

@media (max-width: 620px) {
  .product-stage { min-height: 350px; }
  .image-story-main { min-height: 470px; border-radius: 24px; }
  .image-story-main figcaption { right: 20px; bottom: 20px; left: 20px; font-size: 16px; }
  .image-story-side { grid-template-columns: 1fr; gap: 24px; }
  .image-story-side figure { height: 240px; border-radius: 18px; }
  .program-card { min-height: 0; }
  .program-card-media { height: 210px; }
  .program-card-body { min-height: 0; }
  .page-hero { background-position: 66% center; }
  .page-hero .hero-actions { justify-content: flex-start; }
  .learn-welcome::after { width: 70vw; opacity: .18; }
}

/* v177 — editorial, image-led public pages.  This is an original platform
   composition: it borrows only the reference's pacing (large type, image
   clusters, long-form sections and restrained motion), never its assets or
   recruiting product language. */
.hero-editorial { position: relative; overflow: clip; padding: 30px 0 76px; }
.hero-editorial .hero-grid { min-height: min(790px, calc(100svh - 100px)); grid-template-columns: minmax(0, .89fr) minmax(500px, 1.11fr); gap: clamp(32px, 5.5vw, 96px); }
.hero-editorial .hero-copy { max-width: 690px; }
.hero-editorial .display { max-width: 690px; font-size: clamp(58px, 6.2vw, 108px); line-height: .91; letter-spacing: -.075em; }
.hero-editorial .lead { max-width: 520px; font-size: 16px; line-height: 1.62; }
.hero-editorial .proof-line { margin-top: 44px; }

.hero-mosaic { position: relative; min-height: 630px; width: min(100%, 690px); margin-left: auto; isolation: isolate; }
.hero-mosaic figure { position: absolute; z-index: 1; overflow: hidden; margin: 0; background: #d9d4c9; }
.hero-mosaic figure .stock-image { transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.hero-mosaic:hover figure .stock-image { transform: scale(1.035); }
.hero-mosaic-main { top: 15px; right: 0; width: 64%; height: 61%; border-radius: 999px 999px 18px 18px; box-shadow: 0 18px 42px rgba(16,16,14,.08); }
.hero-mosaic-main .stock-image { object-position: 62% center; }
.hero-mosaic-session { bottom: 8px; left: 0; width: 43%; height: 46%; border-radius: 19px; box-shadow: 0 18px 42px rgba(16,16,14,.08); }
.hero-mosaic-session .stock-image { object-position: 58% center; }
.hero-mosaic-library { right: 2%; bottom: 0; width: 25%; height: 24%; border-radius: 50%; border: 7px solid var(--paper); }
.hero-mosaic-library .stock-image { object-position: 44% center; }
.hero-mosaic-panel { position: absolute; z-index: 3; top: 53%; left: 28%; width: min(340px, 58%); padding: 18px 18px 15px; color: #f5f2ea; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(19,19,16,.92); box-shadow: 0 20px 60px rgba(0,0,0,.24); transform: rotate(-3.5deg); }
.hero-mosaic-panel > span { display: block; color: #b8b4aa; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero-mosaic-panel > strong { display: block; margin: 10px 0 15px; font-size: 18px; line-height: 1.03; letter-spacing: -.045em; }
.mosaic-panel-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: 11px; }
.mosaic-panel-row i { width: 7px; height: 7px; border-radius: 50%; background: #f5f2ea; }
.mosaic-panel-row b { font-weight: 650; }
.mosaic-panel-row em { color: #aaa79e; font-size: 10px; font-style: normal; }
.mosaic-panel-row.is-muted { opacity: .47; }
.hero-mosaic-note { position: absolute; z-index: 3; top: 4px; left: 0; display: grid; gap: 8px; color: #24231f; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-mosaic-note b { font-size: 31px; font-weight: 400; line-height: .8; }

.catalog-hero { position: relative; min-height: 560px; padding: 112px 0 84px; color: #fff; background: #171715; }
.catalog-hero .container { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; text-align: left; }
.catalog-hero .eyebrow { color: var(--on-dark-soft); }
.catalog-hero .page-title { max-width: 760px; color: #fff; font-size: clamp(56px, 7.0vw, 106px); line-height: .91; letter-spacing: -.078em; }
.catalog-hero .lead { max-width: 570px; margin: 25px 0 0; color: var(--on-dark-soft); }
.catalog-hero .hero-actions { max-width: 620px; margin-top: 32px; }
.catalog-hero .btn { color: #fff; border-color: rgba(255,255,255,.34); border-radius: 999px; background: transparent; }
.catalog-hero .btn.btn-primary { color: #151513; border-color: #fff; background: #fff; }
.catalog-hero-visual { position: absolute; top: 46px; right: max(4vw, calc((100vw - 1280px) / 2)); bottom: 0; width: min(37vw, 510px); overflow: hidden; border-radius: 260px 260px 0 0; }
.catalog-hero-visual::after { position: absolute; inset: 0; background: rgba(0,0,0,.22); content: ""; }
.catalog-hero-visual .stock-image { height: 100%; object-position: 56% center; filter: saturate(.82) contrast(1.04); }
.catalog-hero-visual span { position: absolute; z-index: 1; right: 21px; bottom: 24px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; }

.program-detail-hero { padding-top: 84px; padding-bottom: 72px; background: var(--paper-2); }
.program-detail-hero .page-hero-grid { align-items: center; grid-template-columns: minmax(0, .94fr) minmax(330px, .76fr); }
.program-detail-hero .page-hero-grid > div { text-align: left; }
.program-detail-hero .page-title { max-width: 750px; font-size: clamp(52px, 6.4vw, 98px); letter-spacing: -.08em; }
.program-detail-hero .lead { max-width: 590px; margin-right: 0; margin-left: 0; }
.program-detail-rail { display: grid; align-items: end; gap: 17px; }
.detail-hero-media { height: 295px; margin: 0; overflow: hidden; border-radius: 155px 155px 18px 18px; background: var(--paper-2); }
.detail-hero-media .stock-image { height: 100%; object-position: center; }
.detail-hero-media figcaption { bottom: 18px; left: 19px; }
.program-detail-rail .sticky-card { margin: 0; padding: 25px 26px 24px; border: 1px solid rgba(16,16,14,.12); background: rgba(255,254,250,.9); box-shadow: 0 16px 40px rgba(16,16,14,.06); }

.program-card { position: relative; overflow: hidden; min-height: 560px; border-radius: 20px; }
.program-card::before { position: absolute; z-index: 2; top: 18px; right: 18px; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(16,16,14,.18); content: "↗"; color: #fff; font-size: 13px; line-height: 21px; text-align: center; opacity: 0; transform: translate(-5px, 5px); transition: opacity .25s ease, transform .25s ease; }
.program-card:hover::before { opacity: 1; transform: translate(0, 0); }
.program-card-media { height: 260px; }
.program-card-body { padding: 27px 30px 30px; }
.program-card h3 { font-size: clamp(25px, 2.2vw, 35px); letter-spacing: -.055em; }
.program-card .btn { border-radius: 999px; }
@media (min-width: 1040px) {
  .pricing-grid .program-card:first-child { grid-column: span 2; min-height: 580px; }
  .pricing-grid .program-card:first-child .program-card-media { height: 320px; }
  .pricing-grid .program-card:first-child .program-card-body { display: grid; grid-template-columns: 1.12fr .88fr; column-gap: 36px; align-items: start; }
  .pricing-grid .program-card:first-child .kicker, .pricing-grid .program-card:first-child h3, .pricing-grid .program-card:first-child > .program-card-body > p { grid-column: 1; }
  .pricing-grid .program-card:first-child .proof-line { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .pricing-grid .program-card:first-child .tiny { grid-column: 2; margin-top: 16px; }
  .pricing-grid .program-card:first-child .btn { grid-column: 2; }
}

.preview-shell { position: relative; overflow: hidden; background: var(--paper-2); }
.preview-shell::before { position: absolute; top: 0; right: -15vw; width: 48vw; height: 100%; background: url("./assets/stock/individual-study.jpg") center/cover; content: ""; opacity: .12; pointer-events: none; }
.preview-shell .container { position: relative; z-index: 1; }
.preview-layout { grid-template-columns: minmax(0, 1fr) 344px; gap: 24px; }
.preview-player { min-height: 600px; border: 1px solid rgba(16,16,14,.14); border-radius: 26px; box-shadow: 0 22px 80px rgba(18,18,15,.14); }
.preview-sidebar { display: flex; min-height: 600px; flex-direction: column; border: 1px solid rgba(16,16,14,.12); border-radius: 26px; box-shadow: 0 22px 80px rgba(18,18,15,.08); }
.preview-sidebar .side-head { padding: 26px 24px; }
.preview-sidebar .lesson-list { flex: 1; }
.preview-sidebar .lesson-row { min-height: 94px; padding-right: 22px; transition: background .2s ease, transform .2s ease; }
.preview-sidebar .lesson-row:hover { background: var(--brand-soft); transform: translateX(3px); }

/* v178 — precision pass: contrast, optical spacing and preview-only mobile
   behavior.  These refinements keep the public pages image-led while making
   Chinese type, cards and the learning preview feel deliberate at each size. */
.image-story-main, .image-story-side figure { background: var(--paper-2); }
.image-story-main .stock-image, .image-story-side figure .stock-image { transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.image-story-main:hover .stock-image, .image-story-side figure:hover .stock-image { transform: scale(1.025); }

/* v179 — repair duplicated layout ownership and give the public delivery flow
   its own light-surface rhythm instead of inheriting the dark-page step card. */
.preview-side-foot { display: flex; align-items: center; justify-content: space-between; margin: 8px 16px 16px; padding: 15px 8px 0; color: var(--muted); border-top: 1px solid rgba(16,16,14,.12); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.preview-side-foot strong { color: var(--ink); font-size: 13px; letter-spacing: -.02em; }
#how { padding-top: 98px; padding-bottom: 90px; }
#how .section-head { margin-bottom: 42px; }
#how .steps { border-top-color: rgba(16,16,14,.13); }
#how .step { min-height: 184px; padding-top: 22px; padding-bottom: 20px; border-right-color: rgba(16,16,14,.11); }
#how .step + .step { padding-left: 24px; }
#how .step-num { width: 30px; height: 30px; margin-bottom: 34px; color: #fff; background: var(--ink); box-shadow: 0 0 0 5px var(--paper); }
#how .step h3 { margin-bottom: 7px; font-size: 17px; }
#how .step p { color: #74736d; font-size: 13px; line-height: 1.58; }

/* v180 — the sample player is a deliberate UI, not a browser-video fallback.
   Keep the timer and timeline as absolute overlays; a later broad positioning
   rule previously pulled both into normal flow and made them appear detached. */
.preview-player .preview-counter { top: 18px; right: 18px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(16,16,14,.52); box-shadow: 0 4px 18px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; letter-spacing: .025em; }
.preview-player .preview-progress { right: 22px; bottom: 20px; left: 22px; height: 4px; background: rgba(255,255,255,.32); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
.preview-sidebar .locked-arrow { opacity: .48; transform: none; }
.preview-sidebar .locked-row:hover .locked-arrow, .preview-sidebar .locked-row:focus-visible .locked-arrow { opacity: 1; transform: translateX(3px); }

/* v186 — first-project course-map refinement.
   The full map has a calm editorial hierarchy: course intent first, chapter
   purpose second, then every lesson as a usable, visibly locked or previewed
   learning unit. This stays legible even when one project has 50+ lessons. */
/* v184 — program-owned course guide, course map and multi-course preview.
   These components deliberately live inside the program detail rather than
   turning the public catalog into a flat wall of independently sold videos. */
.course-guide-section { padding-top: 112px; padding-bottom: 112px; overflow: hidden; }
.course-guide-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 7vw, 116px); align-items: center; }
.course-guide-portrait { position: relative; display: flex; min-height: 480px; padding: 26px; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 28px; color: #fff; background: radial-gradient(circle at 71% 26%, var(--guide-card-glow) 0 5%, transparent 27%), radial-gradient(circle at 29% 67%, var(--guide-card-glow-2) 0 9%, transparent 39%), linear-gradient(145deg, var(--player) 0%, var(--guide-card-mid) 53%, var(--brand) 134%); box-shadow: 18px 21px 0 var(--guide-card-shadow); }
.course-guide-portrait::before { position: absolute; inset: 0; content: ''; opacity: .24; background: repeating-linear-gradient(115deg, transparent 0 21px, rgba(255,255,255,.17) 22px 23px, transparent 24px 46px); mix-blend-mode: overlay; }
.course-guide-portrait > * { position: relative; z-index: 1; }
.course-guide-portrait > span { align-self: flex-start; padding: 8px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: var(--scrim); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.course-guide-monogram { display: grid; width: 164px; height: 164px; margin: auto; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: 0 18px 58px rgba(0,0,0,.25), inset 0 0 0 17px rgba(255,255,255,.06); font-size: 52px; font-weight: 760; line-height: .86; letter-spacing: -.1em; }
.course-guide-portrait small { max-width: 230px; color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.5; }
.course-guide-copy .section-title { max-width: 760px; margin: 6px 0 8px; font-size: clamp(36px, 4.2vw, 64px); }
.course-guide-role { margin: 0 0 22px; color: var(--ink-2); font-size: 16px; font-weight: 720; }
.course-guide-copy .lead { max-width: 660px; }
.course-guide-facts { display: flex; max-width: 720px; margin: 23px 0 4px; flex-wrap: wrap; gap: 8px; }
.course-guide-facts span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 760; }
.course-guide-points { margin: 30px 0 25px; }
.course-guide-note { display: grid; max-width: 660px; padding: 18px 0 0 22px; gap: 5px; border-top: 1px solid var(--line); border-left: 2px solid var(--brand); }
.course-guide-note strong { font-size: 14px; }
.course-guide-note span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.public-course-library { display: grid; gap: 22px; }
.public-course-card { overflow: hidden; border: 1px solid rgba(16,16,14,.13); border-radius: 24px; background: var(--panel); box-shadow: 0 12px 31px rgba(31, 42, 68, .06); }
.public-course-card-head { display: grid; padding: 30px 31px 28px; grid-template-columns: 184px minmax(0, 1fr) auto; align-items: center; gap: 24px; border-bottom: 1px solid rgba(16,16,14,.1); background: linear-gradient(104deg, var(--brand-soft), #fff 44%, var(--paper-2)); }
.public-course-video-poster { position: relative; min-height: 118px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; color: #fff; background: var(--player); text-align: left; box-shadow: 0 12px 28px rgba(25,24,20,.18); }
.public-course-video-poster .stock-image { position: absolute; inset: 0; transition: transform .45s ease, filter .45s ease; filter: saturate(.72) contrast(1.08); }
.video-poster-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,11,.08), rgba(10,12,11,.7)); }
.video-poster-play { position: absolute; top: 50%; left: 50%; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: var(--brand); background: rgba(255,255,255,.95); box-shadow: 0 8px 26px rgba(0,0,0,.28); transform: translate(-50%, -50%); transition: transform .25s ease; }
.video-poster-play svg { width: 17px; height: 17px; transform: translateX(1px); }
.public-course-video-poster small { position: absolute; z-index: 2; right: 11px; bottom: 10px; left: 11px; color: #fff; font-size: 9px; font-weight: 820; letter-spacing: .04em; }
.public-course-video-poster:hover .stock-image, .public-course-video-poster:focus-visible .stock-image { transform: scale(1.045); filter: saturate(.9) contrast(1.05); }
.public-course-video-poster:hover .video-poster-play, .public-course-video-poster:focus-visible .video-poster-play { transform: translate(-50%, -50%) scale(1.08); }
.public-course-video-poster:focus-visible { outline: 3px solid rgba(0,86,210,.35); outline-offset: 3px; }
.public-course-index { display: inline-flex; min-width: 42px; align-items: center; justify-content: center; padding: 7px 9px; border-radius: 999px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.public-course-card-head > span { display: inline-flex; min-width: 42px; align-items: center; justify-content: center; padding: 7px 9px; border-radius: 999px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.public-course-card-head h3 { margin: 5px 0 0; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.055em; }
.public-course-card-head p { max-width: 700px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.public-course-kicker { margin: 0 !important; color: var(--brand) !important; font-size: 10px !important; font-weight: 850; letter-spacing: .105em; text-transform: uppercase; }
.public-course-stats { display: grid; min-width: 93px; padding: 6px 0 0; gap: 1px; text-align: right; }
.public-course-stats strong { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.07em; }
.public-course-stats > span { color: #3e3c37; font-size: 11px; font-weight: 760; }
.public-course-stats small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.public-chapter { padding: 20px 26px 26px; }
.public-chapter + .public-chapter { border-top: 1px solid rgba(16,16,14,.09); }
.public-course-chapter { padding: 25px 31px 29px; }
.public-course-chapter + .public-course-chapter { border-top: 1px solid rgba(16,16,14,.09); }
.public-chapter-head { display: grid; margin: 0 0 16px; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.public-chapter-head > span { display: inline-flex; width: max-content; padding: 7px 9px; align-items: center; border: 1px solid rgba(0,86,210,.2); border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-weight: 850; letter-spacing: .055em; }
.public-chapter-head h4 { margin: 1px 0 0; font-size: 17px; letter-spacing: -.035em; }
.public-chapter-head p { max-width: 670px; margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.public-chapter-head small { padding-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.public-chapter-label { display: flex; margin-bottom: 12px; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.public-chapter-label::before { width: 24px; height: 1px; content: ''; background: var(--brand); }
.public-lesson-list { display: grid; gap: 8px; }
.public-lesson-card { display: grid; width: 100%; padding: 15px 16px; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid rgba(16,16,14,.1); border-radius: 14px; color: var(--ink); background: var(--panel); text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.public-lesson-card:hover, .public-lesson-card:focus-visible { transform: translateX(3px); border-color: rgba(16,16,14,.32); outline: 0; }
.public-lesson-card.is-preview { border-color: rgba(0,86,210,.45); background: var(--brand-soft); }
.public-lesson-card.is-preview:hover, .public-lesson-card.is-preview:focus-visible { border-color: var(--brand); background: #DCE9FD; }
.public-lesson-number { display: grid; width: 41px; height: 32px; place-items: center; border-radius: 8px; color: var(--muted); background: var(--paper-2); font-size: 10px; font-weight: 850; letter-spacing: -.015em; }
.is-preview .public-lesson-number { color: #fff; background: var(--brand); }
.public-lesson-main { min-width: 0; }
.public-lesson-main strong { display: block; overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.public-lesson-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.public-lesson-action { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 11px; font-weight: 800; white-space: nowrap; }
.public-lesson-end { display: inline-flex; min-width: 76px; align-items: center; justify-content: flex-end; gap: 7px; color: var(--brand); }
.public-lesson-end em { font-size: 11px; font-style: normal; font-weight: 800; }
.public-lesson-end b { font-size: 10px; font-weight: 800; white-space: nowrap; }
.public-lesson-end svg { width: 15px; height: 15px; }
/* 有封面时第一列换成 16:9 缩略图，课时编号叠在图的左下角 */
.public-lesson-card.has-cover { grid-template-columns: 128px minmax(0, 1fr) auto; }
.public-lesson-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: var(--paper-2); }
.public-lesson-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.public-lesson-art .public-lesson-number { position: absolute; left: 5px; bottom: 5px; width: auto; min-width: 24px; height: 19px; padding: 0 5px; border-radius: 6px; color: #fff; background: rgba(16, 16, 14, .68); font-size: 9px; }
.is-locked .public-lesson-end { color: var(--muted); }
.is-locked .public-lesson-action { color: var(--muted); }
.lesson-library-section { padding-top: clamp(72px, 8vw, 128px); padding-bottom: clamp(78px, 8vw, 138px); background: var(--paper-2); }
.lesson-library-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 38px; }
.lesson-library-intro .section-title { max-width: 770px; }
.lesson-library-intro .lead { max-width: 735px; }
.lesson-library-totals { display: flex; min-width: max-content; align-items: stretch; border: 1px solid rgba(16,16,14,.13); border-radius: 14px; background: rgba(255,255,255,.54); overflow: hidden; }
.lesson-library-totals span { display: grid; min-width: 94px; padding: 15px 17px 14px; gap: 4px; border-left: 1px solid rgba(16,16,14,.1); color: var(--muted); font-size: 10px; font-weight: 760; line-height: 1.25; text-align: center; }
.lesson-library-totals span:first-child { border-left: 0; }
.lesson-library-totals strong { color: var(--ink); font-size: 25px; font-weight: 820; letter-spacing: -.07em; line-height: 1; }
/* v191 课时库筛选与搜索 */
.lesson-library-filters { display: grid; margin-bottom: 24px; padding: 16px 20px; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.lesson-filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lesson-filter-label { flex: 0 0 auto; min-width: 76px; color: var(--muted); font-size: 10px; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
.lesson-filter-chip { min-height: 34px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--paper); font-size: 12px; font-weight: 760; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.lesson-filter-chip:hover, .lesson-filter-chip:focus-visible { border-color: var(--brand); color: var(--brand); outline: 0; }
.lesson-filter-chip.active { border-color: var(--brand); color: #fff; background: var(--brand); }
.lesson-filter-search { display: flex; align-items: center; gap: 8px; }
.lesson-filter-search input { width: 100%; min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); font-size: 13px; }
.lesson-filter-search input:focus-visible { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px var(--brand-line); }
.lesson-filter-count { margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 760; }
.lesson-library-empty { padding: 48px 26px; border: 1px dashed var(--line); border-radius: 18px; background: var(--panel); text-align: center; }
.lesson-library-empty h3 { margin: 0 0 9px; font-size: 19px; }
.lesson-library-empty p { max-width: 520px; margin: 0 auto 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
/* v191 后台逐课时文案分区（后台弹窗内，随 v191 一批落在此处便于追溯） */
.admin-lesson-copy { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.admin-lesson-copy-group { border-bottom: 1px solid var(--line); }
.admin-lesson-copy-group:last-child { border-bottom: 0; }
.admin-lesson-copy-group > summary { display: flex; padding: 13px 16px; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 780; }
.admin-lesson-copy-group > summary::-webkit-details-marker { display: none; }
.admin-lesson-copy-group > summary em { margin-left: auto; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 760; }
.admin-lesson-copy-list { display: grid; padding: 2px 16px 12px; }
.admin-lesson-copy-row { display: grid; padding: 11px 0; gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px dashed var(--line); }
.admin-lesson-copy-row:last-child { border-bottom: 0; }
.admin-lesson-copy-row .input { min-height: 34px; font-size: 12px; }
.admin-lesson-copy-who { display: grid; grid-column: 1 / -1; gap: 2px; min-width: 0; }
.admin-lesson-copy-who b { color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.admin-lesson-copy-who i { overflow: hidden; color: var(--ink); font-size: 12px; font-style: normal; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .admin-lesson-copy-row { grid-template-columns: 1fr; }
}
.lesson-library-course { margin-top: 46px; border: 1px solid rgba(16,16,14,.12); border-radius: 24px; background: var(--panel); overflow: hidden; box-shadow: 0 19px 46px rgba(31, 42, 68, .06); }
.lesson-library-course-head { display: grid; padding: 22px; grid-template-columns: 168px minmax(0, 1fr) auto; align-items: stretch; gap: 25px; border-bottom: 1px solid rgba(16,16,14,.11); background: var(--paper-2); }
.lesson-library-course-media { position: relative; min-height: 130px; margin: 0; border-radius: 15px; background: #2a2c2b; overflow: hidden; }
.lesson-library-course-media::after { position: absolute; inset: 0; content: ''; background: rgba(8,10,10,.22); pointer-events: none; }
.lesson-library-course-media img { width: 100%; height: 100%; object-fit: cover; }
.lesson-library-course-media figcaption { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: #fff; background: rgba(10,11,11,.34); font-size: 9px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.lesson-library-course-copy { align-self: center; }
.lesson-library-course-copy .eyebrow { margin-bottom: 7px; }
.lesson-library-course-copy h3 { margin: 0; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -.055em; line-height: 1.05; }
.lesson-library-course-copy > p:not(.eyebrow) { max-width: 720px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.lesson-library-course-meta { display: flex; margin-top: 15px; flex-wrap: wrap; gap: 7px; }
.lesson-library-course-meta span { padding: 5px 8px; border: 1px solid rgba(16,16,14,.12); border-radius: 999px; color: #4c4d48; background: rgba(255,255,255,.62); font-size: 10px; font-weight: 760; }
.lesson-library-course-action { display: flex; align-items: center; justify-content: flex-end; }
.lesson-library-open { display: inline-flex; min-width: 152px; padding: 12px 14px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ink); border-radius: 12px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 800; transition: background .2s ease, color .2s ease, transform .2s ease; }
.lesson-library-open:hover, .lesson-library-open:focus-visible { color: var(--ink); background: #fff; outline: 0; transform: translateY(-1px); }
.lesson-library-open svg { width: 14px; height: 14px; }
.lesson-card-grid { display: grid; padding: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; gap: 12px; }
.lesson-library-card { display: grid; width: 100%; min-width: 0; padding: 0; grid-template-rows: auto auto auto auto; border: 1px solid rgba(16,16,14,.12); border-radius: 15px; color: var(--ink); background: var(--panel); overflow: hidden; text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.lesson-library-card:hover, .lesson-library-card:focus-visible { border-color: rgba(16,16,14,.38); box-shadow: 0 12px 28px var(--line); outline: 0; transform: translateY(-3px); }
.lesson-library-card.is-preview { border-color: rgba(0,86,210,.45); }
.lesson-library-card.is-selected { box-shadow: inset 0 0 0 1px var(--brand), 0 12px 28px rgba(0,86,210,.14); }
.lesson-library-art { position: relative; display: grid; padding: 10px 13px; aspect-ratio: 16 / 9; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; color: #20221e; background: var(--cover-1); overflow: hidden; }
.lesson-library-art::before { position: absolute; width: 103px; height: 103px; right: -19px; bottom: -36px; border: 1px solid rgba(16,16,14,.14); border-radius: 50%; content: ''; }
.lesson-library-art::after { position: absolute; width: 44px; height: 44px; right: 29px; bottom: 13px; border: 1px solid rgba(16,16,14,.18); border-radius: 50%; content: ''; }
.lesson-library-art small, .lesson-library-art strong, .lesson-library-art i { position: relative; z-index: 1; }
.lesson-library-art small { align-self: start; color: rgba(16,16,14,.66); font-size: 9px; font-weight: 820; letter-spacing: .075em; text-transform: uppercase; }
.lesson-library-art strong { align-self: center; grid-column: 1 / -1; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(44px, 3.6vw, 64px); font-weight: 850; letter-spacing: -.02em; line-height: .9; }
.lesson-library-art i { align-self: end; color: rgba(16,16,14,.62); font-size: 10px; font-style: normal; font-weight: 750; letter-spacing: .04em; text-transform: none; }
.lesson-library-card.tone-1 .lesson-library-art { background: var(--cover-2); }
.lesson-library-card.tone-2 .lesson-library-art { background: var(--cover-3); }
.lesson-library-card.tone-3 .lesson-library-art { background: var(--cover-4); }
.lesson-library-card.tone-4 .lesson-library-art { background: var(--cover-5); }
/* 契约§3.1：「可试听」= 右上角小徽章（浅蓝底+蓝字+蓝边），主色只允许出现在这里 */
.lesson-preview-badge { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 4px 9px; border: 1px solid rgba(0,86,210,.32); border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 9px; font-weight: 850; letter-spacing: .05em; line-height: 1.4; }
/* 契约§3.1：锁定课时封面 = 中性灰，无徽章 */
.lesson-library-card.is-locked .lesson-library-art { color: var(--muted); background: var(--cover-5); }
/* 契约§3.1：课时封面固定 16:9（视频素材本身也是 16:9）。
   有真图时图片等比铺满、零裁切；无图时同一比例的框内展示大汉字设计封面。 */
.lesson-library-art.has-cover { padding: 0; }
.lesson-library-art.has-cover > small, .lesson-library-art.has-cover > strong, .lesson-library-art.has-cover > i { display: none; }
.lesson-library-art.has-cover::before, .lesson-library-art.has-cover::after { display: none; }
.lesson-library-cover { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--cover-1); object-fit: cover; object-position: center; }
.lesson-library-copy { min-width: 0; padding: 10px 14px 8px; }
.lesson-library-copy > small { display: block; overflow: hidden; line-height: 1.2; color: var(--brand); font-size: 9px; font-weight: 820; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.lesson-library-copy > strong { display: -webkit-box; min-height: 2.56em; margin-top: 3px; overflow: hidden; font-size: 13.5px; letter-spacing: -.02em; line-height: 1.28; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lesson-library-copy p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* v191：第 3、4 行——这节课讲什么（限 2 行）／你会做什么（限 1 行）。
   两者都用 min-height 钉住行数，54 张卡片高度完全一致，不出现参差。 */
.lesson-library-copy .lesson-library-pitch { min-height: 2.8em; margin-top: 4px; color: var(--ink-2); font-size: 11px; line-height: 1.4; -webkit-line-clamp: 2; }
.lesson-library-copy .lesson-library-outcome { min-height: 1.4em; margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.4; -webkit-line-clamp: 1; }
.lesson-library-meta { display: flex; padding: 6px 14px; align-items: center; gap: 10px; border-top: 1px solid rgba(16,16,14,.09); }
.lesson-library-meta em { overflow: hidden; color: var(--brand); font-size: 9.5px; font-style: normal; font-weight: 830; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.lesson-library-meta em + em { position: relative; padding-left: 11px; }
.lesson-library-meta em + em::before { position: absolute; top: 50%; left: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); content: ''; opacity: .55; transform: translateY(-50%); }
.lesson-library-foot { display: flex; min-width: 0; padding: 8px 14px; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(16,16,14,.09); color: var(--muted); }
.lesson-library-foot b { overflow: hidden; font-size: 10px; font-weight: 790; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.lesson-library-foot i { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--brand); font-size: 10px; font-style: normal; font-weight: 820; }
.lesson-library-card.is-locked .lesson-library-foot i { color: #74756f; }
.lesson-library-foot svg { width: 14px; height: 14px; }
.lesson-library-play { position: absolute; z-index: 3; right: 13px; bottom: 13px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.64); border-radius: 50%; color: var(--brand); background: #fff; box-shadow: 0 8px 24px rgba(31, 42, 68, .22); }
.lesson-library-play svg { width: 15px; height: 15px; transform: translateX(1px); }
.preview-library-shell { padding-top: 70px; }
/* 契约§九：试听库页头介绍人入口 */
.preview-top-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.preview-guide-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid rgba(0,86,210,.32); border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 800; }
.preview-guide-link:hover, .preview-guide-link:focus-visible { border-color: var(--brand); outline: 0; }
.preview-guide-link svg { width: 13px; height: 13px; }
/* 契约§九：全宽介绍人卡片 */
.presenter-strip { padding-top: 0; }
.presenter-card { display: flex; padding: 26px 30px; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow); }
.presenter-card .presenter-monogram { flex: 0 0 auto; display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 22px; font-weight: 850; letter-spacing: .02em; }
.presenter-card-copy { flex: 1 1 auto; min-width: 0; }
.presenter-card-copy h2 { margin: 3px 0 4px; font-size: 21px; letter-spacing: -.02em; }
.presenter-card-copy p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.presenter-card > .btn { flex: 0 0 auto; }
@media (max-width: 760px) { .presenter-card { flex-wrap: wrap; } .presenter-card > .btn { width: 100%; } }
.preview-course-tabs { display: flex; margin: 30px 0 18px; gap: 9px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.preview-course-chip { display: grid; min-width: 230px; padding: 12px 14px; grid-template-columns: 37px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; border: 1px solid rgba(16,16,14,.18); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.56); font-size: 12px; font-weight: 750; text-align: left; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.preview-course-chip span { display: grid; width: 37px; height: 32px; grid-row: 1 / 3; place-items: center; border-radius: 9px; color: var(--muted); background: var(--paper-2); font-size: 10px; font-weight: 850; }
.preview-course-chip i { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.preview-course-chip b { overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.preview-course-chip:hover, .preview-course-chip:focus-visible, .preview-course-chip.active { border-color: var(--ink); color: #fff; background: var(--ink); outline: 0; }
.preview-course-chip.active span { color: var(--ink); background: var(--brand-soft); }
.preview-course-chip.active i { color: rgba(255,255,255,.68); }
.preview-learning-sidebar { display: flex; min-height: 554px; flex-direction: column; }
.preview-learning-sidebar .side-head strong { display: block; margin: 7px 0 5px; font-size: 18px; line-height: 1.25; }
.preview-learning-sidebar .side-head strong i { display: inline-grid; min-width: 34px; margin-right: 7px; padding: 4px 5px; place-items: center; border-radius: 6px; color: var(--brand); background: var(--brand-soft); font-size: 10px; font-style: normal; font-weight: 850; vertical-align: 2px; }
.preview-course-count { display: grid; margin-top: 17px; padding: 14px 0 0; gap: 5px; border-top: 1px solid rgba(16,16,14,.09); }
.preview-course-count span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.preview-course-count b { font-size: 12px; }
.preview-moment-list { display: grid; padding: 5px 16px 14px; gap: 2px; }
.preview-moment { display: grid; padding: 15px 8px; grid-template-columns: 39px 1fr; gap: 10px; border: 0; border-bottom: 1px solid rgba(16,16,14,.08); border-radius: 0; background: transparent; text-align: left; }
.preview-moment:last-child { border-bottom: 0; }
.preview-moment time { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.preview-moment p { margin: 0; color: #5e6059; font-size: 12px; line-height: 1.5; }
.consumer-preview-explainer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(34px, 7vw, 104px); align-items: end; }
.consumer-preview-grid { margin: 0; }
.preview-complete-modal { max-width: 680px; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 30px 90px rgba(0,0,0,.34); }
.preview-complete-modal .modal-head { background: linear-gradient(112deg, var(--paper-2), #fff 60%, var(--brand-soft)); }
.preview-complete-modal .modal-head h2 { max-width: 520px; margin-top: 7px; }
.preview-complete-summary { display: flex; padding: 16px; align-items: center; gap: 12px; border: 1px solid rgba(44,105,81,.18); border-radius: 14px; color: #214b37; background: #edf5ef; }
.preview-complete-summary > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); }
.preview-complete-summary svg { width: 17px; height: 17px; }
.preview-complete-summary strong, .preview-complete-summary small { display: block; }
.preview-complete-summary small { margin-top: 3px; color: #587064; }
.preview-complete-actions { flex-wrap: wrap; }
.preview-complete-actions .btn-primary { order: -1; }

/* Homepage Mandarin discovery invitation: poster background stays text-free;
   all copy is a real DOM layer so it localises and remains editable. */
.mandarin-discovery-backdrop { z-index: 450; padding: 22px; background: rgba(12, 20, 34, .66); }
.mandarin-discovery-modal { width: min(960px, 100%); max-height: min(88svh, 760px); overflow: hidden; border: 0; border-radius: 22px; background: #101b33; box-shadow: 0 30px 90px rgba(0, 0, 0, .42); }
.mandarin-discovery-poster { position: relative; min-height: 560px; background: #1f2a44; }
.mandarin-discovery-poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; background: #d6c0a6; }
.mandarin-discovery-content { position: absolute; inset: 0 auto 0 0; display: flex; width: min(52%, 510px); padding: clamp(38px, 5vw, 64px); flex-direction: column; align-items: flex-start; justify-content: center; color: #1f2a44; background: rgba(255, 253, 247, .94); }
.mandarin-discovery-content .eyebrow { margin-bottom: 18px; color: #0056d2; font-size: 10px; }
.mandarin-discovery-content h2 { max-width: 410px; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4.1vw, 54px); font-weight: 760; letter-spacing: -.055em; line-height: .96; }
.mandarin-discovery-content > p:not(.eyebrow) { max-width: 390px; margin: 22px 0 0; color: #43536e; font-size: 15px; line-height: 1.65; }
.mandarin-discovery-actions { display: flex; width: 100%; margin-top: 30px; align-items: center; gap: 18px; }
.mandarin-discovery-actions .btn { min-height: 48px; padding: 12px 16px; }
.mandarin-discovery-dismiss { padding: 9px 0; border: 0; color: #3d4b6b; background: transparent; cursor: pointer; font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.mandarin-discovery-dismiss:hover, .mandarin-discovery-dismiss:focus-visible { color: #0056d2; outline: 0; }
.mandarin-discovery-close { position: absolute; top: 15px; right: 15px; z-index: 2; width: 38px; height: 38px; border-color: rgba(31, 42, 68, .18); border-radius: 50%; background: rgba(255, 255, 255, .72); }
.mandarin-discovery-close:hover { border-color: #0056d2; color: #0056d2; }

@media (max-width: 820px) {
  .course-guide-section { padding-top: 76px; padding-bottom: 76px; }
  .course-guide-layout, .consumer-preview-explainer { grid-template-columns: 1fr; gap: 38px; }
  .course-guide-portrait { min-height: 380px; }
  .course-guide-copy .section-title { font-size: clamp(34px, 9vw, 54px); }
  .lesson-library-intro { grid-template-columns: 1fr; gap: 22px; }
  .lesson-library-totals { width: max-content; }
  .lesson-library-course-head { grid-template-columns: 134px minmax(0, 1fr); gap: 19px; }
  .public-course-card-head { grid-template-columns: 158px minmax(0, 1fr); }
  .public-course-stats { grid-column: 2; text-align: left; }
  .lesson-library-course-action { grid-column: 1 / -1; justify-content: flex-start; }
  .lesson-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-learning-sidebar { min-height: 0; }
}

@media (max-width: 700px) {
  .mandarin-discovery-backdrop { align-items: end; padding: 0; }
  .mandarin-discovery-modal { width: 100%; max-height: 92svh; border-radius: 20px 20px 0 0; }
  .mandarin-discovery-poster { display: grid; min-height: 0; grid-template-rows: minmax(210px, 34svh) auto; }
  .mandarin-discovery-poster > img { position: relative; grid-row: 1; object-fit: cover; object-position: 62% center; }
  .mandarin-discovery-content { position: relative; width: 100%; min-height: 0; padding: 27px 24px 28px; grid-row: 2; background: #fffdf7; }
  .mandarin-discovery-content .eyebrow { margin-bottom: 12px; }
  .mandarin-discovery-content h2 { max-width: 340px; font-size: clamp(31px, 9.5vw, 42px); }
  .mandarin-discovery-content > p:not(.eyebrow) { margin-top: 15px; font-size: 14px; line-height: 1.55; }
  .mandarin-discovery-actions { margin-top: 21px; flex-direction: column; align-items: stretch; gap: 11px; }
  .mandarin-discovery-actions .btn { width: 100%; }
  .mandarin-discovery-dismiss { align-self: center; min-height: 34px; }
  .mandarin-discovery-close { top: 14px; right: 14px; border-color: rgba(255, 255, 255, .72); color: #fff; background: rgba(16, 27, 51, .54); }
}
@media (max-width: 620px) {
  .course-guide-portrait { min-height: 330px; padding: 20px; border-radius: 21px; box-shadow: 10px 12px 0 var(--guide-card-shadow); }
  .course-guide-monogram { width: 126px; height: 126px; font-size: 58px; }
  .public-course-card-head { padding: 17px; grid-template-columns: 1fr; gap: 16px; }
  .public-course-video-poster { width: 100%; min-height: 190px; }
  .public-course-stats { display: none; }
  .public-chapter, .public-course-chapter { padding: 17px; }
  .public-chapter-head { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .public-chapter-head > span { grid-column: 1 / -1; }
  .public-chapter-head h4 { font-size: 16px; }
  .public-chapter-head p { font-size: 11px; }
  .public-lesson-card { padding: 13px 11px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; }
  .public-lesson-card.has-cover { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .public-lesson-number { width: 32px; height: 27px; font-size: 9px; }
  .public-lesson-art .public-lesson-number { width: auto; height: 17px; }
  .public-lesson-main strong { font-size: 13px; }
  .public-lesson-action { font-size: 10px; }
  .public-lesson-end { min-width: 27px; }
  .public-lesson-end b, .public-lesson-end em { display: none; }
  .lesson-library-section { padding-top: 58px; padding-bottom: 70px; }
  .lesson-library-totals { width: 100%; }
  .lesson-library-totals span { min-width: 0; flex: 1; padding: 13px 7px; font-size: 9px; }
  .lesson-library-totals strong { font-size: 22px; }
  .lesson-filter-chip { min-height: 44px; }
  .lesson-filter-search { flex-direction: column; align-items: stretch; gap: 7px; }
  .lesson-filter-label { min-width: 0; }
  .lesson-library-course { margin-top: 28px; border-radius: 18px; }
  .lesson-library-course-head { padding: 14px; grid-template-columns: 90px minmax(0, 1fr); gap: 13px; }
  .lesson-library-course-media { min-height: 106px; border-radius: 11px; }
  .lesson-library-course-copy h3 { font-size: 22px; }
  .lesson-library-course-copy > p:not(.eyebrow) { display: -webkit-box; margin-top: 6px; overflow: hidden; font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .lesson-library-course-meta { margin-top: 9px; gap: 4px; }
  .lesson-library-course-meta span { padding: 4px 6px; font-size: 9px; }
  .lesson-library-course-action { margin-top: -1px; }
  .lesson-library-open { width: 100%; min-width: 0; padding: 11px; }
  .lesson-card-grid { padding: 14px; grid-template-columns: 1fr; gap: 10px; }
  .lesson-library-card { min-height: 270px; grid-template-rows: 108px minmax(0, 1fr) auto; }
  .lesson-library-art strong { font-size: 42px; }
  .preview-complete-actions { display: grid; grid-template-columns: 1fr; }
  .preview-complete-actions .btn { width: 100%; }
  .preview-library-shell { padding-top: 37px; }
  .preview-course-tabs { margin-top: 22px; }
  .preview-course-chip { min-width: 205px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-mosaic-main, .hero-mosaic-session, .hero-mosaic-library, .hero-mosaic-panel { animation: editorial-rise 650ms cubic-bezier(.2,.75,.25,1) both; }
  .hero-mosaic-session { animation-delay: 90ms; }
  .hero-mosaic-library { animation-delay: 155ms; }
  .hero-mosaic-panel { animation-name: editorial-panel-rise; animation-delay: 230ms; }
}
@keyframes editorial-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes editorial-panel-rise { from { opacity: 0; transform: translateY(18px) rotate(-3.5deg); } to { opacity: 1; transform: translateY(0) rotate(-3.5deg); } }

/* v190 — consumer identity and guide pages.  Google is an optional verified
   email identity, never a course-access mechanism; the guide page keeps
   approved background facts visibly separate from learner-outcome claims. */
.auth-social { margin-top: 23px; }
.auth-social > div { position: relative; margin: 0 0 14px; border-top: 1px solid var(--line); text-align: center; }
.auth-social > div span { display: inline-block; padding: 0 10px; color: var(--muted); background: var(--paper); font-size: 11px; line-height: 1; transform: translateY(50%); }
.auth-google-btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; color: var(--ink); border-color: rgba(16,16,14,.16); background: #fff; }
.auth-google-btn:hover, .auth-google-btn:focus-visible { border-color: rgba(16,16,14,.5); background: var(--panel); outline: 0; }
.auth-google-btn span { display: inline-grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: conic-gradient(from 35deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; line-height: 1; }
.auth-social .tiny { margin: 11px 0 0; line-height: 1.55; }
.auth-form-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.auth-form-top .brand { flex: 1 1 auto; }
.auth-form .auth-locale-switcher,
.auth-form .admin-locale-switcher { display: inline-flex; flex: 0 0 auto; gap: 0; padding: 3px; color: var(--ink-2); border: 1px solid rgba(16,16,14,.16); border-radius: 999px; background: #fff; font-size: 11px; }
.auth-form .auth-locale-switcher span,
.auth-form .admin-locale-switcher span { display: none; }
.auth-form .auth-locale-switcher button,
.auth-form .admin-locale-switcher button { min-width: 46px; min-height: 44px; padding: 0 10px; border-radius: 999px; color: inherit; font-size: 11px; text-decoration: none; }
.auth-form .auth-locale-switcher button:hover,
.auth-form .admin-locale-switcher button:hover { color: var(--ink); background: var(--panel); }
.auth-form .auth-locale-switcher button.active,
.auth-form .admin-locale-switcher button.active { color: #fff; background: var(--ink); text-decoration: none; }
.auth-register-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 15px 16px; border: 1px solid rgba(16,16,14,.18); border-radius: 14px; background: #fff; }
.auth-register-cta > div { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.auth-register-cta strong { color: var(--ink); font-size: 14px; }
.auth-register-cta span { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.auth-register-cta .btn { width: auto; flex: 0 0 auto; min-width: 142px; min-height: 44px; color: var(--ink); border-color: rgba(16,16,14,.32); background: #fff; white-space: nowrap; }
.auth-register-cta .btn:hover, .auth-register-cta .btn:focus-visible { color: #fff; border-color: var(--ink); background: var(--ink); outline: 0; }
@media (max-width: 480px) {
  .auth-form-top { margin-bottom: 26px; }
  .auth-register-cta { align-items: stretch; flex-direction: column; gap: 12px; }
  .auth-register-cta .btn { width: 100%; }
}

/* v197 — promotion preview, analytics, and the requested light operational rail. */
.admin-sidebar {
  color: var(--ink);
  background: rgba(248, 249, 247, .9);
  border-right: 1px solid rgba(16, 16, 14, .11);
  box-shadow: 8px 0 28px rgba(34, 41, 36, .035);
  backdrop-filter: blur(20px) saturate(1.08);
}
.admin-sidebar .brand-word, .admin-sidebar .brand-word small { color: var(--ink); }
.admin-sidebar .brand-seal { color: #fff; background: var(--ink); }
.admin-context { color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid rgba(16,16,14,.08); border-radius: 12px; }
.admin-context small, .admin-nav-label, .admin-nav-group-toggle, .admin-nav-hint { color: #747b76; }
.admin-nav-group-toggle:hover { color: var(--ink); }
.admin-nav button { color: #4d5550; border: 1px solid transparent; }
.admin-nav button:hover { color: var(--ink); background: rgba(255,255,255,.86); border-color: rgba(16,16,14,.07); }
.admin-nav button.active { color: #173f35; background: rgba(217,235,225,.88); border-color: rgba(64,125,98,.18); box-shadow: inset 3px 0 0 #407d62; }
.admin-nav button:focus-visible, .admin-nav-group-toggle:focus-visible { outline: 3px solid rgba(64,125,98,.24); outline-offset: 2px; }

.showcase-builder-layout { display:grid; grid-template-columns:minmax(460px,1fr) minmax(320px,390px); align-items:start; gap:18px; }
.showcase-live-panel { position:sticky; top:96px; }
.showcase-phone-frame { width:min(100%,320px); margin:0 auto; padding:12px; border:1px solid rgba(16,16,14,.18); border-radius:34px; background:#181a19; box-shadow:0 18px 40px rgba(16,16,14,.14); }
.showcase-phone-frame::before { display:block; width:72px; height:5px; margin:0 auto 10px; border-radius:99px; background:#464b48; content:""; }
/* 手机框必须长成「手机」的样子——形状由宽高比定死，不能交给窗口高度算。
 * 2026-09-28 这条规则被负责人打回三次，三个方向的坑都记在这里：
 *   ① min-height（最初）→ 内容一多框就跟着长高，把吸顶的右栏顶出屏幕，
 *      只剩整页能滚、手机自己永远不滚；
 *   ② 写死 height:clamp(360px, calc(100vh - 300px), 560px)（第一、二轮）→
 *      窗口一矮（1280×720 时算出 420px）框就被压成方的，宽 296px 高 420px，
 *      看着像平板不像手机，负责人截图原话「比例都他妈的不对」；
 *   ③ max-height:clamp(...)（第二轮）→ 没空白了，但形状还是跟着窗口变，同样被压方。
 * 现在：形状交给 aspect-ratio:1/2（宽 296px → 高 592px，正手机），
 * 窗口再矮也不压缩形状——宁可右栏超出屏幕（整页能滚到），也不让手机变形；
 * max() 里的 520px 是保底，保证极矮窗口下也不会塌成平板。
 * 内容长过框高时框自己滚。刻意不加 overscroll-behavior:contain——框里没得滚时
 * 加了 contain 会「鼠标放在手机上滚、页面纹丝不动」，看着像卡死；
 * 保持默认的「框里滚到底、再滚才轮到整页」更符合习惯。 */
.showcase-phone-screen { aspect-ratio:1 / 2; max-height:max(520px,calc(100vh - 330px)); overflow-x:hidden; overflow-y:auto; color:#18201c; border-radius:22px; background:#f7f7f2; }
.showcase-phone-status { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; color:#606761; background:#fff; border-bottom:1px solid rgba(16,16,14,.08); font-size:9px; }
.showcase-phone-status span { font-weight:800; }.showcase-phone-status small { font-size:8px; }
.showcase-phone-banner { display:block; width:100%; height:112px; object-fit:cover; background:linear-gradient(145deg,#234c3c,#81a38e); }
.showcase-phone-banner.placeholder { background:radial-gradient(circle at 76% 22%,rgba(255,255,255,.22),transparent 20%),linear-gradient(145deg,#173f35,#7fa28d); }
.showcase-phone-profile { position:relative; padding:35px 17px 17px; text-align:center; }
.showcase-phone-profile > p { margin:0 0 7px; color:#68706b; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.showcase-phone-profile h4 { margin:0 0 8px; font-size:18px; line-height:1.08; }
.showcase-phone-profile > small { display:block; color:#69716c; font-size:10px; line-height:1.45; }
.showcase-phone-avatar { position:absolute; top:-29px; left:50%; display:grid; width:56px; height:56px; place-items:center; overflow:hidden; border:4px solid #f7f7f2; border-radius:50%; color:#fff; background:#d97755; transform:translateX(-50%); font-weight:800; }
.showcase-phone-avatar img { width:100%; height:100%; object-fit:cover; }
.showcase-phone-courses { display:grid; gap:8px; padding:0 12px 14px; }
.showcase-phone-courses article { display:grid; grid-template-columns:28px 1fr; gap:9px; padding:10px; border:1px solid rgba(16,16,14,.09); border-radius:11px; background:#fff; }
.showcase-phone-courses article > b { display:grid; width:27px; height:27px; place-items:center; border-radius:8px; color:#315e4c; background:#e4f0e8; font-size:9px; }
.showcase-phone-courses strong,.showcase-phone-courses small { display:block; }.showcase-phone-courses strong { font-size:10px; }.showcase-phone-courses small { margin-top:3px; color:#727973; font-size:8px; line-height:1.35; }
.showcase-phone-course-empty { padding:26px 12px; color:#777e79; border:1px dashed rgba(16,16,14,.18); border-radius:11px; background:#fff; text-align:center; font-size:10px; }
.showcase-phone-cta { display:block; width:calc(100% - 24px); min-height:38px; margin:0 12px; color:#fff; border:0; border-radius:9px; background:#173f35; font-size:10px; font-weight:800; opacity:1; }
.showcase-phone-support { margin:8px 12px 16px; color:#747b76; font-size:8px; text-align:center; }
.showcase-phone-empty { display:grid; min-height:100%; padding:30px; place-content:center; justify-items:center; gap:10px; color:#6d746f; text-align:center; }
.showcase-phone-empty span { display:grid; width:52px; height:52px; place-items:center; color:#315e4c; border-radius:16px; background:#e4f0e8; }.showcase-phone-empty svg { width:24px; }.showcase-phone-empty small { max-width:180px; line-height:1.5; }
.showcase-preview-modal { width:min(720px,calc(100% - 28px)); }.showcase-preview-modal-body { display:grid; place-items:center; background:#eef0ec; }

.promotion-data-boundary { display:flex; align-items:center; gap:13px; margin-bottom:14px; padding:13px 16px; color:#3d4942; border:1px solid #dce5df; border-radius:12px; background:#eef5f0; font-size:12px; }
.promotion-data-boundary strong { flex:0 0 auto; color:#173f35; }.promotion-data-boundary span { line-height:1.5; }
.promotion-analytics-filters { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:10px; margin-bottom:16px; padding:14px; border:1px solid rgba(16,16,14,.1); border-radius:14px; background:rgba(255,255,255,.68); }
.promotion-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.promotion-kpi { min-height:126px; padding:17px; border:1px solid rgba(16,16,14,.1); border-radius:14px; background:#fff; }
.promotion-kpi span,.promotion-kpi small { display:block; }.promotion-kpi span { color:#6d746f; font-size:11px; }.promotion-kpi strong { display:block; margin:18px 0 5px; font-size:28px; letter-spacing:-.05em; }.promotion-kpi small { color:#848b86; font-size:9px; line-height:1.35; }
.promotion-trend-panel { margin-bottom:16px; }
.promotion-trend-legend { display:flex; gap:14px; color:#6d746f; font-size:10px; }.promotion-trend-legend span::before { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:2px; background:#3d78e8; content:""; }.promotion-trend-legend .courses::before { background:#9a70df; }.promotion-trend-legend .whatsapp::before { background:#3aa979; }
.promotion-trend-chart { display:flex; min-height:250px; align-items:end; gap:7px; padding:24px 20px 14px; overflow-x:auto; }
.promotion-trend-day { display:grid; min-width:24px; flex:1 0 24px; gap:8px; align-items:end; }
.promotion-trend-bars { display:flex; height:190px; align-items:end; justify-content:center; gap:2px; border-bottom:1px solid rgba(16,16,14,.12); }
.promotion-trend-bars i { width:5px; min-height:2px; border-radius:4px 4px 0 0; background:#3d78e8; }.promotion-trend-bars i.courses { background:#9a70df; }.promotion-trend-bars i.whatsapp { background:#3aa979; }
.promotion-trend-day small { color:#8a908c; font-size:8px; text-align:center; transform:rotate(-45deg); transform-origin:center; }
.promotion-analytics-table { min-width:1280px; }.promotion-analytics-table td { vertical-align:top; }.promotion-analytics-table .dimension-tag { margin-top:6px; }

@media (max-width:1200px) {
  .promotion-analytics-filters { grid-template-columns:repeat(3,minmax(150px,1fr)); }
  .promotion-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .admin-sidebar { position:static; width:auto; height:auto; min-height:0; padding:16px; border-right:0; border-bottom:1px solid rgba(16,16,14,.1); }
  .admin-main { margin-left:0; }
  .showcase-builder-layout { grid-template-columns:1fr; }
  .showcase-live-panel { position:static; }
}
@media (max-width:620px) {
  .promotion-analytics-filters,.promotion-kpi-grid { grid-template-columns:1fr; }
  .promotion-data-boundary { align-items:flex-start; flex-direction:column; }
  .showcase-phone-frame { width:min(100%,300px); }
  /* 窄屏不再覆盖高度：形状由 aspect-ratio 定，窄屏框自然变窄变矮，仍是手机形。 */
  .showcase-preview-modal-body { padding:18px 8px; }
}
.preview-player .preview-content { position: absolute; inset: 0; }
.public-preview-video { width: 100%; height: 100%; object-fit: cover; background: #121310; }
.guide-page-hero .page-hero-grid { align-items: center; }
.guide-page-role { margin: -2px 0 22px; color: var(--ink-2); font-size: 16px; font-weight: 760; }
.guide-page-portrait { position: relative; display: flex; min-height: 440px; padding: 38px 25px 25px; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 50% 50% 22px 22px; color: #fff; background: radial-gradient(circle at 74% 24%, var(--guide-card-glow) 0 5%, transparent 31%), radial-gradient(circle at 24% 76%, var(--guide-card-glow-2) 0 6%, transparent 38%), linear-gradient(148deg, var(--player) 0%, var(--guide-card-mid) 55%, var(--brand) 130%); box-shadow: 16px 19px 0 var(--guide-card-shadow); }
.guide-page-portrait::before { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 25px, rgba(255,255,255,.13) 26px 27px, transparent 28px 53px); content: ''; mix-blend-mode: overlay; opacity: .7; }
.guide-page-portrait > * { position: relative; z-index: 1; }
/* 标签原本是 align-self:flex-start，正好落在拱顶 50% 圆角的切口上，
   被 overflow:hidden 裁掉前 4 个字母（页面上显示成 "SE INSTRUCTOR"）。
   拱顶在标签所处深度只留出约 166px 净宽，居中后 152px 的标签才完整。
   上边距同时从 25px 加到 38px，给字体放大和文案变长留余量。 */
.guide-page-portrait > span { align-self: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.31); border-radius: 999px; background: var(--scrim); font-size: 10px; font-weight: 820; letter-spacing: .08em; }
.guide-page-portrait > div { display: grid; width: 170px; height: 170px; margin: auto; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 18px rgba(255,255,255,.05); font-size: 64px; font-weight: 820; letter-spacing: -.1em; }
.guide-page-portrait small { max-width: 255px; color: rgba(255,255,255,.77); font-size: 11px; line-height: 1.55; }
.guide-teaching-section { background: var(--paper-2); }
.guide-facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.guide-facts-grid article { min-height: 154px; padding: 23px 24px; border-right: 1px solid var(--line); background: var(--panel); }
.guide-facts-grid article:last-child { border-right: 0; }
.guide-facts-grid span { display: inline-flex; color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.guide-facts-grid p { max-width: 190px; margin: 42px 0 0; font-size: 15px; font-weight: 730; letter-spacing: -.025em; line-height: 1.35; }
.guide-map-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 46px; }
.guide-map-summary .section-title { max-width: 680px; }
.guide-map-summary p { max-width: 650px; color: rgba(255,255,255,.72); line-height: 1.6; }
.guide-map-stats { display: flex; border: 1px solid rgba(255,255,255,.23); border-radius: 15px; overflow: hidden; }
.guide-map-stats span { display: grid; min-width: 94px; padding: 15px 16px; gap: 4px; border-left: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); font-size: 10px; font-weight: 760; text-align: center; }
.guide-map-stats span:first-child { border-left: 0; }
.guide-map-stats strong { color: #fff; font-size: 28px; letter-spacing: -.075em; line-height: 1; }
/* v191 主讲人页扩写：出镜视频 / 一节课长什么样 / 主讲人自述 / 从业时间线 / 她讲哪些课 / 主讲人问答 */
.guide-video-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center; gap: clamp(34px, 6vw, 92px); }
.guide-video-frame { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(148deg, var(--player) 0%, var(--guide-card-mid) 100%); }
.guide-video-frame::after { position: absolute; inset: 0; background: repeating-linear-gradient(112deg, transparent 0 25px, rgba(255,255,255,.1) 26px 27px, transparent 28px 53px); content: ''; }
.guide-video-frame span { position: relative; z-index: 1; max-width: 320px; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 740; line-height: 1.6; text-align: center; }
.consumer-steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-lesson-shape .steps { border-top-color: var(--line); }
.guide-lesson-shape .step { min-height: 196px; padding: 26px 26px 24px 0; border-right-color: var(--line); }
.guide-lesson-shape .step + .step { padding-left: 26px; }
/* 一节课的环节按真实课程模板从 3 个扩到 6 个，三列网格因此排成两行。
   基础 .step 只给最后一项收右边线（.step:last-child），两行布局下第 3 项
   的右边线会悬在容器边缘；第 4 项是第二行首项，也不该继承 .step + .step
   的左内距。第二行另加一条上边线，把两行分开。 */
.guide-lesson-shape .step:nth-child(3n) { border-right: 0; }
.guide-lesson-shape .step:nth-child(3n + 1) { padding-left: 0; }
.guide-lesson-shape .step:nth-child(n + 4) { border-top: 1px solid var(--line); }
.guide-lesson-shape .step-num { width: 30px; height: 30px; margin-bottom: 38px; color: var(--brand); background: var(--brand-soft); box-shadow: none; }
.guide-lesson-shape .step h3 { font-size: 17px; }
.guide-lesson-shape .step p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.guide-quotes-section { background: var(--paper-2); }
.guide-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-quotes blockquote { margin: 0; padding: 27px 26px 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.guide-quotes blockquote > span { display: block; margin-bottom: 18px; color: var(--brand); font-size: 42px; font-weight: 850; line-height: .5; }
.guide-quotes blockquote p { margin: 0; font-size: 16px; font-weight: 720; letter-spacing: -.022em; line-height: 1.52; }
.guide-timeline-section { background: var(--paper-2); }
.guide-timeline article { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: baseline; gap: 24px; padding: 21px 0; border-top: 1px solid var(--line); }
.guide-timeline article:last-child { border-bottom: 1px solid var(--line); }
.guide-timeline article > span { color: var(--brand); font-size: 11.5px; font-weight: 840; letter-spacing: .02em; }
.guide-timeline article > p { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.022em; line-height: 1.45; }
.guide-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.guide-courses article { padding: 25px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.guide-courses article > span { color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.guide-courses h3 { margin: 13px 0 9px; font-size: 18px; }
.guide-courses p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.guide-course-meta { display: flex; margin-top: 18px; padding-top: 15px; gap: 16px; row-gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.guide-course-meta em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 790; }
.guide-courses-foot { margin-top: 28px; }
.guide-faq-section { background: var(--paper-2); }
.guide-faq { margin-top: 4px; border-top: 1px solid var(--line); }
.guide-faq details { border-bottom: 1px solid var(--line); }
.guide-faq summary { display: flex; padding: 19px 0; align-items: center; justify-content: space-between; gap: 22px; cursor: pointer; font-size: 16px; font-weight: 760; letter-spacing: -.022em; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { color: var(--brand); content: '+'; font-size: 20px; font-weight: 800; line-height: 1; }
.guide-faq details[open] summary::after { content: '-'; }
.guide-faq p { max-width: 780px; margin: 0 0 21px; color: var(--ink-2); font-size: 14.5px; line-height: 1.68; }
/* v201 介绍人身份卡改用已确认的成品素材；素材缺席时 JS 自动回退到原姓名首字母视觉。
   图片作为铺满卡面的底层（z-index:0），原有标签胶囊仍是 z-index:1 叠在上面，
   所以下面这两条选择器必须带 `>` 才能压过 `.course-guide-portrait > *` / `.guide-page-portrait > *`。 */
.course-guide-portrait > .guide-portrait-image,
.guide-page-portrait > .guide-portrait-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.course-guide-portrait.has-media, .guide-page-portrait.has-media { background: var(--player); }
/* 底纹是给纯色卡面加的，盖到照片上会把脸糊掉，所以有图时整体去掉。 */
.course-guide-portrait.has-media::before, .guide-page-portrait.has-media::before { background: none; }
/* 标签胶囊落在照片上，需要自己的底才能看清；卡面本身已经是图，不再需要兜底色。 */
.course-guide-portrait.has-media > span, .guide-page-portrait.has-media > span { border-color: rgba(255,255,255,.34); background: rgba(16,16,14,.55); backdrop-filter: blur(6px); }
/* 身份图统一裁切：茶室那张脸在画面上部偏左，横向裁掉两侧后仍要留得住人。 */
.course-guide-portrait.has-media > .guide-portrait-image { object-position: 44% 30%; }
.guide-page-portrait.has-media > .guide-portrait-image { object-position: 46% 28%; }
/* 小尺寸圆形头像位：整张 16:9 图直接塞进 46/64px 的圆里，人会缩成一个小人形，
   所以外面套一层裁剪圆，里面用 transform 放大，并把脸挪到圆心。
   几何推导（46px 与 64px 结果同构，所以一套百分比对两个尺寸都成立）：
     · object-fit:cover 下图片按"高"贴合，横向溢出；object-position:40% 让脸落在元素 x≈40.4%；
     · 纵向没有溢出，脸恒在元素 y≈17.6%（原始图 1672×941 里脸心约在 40.7% / 17.6%）；
     · 于是 translate(9.6%, 26%) 把脸移到 ≈(50%, 44%)，scale(2.5) 让人头占到圆高约 2/3；
     · translate 的纵向 26%（不是 32%）是刻意留的余量：再多一点图片上沿就会被推进圆内，
       圆顶会露出一条透明缺口。改这几个数前先按上面三步重算。 */
.presenter-card .presenter-avatar { flex: 0 0 auto; display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.program-instructor-avatar { display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.presenter-avatar > .guide-avatar-image,
.program-instructor-avatar > .guide-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 18%; transform: translate(9.6%, 26%) scale(2.5); transform-origin: 40.4% 17.6%; }
/* 介绍人页宽幅讲解场景带：可见文字只有已批准的姓名与角色，不写任何素材/授权说明。 */
.guide-scene-figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--player); box-shadow: var(--shadow); }
.guide-scene-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guide-scene-figure figcaption { position: absolute; bottom: 18px; left: 20px; display: grid; max-width: calc(100% - 40px); padding: 11px 15px; gap: 3px; border-radius: 13px; background: rgba(16,16,14,.58); backdrop-filter: blur(8px); color: #fff; }
.guide-scene-figure figcaption strong { font-size: 15px; letter-spacing: -.02em; }
.guide-scene-figure figcaption span { color: rgba(255,255,255,.75); font-size: 11px; font-weight: 700; }
@media (max-width: 1024px) {
  .guide-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .guide-video-layout { grid-template-columns: 1fr; gap: 28px; }
  .consumer-steps-three { grid-template-columns: 1fr; }
  .consumer-steps-three .step, .guide-lesson-shape .step { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .consumer-steps-three .step + .step, .guide-lesson-shape .step + .step { padding-left: 0; }
  .guide-lesson-shape .step-num { margin-bottom: 20px; }
  .guide-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .guide-timeline article { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 820px) {
  .guide-page-portrait { min-height: 350px; }
  .guide-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-facts-grid article:nth-child(2n) { border-right: 0; }
  .guide-facts-grid article { border-bottom: 1px solid rgba(16,16,14,.13); }
  .guide-map-summary { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 520px) {
  .guide-page-portrait { min-height: 300px; padding: 30px 18px 18px; border-radius: 44% 44% 18px 18px; }
  .guide-page-portrait > div { width: 126px; height: 126px; font-size: 52px; }
  .guide-facts-grid { grid-template-columns: 1fr; }
  .guide-facts-grid article { min-height: 118px; border-right: 0; }
  .guide-facts-grid p { margin-top: 21px; }
  .guide-map-stats { width: 100%; }
  .guide-map-stats span { min-width: 0; flex: 1; padding: 14px 6px; }
  .guide-scene-figure { border-radius: 15px; }
  .guide-scene-figure figcaption { bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: 9px 12px; }
  .guide-scene-figure figcaption strong { font-size: 13px; }
  .guide-scene-figure figcaption span { font-size: 10px; }
}

@media (max-width: 1080px) {
  .hero-editorial .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(390px, 1.12fr); gap: 34px; }
  .hero-mosaic { min-height: 570px; }
  .catalog-hero-visual { right: 3vw; width: 35vw; }
  .preview-layout { grid-template-columns: minmax(0, 1fr); }
  .preview-sidebar { min-height: 0; }
}
@media (max-width: 820px) {
  .hero-editorial { padding-top: 22px; }
  .hero-editorial .hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 42px; }
  .hero-editorial .hero-copy { max-width: 690px; margin: 0; text-align: left; }
  .hero-editorial .hero-actions { justify-content: flex-start; }
  .hero-editorial .proof-line { justify-content: flex-start; }
  .hero-mosaic { width: min(100%, 670px); margin: 0 auto; }
  .catalog-hero { min-height: 610px; padding-top: 92px; }
  .catalog-hero .container { padding-right: 35vw; }
  .catalog-hero-visual { width: 33vw; }
  .program-detail-hero .page-hero-grid { grid-template-columns: 1fr; }
  .program-detail-rail { grid-template-columns: .82fr 1.18fr; align-items: stretch; }
  .detail-hero-media { height: auto; min-height: 260px; }
  #how .steps-five { grid-template-columns: repeat(2, 1fr); }
  #how .steps-five .step { border-right: 1px solid rgba(16,16,14,.11); }
  #how .steps-five .step:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) {
  .hero-editorial { padding: 12px 0 55px; }
  .hero-editorial .display { font-size: clamp(46px, 12.4vw, 64px); line-height: .92; letter-spacing: -.068em; }
  .hero-editorial .lead { font-size: 15px; }
  .hero-editorial .proof-line { display: grid; margin-top: 25px; }
  .hero-mosaic { min-height: 465px; }
  .hero-mosaic-main { width: 69%; height: 58%; }
  .hero-mosaic-session { width: 48%; height: 43%; }
  .hero-mosaic-library { width: 29%; height: 24%; border-width: 5px; }
  .hero-mosaic-panel { top: 50%; left: 24%; width: min(310px, 66%); padding: 15px; }
  .hero-mosaic-panel > strong { font-size: 15px; }
  .mosaic-panel-row { padding: 7px 0; }
  .catalog-hero { min-height: 650px; padding-top: 82px; }
  .catalog-hero .container { padding-right: 22px; }
  .catalog-hero .page-title { max-width: 340px; font-size: clamp(49px, 13.8vw, 69px); }
  .catalog-hero .lead { max-width: 310px; }
  .catalog-hero-visual { top: auto; right: -8vw; bottom: 0; width: 49vw; height: 56%; opacity: .82; }
  .catalog-hero .hero-actions { max-width: 305px; }
  .catalog-hero .hero-actions .btn { font-size: 11px; }
  .program-detail-hero { padding-top: 65px; }
  .program-detail-hero .page-title { font-size: clamp(45px, 12.8vw, 65px); }
  .program-detail-rail { grid-template-columns: 1fr; }
  .detail-hero-media { height: 280px; }
  .program-card { min-height: 0; border-radius: 16px; }
  .program-card-media { height: 225px; }
  .preview-shell::before { width: 82vw; opacity: .08; }
  .preview-player { min-height: 470px; border-radius: 20px; }
  .preview-player .preview-counter { top: 14px; right: 14px; padding: 7px 9px; font-size: 11px; }
  .preview-player .preview-progress { right: 16px; bottom: 16px; left: 16px; }
  .preview-sidebar { min-height: 0; max-height: none; border-radius: 20px; }
  .preview-side-foot { margin: 8px 12px 12px; }
  #how { padding-top: 74px; padding-bottom: 66px; }
  #how .section-head { margin-bottom: 30px; }
  #how .step, #how .step + .step { min-height: 0; padding: 19px 0; border-right: 0; border-bottom-color: rgba(16,16,14,.11); }
  #how .step-num { margin-bottom: 16px; box-shadow: 0 0 0 4px var(--paper); }
  .site-footer { padding-bottom: 96px; }
}

/* v181 — people-first platform entrance and a true visual endcap.  The
   photography is only an approved generic learning/work atmosphere; it does
   not identify real learners, teachers, projects or testimonials. */
.hero-editorial .hero-grid { grid-template-columns: minmax(0, .93fr) minmax(540px, 1.07fr); gap: clamp(34px, 5vw, 84px); }
.hero-mosaic.hero-learner-cast { display: grid; min-height: 596px; width: min(100%, 742px); grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 72px 0 30px; overflow: visible; }
.hero-mosaic.hero-learner-cast::before { position: absolute; z-index: -1; top: 62px; right: -8%; width: 92%; height: 80%; border-radius: 44% 44% 26px 26px; background: linear-gradient(145deg, #d9d3c7 0%, #ebe6db 48%, #cfc7b8 100%); content: ""; }
.hero-mosaic.hero-learner-cast figure.hero-learner-card { position: relative; z-index: 1; width: auto; height: 338px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.68); border-radius: 24px 24px 18px 18px; background: #a69b89; box-shadow: 0 22px 34px rgba(25,22,16,.14); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.hero-mosaic.hero-learner-cast figure.hero-learner-card:hover { z-index: 4; filter: saturate(1.07); }
.hero-learner-card .stock-image { filter: saturate(.74) contrast(1.04) brightness(.92); }
.hero-learner-card.cast-one { height: 304px; margin-bottom: 13px; transform: rotate(-3.2deg); }
.hero-learner-card.cast-two { height: 390px; margin-bottom: 28px; transform: rotate(-1.5deg); }
.hero-learner-card.cast-three { height: 424px; margin-bottom: 0; transform: rotate(1.2deg); }
.hero-learner-card.cast-four { height: 370px; margin-bottom: 19px; transform: rotate(2.6deg); }
.hero-learner-card.cast-five { height: 292px; margin-bottom: 11px; transform: rotate(4deg); }
.hero-learner-card.cast-one .stock-image { object-position: 4% center; }
.hero-learner-card.cast-two .stock-image { object-position: 53% center; }
.hero-learner-card.cast-three .stock-image { object-position: 96% center; }
.hero-learner-card.cast-four .stock-image { object-position: 65% center; }
.hero-learner-card.cast-five .stock-image { object-position: 27% center; }
.hero-mosaic.hero-learner-cast:hover .hero-learner-card.cast-one { transform: translateY(-8px) rotate(-3.2deg); }
.hero-mosaic.hero-learner-cast:hover .hero-learner-card.cast-two { transform: translateY(-15px) rotate(-1.5deg); }
.hero-mosaic.hero-learner-cast:hover .hero-learner-card.cast-three { transform: translateY(-21px) rotate(1.2deg); }
.hero-mosaic.hero-learner-cast:hover .hero-learner-card.cast-four { transform: translateY(-13px) rotate(2.6deg); }
.hero-mosaic.hero-learner-cast:hover .hero-learner-card.cast-five { transform: translateY(-7px) rotate(4deg); }
.hero-cast-mark { position: absolute; z-index: 4; top: 3px; right: 6px; display: grid; justify-items: end; gap: 3px; color: #1c211d; font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1; text-align: right; }
.hero-cast-mark b { font-size: 55px; font-weight: 700; letter-spacing: -.09em; line-height: .78; }
.hero-cast-caption { position: absolute; z-index: 4; right: 8%; bottom: -18px; display: grid; max-width: 240px; gap: 7px; padding: 16px 18px; color: #f5f1e7; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: rgba(13,20,18,.93); box-shadow: 0 20px 55px rgba(12,14,12,.2); }
.hero-cast-caption span { color: #c5beb1; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.hero-cast-caption strong { font-size: 14px; line-height: 1.22; letter-spacing: -.03em; }

.site-footer { padding: 20px 18px 30px; color: #dce5e7; background: var(--paper); }
.footer-wide-shell { width: 100%; }
.footer-stage { position: relative; isolation: isolate; min-height: 400px; overflow: hidden; padding: 44px clamp(28px, 6vw, 76px) 24px; border-radius: 34px; background: #061827; box-shadow: 0 24px 54px rgba(10,21,29,.14); }
.footer-stage::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 74% 30%, rgba(25,102,133,.62), transparent 33%), radial-gradient(circle at 22% 88%, rgba(2,63,85,.85), transparent 40%), linear-gradient(135deg, rgba(6,22,39,.9), rgba(3,34,53,.82)); content: ""; }
.footer-stage-photo { position: absolute; z-index: -3; inset: 0; overflow: hidden; }
.footer-stage-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,17,30,.5), rgba(3,23,36,.94) 77%), linear-gradient(90deg, rgba(4,17,30,.68), transparent 72%); content: ""; }
.footer-stage-photo .stock-image { height: 100%; opacity: .34; filter: grayscale(.36) sepia(.28) hue-rotate(145deg) saturate(1.3) contrast(1.13); object-position: center 58%; }
.footer-stage-grain { position: absolute; z-index: -1; inset: 0; opacity: .25; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.18) .55px, transparent .7px), radial-gradient(rgba(94,200,224,.24) .55px, transparent .7px); background-position: 0 0, 8px 11px; background-size: 13px 13px, 17px 17px; mix-blend-mode: screen; }
.footer-stage-top { display: grid; justify-items: center; max-width: 710px; margin: 0 auto 46px; text-align: center; }
.footer-kicker { margin: 0 0 16px; color: #b9e8e8; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.footer-stage-top h2 { max-width: 700px; margin: 0; color: #fff; font-family: var(--font-sans); font-size: clamp(30px, 3.4vw, 46px); font-weight: 720; letter-spacing: -.05em; line-height: 1; }
.footer-stage-top > p:not(.footer-kicker) { max-width: 560px; margin: 14px 0 0; color: rgba(235,245,246,.78); font-size: 15px; line-height: 1.55; }
.footer-actions { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; }
.footer-primary { display: inline-flex; min-height: 58px; align-items: center; gap: 11px; padding: 0 23px; color: #071624; border-color: #fff; border-radius: 16px; background: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.footer-primary:hover { color: #071624; background: #dff4f2; border-color: #dff4f2; }
.footer-preview-link { padding: 8px 0; color: #f2f8f8; border: 0; border-bottom: 1px solid rgba(235,245,246,.6); background: none; font-size: 13px; cursor: pointer; }
.footer-preview-link:hover { color: #b9e8e8; border-color: #b9e8e8; }
.footer-status { display: inline-block; margin-top: 22px; padding: 9px 13px; color: #d9f0ee; border: 1px solid rgba(219,243,242,.28); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; }
.newsletter-form { width: 100%; max-width: 470px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(219,243,242,.2); text-align: left; }
.newsletter-title { margin: 0 0 11px; color: #eef7f6; font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.newsletter-row { display: flex; gap: 10px; }
.newsletter-row .input { flex: 1 1 auto; min-width: 0; color: #f2f8f8; border-color: rgba(219,243,242,.3); background: rgba(255,255,255,.08); }
.newsletter-row .input::placeholder { color: rgba(235,245,246,.55); }
.newsletter-row .input.invalid { border-color: #ffb4a8; }
.newsletter-row .btn { flex: 0 0 auto; min-height: 48px; padding: 0 20px; border-radius: 14px; }
.newsletter-note { margin: 10px 0 0; color: rgba(235,245,246,.62); font-size: 12px; line-height: 1.5; }
/* 订阅结果写在表单下面，紧挨着输入框；空的时候不占位置。 */
.newsletter-status { margin: 10px 0 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.newsletter-status:empty { display: none; }
.newsletter-status.is-success { color: #7FE0B0; }
.newsletter-status.is-warning { color: #FFC98A; }
.footer-stage-bottom { position: relative; width: min(100%, 1260px); margin: 0 auto; }
.footer-stage-bottom::before { position: absolute; top: -20px; right: 0; left: 0; border-top: 1px solid rgba(237,248,247,.22); content: ""; }
.footer-grid { grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 58px); }
.footer-intro p { color: rgba(224,238,239,.71); }
.site-footer .brand-word, .site-footer .brand small, .footer-title { color: #fff; }
.site-footer .brand-seal { color: #061827; background: #eefaf8; }
/* The links already carry a 44px touch target (v190), so the 10px gap on top of
   that only stretched the column; 2px keeps the targets and halves the pitch. */
.footer-links { gap: 2px; }
.footer-links button { color: rgba(224,238,239,.68); }
.footer-links button:hover { color: #b9e8e8; }
.footer-title { margin-bottom: 8px; }
.footer-intro p { margin-top: 14px; }
.footer-scene-note { display: block; max-width: 270px; margin-top: 14px; color: rgba(224,238,239,.49); font-size: 10px; line-height: 1.45; }
.footer-bottom { margin-top: 30px; color: rgba(224,238,239,.52); border-color: rgba(237,248,247,.18); }

@media (max-width: 1080px) {
  .hero-editorial .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr); gap: 38px; }
  .hero-mosaic.hero-learner-cast { min-height: 535px; }
  .hero-mosaic.hero-learner-cast figure.hero-learner-card { height: 300px; }
  .hero-learner-card.cast-one { height: 272px !important; }
  .hero-learner-card.cast-two { height: 338px !important; }
  .hero-learner-card.cast-three { height: 365px !important; }
  .hero-learner-card.cast-four { height: 322px !important; }
  .hero-learner-card.cast-five { height: 262px !important; }
}
@media (max-width: 820px) {
  .hero-editorial .hero-grid { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .hero-editorial .hero-copy { max-width: 690px; margin: 0; text-align: left; }
  .hero-editorial .hero-actions, .hero-editorial .proof-line { justify-content: flex-start; }
  .hero-mosaic.hero-learner-cast { width: min(100%, 690px); min-height: 510px; margin: 0 auto; }
  .footer-stage { min-height: 0; }
  .footer-stage-top { margin-bottom: 40px; }
  /* Brand on its own row, three link groups on one — the 1.45fr/1fr/1fr split
     pushed the third group onto a mostly empty second row. */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
  .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hero-mosaic.hero-learner-cast { min-height: 365px; gap: 5px; padding: 48px 0 25px; }
  .hero-mosaic.hero-learner-cast::before { top: 41px; height: 78%; border-radius: 34% 34% 18px 18px; }
  .hero-mosaic.hero-learner-cast figure.hero-learner-card { border-radius: 17px 17px 12px 12px; box-shadow: 0 12px 21px rgba(25,22,16,.14); }
  .hero-learner-card.cast-one { height: 194px !important; margin-bottom: 8px; }
  .hero-learner-card.cast-two { height: 240px !important; margin-bottom: 17px; }
  .hero-learner-card.cast-three { height: 262px !important; }
  .hero-learner-card.cast-four { height: 230px !important; margin-bottom: 12px; }
  .hero-learner-card.cast-five { height: 184px !important; margin-bottom: 7px; }
  .hero-cast-mark { top: 1px; right: 2px; font-size: 8px; }
  .hero-cast-mark b { font-size: 39px; }
  .hero-cast-caption { right: 3%; bottom: -3px; max-width: 205px; padding: 10px 12px; }
  .hero-cast-caption span { font-size: 8px; }
  .hero-cast-caption strong { font-size: 11px; }
  .site-footer { padding: 14px 16px 66px; }
  .footer-stage { padding: 34px 20px 24px; border-radius: 25px; }
  .footer-stage-top { margin: 0 auto 42px; }
  .footer-kicker { margin-bottom: 12px; font-size: 9px; }
  .footer-stage-top h2 { font-size: clamp(32px, 9.4vw, 44px); }
  .footer-stage-top > p:not(.footer-kicker) { margin-top: 14px; font-size: 14px; }
  .footer-actions { display: grid; width: 100%; gap: 13px; margin-top: 20px; }
  .footer-primary { width: 100%; justify-content: center; }
  .footer-preview-link { justify-self: center; }
  .footer-stage-bottom::before { top: -16px; }
  .footer-grid { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 22px 8px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro p { margin-top: 12px; }
  .footer-links button { font-size: 11px; }
  .footer-scene-note { margin-top: 12px; }
  .footer-bottom { gap: 6px; margin-top: 24px; }
}

/* v190 completion — keep every deliberate public action comfortably usable
   on touch screens. These selectors also cover the compact auth and footer
   actions that are intentionally styled as text rather than filled buttons. */
.brand,
.site-header .icon-btn,
#main-content .text-link,
#main-content .row-action,
.footer-preview-link,
.footer-links button {
  min-height: 44px;
}
.site-header .icon-btn { min-width: 44px; width: 44px; height: 44px; }
#main-content .text-link,
#main-content .row-action,
.footer-preview-link,
.footer-links button { display: inline-flex; align-items: center; }
.locale-switcher button { min-width: 44px; min-height: 44px; }
.btn-sm { min-height: 44px; }
.lesson-library-open { min-height: 44px; }

/* v193 — project detail decision page.
   The project remains the commercial and learning boundary. The visual layer
   now brings its instructor, verified outline facts and a real preview entry
   into the first screen, then keeps the long curriculum scannable with native
   chapter disclosures. */
.consumer-program-hero { padding-top: 40px; padding-bottom: 52px; color: #fff; background: #171715; }
.consumer-program-hero .page-title { max-width: 840px; color: #fff; font-size: clamp(48px, 5.8vw, 88px); line-height: .92; }
.consumer-program-hero .lead { color: rgba(255, 255, 255,.76); font-size: 16px; line-height: 1.62; }
.consumer-program-hero .hero-trust { max-width: 650px; color: rgba(255, 255, 255,.67); }
.consumer-program-hero .eyebrow { color: var(--brand-soft); }
.program-breadcrumb { display: flex; margin-bottom: 38px; align-items: center; flex-wrap: wrap; gap: 9px; color: rgba(255, 255, 255,.46); font-size: 11px; }
.program-breadcrumb button { min-width: 44px; min-height: 44px; padding: 0; border: 0; color: rgba(255, 255, 255,.72); background: transparent; font: inherit; cursor: pointer; }
.program-breadcrumb button:hover, .program-breadcrumb button:focus-visible { color: #fff; outline: 0; text-decoration: underline; text-underline-offset: 4px; }
.program-breadcrumb em { font-style: normal; }
.program-hero-copy { align-self: center; }
.program-instructor-panel { display: flex; max-width: 690px; margin-top: 27px; padding: 12px 13px 12px 12px; align-items: center; flex-wrap: wrap; gap: 14px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.055); }
.program-instructor-line { display: inline-grid; min-width: 230px; min-height: 52px; flex: 1 1 250px; padding: 0; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 13px; color: #fff; text-align: left; }
.program-instructor-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: #151513; background: var(--paper); font-size: 13px; font-weight: 850; letter-spacing: -.05em; }
.program-instructor-line > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.program-instructor-line small { color: rgba(255, 255, 255,.49); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.program-instructor-line strong { font-size: 14px; }
.program-instructor-line em { overflow: hidden; color: rgba(255, 255, 255,.61); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.program-instructor-cta { display: inline-flex; min-height: 46px; padding: 0 17px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; color: #fff; background: transparent; font-size: 12px; font-weight: 820; }
.program-instructor-cta:hover, .program-instructor-cta:focus-visible { border-color: #fff; color: #171715; background: #fff; }
.program-instructor-cta svg { width: 16px; height: 16px; }
.guide-page-breadcrumb { margin-bottom: 28px; }
.consumer-program-hero .hero-actions { align-items: center; }
.program-contact-link { color: rgba(255, 255, 255,.77); }
.program-contact-link:hover { color: #fff; }
.program-preview-card { overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: var(--panel); box-shadow: 0 25px 70px rgba(0,0,0,.3); }
.consumer-program-hero .program-detail-rail { grid-template-columns: minmax(0, 1fr); }
.program-hero-preview { position: relative; display: block; width: 100%; min-height: 285px; padding: 0; overflow: hidden; border: 0; color: #fff; background: #202521; text-align: left; cursor: pointer; }
.program-hero-preview .stock-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.program-hero-preview:hover .stock-image, .program-hero-preview:focus-visible .stock-image { transform: scale(1.045); filter: saturate(.9) contrast(1.05); }
.program-hero-preview:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.program-hero-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,11,.02) 12%, rgba(10,12,11,.83) 100%); }
.program-hero-play { position: absolute; z-index: 2; top: 46%; left: 50%; display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; color: #151513; background: rgba(255,255,255,.94); box-shadow: 0 14px 36px rgba(0,0,0,.35); transform: translate(-50%, -50%); transition: transform .25s ease; }
.program-hero-preview:hover .program-hero-play { transform: translate(-50%, -50%) scale(1.07); }
.program-hero-play svg { width: 24px; height: 24px; transform: translateX(2px); }
.program-hero-preview-copy { position: absolute; z-index: 2; right: 24px; bottom: 21px; left: 24px; display: grid; gap: 3px; }
.program-hero-preview-copy small { color: rgba(255,255,255,.65); font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.program-hero-preview-copy strong { font-size: 17px; line-height: 1.2; }
.program-hero-preview-copy em { color: rgba(255,255,255,.75); font-size: 11px; font-style: normal; }
.program-preview-card-copy { padding: 24px 26px 26px; color: var(--ink); }
.program-preview-card-copy h3 { margin: 8px 0 0; font-size: 22px; line-height: 1.12; letter-spacing: -.045em; }
.program-preview-card-copy .program-fact-list { margin-top: 20px; }
.program-quick-facts { display: grid; margin-top: 48px; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.06); overflow: hidden; }
.program-quick-facts > div { display: grid; min-height: 90px; padding: 20px 24px; align-content: center; gap: 8px; border-left: 1px solid rgba(255,255,255,.15); }
.program-quick-facts > div:first-child { border-left: 0; }
.program-quick-facts small { color: rgba(255, 255, 255,.48); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.program-quick-facts strong { color: #fff; font-size: 20px; line-height: 1.15; letter-spacing: -.04em; }
.program-section-nav-shell { position: sticky; z-index: 38; top: var(--header); border-bottom: 1px solid rgba(16,16,14,.12); background: rgba(250,248,243,.94); backdrop-filter: blur(18px); }
.program-section-nav { display: flex; min-height: 62px; align-items: stretch; gap: 34px; overflow-x: auto; scrollbar-width: none; }
.program-section-nav::-webkit-scrollbar { display: none; }
.program-section-nav button { min-width: 44px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 760; white-space: nowrap; cursor: pointer; }
/* The highlight follows the section the reader is actually inside. It used to be
   pinned to the first tab, so the bar claimed "Overview" on every section. */
.program-section-nav button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.program-section-nav button:hover, .program-section-nav button:focus-visible { color: var(--brand); outline: 0; border-bottom-color: var(--brand); }
/* The instructor tab is the only entry that leaves this page; the marker keeps
   that from looking like a broken in-page jump. */
.program-section-nav button.nav-page-link { display: inline-flex; align-items: center; gap: 5px; }
.nav-page-link-mark { color: var(--brand); font-size: 11px; line-height: 1; }
#program-about, #program-outcomes, #program-instructor, #program-journey, #program-curriculum, #program-faq { scroll-margin-top: calc(var(--header) + 74px); }

.public-course-chapter { padding: 0; }
.public-course-chapter > summary { list-style: none; cursor: pointer; }
.public-course-chapter > summary::-webkit-details-marker { display: none; }
.public-course-chapter .public-chapter-head { margin: 0; padding: 23px 31px; align-items: center; transition: background .2s ease; }
.public-course-chapter .public-chapter-head:hover, .public-course-chapter .public-chapter-head:focus-visible { background: var(--brand-soft); outline: 0; }
.public-course-chapter[open] .public-chapter-head { background: var(--paper-2); }
.public-course-chapter .public-chapter-head small { display: inline-flex; align-items: center; gap: 11px; }
.public-course-chapter .public-chapter-head i { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.public-course-chapter[open] .public-chapter-head i { transform: rotate(225deg) translate(-1px, -1px); }
.public-course-chapter .public-lesson-list { padding: 0 31px 29px; }

@media (max-width: 820px) {
  .consumer-program-hero { padding-top: 30px; }
  .consumer-program-hero .page-hero-grid { gap: 34px; }
  .program-quick-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .program-quick-facts > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }
  .program-quick-facts > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.15); }
  .program-section-nav { gap: 28px; }
}

@media (max-width: 620px) {
  .consumer-program-hero { padding-top: 14px; padding-bottom: 34px; }
  .program-breadcrumb { margin-bottom: 22px; gap: 7px; }
  .consumer-program-hero .page-title { font-size: clamp(42px, 12.1vw, 61px); }
  .consumer-program-hero .lead { font-size: 14px; }
  .program-instructor-panel { width: 100%; margin-top: 20px; }
  .program-instructor-line { width: 100%; }
  .program-instructor-cta { width: 100%; }
  .consumer-program-hero .hero-actions { display: grid; align-items: stretch; }
  .consumer-program-hero .hero-actions .btn { width: 100%; }
  .program-contact-link { justify-content: center; }
  .program-preview-card { border-radius: 17px; }
  .program-hero-preview { min-height: 245px; }
  .program-hero-play { width: 58px; height: 58px; }
  .program-preview-card-copy { padding: 20px; }
  .program-preview-card-copy h3 { font-size: 20px; }
  .program-quick-facts { margin-top: 28px; }
  .program-quick-facts > div { min-height: 78px; padding: 16px; }
  .program-quick-facts strong { font-size: 17px; }
  .program-section-nav-shell .container { width: 100%; }
  .program-section-nav { min-height: 56px; padding: 0 16px; gap: 24px; }
  .public-course-chapter { padding: 0; }
  .public-course-chapter .public-chapter-head { padding: 18px 17px; grid-template-columns: 1fr auto; gap: 8px 12px; }
  .public-course-chapter .public-chapter-head > span { grid-column: 1 / -1; }
  .public-course-chapter .public-lesson-list { padding: 0 14px 18px; }
}

/* v210 — public navigation needs an obvious but stable interaction cue.
   The pseudo-elements keep the header's measured layout intact at 1024px,
   while hover and keyboard focus receive the same visible treatment. */
.site-header .site-nav a,
.site-header .nav-link {
  position: relative;
  z-index: 0;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  isolation: isolate;
  transition: color .18s ease, transform .18s ease;
}
.site-header .site-nav a::before,
.site-header .nav-link::before {
  position: absolute;
  z-index: -1;
  inset: 4px -8px;
  border-radius: 999px;
  background: var(--brand-soft);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(.86);
  transition: opacity .18s ease, transform .18s ease;
}
.site-header .site-nav a::after,
.site-header .nav-link::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible,
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: var(--brand-dark);
  outline: 0;
  transform: translateY(-1px);
}
.site-header .site-nav a:hover::before,
.site-header .site-nav a:focus-visible::before,
.site-header .nav-link:hover::before,
.site-header .nav-link:focus-visible::before { opacity: 1; transform: scale(1); }
.site-header .site-nav a:hover::after,
.site-header .site-nav a:focus-visible::after,
.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after { transform: scaleX(1); }

/* Footer links need the same "this is interactive" signal without turning
   the footer into a stack of primary buttons. */
.site-footer .footer-links button {
  position: relative;
  width: fit-content;
  min-height: 44px;
  padding: 10px 31px 10px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.site-footer .footer-links button::after {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #b9e8e8;
  content: "→";
  opacity: 0;
  transform: translate(-5px, -50%);
  transition: opacity .18s ease, transform .18s ease;
}
.site-footer .footer-links button:hover,
.site-footer .footer-links button:focus-visible {
  color: #fff;
  outline: 0;
  background: rgba(185,232,232,.14);
  transform: translateX(3px);
}
.site-footer .footer-links button:hover::after,
.site-footer .footer-links button:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
/* Touch screens have no hover, so the "→" and the 31px reserved for it were dead
   weight — and that reserved space is what pushed labels like "Cookie 政策" onto a
   second line once the columns got narrow. Must stay after the rule above. */
@media (max-width: 620px) {
  .site-footer .footer-links button { width: auto; padding: 6px 4px; }
  .site-footer .footer-links button::after { display: none; }
}
.footer-preview-link { transition: color .18s ease, border-color .18s ease, transform .18s ease; }
.footer-preview-link:hover,
.footer-preview-link:focus-visible { outline: 0; transform: translateY(-2px); }

/* Every project card ends in one unambiguous route into the detail page. */
.program-card .program-card-cta,
.program-card:nth-child(3n) .program-card-cta {
  min-height: 50px;
  padding: 12px 17px 12px 19px;
  justify-content: space-between;
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 10px 22px rgba(0,86,210,.2);
  font-weight: 820;
}
.program-card .program-card-cta:hover,
.program-card .program-card-cta:focus-visible,
.program-card:nth-child(3n) .program-card-cta:hover,
.program-card:nth-child(3n) .program-card-cta:focus-visible {
  color: #fff;
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  box-shadow: 0 14px 28px rgba(0,67,168,.26);
  outline: 3px solid rgba(0,86,210,.28);
  outline-offset: 3px;
  transform: translateY(-2px);
}
.program-card .program-card-cta .icon { width: 17px; height: 17px; transition: transform .18s ease; }
.program-card .program-card-cta:hover .icon,
.program-card .program-card-cta:focus-visible .icon { transform: translateX(3px); }

/* v198 — admin palette aligned to the approved light blue SaaS reference.
   This is deliberately scoped to the administrative shell: public learning
   pages and the visual theme inside each showcase preview remain independent. */
.admin-shell {
  --ink: #202735;
  --ink-2: #4f5d73;
  --muted: #7b879a;
  --paper: #f4f6f9;
  --paper-2: #f7f9fc;
  --panel: #ffffff;
  --line: #e3e8f0;
  --line-2: #edf1f6;
  --brand: #2f7cf6;
  --brand-dark: #1f68dc;
  --brand-soft: #eaf2ff;
  --focus: #2f7cf6;
  min-height: 100svh;
  background: #f4f6f9;
}
.admin-shell .admin-sidebar {
  color: #202735;
  background: rgba(252, 253, 255, .94);
  border-right: 1px solid #e4e9f1;
  box-shadow: 8px 0 28px rgba(41, 58, 82, .035);
  backdrop-filter: blur(18px) saturate(1.06);
}
.admin-shell .admin-sidebar .brand-word,
.admin-shell .admin-sidebar .brand-word small { color: #202735; }
.admin-shell .admin-sidebar .brand-seal { color: #fff; background: #252b38; }
.admin-shell .admin-context {
  color: #2b3443;
  background: rgba(255,255,255,.88);
  border-color: #e6ebf2;
  box-shadow: 0 4px 14px rgba(48, 67, 94, .035);
}
.admin-shell .admin-context small,
.admin-shell .admin-nav-label,
.admin-shell .admin-nav-group-toggle,
.admin-shell .admin-nav-hint { color: #8b95a5; }
.admin-shell .admin-nav-group-toggle:hover { color: #2f7cf6; }
.admin-shell .admin-nav button {
  color: #5a6576;
  border-color: transparent;
  border-radius: 8px;
}
.admin-shell .admin-nav button:hover {
  color: #246fe4;
  background: #f0f5ff;
  border-color: #e2ebfb;
}
.admin-shell .admin-nav button.active {
  color: #236dde;
  background: #e8f1ff;
  border-color: #dbe8fd;
  box-shadow: none;
}
.admin-shell .admin-nav button:focus-visible,
.admin-shell .admin-nav-group-toggle:focus-visible {
  outline: 3px solid rgba(47,124,246,.22);
  outline-offset: 2px;
}
.admin-shell .admin-main,
.admin-shell .admin-content { background: #f4f6f9; }
.admin-shell .admin-topbar {
  background: rgba(255,255,255,.94);
  border-bottom-color: #e5eaf1;
  box-shadow: 0 3px 14px rgba(45, 63, 88, .025);
  backdrop-filter: blur(16px) saturate(1.04);
}
.admin-shell .btn {
  color: #526074;
  background: #fff;
  border-color: #dfe5ee;
  border-radius: 8px;
}
.admin-shell .btn:hover,
.admin-shell .btn:focus-visible {
  color: #236dde;
  background: #f7faff;
  border-color: #a9c6f8;
  outline: 0;
}
.admin-shell .btn-primary,
.admin-shell .btn-dark {
  color: #fff;
  background: #2f7cf6;
  border-color: #2f7cf6;
  box-shadow: 0 7px 16px rgba(47,124,246,.16);
}
.admin-shell .btn-primary:hover,
.admin-shell .btn-primary:focus-visible,
.admin-shell .btn-dark:hover,
.admin-shell .btn-dark:focus-visible {
  color: #fff;
  background: #1f68dc;
  border-color: #1f68dc;
}
.admin-shell .btn-soft { color: #236dde; background: #eaf2ff; border-color: #dce9ff; }
.admin-shell .admin-panel,
.admin-shell .table-wrap,
.admin-shell .program-object-list,
.admin-shell .kpi-card,
.admin-shell .kpi-card:nth-child(2n),
.admin-shell .kpi-card:nth-child(3n),
.admin-shell .performance-kpis article,
.admin-shell .promotion-kpi {
  color: #202735;
  background: #fff;
  border-color: #e3e8f0;
  box-shadow: 0 5px 18px rgba(43, 62, 88, .025);
}
.admin-shell .kpi-card:nth-child(3n) .kpi-top,
.admin-shell .kpi-card:nth-child(3n) .kpi-link { color: #607087; }
.admin-shell .admin-panel-head,
.admin-shell .data-table td { border-color: #e8edf3; }
.admin-shell .data-table th { color: #7c8798; background: #f7f9fc; }
.admin-shell .data-table tbody tr:hover td { background: #f8fbff; }
.admin-shell .input,
.admin-shell .select,
.admin-shell .textarea {
  color: #273142;
  background: #fff;
  border-color: #dce3ec;
}
.admin-shell .input:focus,
.admin-shell .select:focus,
.admin-shell .textarea:focus {
  border-color: #70a3f7;
  box-shadow: 0 0 0 3px rgba(47,124,246,.13);
}
.admin-shell .program-tabs { background: #edf2f8; }
.admin-shell .program-tabs button.active { color: #fff; background: #2f7cf6; }
.admin-shell .program-picker-item:hover,
.admin-shell .program-summary-grid button:hover { color: #236dde; background: #eef5ff; border-color: #d8e7ff; }
.admin-shell .promotion-explainer { color: #273142; background: #f2f7ff; border-color: #dce9fb; }
.admin-shell .promotion-explainer .admin-panel-head { border-bottom-color: #dce6f3; }
.admin-shell .routing-steps li > b { color: #fff; background: #2f7cf6; }
.admin-shell .routing-steps small { color: #6c7a8e; }
.admin-shell .promotion-data-boundary {
  color: #4f6078;
  background: #edf4ff;
  border-color: #dbe8fb;
}
.admin-shell .promotion-data-boundary strong { color: #236dde; }
.admin-shell .promotion-analytics-filters,
.admin-shell .dimension-filter-grid { background: rgba(255,255,255,.78); border-color: #e2e8f0; }
.admin-shell .dimension-tag { color: #546176; background: #fff; border-color: #e0e6ee; }
.admin-shell .status-neutral { color: #66758b; background: #eef2f7; }
.admin-shell .row-action,
.admin-shell .kpi-link { color: #236dde; }

@media (max-width: 1200px) {
  .admin-shell .showcase-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-shell .showcase-live-panel { position: static; }
}

@media (max-width: 900px) {
  .admin-shell .admin-sidebar { border-right: 0; border-bottom-color: #e4e9f1; }
  .admin-shell .admin-nav button.active { box-shadow: inset 0 -2px 0 #2f7cf6; }
}

/* v199 — Global partner network.
   The public recruitment surface follows the approved dark, high-contrast
   reference language. The authenticated partner workspace intentionally keeps
   the light operational shell above so the two trust contexts stay distinct. */
.partner-site {
  --partner-bg: #070a12;
  --partner-panel: #0d1422;
  --partner-panel-2: #111b2d;
  --partner-line: rgba(146, 171, 214, .17);
  --partner-muted: #93a1b8;
  --partner-blue: #3b82f6;
  --partner-blue-2: #60a5fa;
  min-height: 100svh;
  color: #f7f9fc;
  background:
    radial-gradient(circle at 78% 8%, rgba(43, 107, 255, .16), transparent 30rem),
    linear-gradient(180deg, #070a12 0%, #080c15 64%, #070a12 100%);
}
.partner-site * { border-color: var(--partner-line); }
.partner-site .locale-switcher { color: #aebbd0; }
.partner-site .locale-switcher button { color: #8291aa; }
.partner-site .locale-switcher button:hover,
.partner-site .locale-switcher button.active { color: #fff; }
.partner-header {
  position: sticky;
  z-index: 80;
  top: 0;
  display: grid;
  min-height: 74px;
  padding: 0 clamp(22px, 4vw, 70px);
  align-items: center;
  grid-template-columns: minmax(210px, 1fr) auto minmax(270px, 1fr);
  gap: 28px;
  background: rgba(7, 10, 18, .82);
  border-bottom: 1px solid var(--partner-line);
  backdrop-filter: blur(20px) saturate(1.2);
}
.partner-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.partner-brand > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #2f7cf6, #165dd8);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  box-shadow: 0 9px 25px rgba(43,108,255,.28);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.partner-brand strong { font-size: 14px; letter-spacing: -.01em; line-height: 1.25; }
.partner-brand small { display: block; margin-top: 2px; color: #76859d; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.partner-header nav { display: flex; align-items: center; justify-content: center; gap: 7px; }
.partner-header nav button,
.partner-link {
  min-height: 38px;
  padding: 8px 12px;
  color: #a4b0c4;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.partner-header nav button:hover,
.partner-link:hover { color: #fff; }
.partner-header > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.partner-cta {
  color: #fff;
  background: linear-gradient(135deg, #377df2, #2466dd);
  border-color: #4d8bf4;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(43, 108, 255, .21);
}
.partner-cta:hover,
.partner-cta:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #4c8efa, #2c6de5);
  border-color: #75a7fb;
  box-shadow: 0 16px 34px rgba(43, 108, 255, .30);
}
.partner-cta-lg { min-height: 52px; padding: 13px 24px; }
.partner-ghost {
  color: #eef4ff;
  background: rgba(255,255,255,.035);
  border-color: rgba(167,190,229,.26);
  border-radius: 8px;
}
.partner-ghost:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(190,210,244,.46); }
.partner-hero {
  position: relative;
  display: grid;
  min-height: 720px;
  padding: 92px clamp(28px, 7vw, 128px) 86px;
  align-items: center;
  grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr);
  gap: clamp(50px, 7vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--partner-line);
}
.partner-glow {
  position: absolute;
  z-index: 0;
  top: 8%;
  right: 3%;
  width: min(48vw, 740px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,112,255,.22), rgba(42,112,255,.06) 42%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
.partner-hero-copy { position: relative; z-index: 1; }
.partner-kicker {
  margin: 0 0 20px;
  color: #5c96ff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.partner-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(43px, 5.2vw, 74px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.01;
}
.partner-hero-copy > p:not(.partner-kicker) {
  max-width: 650px;
  margin: 28px 0 0;
  color: #a9b5c9;
  font-size: 17px;
  line-height: 1.8;
}
.partner-hero-actions { display: flex; margin-top: 34px; gap: 12px; flex-wrap: wrap; }
.partner-proof { display: flex; margin-top: 31px; gap: 8px 22px; flex-wrap: wrap; }
.partner-proof span { display: inline-flex; align-items: center; gap: 8px; color: #8291a8; font-size: 12px; }
.partner-proof span::before { width: 5px; height: 5px; background: #4f8cf6; border-radius: 50%; content: ""; box-shadow: 0 0 12px rgba(74,139,255,.7); }
.partner-section { padding: 110px clamp(28px, 7vw, 128px); border-bottom: 1px solid var(--partner-line); }
.partner-section-head { max-width: 790px; margin-bottom: 54px; }
.partner-section-head h2,
.partner-final h2,
.partner-register-intro h1 {
  margin: 0;
  font-size: clamp(35px, 4.1vw, 58px);
  font-weight: 620;
  letter-spacing: -.045em;
  line-height: 1.06;
}
.partner-section-head > p:last-child,
.partner-register-intro > p:not(.partner-kicker) { max-width: 700px; margin: 19px 0 0; color: var(--partner-muted); font-size: 16px; line-height: 1.75; }
.partner-model-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--partner-line); border-left: 1px solid var(--partner-line); }
.partner-model-grid article { min-height: 245px; padding: 27px 24px; background: rgba(255,255,255,.012); border-right: 1px solid var(--partner-line); border-bottom: 1px solid var(--partner-line); }
.partner-model-grid article:hover { background: linear-gradient(160deg, rgba(53,118,235,.12), rgba(255,255,255,.015)); }
.partner-model-grid article > span { color: #4c6d9f; font-size: 11px; font-weight: 850; letter-spacing: .11em; }
.partner-model-grid h3 { margin: 73px 0 12px; font-size: 18px; line-height: 1.35; }
.partner-model-grid p { margin: 0; color: #8491a6; font-size: 13px; line-height: 1.7; }
.partner-tools { background: #090e18; }
.partner-tool-list { border-top: 1px solid var(--partner-line); }
.partner-tool-list article { display: grid; min-height: 112px; padding: 23px 8px; align-items: center; grid-template-columns: 70px minmax(0, 1fr) 36px; border-bottom: 1px solid var(--partner-line); transition: background .18s ease, padding .18s ease; }
.partner-tool-list article:hover { padding-right: 17px; padding-left: 17px; background: rgba(54,118,232,.06); }
.partner-tool-list article > b { color: #4a6eaa; font-size: 11px; letter-spacing: .13em; }
.partner-tool-list h3 { margin: 0 0 6px; font-size: 18px; }
.partner-tool-list p { margin: 0; color: #8290a6; font-size: 13px; }
.partner-tool-list article > span { color: #4b83e6; font-size: 22px; }
.partner-process { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--partner-line); border-left: 1px solid var(--partner-line); }
.partner-process article { min-height: 190px; padding: 28px; background: rgba(255,255,255,.012); border-right: 1px solid var(--partner-line); border-bottom: 1px solid var(--partner-line); }
.partner-process b { color: #5690f6; font-size: 12px; letter-spacing: .12em; }
.partner-process h3 { margin: 74px 0 0; font-size: 17px; font-weight: 650; }
.partner-final { padding: 132px 28px; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(48,112,232,.16), transparent 32rem); }
.partner-final h2 { max-width: 900px; margin: 0 auto 34px; }
.partner-final > p:last-child { max-width: 760px; margin: 25px auto 0; color: #7f8da2; font-size: 12px; line-height: 1.7; }

/* Recruitment form and verification states. */
.partner-register-shell {
  display: grid;
  width: min(1320px, calc(100% - 56px));
  min-height: calc(100svh - 74px);
  margin: 0 auto;
  padding: 76px 0 110px;
  align-items: start;
  grid-template-columns: minmax(330px, .75fr) minmax(560px, 1.25fr);
  gap: clamp(52px, 7vw, 112px);
}
.partner-register-intro { position: sticky; top: 132px; padding-top: 18px; }
.partner-register-intro ol { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--partner-line); }
.partner-register-intro li { display: grid; padding: 18px 0; align-items: center; grid-template-columns: 42px 1fr; color: #a7b3c5; border-bottom: 1px solid var(--partner-line); }
.partner-register-intro li b { color: #4e8afa; font-size: 11px; letter-spacing: .12em; }
.partner-register-card {
  padding: clamp(28px, 4vw, 52px);
  background: rgba(14,21,35,.88);
  border: 1px solid rgba(147,172,215,.21);
  border-radius: 14px;
  box-shadow: 0 32px 72px rgba(0,0,0,.28);
}
.partner-form-head { display: grid; margin-bottom: 36px; align-items: start; grid-template-columns: 50px 1fr; }
.partner-form-head > span { color: #528cf1; font-size: 12px; font-weight: 850; letter-spacing: .1em; }
.partner-form-head h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.partner-form-head p { margin: 8px 0 0; color: #8190a7; font-size: 13px; }
.partner-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.partner-form-grid label > span { display: block; margin-bottom: 8px; color: #d8e1f0; font-size: 12px; font-weight: 720; }
.partner-form-grid label > small { display: block; margin-top: 6px; color: #67758d; font-size: 10px; }
.partner-form-grid .input {
  width: 100%;
  min-height: 48px;
  color: #f7f9fc;
  background: #090f1b;
  border: 1px solid rgba(143,168,210,.2);
  border-radius: 7px;
}
.partner-form-grid .input:focus { border-color: #4d8df9; box-shadow: 0 0 0 3px rgba(59,130,246,.13); }
.partner-form-grid .partner-full { grid-column: 1 / -1; }
.partner-register-card fieldset { margin: 38px 0 0; padding: 0; border: 0; }
.partner-register-card legend { width: 100%; margin-bottom: 17px; padding: 17px 0 0; color: #dfe7f4; border-top: 1px solid var(--partner-line); font-size: 12px; font-weight: 800; letter-spacing: .035em; }
.partner-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.partner-identity-grid label,
.partner-strength-grid label { position: relative; display: block; cursor: pointer; }
.partner-identity-grid input,
.partner-strength-grid input { position: absolute; opacity: 0; pointer-events: none; }
.partner-identity-grid label > span { display: block; min-height: 82px; padding: 16px; background: rgba(255,255,255,.018); border: 1px solid var(--partner-line); border-radius: 7px; }
.partner-identity-grid b { display: block; color: #eaf0fa; font-size: 13px; }
.partner-identity-grid small { display: block; margin-top: 7px; color: #6f7d93; font-size: 10px; line-height: 1.45; }
.partner-identity-grid input:checked + span,
.partner-strength-grid input:checked + span { color: #fff; background: rgba(48,114,236,.14); border-color: #4e8cf5; box-shadow: 0 0 0 1px rgba(78,140,245,.14) inset; }
.partner-strength-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.partner-strength-grid label > span { display: block; padding: 11px 13px; color: #a9b5c7; background: rgba(255,255,255,.014); border: 1px solid var(--partner-line); border-radius: 6px; font-size: 12px; }
.partner-policy { display: flex; margin-top: 30px; align-items: flex-start; gap: 10px; color: #8e9bb0; font-size: 11px; line-height: 1.65; }
.partner-policy input { margin-top: 4px; accent-color: #3b82f6; }
.partner-policy button { padding: 0; color: #72a5ff; border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.partner-submit { width: 100%; min-height: 54px; margin-top: 24px; }
.partner-form-note { margin: 13px 0 0; color: #6f7d93; font-size: 10px; text-align: center; }
.partner-verify-site main { display: grid; min-height: calc(100svh - 74px); padding: 50px 24px; place-items: center; }
.partner-verify-card { width: min(560px, 100%); padding: 52px; background: rgba(14,21,35,.9); border: 1px solid var(--partner-line); border-radius: 14px; box-shadow: 0 28px 70px rgba(0,0,0,.3); text-align: center; }
.partner-verify-card h1 { margin: 20px 0 12px; font-size: 32px; letter-spacing: -.04em; }
.partner-verify-card p { color: #8d9ab0; }

/* Partner-only operational screens inside the light workspace. */
.partner-profile-strip { display: grid; margin-bottom: 18px; padding: 18px 20px; align-items: center; grid-template-columns: 1fr auto; gap: 20px; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; }
.partner-profile-strip h3 { margin: 0; }
.partner-profile-strip p { margin: 4px 0 0; color: #7b879a; font-size: 12px; }
.partner-program-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.partner-program-card { min-height: 250px; padding: 22px; background: #fff; border: 1px solid #e2e8f1; border-radius: 12px; box-shadow: 0 6px 20px rgba(44,63,91,.035); }
.partner-program-card.is-active { border-color: #b9d2fa; box-shadow: 0 8px 22px rgba(47,124,246,.08); }
.partner-program-card-top { display: flex; align-items: center; justify-content: space-between; }
.partner-program-card h3 { margin: 27px 0 10px; color: #202735; font-size: 18px; }
.partner-program-card > p { min-height: 62px; margin: 0 0 22px; color: #758196; font-size: 13px; line-height: 1.6; }
.tag-cell { display: flex; max-width: 380px; gap: 5px; flex-wrap: wrap; }
.tag-cell span { padding: 3px 7px; color: #4c6383; background: #edf3fc; border-radius: 5px; font-size: 10px; }
/* 后台表格比容器宽时要能横向滚。这里原来把滚动条整个藏掉
 * （`scrollbar-width:none` + `::-webkit-scrollbar{display:none}`），后果是右边的列被
 * 切掉、又一点提示都没有，看着像页面坏了（2026-09-29 负责人在 900px 窗口上指出）。
 *
 * 这四层背景是「滚动阴影」的标准写法，别删：两条 `local` 白罩跟着内容滚、两条
 * `scroll` 阴影钉在滚动口上。滚到最右时白罩正好盖住右阴影，所以**到底了自动没有
 * 阴影**，不需要 JS、也不用监听滚动。 */
.admin-shell .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: #c3cddc transparent;
  background:
    linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 32, 54, .14), rgba(20, 32, 54, 0)) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 32, 54, .14), rgba(20, 32, 54, 0)) right center / 13px 100% no-repeat scroll,
    #fff;
}
.admin-shell .table-wrap::-webkit-scrollbar { height: 9px; }
.admin-shell .table-wrap::-webkit-scrollbar-track { background: transparent; }
.admin-shell .table-wrap::-webkit-scrollbar-thumb { background: #c3cddc; border: 2px solid #fff; border-radius: 5px; }
.admin-shell .table-wrap::-webkit-scrollbar-thumb:hover { background: #a9b6c9; }

@media (max-width: 1160px) {
  .partner-header { grid-template-columns: 1fr auto; }
  .partner-header nav { display: none; }
  .partner-hero { min-height: auto; grid-template-columns: 1fr; }
  .partner-model-grid { grid-template-columns: repeat(3, 1fr); }
  .partner-register-shell { grid-template-columns: .72fr 1.28fr; gap: 44px; }
  .partner-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .partner-header { min-height: 66px; padding: 0 18px; }
  .partner-brand small,
  .partner-header .locale-switcher { display: none; }
  .partner-link { padding-right: 5px; padding-left: 5px; font-size: 11px; }
  .partner-header .partner-cta { min-height: 38px; padding: 7px 11px; font-size: 11px; }
  .partner-hero { padding: 68px 22px; grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .partner-hero-copy h1 { font-size: clamp(39px, 11vw, 56px); }
  .partner-section { padding: 80px 22px; }
  .partner-model-grid { grid-template-columns: 1fr 1fr; }
  .partner-process { grid-template-columns: 1fr 1fr; }
  .partner-register-shell { width: min(100% - 34px, 720px); padding-top: 45px; grid-template-columns: 1fr; }
  .partner-register-intro { position: static; }
  .partner-program-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .partner-brand strong { font-size: 12px; }
  .partner-header > div { gap: 4px; }
  .partner-link { display: none; }
  .partner-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .partner-hero-actions .btn { width: 100%; }
  .partner-model-grid,
  .partner-process { grid-template-columns: 1fr; }
  .partner-model-grid article { min-height: 190px; }
  .partner-model-grid h3 { margin-top: 45px; }
  .partner-tool-list article { grid-template-columns: 44px 1fr 24px; }
  .partner-register-card { padding: 24px 18px; }
  .partner-form-grid,
  .partner-identity-grid,
  .partner-strength-grid { grid-template-columns: 1fr; }
  .partner-form-head { grid-template-columns: 34px 1fr; }
  .partner-verify-card { padding: 36px 22px; }
}

/* v200 — keep the operational sidebar vertical on computer/tablet widths.
   Earlier responsive layers converted it into a tall horizontal strip at
   700–900px, which created blank space and a visible scrollbar. */
@media (min-width: 681px) and (max-width: 900px) {
  .admin-shell .admin-sidebar {
    position: fixed;
    z-index: 90;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 210px;
    height: auto;
    min-height: 100svh;
    padding: 16px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #e4e9f1;
    border-bottom: 0;
    scrollbar-width: none;
  }
  .admin-shell .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-shell .admin-brand { display: block; padding: 6px 8px 18px; }
  .admin-shell .admin-sidebar .brand-word,
  .admin-shell .admin-sidebar .brand-word small,
  .admin-shell .admin-context,
  .admin-shell .admin-nav-label,
  .admin-shell .admin-nav-hint,
  .admin-shell .admin-nav-group-toggle,
  .admin-shell .admin-nav button span { display: block; }
  .admin-shell .admin-context { margin: 2px 4px 18px; }
  .admin-shell .admin-nav { display: block; overflow: visible; }
  .admin-shell .admin-nav-group { display: block; margin: 16px 0; }
  .admin-shell .admin-nav-items { display: block; }
  .admin-shell .admin-nav-group.is-collapsed .admin-nav-items { display: none; }
  .admin-shell .admin-nav button {
    display: flex;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 40px;
    padding: 8px 9px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    font-size: 12px;
    text-align: left;
    white-space: normal;
  }
  .admin-shell .admin-main { margin-left: 210px; }
  .admin-shell .admin-topbar { min-height: 68px; padding: 0 18px; }
  .admin-shell .admin-content { padding: 25px 18px 56px; }
}

/* v201 — recruitment landing page aligned to the approved local PartnerHub
   reference. Business copy and permissions remain project-owned; this layer
   reproduces the reference page's centered hero, indigo/black system,
   product-preview rhythm, asymmetric grids, workflow, FAQ and closing CTA. */
.partner-site {
  --partner-bg: #050507;
  --partner-panel: #0c0c12;
  --partner-panel-2: #13131c;
  --partner-line: rgba(255,255,255,.08);
  --partner-muted: rgba(255,255,255,.68);
  --partner-blue: #4f46e5;
  --partner-blue-2: #818cf8;
  background: #050507;
}
.partner-container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.partner-header { position: sticky; display: block; min-height: 72px; padding: 0 24px; background: rgba(5,5,7,.86); }
.partner-header > .partner-header-inner { display: grid; width: min(1200px, 100%); min-height: 72px; margin: 0 auto; align-items: center; grid-template-columns: minmax(190px, 1fr) auto minmax(260px, 1fr); gap: 24px; }
.partner-brand { display: inline-grid; width: fit-content; gap: 0; }
.partner-brand strong { display: flex; align-items: center; color: #fff; font-size: 24px; font-weight: 780; letter-spacing: -.055em; line-height: 1; }
.partner-brand strong span { margin-left: 2px; color: #818cf8; }
.partner-brand strong i { width: 5px; height: 5px; margin: 12px 0 0 4px; background: #818cf8; border-radius: 50%; }
.partner-brand small { margin-top: 5px; color: rgba(255,255,255,.36); font-size: 8px; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; }
.partner-header nav { gap: 0; }
.partner-header nav button,
.partner-link { position: relative; padding: 8px 11px; color: rgba(255,255,255,.68); font-size: 12px; font-weight: 580; }
.partner-header nav button::after { position: absolute; right: 50%; bottom: 2px; left: 50%; height: 2px; background: #4f46e5; border-radius: 2px; content: ""; transition: right .22s ease, left .22s ease; }
.partner-header nav button:hover::after { right: 24%; left: 24%; }
.partner-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* The partner sub-site has its own shell, so without this the header offers no route back to
   the main site and the brand mark only reloads /partners. */
.partner-back {
  display: inline-flex;
  min-height: 34px;
  padding: 6px 12px;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.partner-back:hover { color: #fff; border-color: rgba(255,255,255,.42); }
.partner-back span { font-size: 13px; line-height: 1; }
.partner-cta { background: #4f46e5; border-color: #4f46e5; border-radius: 8px; box-shadow: none; }
.partner-cta:hover,
.partner-cta:focus-visible { background: #4338ca; border-color: #4338ca; box-shadow: 0 8px 30px rgba(79,70,229,.35); transform: translateY(-1px); }
.partner-ghost { background: transparent; border-color: rgba(255,255,255,.12); }
.partner-ghost:hover { background: rgba(79,70,229,.1); border-color: #4f46e5; color: #a5b4fc; }

@keyframes partner-hero-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes partner-glow-pulse { 0%,100% { opacity: .55; transform: translateX(-50%) scale(.92); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }
@keyframes partner-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes partner-drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-15px,0); } }
@keyframes partner-flow-pulse { 0% { transform: translateX(-120%); opacity: 0; } 20%,75% { opacity: .9; } 100% { transform: translateX(420%); opacity: 0; } }
@keyframes partner-scan { 0% { transform: translateY(-20px); opacity: 0; } 18%,82% { opacity: .62; } 100% { transform: translateY(310px); opacity: 0; } }
.partner-reference-hero { position: relative; overflow: hidden; padding: 96px 0 98px; text-align: center; }
.partner-reference-glow { position: absolute; top: -360px; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); background: radial-gradient(circle, rgba(79,70,229,.2) 0%, rgba(79,70,229,.07) 34%, transparent 68%); border-radius: 50%; animation: partner-glow-pulse 7s ease-in-out infinite; pointer-events: none; }
.partner-hero-constellation { position: absolute; top: 50%; left: 50%; width: min(1080px, 92vw); height: 720px; transform: translate(-50%,-50%); pointer-events: none; }
.partner-hero-constellation::before,
.partner-hero-constellation::after { position: absolute; inset: 6% 11%; border: 1px solid rgba(129,140,248,.11); border-radius: 50%; content: ""; animation: partner-orbit 42s linear infinite; }
.partner-hero-constellation::after { inset: 18% 25%; border-style: dashed; animation-direction: reverse; animation-duration: 29s; }
.partner-hero-constellation i,
.partner-hero-constellation span,
.partner-hero-constellation b { position: absolute; display: block; border-radius: 50%; }
.partner-hero-constellation i { width: 6px; height: 6px; background: #818cf8; box-shadow: 0 0 22px rgba(129,140,248,.8); animation: partner-drift 5s ease-in-out infinite; }
.partner-hero-constellation i:nth-child(1) { top: 19%; left: 13%; }.partner-hero-constellation i:nth-child(2) { top: 28%; right: 11%; animation-delay: -1.7s; }.partner-hero-constellation i:nth-child(3) { right: 26%; bottom: 14%; animation-delay: -3.2s; }
.partner-hero-constellation span { width: 84px; height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.34), transparent); }
.partner-hero-constellation span:nth-of-type(1) { top: 26%; left: 4%; transform: rotate(23deg); }.partner-hero-constellation span:nth-of-type(2) { top: 36%; right: 1%; transform: rotate(-19deg); }.partner-hero-constellation span:nth-of-type(3) { bottom: 18%; left: 18%; transform: rotate(-11deg); }
.partner-hero-constellation b { width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.035); animation: partner-drift 8s ease-in-out infinite; }
.partner-hero-constellation b:nth-of-type(1) { top: 6%; right: 17%; }.partner-hero-constellation b:nth-of-type(2) { bottom: 1%; left: 9%; animation-delay: -4s; }
.partner-reference-hero .partner-container { position: relative; z-index: 1; }
.partner-hero-badge { display: inline-flex; margin-bottom: 28px; padding: 7px 14px; align-items: center; gap: 7px; color: #a5b4fc; background: rgba(79,70,229,.1); border: 1px solid rgba(129,140,248,.22); border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .035em; animation: partner-hero-up .7s cubic-bezier(.16,1,.3,1) both; }
.partner-hero-badge span { color: #818cf8; }
.partner-reference-hero h1 { max-width: 920px; margin: 0 auto; font-size: clamp(50px, 6vw, 76px); font-weight: 760; letter-spacing: -.055em; line-height: 1.05; animation: partner-hero-up .8s cubic-bezier(.16,1,.3,1) .08s both; }
.partner-reference-hero h1 span { color: #818cf8; }
.partner-hero-sub { max-width: 700px; margin: 26px auto 0; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.75; animation: partner-hero-up .8s cubic-bezier(.16,1,.3,1) .16s both; }
.partner-reference-hero .partner-hero-actions { justify-content: center; margin-top: 36px; animation: partner-hero-up .8s cubic-bezier(.16,1,.3,1) .24s both; }
.partner-reference-hero .partner-cta-lg { min-height: 50px; padding: 13px 27px; }
.partner-hero-metrics { display: flex; margin-top: 58px; justify-content: center; gap: 58px; animation: partner-hero-up .8s cubic-bezier(.16,1,.3,1) .32s both; }
.partner-hero-metrics > div { min-width: 120px; text-align: center; }
.partner-hero-metrics strong { display: block; color: #fff; font-size: 26px; font-weight: 720; letter-spacing: -.035em; }
.partner-hero-metrics span { display: block; margin-top: 4px; color: rgba(255,255,255,.38); font-size: 11px; }

.partner-benefit-section { padding: 98px 0 104px; background: #07070a; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-benefit-heading { display: grid; margin-bottom: 48px; align-items: end; grid-template-columns: minmax(180px, .55fr) minmax(520px, 1.45fr); gap: 70px; }
.partner-benefit-heading h2 { max-width: 820px; margin: 0; color: #fff; font-size: clamp(30px, 3.5vw, 44px); font-weight: 720; letter-spacing: -.04em; line-height: 1.2; }
.partner-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); }
.partner-benefit-grid article { min-height: 270px; padding: 29px 25px 31px; border-right: 1px solid rgba(255,255,255,.1); }
.partner-benefit-grid article:last-child { border-right: 0; }
.partner-benefit-grid article > span { color: #818cf8; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.partner-benefit-grid article > small { display: block; margin-top: 15px; color: rgba(255,255,255,.35); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.partner-benefit-grid h3 { margin: 29px 0 13px; color: #fff; font-size: 17px; line-height: 1.45; }
.partner-benefit-grid p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.75; }
.partner-benefit-note { margin: 19px 0 0; color: rgba(255,255,255,.34); font-size: 10px; text-align: right; }

.partner-reveal { opacity: 0; transform: translateY(54px); transition: opacity .88s cubic-bezier(.16,1,.3,1), transform .88s cubic-bezier(.16,1,.3,1); }
.partner-reveal.is-visible { opacity: 1; transform: none; }
.partner-reveal .partner-stock-image { transform: scale(1.075); transition: transform 1.25s cubic-bezier(.16,1,.3,1), filter .8s ease; }
.partner-reveal.is-visible .partner-stock-image { transform: scale(1); }
.partner-media-story { padding: 124px 0; background: #050507; border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-promotion-story { background: #08080c; }
.partner-story-layout { display: grid; align-items: center; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap: clamp(58px,7vw,104px); }
.partner-story-reverse { grid-template-columns: minmax(360px,.92fr) minmax(0,1.08fr); }
.partner-story-media { position: relative; min-height: 610px; }
.partner-story-media figure { overflow: hidden; margin: 0; background: #101017; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 34px 82px rgba(0,0,0,.36); }
.partner-story-main { position: absolute; inset: 0 74px 58px 0; border-radius: 20px; }
.partner-story-side { position: absolute; right: 0; bottom: 0; z-index: 2; width: 43%; height: 42%; border-radius: 14px; }
.partner-story-reverse .partner-story-main { inset: 0 0 58px 74px; }
.partner-story-reverse .partner-story-side { right: auto; left: 0; }
.partner-stock-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(1.05) brightness(.78); }
.partner-story-main::after,
.partner-journey-image::after,
.partner-global-mosaic figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,5,7,.78)); content: ""; pointer-events: none; }
.partner-story-main figcaption,
.partner-journey-image figcaption,
.partner-global-mosaic figcaption { position: absolute; right: 18px; bottom: 16px; z-index: 2; color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .03em; }
.partner-story-side > span { position: absolute; right: 12px; bottom: 10px; left: 12px; z-index: 2; padding: 8px 10px; color: rgba(255,255,255,.72); background: rgba(5,5,7,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; backdrop-filter: blur(10px); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.partner-story-copy h2,
.partner-journey-head h2,
.partner-toolkit-copy h2,
.partner-scope-intro h2,
.partner-global-head h2 { margin: 16px 0 0; color: #fff; font-size: clamp(34px,4vw,53px); font-weight: 735; letter-spacing: -.045em; line-height: 1.12; }
.partner-story-copy > p:not(.partner-kicker),
.partner-toolkit-copy > p:not(.partner-kicker),
.partner-scope-intro > p:not(.partner-kicker),
.partner-global-head > p:not(.partner-kicker) { margin: 24px 0 0; color: rgba(255,255,255,.58); font-size: 15px; line-height: 1.82; }
.partner-story-facts { margin-top: 36px; border-top: 1px solid rgba(255,255,255,.1); }
.partner-story-facts article { display: grid; padding: 20px 0; grid-template-columns: 43px 1fr; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-story-facts article > b { color: #818cf8; font-size: 10px; letter-spacing: .1em; }
.partner-story-facts strong { display: block; color: #f7f7fb; font-size: 14px; }
.partner-story-facts span { display: block; margin-top: 7px; color: rgba(255,255,255,.43); font-size: 11px; line-height: 1.65; }
.partner-promotion-steps { display: grid; margin-top: 34px; grid-template-columns: 1fr 1fr; gap: 10px; }
.partner-promotion-steps span { display: flex; min-height: 58px; padding: 14px; align-items: center; gap: 11px; color: rgba(255,255,255,.7); background: rgba(79,70,229,.07); border: 1px solid rgba(129,140,248,.14); border-radius: 8px; font-size: 11px; }
.partner-promotion-steps b { color: #818cf8; font-size: 9px; letter-spacing: .08em; }

.partner-entry-section { padding: 88px 0 100px; }
.partner-entry-card { position: relative; overflow: hidden; max-width: 960px; margin: 0 auto; padding: 62px 58px; background: #0c0c12; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; text-align: center; }
.partner-entry-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, transparent, #4f46e5, #818cf8, transparent); content: ""; }
.partner-entry-card::after { position: absolute; top: -170px; left: 50%; width: 560px; height: 420px; transform: translateX(-50%); background: radial-gradient(circle, rgba(79,70,229,.11), transparent 68%); content: ""; pointer-events: none; }
.partner-entry-card > * { position: relative; z-index: 1; }
.partner-entry-card h2,
.partner-centered-heading h2,
.partner-faq-layout h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 720; letter-spacing: -.045em; line-height: 1.15; }
.partner-entry-card > p:not(.partner-kicker) { max-width: 650px; margin: 18px auto 30px; color: var(--partner-muted); font-size: 16px; line-height: 1.7; }
.partner-entry-row { display: flex; max-width: 820px; margin: 0 auto; align-items: stretch; gap: 12px; }
.partner-entry-options { display: flex; overflow: hidden; flex: 1; align-items: center; background: #050507; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.partner-entry-options button { min-height: 54px; padding: 9px 12px; flex: 1; color: rgba(255,255,255,.56); background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.07); cursor: pointer; font-size: 11px; }
.partner-entry-options button:last-child { border-right: 0; }
.partner-entry-options button:hover { color: #fff; background: rgba(79,70,229,.13); }
.partner-entry-row > .btn { min-width: 132px; justify-content: center; }
.partner-entry-card > small { display: block; margin-top: 17px; color: rgba(255,255,255,.35); font-size: 10px; }
.partner-cooperation-grid { display: grid; margin-top: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.partner-cooperation-grid button { position: relative; display: flex; min-height: 245px; padding: 25px; flex-direction: column; align-items: flex-start; color: inherit; background: rgba(5,5,7,.8); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; cursor: pointer; text-align: left; transition: border-color .24s ease, background .24s ease, transform .24s ease; }
.partner-cooperation-grid button:hover { background: rgba(79,70,229,.08); border-color: rgba(129,140,248,.35); transform: translateY(-4px); }
.partner-cooperation-grid button > span { color: #818cf8; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.partner-cooperation-grid button > b { margin-top: 24px; color: #fff; font-size: 18px; letter-spacing: -.025em; }
.partner-cooperation-grid button > small { margin-top: 12px; color: rgba(255,255,255,.46); font-size: 11px; line-height: 1.7; }
.partner-cooperation-grid button > em { margin-top: auto; padding-top: 21px; color: #a5b4fc; font-size: 10px; font-style: normal; }
.partner-entry-boundary { display: flex; margin-top: 18px; padding: 16px 18px; align-items: flex-start; gap: 14px; color: rgba(255,255,255,.5); background: rgba(79,70,229,.07); border: 1px solid rgba(129,140,248,.15); border-radius: 9px; text-align: left; }
.partner-entry-boundary strong { flex: 0 0 auto; color: #c7d2fe; font-size: 10px; letter-spacing: .04em; }
.partner-entry-boundary span { font-size: 10px; line-height: 1.65; }

.partner-section-desc { max-width: 650px; margin: 19px auto 0; color: var(--partner-muted); font-size: 16px; line-height: 1.75; }

.partner-journey-section { padding: 124px 0 132px; background: #07070a; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-journey-head { display: grid; margin-bottom: 44px; align-items: end; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: 70px; }
.partner-journey-head > p { margin: 0 0 3px; color: rgba(255,255,255,.46); font-size: 13px; line-height: 1.75; }
.partner-journey-image { position: relative; overflow: hidden; height: 380px; margin: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; }
.partner-journey-track { position: relative; display: grid; margin: 28px 0 0; padding: 0; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; }
.partner-journey-track::before { position: absolute; top: 27px; right: 10%; left: 10%; height: 1px; overflow: hidden; background: rgba(129,140,248,.22); content: ""; }
.partner-journey-track::after { position: absolute; top: 27px; left: 10%; width: 22%; height: 1px; background: linear-gradient(90deg, transparent, #818cf8, transparent); content: ""; animation: partner-flow-pulse 4.6s ease-in-out infinite; }
.partner-journey-track li { position: relative; z-index: 1; padding: 0 17px; text-align: center; }
.partner-journey-track li b { display: grid; width: 54px; height: 54px; margin: 0 auto 21px; place-items: center; color: #c7d2fe; background: #0d0d14; border: 1px solid rgba(129,140,248,.27); border-radius: 50%; font-size: 10px; letter-spacing: .08em; }
.partner-journey-track strong { display: block; color: #f7f7fb; font-size: 12px; line-height: 1.45; }
.partner-journey-track span { display: block; margin-top: 8px; color: rgba(255,255,255,.37); font-size: 10px; line-height: 1.55; }

.partner-toolkit-section { overflow: hidden; padding: 132px 0; background: #050507; }
.partner-toolkit-layout { display: grid; align-items: center; grid-template-columns: minmax(340px,.78fr) minmax(0,1.22fr); gap: clamp(56px,7vw,104px); }
.partner-toolkit-copy .btn { margin-top: 33px; }
.partner-toolkit-visual { position: relative; min-height: 590px; }
.partner-toolkit-visual > figure { position: absolute; inset: 0 17% 75px 0; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; box-shadow: 0 36px 100px rgba(0,0,0,.48); }
.partner-toolkit-visual > figure::after { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(5,5,7,.08), rgba(5,5,7,.5)); content: ""; }
.partner-toolkit-visual figcaption { position: absolute; bottom: 14px; left: 17px; z-index: 2; color: rgba(255,255,255,.5); font-size: 9px; }
.partner-toolkit-panel { position: absolute; right: 0; bottom: 0; z-index: 2; overflow: hidden; width: 72%; padding: 20px; background: rgba(11,11,17,.9); border: 1px solid rgba(129,140,248,.2); border-radius: 16px; box-shadow: 0 28px 70px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.partner-toolkit-panel > i { position: absolute; top: -20px; right: 0; left: 0; height: 32px; background: linear-gradient(180deg, transparent, rgba(129,140,248,.24), transparent); animation: partner-scan 5.4s ease-in-out infinite; pointer-events: none; }
.partner-toolkit-panel article { position: relative; display: grid; padding: 14px 10px; align-items: center; grid-template-columns: 39px 1fr; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.partner-toolkit-panel article:last-child { border-bottom: 0; }
.partner-toolkit-panel article > span { display: grid; width: 34px; height: 34px; place-items: center; color: #a5b4fc; background: rgba(79,70,229,.15); border: 1px solid rgba(129,140,248,.16); border-radius: 8px; font-size: 9px; }
.partner-toolkit-panel strong { display: block; color: rgba(255,255,255,.84); font-size: 12px; }
.partner-toolkit-panel small { display: block; margin-top: 5px; color: rgba(255,255,255,.39); font-size: 9px; }

.partner-scope-section { position: relative; overflow: hidden; padding: 132px 0; background: #08080c; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.partner-scope-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(129,140,248,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(129,140,248,.08) 1px,transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 70% 50%,black,transparent 62%); mask-image: radial-gradient(circle at 70% 50%,black,transparent 62%); }
.partner-scope-section .partner-container { position: relative; display: grid; align-items: center; grid-template-columns: minmax(340px,.8fr) minmax(0,1.2fr); gap: 84px; }
.partner-scope-orbit { position: relative; min-height: 520px; }
.partner-scope-orbit::before,
.partner-scope-orbit::after { position: absolute; inset: 9% 6%; border: 1px solid rgba(129,140,248,.16); border-radius: 50%; content: ""; animation: partner-orbit 40s linear infinite; }
.partner-scope-orbit::after { inset: 22% 18%; border-style: dashed; animation-direction: reverse; animation-duration: 26s; }
.partner-scope-core { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 220px; height: 220px; padding: 28px; place-content: center; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%,#222146,#101019 65%); border: 1px solid rgba(129,140,248,.34); border-radius: 50%; box-shadow: 0 0 80px rgba(79,70,229,.2); text-align: center; }
.partner-scope-core small { color: #818cf8; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.partner-scope-core strong { margin-top: 12px; color: #fff; font-size: 17px; line-height: 1.45; }
.partner-scope-orbit article { position: absolute; z-index: 3; width: 220px; padding: 17px; background: rgba(12,12,18,.88); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; backdrop-filter: blur(14px); }
.partner-scope-orbit article b { color: #818cf8; font-size: 9px; letter-spacing: .1em; }
.partner-scope-orbit article strong { display: block; margin-top: 12px; color: #fff; font-size: 12px; }
.partner-scope-orbit article span { display: block; margin-top: 7px; color: rgba(255,255,255,.4); font-size: 9px; line-height: 1.55; }
.partner-scope-orbit .scope-one { top: 4%; left: 0; }.partner-scope-orbit .scope-two { top: 17%; right: 0; }.partner-scope-orbit .scope-three { right: 12%; bottom: 1%; }

.partner-global-section { padding: 132px 0 140px; background: #050507; }
.partner-global-section .partner-container { display: grid; align-items: center; grid-template-columns: minmax(340px,.85fr) minmax(0,1.15fr); gap: clamp(54px,7vw,104px); }
.partner-global-tags { display: flex; margin-top: 32px; flex-wrap: wrap; gap: 9px; }
.partner-global-tags span { padding: 9px 12px; color: #c7d2fe; background: rgba(79,70,229,.08); border: 1px solid rgba(129,140,248,.15); border-radius: 999px; font-size: 9px; }
.partner-global-mosaic { display: grid; min-height: 620px; grid-template-columns: 1.3fr .7fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.partner-global-mosaic figure { position: relative; overflow: hidden; margin: 0; background: #111118; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.partner-global-mosaic .global-main { grid-row: 1 / 3; }
.partner-global-mosaic .partner-stock-image { transition-duration: 1.4s; }
.partner-global-mosaic figure:hover .partner-stock-image { transform: scale(1.045); filter: saturate(.9) contrast(1.05) brightness(.86); }

.partner-audience-section,
.partner-feature-section,
.partner-process-section,
.partner-faq-section { padding: 112px 0; }
.partner-audience-section { background: #07070a; }
.partner-centered-heading { max-width: 940px; margin: 0 auto 58px; text-align: center; }
.partner-centered-heading > p:last-child { max-width: 650px; margin: 18px auto 0; color: var(--partner-muted); font-size: 15px; line-height: 1.7; }
.partner-audience-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.partner-audience-card { min-height: 280px; padding: 25px; background: #0c0c12; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.partner-audience-card:nth-child(-n+3) { grid-column: span 2; }
.partner-audience-card:nth-child(n+4) { grid-column: span 3; }
.partner-audience-card:hover { border-color: rgba(129,140,248,.28); box-shadow: 0 20px 42px rgba(0,0,0,.22); transform: translateY(-5px); }
.partner-audience-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #a5b4fc; background: rgba(79,70,229,.11); border: 1px solid rgba(129,140,248,.16); border-radius: 9px; font-size: 10px; font-weight: 750; }
.partner-audience-card h3 { margin: 40px 0 11px; color: #fff; font-size: 18px; }
.partner-audience-card p { min-height: 66px; margin: 0; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.65; }
.partner-audience-card button { margin-top: 24px; padding: 0; color: #818cf8; background: transparent; border: 0; cursor: pointer; font-size: 11px; }
.partner-feature-section { background: #050507; }
.partner-feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.partner-feature-grid article { display: grid; min-height: 205px; padding: 28px; align-items: start; grid-template-columns: 48px 1fr; gap: 20px; background: #0c0c12; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.partner-feature-grid .feature-1 { grid-column: span 4; }
.partner-feature-grid .feature-2 { grid-column: span 2; }
.partner-feature-grid .feature-3,
.partner-feature-grid .feature-4,
.partner-feature-grid .feature-5 { grid-column: span 2; }
.partner-feature-grid .feature-6 { grid-column: span 6; min-height: 165px; }
.partner-feature-icon { display: grid; width: 46px; height: 46px; place-items: center; color: #a5b4fc; background: rgba(79,70,229,.12); border: 1px solid rgba(129,140,248,.18); border-radius: 10px; font-size: 16px; font-weight: 700; }
.partner-feature-grid h3 { margin: 1px 0 11px; color: #fff; font-size: 17px; }
.partner-feature-grid p { margin: 0; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.7; }
.partner-process-section { background: #08080c; }
.partner-process-flow { display: grid; grid-template-columns: repeat(4, 1fr); }
.partner-process-flow article { position: relative; min-height: 230px; padding: 29px 28px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); border-left: 1px solid rgba(255,255,255,.09); }
.partner-process-flow article:last-child { border-right: 1px solid rgba(255,255,255,.09); }
.partner-process-flow b { color: #818cf8; font-size: 11px; letter-spacing: .12em; }
.partner-process-flow article > span { position: absolute; top: 38px; right: -12px; z-index: 2; width: 24px; height: 1px; background: #4f46e5; }
.partner-process-flow h3 { margin: 70px 0 11px; color: #fff; font-size: 16px; }
.partner-process-flow p { margin: 0; color: rgba(255,255,255,.42); font-size: 11px; line-height: 1.65; }
.partner-faq-section { background: #050507; }
.partner-faq-layout { display: grid; align-items: start; grid-template-columns: minmax(300px, .72fr) minmax(480px, 1.28fr); gap: 90px; }
.partner-faq-layout > div:first-child > p:last-child { margin: 22px 0 0; color: var(--partner-muted); font-size: 14px; line-height: 1.75; }
.partner-faq-list { border-top: 1px solid rgba(255,255,255,.1); }
.partner-faq-list details { border-bottom: 1px solid rgba(255,255,255,.1); }
.partner-faq-list summary { display: flex; min-height: 72px; padding: 19px 4px; align-items: center; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.85); cursor: pointer; font-size: 14px; font-weight: 620; list-style: none; }
.partner-faq-list summary::-webkit-details-marker { display: none; }
.partner-faq-list summary span { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 auto; color: #818cf8; border: 1px solid rgba(129,140,248,.25); border-radius: 50%; transition: transform .2s ease; }
.partner-faq-list details[open] summary span { transform: rotate(45deg); }
.partner-faq-list details p { margin: -5px 52px 23px 4px; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.75; }
.partner-home .partner-final { position: relative; overflow: hidden; padding: 126px 0; background: #07070a; }
.partner-final-glow { position: absolute; bottom: -330px; left: 50%; width: 900px; height: 700px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(79,70,229,.2), transparent 67%); pointer-events: none; }
.partner-home .partner-final .partner-container { position: relative; z-index: 1; text-align: center; }
.partner-home .partner-final h2 { max-width: 880px; margin: 0 auto 34px; font-size: clamp(40px, 5vw, 60px); }
.partner-home .partner-final h2 span { color: #818cf8; }
.partner-home .partner-final > .partner-container > div:not(.partner-final-glow) { display: flex; justify-content: center; gap: 14px; }
.partner-home .partner-final > .partner-container > p:last-child { margin-top: 23px; color: rgba(255,255,255,.35); font-size: 11px; }
.partner-footer { padding: 44px 0 22px; background: #050507; border-top: 1px solid rgba(255,255,255,.08); }
.partner-footer-main { display: grid; margin-bottom: 32px; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 44px; }
.partner-footer-main > div:first-child > p { max-width: 280px; margin: 12px 0 0; color: rgba(255,255,255,.34); font-size: 12px; line-height: 1.7; }
.partner-footer-main > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.partner-footer-main > div:not(:first-child) > strong { margin-bottom: 5px; color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
/* 26px keeps every footer link above the 24px WCAG 2.2 minimum target without the
   row pitch growing: the old 11px gap plus 18px text was already 29px. */
.partner-footer-main button:not(.partner-brand) { display: inline-flex; min-height: 26px; align-items: center; padding: 0; color: rgba(255,255,255,.36); background: transparent; border: 0; cursor: pointer; font-size: 12px; }
.partner-footer-main button:not(.partner-brand):hover { color: #a5b4fc; }
.partner-footer-bottom { display: flex; padding-top: 16px; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.27); border-top: 1px solid rgba(255,255,255,.07); font-size: 10px; }

@media (max-width: 1040px) {
  .partner-header > .partner-header-inner { grid-template-columns: 1fr auto; }
  .partner-header nav { display: none; }
  .partner-faq-layout { gap: 50px; }
  .partner-story-layout,
  .partner-story-reverse { grid-template-columns: minmax(0,1fr) minmax(330px,.82fr); gap: 48px; }
  .partner-story-media { min-height: 540px; }
  .partner-toolkit-layout,
  .partner-scope-section .partner-container,
  .partner-global-section .partner-container { gap: 54px; }
}
@media (max-width: 820px) {
  .partner-container { width: min(100% - 36px, 720px); }
  .partner-header { min-height: 66px; padding: 0 18px; }
  .partner-header > .partner-header-inner { min-height: 66px; }
  .partner-header-actions .locale-switcher { display: none; }
  .partner-reference-hero { padding: 76px 0 78px; }
  .partner-reference-hero h1 { font-size: clamp(42px, 10vw, 62px); }
  .partner-hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .partner-benefit-heading { grid-template-columns: 1fr; gap: 17px; }
  .partner-benefit-grid { grid-template-columns: 1fr 1fr; }
  .partner-benefit-grid article:nth-child(2) { border-right: 0; }
  .partner-benefit-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .partner-benefit-note { text-align: left; }
  .partner-media-story,
  .partner-journey-section,
  .partner-toolkit-section,
  .partner-scope-section,
  .partner-global-section { padding: 92px 0; }
  .partner-story-layout,
  .partner-story-reverse,
  .partner-toolkit-layout,
  .partner-scope-section .partner-container,
  .partner-global-section .partner-container { grid-template-columns: 1fr; }
  .partner-story-media { min-height: 520px; order: 2; }
  .partner-story-copy { order: 1; }
  .partner-journey-head { grid-template-columns: 1fr; gap: 20px; }
  .partner-journey-image { height: 330px; }
  .partner-journey-track { grid-template-columns: 1fr; gap: 0; }
  .partner-journey-track::before,
  .partner-journey-track::after { top: 0; right: auto; bottom: 0; left: 27px; width: 1px; height: auto; }
  .partner-journey-track::after { height: 24%; animation: none; background: linear-gradient(180deg,transparent,#818cf8,transparent); }
  .partner-journey-track li { display: grid; min-height: 86px; padding: 13px 0; align-items: center; grid-template-columns: 54px 1fr; gap: 17px; text-align: left; }
  .partner-journey-track li b { margin: 0; grid-row: 1 / 3; }
  .partner-journey-track li span { margin-top: 2px; }
  .partner-toolkit-visual { min-height: 540px; }
  .partner-scope-orbit { min-height: 520px; }
  .partner-global-mosaic { min-height: 540px; }
  .partner-entry-card { padding: 46px 24px; }
  .partner-cooperation-grid { grid-template-columns: 1fr; }
  .partner-cooperation-grid button { min-height: 190px; }
  .partner-entry-boundary { flex-direction: column; gap: 7px; }
  .partner-entry-row { flex-direction: column; }
  .partner-entry-options { display: grid; grid-template-columns: 1fr 1fr; }
  .partner-entry-options button { border-bottom: 1px solid rgba(255,255,255,.07); }
  .partner-audience-grid,
  .partner-feature-grid { grid-template-columns: 1fr 1fr; }
  .partner-audience-card:nth-child(n),
  .partner-feature-grid article:nth-child(n) { grid-column: span 1; }
  .partner-feature-grid .feature-6 { grid-column: 1 / -1; }
  .partner-process-flow { grid-template-columns: 1fr 1fr; }
  .partner-process-flow article:nth-child(2) { border-right: 1px solid rgba(255,255,255,.09); }
  .partner-process-flow article > span { display: none; }
  .partner-faq-layout { grid-template-columns: 1fr; }
  /* The brand keeps its own row and the three link groups share one: the old
     1.5fr/1fr/1fr left the last group stranded on a half-empty second row. */
  .partner-footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; }
  .partner-footer-main > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .partner-header-actions .partner-link { display: none; }
  /* The label would squeeze the brand and wrap the join button off the bar; the arrow alone
     still reads as "back", and the collapsed menu carries the spelled-out entry. */
  .partner-back-label { display: none; }
  .partner-back { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; font-size: 14px; }
  .partner-brand strong { font-size: 19px; }
  .partner-brand small { font-size: 6px; }
  .partner-reference-hero { padding-top: 62px; }
  .partner-reference-hero h1 { font-size: 40px; }
  .partner-hero-sub { font-size: 14px; }
  .partner-reference-hero .partner-hero-actions { display: grid; }
  .partner-reference-hero .partner-hero-actions .btn { width: 100%; }
  .partner-benefit-section { padding: 76px 0 80px; }
  .partner-benefit-grid { grid-template-columns: 1fr; }
  .partner-benefit-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .partner-benefit-grid article:last-child { border-bottom: 0; }
  .partner-entry-options { grid-template-columns: 1fr; }
  .partner-hero-constellation { width: 130vw; opacity: .7; }
  .partner-audience-section,
  .partner-feature-section,
  .partner-process-section,
  .partner-faq-section { padding: 82px 0; }
  .partner-audience-grid,
  .partner-feature-grid,
  .partner-process-flow { grid-template-columns: 1fr; }
  .partner-feature-grid .feature-6 { grid-column: span 1; }
  .partner-process-flow article { border-right: 1px solid rgba(255,255,255,.09); }
  .partner-story-media { min-height: 400px; }
  .partner-story-main { inset: 0 42px 45px 0; }
  .partner-story-side { width: 48%; height: 41%; }
  .partner-story-reverse .partner-story-main { inset: 0 0 45px 42px; }
  .partner-promotion-steps { grid-template-columns: 1fr; }
  .partner-journey-image { height: 250px; }
  .partner-toolkit-visual { min-height: 480px; }
  .partner-toolkit-visual > figure { inset: 0 8% 100px 0; }
  .partner-toolkit-panel { width: 92%; padding: 12px; }
  .partner-scope-orbit { min-height: 610px; }
  .partner-scope-core { width: 180px; height: 180px; }
  .partner-scope-orbit article { width: 185px; padding: 14px; }
  .partner-scope-orbit .scope-one { top: 0; left: 0; }
  .partner-scope-orbit .scope-two { top: 9%; right: 0; }
  .partner-scope-orbit .scope-three { right: 1%; bottom: 0; }
  .partner-global-mosaic { min-height: 510px; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr .75fr; }
  .partner-global-mosaic .global-main { grid-row: 1; grid-column: 1 / -1; }
  .partner-home .partner-final > .partner-container > div:not(.partner-final-glow) { flex-direction: column; }
  .partner-home .partner-final .btn { width: 100%; }
  /* Three link groups fit on one row at 375px, which is what the old two-column
     grid wasted: the third group sat alone beside an empty cell. The columns are
     content-sized rather than equal because the English labels ("Training
     organizations") are far wider than the Chinese ones and would wrap. */
  .partner-footer { padding-bottom: 64px; }
  /* 合作方站页脚原来写死 64px 给同意卡让位——那是按中文卡片（53px）量出来的，
     英文卡片同样宽度下高 136px，页脚最后一行实测被压住 10px。改用全局量好的
     --privacy-banner-height（render() 写在 body 上），没有卡片时仍走上面的 64px。 */
  body.has-privacy-banner .partner-footer { padding-bottom: calc(var(--privacy-banner-height, 53px) + 24px); }
  .partner-footer-main { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px 12px; }
  .partner-footer-main > div:not(:first-child) > strong { font-size: 10px; }
  .partner-footer-main button:not(.partner-brand) { font-size: 11px; }
  .partner-footer-bottom { flex-direction: column; gap: 6px; }
}

/* v206 compact navigation: keep every recruitment page reachable on narrow
   desktop windows and mobile without turning the public header into a second
   scrolling surface. */
.partner-mobile-nav { position: relative; display: none; }
.partner-mobile-nav > summary {
  position: relative;
  min-height: 36px;
  padding: 8px 25px 8px 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  list-style: none;
  white-space: nowrap;
}
.partner-mobile-nav > summary::-webkit-details-marker { display: none; }
.partner-mobile-nav > summary::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 5px;
  height: 5px;
  transform: translateY(-70%) rotate(45deg);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
}
.partner-mobile-nav[open] > summary { color: #fff; border-color: rgba(129,140,248,.34); }
.partner-mobile-nav[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
.partner-mobile-nav > div {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  z-index: 40;
  display: grid;
  width: min(276px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 92px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px;
  background: rgba(12,12,18,.98);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.46);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}
.partner-mobile-nav > div::-webkit-scrollbar { display: none; }
.partner-mobile-nav > div button {
  width: 100%;
  min-height: 41px;
  padding: 9px 11px;
  color: rgba(255,255,255,.68);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 620;
  text-align: left;
}
.partner-mobile-nav > div button:hover,
.partner-mobile-nav > div button.is-active { color: #fff; background: rgba(79,70,229,.18); }

@media (max-width: 1040px) {
  .partner-mobile-nav { display: block; }
}
@media (max-width: 560px) {
  .partner-header { padding-right: 12px; padding-left: 12px; }
  .partner-header > .partner-header-inner { gap: 8px; }
  .partner-header-actions { gap: 6px; }
  .partner-mobile-nav > summary { padding-right: 21px; padding-left: 9px; }
  .partner-mobile-nav > summary::after { right: 8px; }
  .partner-header-actions .partner-cta { min-height: 36px; padding: 8px 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-site *,
  .partner-site *::before,
  .partner-site *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0s !important; }
  .partner-reveal { opacity: 1 !important; transform: none !important; }
  .partner-reveal .partner-stock-image { transform: none !important; }
}

/* ------------------------------------------------------------------
   新手引导（聚光灯 + 气泡）

   负责人原话：「需要所有页面 都要加新手登录后的新手引导那种动态」。
   登录后的每一页各有一套 1–3 步的引导，第一次打开这一页自动演一遍，
   之后不再打扰；页面头部留了「看引导」按钮，随时能重看。

   两个必须知道的点：
   ① DOM 挂在 #tour-root（index.html），不走 #overlay-root —— render() 每次
     都把 overlayRoot 清空（app.js:7197），放那儿会被任何一次异步数据回来抹掉。
   ② z-index 取 400：要盖住侧边栏(40)、顶栏(50)、AI 悬浮球(85)、抽屉(190) 和
     弹窗遮罩(200)，但要**低于**提示条(500)，这样引导演到一半跳出来的提示
     （比如「密码已更新」）不会被暗幕吃掉。
   ------------------------------------------------------------------ */
.tour-layer { position: fixed; inset: 0; z-index: 400; }
.tour-layer[hidden] { display: none; }

/* 一圈极大的外阴影就是那层暗幕：元素本身把中间「挖空」，那一块就亮了。
   用 box-shadow 而不是四个遮罩块，是因为它只有一个元素，位移时能整体过渡。 */
.tour-spotlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(16, 27, 51, .62);
  outline: 2px solid rgba(255, 255, 255, .92);
  pointer-events: none;
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}

.tour-popover {
  position: fixed;
  z-index: 401;
  width: min(360px, calc(100vw - 32px));
  padding: 20px 22px 18px;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(31, 42, 68, .3);
  transition: top .3s ease, left .3s ease;
}
.tour-popover h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.tour-popover p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.tour-popover-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-progress { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.tour-popover-actions { display: flex; gap: 8px; }

/* 窄屏改成贴底的一张卡：气泡跟着元素飘，在小屏上会盖住元素本身。 */
@media (max-width: 560px) {
  .tour-popover {
    top: auto !important;
    left: 12px !important;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}