:root {
  --ink: #102b24;
  --deep: #004737;
  --green: #0dcf63;
  --lime: #b9f547;
  --mint: #a4f1d2;
  --cyan: #5dd8dc;
  --coral: #ff7c5f;
  --yellow: #ffd85e;
  --bg: #f4f8f5;
  --panel: #ffffff;
  --line: #dce8e1;
  --muted: #71847d;
  --sidebar: 232px;
  --brand-rail: 218px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--bg); font-family: "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }
.text-keep { white-space: nowrap; }
#upcoming, #reviews, #method { scroll-margin-top: 68px; }

.sidebar { position: fixed; inset: 0 auto auto 0; z-index: 42; width: var(--brand-rail); display: flex; flex-direction: column; padding: 20px 0 0 max(22px, 1.4vw); background: transparent; border-right: 0; pointer-events: none; }
body.detail-view .sidebar { display: none; }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0; pointer-events: auto; }
.brand, .mobile-brand { display: flex; align-items: center; color: var(--deep); }
.brand-lockup { gap: 9px; width: max-content; white-space: nowrap; }
.brand-wordmark { display: block; width: 92px; height: auto; }
.brand-divider { width: 1px; height: 20px; background: #ccddd4; }
.brand-workshop { color: #315b4f; font-size: 13px; font-weight: 650; letter-spacing: .035em; line-height: 1; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.sidebar-close { display: none; background: transparent; border: 0; }
.sidebar .new-task, .sidebar .primary-nav, .sidebar .sidebar-spacer { display: none; }
.new-task { display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; color: var(--deep); background: #dff2df; border: 1px solid #c2e4c5; border-radius: 8px; font-weight: 700; cursor: pointer; }
.new-task:hover { background: #d3edd5; }
.primary-nav { display: grid; gap: 4px; margin-top: 12px; }
.primary-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; color: #455e55; border-radius: 7px; font-size: 15px; }
.primary-nav a:hover { background: rgba(255,255,255,.65); }
.primary-nav a.active { color: var(--deep); background: white; font-weight: 700; box-shadow: 0 1px 0 rgba(0,40,25,.04); }
.primary-nav a.active:before { content: ""; position: absolute; left: 0; width: 3px; height: 22px; background: var(--green); border-radius: 0 3px 3px 0; }
.primary-nav b { margin-left: auto; padding: 3px 5px; color: #005c42; background: #c9f8d9; border-radius: 4px; font-size: 9px; }
.sidebar-spacer { flex: 1; }
.workshop-account { margin: 0 0 10px; background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.account-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 8px; border: 0; background: transparent; cursor: pointer; }
.account-header span { display: flex; align-items: center; gap: 7px; color: var(--deep); font-size: 13px; font-weight: 700; }
.account-header svg { width: 16px; height: 16px; }
.account-links { display: grid; grid-template-columns: 1fr 1fr; padding: 0 8px 9px; }
.account-links button { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 34px; border: 0; background: #f5f9f6; cursor: pointer; }
.account-links button:first-child { border-radius: 6px 0 0 6px; border-right: 1px solid var(--line); }
.account-links button:last-child { border-radius: 0 6px 6px 0; }
.account-links strong { color: var(--deep); font-size: 16px; }
.account-links span { color: var(--muted); font-size: 12px; }
.points { display: flex; align-items: center; gap: 8px; width: max-content; margin: 0 0 10px; padding: 7px 10px; color: #286c57; border: 1px solid #cee0d5; border-radius: 6px; font-size: 13px; }
.points svg { width: 17px; }
.profile { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.profile > svg { margin-left: auto; color: var(--muted); }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; color: white; background: #177d65; border-radius: 50%; font-weight: 700; }
.profile-copy { display: grid; gap: 2px; min-width: 0; }
.profile-copy strong { font-size: 14px; }
.profile-copy small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu { position: absolute; bottom: 70px; left: 16px; right: 16px; display: none; padding: 6px; background: white; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 12px 36px rgba(0,45,28,.12); }
.profile-menu.open { display: block; }
.profile-menu button, .login-sidebar { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 13px; }
.login-sidebar { margin-bottom: 10px; color: var(--deep); background: #deefe5; }
.guest-content { display: none !important; }
body.guest .guest-content { display: flex !important; }
body.guest .logged-content { display: none !important; }

.main { min-height: 100vh; margin-left: 0; background: white; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; min-height: 66px; padding: 0 max(4.5vw, 48px) 0 var(--brand-rail); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(220,232,225,.82); backdrop-filter: blur(16px); }
.menu-button, .mobile-brand { display: none; }
.page-nav { position: relative; display: flex; align-items: stretch; gap: 30px; height: 66px; }
.page-nav a { position: relative; display: flex; align-items: center; color: #688078; font-size: 13px; }
.page-nav a.active { color: var(--deep); font-weight: 700; }
.page-nav-indicator { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--green); opacity: 0; transform: translateX(0); transition: transform .32s cubic-bezier(.22,.61,.36,1), width .32s cubic-bezier(.22,.61,.36,1), opacity .16s ease; pointer-events: none; }
.page-nav-indicator.ready { opacity: 1; }
.top-actions { position: relative; display: flex; align-items: center; gap: 7px; margin-left: auto; }
.top-account { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 10px; color: var(--deep); background: #f1f7f3; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.top-account svg { width: 17px; }
.top-account[data-submit-work] { position: relative; overflow: hidden; color: white; background: #087747; border-color: #087747; box-shadow: 0 7px 18px rgba(8,119,71,.24); font-weight: 800; }
.top-account[data-submit-work] > * { position: relative; z-index: 1; }
.top-account[data-submit-work]:after { content: none; }
.top-account[data-submit-work]:hover { background: #05643b; border-color: #05643b; box-shadow: 0 9px 22px rgba(8,119,71,.32); }
.certificate-button-icon-wrap { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; overflow: hidden; }
.certificate-button-icon { display: block; width: 18px; height: 18px; max-width: 18px; max-height: 18px; object-fit: contain; }
.top-account b { display: grid; place-items: center; width: 19px; height: 19px; color: white; background: var(--deep); border-radius: 50%; font-size: 10px; }
.account-menu-shell { position: relative; flex: 0 0 208px; width: 208px; }
.account-state { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 4px 9px 4px 5px; color: var(--deep); background: white; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.account-state:hover { background: #f7faf8; border-color: #c8dbd0; }
.account-state[aria-expanded="true"] { border-color: #bfd4c8; box-shadow: 0 0 0 3px rgba(0,71,55,.06); }
.account-state > svg { width: 15px; margin-left: auto; color: #7e9189; transition: transform .18s ease; }
.account-state[aria-expanded="true"] > svg { transform: rotate(180deg); }
.account-avatar { flex: 0 0 auto; position: relative; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; color: white; background: #177d65; border-radius: 8px; font-size: 13px; font-weight: 800; }
.account-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-avatar img[hidden] { display: none; }
.account-avatar [data-account-avatar-fallback] { display: grid; place-items: center; width: 100%; height: 100%; }
.account-avatar [data-account-avatar-fallback][hidden] { display: none; }
.account-avatar-guest { color: #62776f; background: #eef4f0; }
.account-avatar svg { width: 17px; }
.account-copy { display: grid; gap: 1px; min-width: 0; }
.account-copy strong { font-size: 12px; line-height: 1.25; white-space: nowrap; }
.account-copy small { color: #81928b; font-size: 9px; line-height: 1.25; white-space: nowrap; }

.hero { position: relative; min-height: 590px; display: flex; align-items: center; overflow: hidden; color: #173f34; background: #f3f8f5; }
.hero-track { display: flex; flex: 0 0 200%; width: 200%; min-height: inherit; transform: translateX(0); transition: transform .48s cubic-bezier(.22,.61,.36,1); }
.hero-slide { position: relative; flex: 0 0 50%; min-height: inherit; display: flex; align-items: center; overflow: hidden; }
.hero-slide-live .hero-media { background-image: url("assets/workshop-hero-board.jpg"); background-position: center; }
.hero-carousel-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; color: #075d3d; background: rgba(255,255,255,.78); border: 1px solid rgba(7,93,61,.18); border-radius: 50%; box-shadow: 0 7px 22px rgba(5,95,66,.13); cursor: pointer; opacity: .9; transform: translateY(-50%); transition: opacity .18s ease, background .18s ease, transform .18s ease; }
.hero-carousel-arrow:hover { background: white; opacity: 1; transform: translateY(-50%) scale(1.04); }
.hero-carousel-arrow svg { width: 20px; height: 20px; }
.hero-carousel-prev { left: 22px; }
.hero-carousel-next { right: 22px; }
.hero-carousel-dots { position: absolute; bottom: 22px; left: 50%; z-index: 4; display: flex; gap: 8px; transform: translateX(-50%); }
.hero-carousel-dots button { width: 28px; height: 4px; padding: 0; background: rgba(7,93,61,.28); border: 0; border-radius: 99px; cursor: pointer; transition: width .2s ease, background .2s ease; }
.hero-carousel-dots button.active { width: 42px; background: #087747; }
.hero-media { position: absolute; inset: 0; background-image: url("assets/workshop-hero-board.jpg"); background-size: cover; background-position: center; filter: saturate(1.05); }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(225,249,255,.58) 0%, rgba(201,248,246,.42) 38%, rgba(145,241,193,.28) 72%, rgba(71,222,119,.24) 100%), linear-gradient(180deg, rgba(224,252,255,.22), rgba(87,229,141,.18)); }
.submission-guide { position: absolute; top: 26px; right: 7%; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 330px; padding: 10px 14px; color: #075d3d; background: rgba(255,255,255,.72); border: 1px solid rgba(7,93,61,.16); border-radius: 999px; box-shadow: 0 8px 24px rgba(5,95,66,.08); font-size: 12px; line-height: 1.4; }
.submission-guide svg { flex: 0 0 auto; width: 16px; height: 16px; }
.hero-content { position: relative; z-index: 2; width: min(760px, 62%); margin-left: 7%; padding: 72px 0 62px; }
.eyebrow, .section-kicker { color: #159966; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; color: #075d3d; }
.live-dot { width: 8px; height: 8px; background: #079653; border-radius: 50%; box-shadow: 0 0 0 5px rgba(7,150,83,.16); }
.hero h1 { max-width: 650px; margin: 22px 0 18px; font-family: Georgia, "Songti SC", serif; font-size: 50px; line-height: 1.2; letter-spacing: 0; }
.hero p { max-width: 570px; margin: 0; color: rgba(23,63,52,.76); font-size: 17px; line-height: 1.58; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 27px; color: rgba(23,63,52,.86); font-size: 14px; }
.hero-meta span { display: flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 18px; color: #087747; stroke-width: 2.1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 6px; font-weight: 700; cursor: pointer; }
.primary-action { color: #003d2b; background: #39e66f; border: 1px solid #39e66f; }
.primary-action:hover { background: #51f283; border-color: #51f283; }
.secondary-action { color: inherit; background: rgba(255,255,255,.52); border: 1px solid rgba(23,63,52,.28); }
.secondary-action:hover { background: rgba(255,255,255,.78); }
.reward-highlight { display: grid; gap: 15px; margin-top: 25px; max-width: 650px; padding: 18px 20px; color: #063f31; background: rgba(255,255,255,.3); border-radius: 10px; }
.reward-title { display: flex; align-items: center; gap: 9px; color: #075d3d; font-size: 17px; }
.reward-title svg { width: 21px; height: 21px; color: #d17a00; }
.reward-items { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.reward-items span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: rgba(23,63,52,.82); }
.reward-items svg { flex: 0 0 auto; width: 19px; height: 19px; color: #16875f; }
.reward-items span:nth-child(2) svg { color: #0c8a9a; }
.reward-items span:nth-child(3) svg { color: #b47b00; }
.reward-items strong { color: #063f31; font-size: 15px; line-height: 1.4; }
.reward-items small { color: rgba(23,63,52,.62); font-size: 11px; line-height: 1.4; }
.campaign-note { margin-top: 12px; color: rgba(23,63,52,.58); font-size: 11px; line-height: 1.6; }
.hero-slide-live .attendee-note { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 10px; margin-top: 25px; transform: none; white-space: nowrap; }
.hero-slide-live .attendee-note .mini-avatars { display: flex; flex: 0 0 auto; }
.hero-slide-live .attendee-note > span:last-child { display: block; flex: 0 0 auto; }
.mini-avatars { display: flex; }
.mini-avatars b { display: grid; place-items: center; width: 27px; height: 27px; margin-right: -6px; color: #064737; background: #cbf7d9; border: 0; border-radius: 50%; box-shadow: 0 2px 7px rgba(5,95,66,.16); font-size: 10px; }
.mini-avatars b:nth-child(2) { background: var(--cyan); }
.mini-avatars b:nth-child(3) { background: var(--yellow); }
.season-strip, .review-section, .resources-section, .method-section { padding: 82px 7%; }
.season-strip { position: relative; display: grid; grid-template-columns: minmax(290px, .8fr) minmax(520px, 1.4fr); gap: 7%; align-items: center; margin-top: -1px; padding-top: 56px; padding-bottom: 60px; color: white; background: #063f31; border-top: 1px solid rgba(255,255,255,.15); }
.season-intro .section-kicker { color: #7ceaa2; }
.season-intro h2 { color: white; }
.season-purpose { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; color: #baf2cb; font-size: 12px; }
.season-purpose span { display: flex; align-items: center; gap: 6px; }
.season-purpose svg { width: 14px; height: 14px; }
.season-purpose > svg { color: rgba(255,255,255,.4); }
.season-intro h2, .section-heading h2, .method-lead h2, .newsletter-band h2 { margin: 9px 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 31px; line-height: 1.3; }
.season-intro p, .section-heading p, .method-lead > p, .newsletter-band p { margin: 0; color: var(--muted); line-height: 1.75; }
.season-track { position: relative; display: grid; gap: 0; border-left: 1px solid rgba(255,255,255,.25); }
.season-step { position: relative; display: grid; grid-template-columns: 48px 1fr 22px; gap: 15px; align-items: center; min-height: 82px; padding: 12px 0 12px 22px; text-align: left; border: 0; background: transparent; cursor: pointer; }
.season-step:before { content: ""; position: absolute; left: -5px; width: 9px; height: 9px; background: #063f31; border: 2px solid #7d9f92; border-radius: 50%; }
.season-step > span { color: #91afa3; font-family: Georgia, serif; font-size: 28px; }
.season-step div { display: grid; gap: 5px; }
.season-step small { color: rgba(255,255,255,.55); }
.season-step strong { color: white; font-size: 15px; }
.season-step > svg { color: #89a79b; }
.season-step.done:before { background: var(--deep); border-color: var(--deep); }
.season-step.current { background: rgba(255,255,255,.1); border-radius: 0 7px 7px 0; }
.season-step.current:before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 5px rgba(13,207,99,.12); }
.season-step.current > span, .season-step.current > svg { color: #70f09f; }

.review-section { background: white; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.review-section > .section-heading { display: grid; justify-content: start; justify-items: start; align-items: start; gap: 18px; }
.review-section > .section-heading h2 { margin: 0; color: #143d31; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 600; letter-spacing: 0; }
.review-column-title { margin: 30px 0 14px; color: #143d31; font-family: Georgia, "Songti SC", serif; font-size: 31px; line-height: 1.3; font-weight: 600; }
.tips-column-title { margin-top: 24px; padding-top: 0; }
.replay-date-section { margin-top: 4px; }
.replay-date-title { margin: 0 0 14px; color: #527068; font-size: 15px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; }
.replay-overflow-sections { display: grid; gap: 28px; margin-top: 24px; }
.replay-overflow-sections[hidden] { display: none; }
.replay-overflow-sections .replay-date-section { margin-top: 0; }
.schedule-section .program-list article:nth-child(n + 4) { display: none; }
.segmented { display: flex; padding: 4px; background: #edf3ef; border-radius: 7px; }
.segmented button { min-height: 34px; padding: 0 13px; color: #647a71; border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 13px; }
.segmented button.active { color: var(--deep); background: white; font-weight: 700; box-shadow: 0 1px 4px rgba(0,40,24,.08); }
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.review-card { display: flex; overflow: hidden; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,55,35,.09); }
.review-card.filter-hidden { display: none; }
.review-visual { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.featured .review-visual { height: auto; }
.poster-visual { background: linear-gradient(90deg, rgba(0,70,50,.1), rgba(0,70,50,.02)), url("assets/workshop-hero.jpg") center 42% / cover; }
.lesson-cover-visual { background-color: #edf4f0; background-image: linear-gradient(180deg, rgba(0,35,25,.04), rgba(0,35,25,.12)), var(--lesson-card-cover); background-position: center; background-repeat: no-repeat; background-size: 100% 100%, contain; }
.media-label, .views { position: absolute; top: 12px; display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; color: white; background: rgba(0,50,35,.78); border-radius: 5px; font-size: 11px; backdrop-filter: blur(5px); }
.media-label { top: 12px; right: 12px; bottom: auto; left: auto; background: rgba(0,50,35,.63); }
.media-label ~ .views { top: 48px; }
.views { right: 12px; background: rgba(0,0,0,.26); }
.media-label svg, .views svg { width: 14px; height: 14px; }
.visual-math { display: grid; place-items: center; background: #dff1e2; }
.visual-math:after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(0,75,54,.2); }
.visual-symbol { display: grid; color: var(--deep); font-family: Georgia, serif; font-size: 76px; line-height: .8; }
.visual-symbol small { margin-top: 12px; font-family: inherit; font-size: 13px; }
.visual-language { padding: 52px 24px 22px; color: #263a6b; background: #e7eafd; }
.quote-mark { position: absolute; top: 34px; right: 26px; color: #ff876d; font-family: Georgia, serif; font-size: 90px; line-height: 1; opacity: .55; }
.visual-language p { position: relative; margin: 12px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 21px; line-height: 1.5; }
.visual-science { display: grid; place-items: center; color: #073e33; background: linear-gradient(145deg, #bff2cf, #9ce8e2); }
.science-orbit { display: grid; place-items: center; gap: 12px; }
.science-orbit svg { width: 66px; height: 66px; stroke-width: 1.2; }
.science-orbit small { font-weight: 700; }
.visual-prompt, .visual-iteration, .visual-boundary { display: grid; place-items: center; color: #173e34; }
.visual-prompt { background: #e5f1ff; }
.visual-iteration { background: #fff0c8; }
.visual-boundary { background: #e9e6fa; }
.visual-prompt > div, .visual-iteration > div, .visual-boundary > div { display: grid; place-items: center; gap: 13px; }
.visual-prompt > div > svg, .visual-iteration > div > svg, .visual-boundary > div > svg { width: 54px; height: 54px; stroke-width: 1.25; }
.visual-prompt small, .visual-iteration small, .visual-boundary small { font-weight: 700; }
.review-body { display: flex; flex: 1; flex-direction: column; padding: 17px 18px 16px; }
.card-tag { display: inline-flex; align-items: center; min-height: 23px; padding: 0 7px; color: #06613f; background: #d9f8e3; border-radius: 4px; font-size: 10px; font-weight: 700; }
.card-tag.coral { color: #8a311d; background: #ffe0d8; }
.card-tag.blue { color: #294b88; background: #dfe9ff; }
.review-body h3 { margin: 11px 0 8px; font-size: 17px; line-height: 1.5; }
.featured .review-body h3 { font-size: 20px; }
.review-body p { min-height: 44px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; color: #61766d; font-size: 12px; }
.card-foot-action-only { justify-content: flex-end; }
.card-foot button { display: grid; place-items: center; width: 31px; height: 31px; color: var(--deep); background: #f1f7f3; border: 0; border-radius: 50%; cursor: pointer; }
.card-foot svg { width: 16px; }
.text-link { display: flex; align-items: center; gap: 8px; margin: 26px auto 0; padding: 8px 4px; color: #526b61; border: 0; border-bottom: 1px solid #bdcec4; background: transparent; cursor: pointer; }
.text-link svg { width: 16px; }
.all-courses-toggle { min-height: 40px; margin-top: 34px; font-size: 13px; font-weight: 700; }
.all-courses-toggle.expanded { color: #075d42; }
.all-courses-library { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.all-courses-library[hidden] { display: none; }
.review-card.new-course { animation: courseReveal .36s ease both; }
@keyframes courseReveal { from { opacity: 0; transform: translateY(18px); } }
.loaded-visual { display: grid; place-items: center; color: #143e33; }
.loaded-visual > div { display: grid; place-items: center; gap: 13px; text-align: center; }
.loaded-visual > div > svg { width: 52px; height: 52px; stroke-width: 1.25; }
.loaded-visual small { max-width: 150px; font-weight: 700; line-height: 1.45; }
.course-tone-1 { background: #dff3ea; }
.course-tone-2 { background: #e4edff; }
.course-tone-3 { background: #fff0cd; }
.course-tone-4 { background: #eae6f8; }
.course-tone-5 { background: #d8f1f1; }
.course-tone-6 { background: #f6e7e1; }
.course-tone-7 { background: #e8f4d5; }
.course-tone-8 { background: #e8edf1; }
.practice-library { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.library-heading h3 { margin: 6px 0 0; font-size: 20px; }
.library-heading button { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--deep); border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.library-heading button svg { width: 15px; }
.practice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.practice-list button { display: grid; grid-template-columns: 32px 1fr 20px; gap: 12px; align-items: center; min-height: 74px; padding: 12px 16px; text-align: left; border: 0; background: #f7faf8; cursor: pointer; }
.practice-list button:hover { background: #edf8f0; }
.practice-list b { color: #0ab95a; font-family: Georgia, serif; font-size: 18px; }
.practice-list span { display: grid; gap: 4px; }
.practice-list strong { font-size: 13px; }
.practice-list small { color: var(--muted); font-size: 10px; }
.practice-list svg { width: 18px; color: #6e887c; }

.method-section { padding: 58px 7%; color: white; background: #073e33; }
.method-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 5%; align-items: center; }
.method-primary { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.method-heading { width: 100%; max-width: none; }
.method-heading .section-kicker, .method-collaboration .section-kicker { color: #72e2a0; }
.method-heading h2 { margin: 0 0 13px; font-family: Georgia, "Songti SC", serif; font-size: 36px; line-height: 1.3; }
.method-summary { display: grid; gap: 18px; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.78; }
.method-summary p { margin: 0; }
.method-lead-copy { max-width: none; }
.method-closing-copy { padding-top: 2px; color: rgba(255,255,255,.74); }
.method-highlight { display: grid; gap: 14px; margin: 2px 0; }
.method-highlight > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.method-highlight > div:first-child strong { color: white; font-size: 17px; line-height: 1.35; }
.method-highlight > div:first-child span { color: rgba(185,244,203,.76); font-size: 12px; line-height: 1.5; text-align: right; }
.method-highlight-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.method-highlight-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: baseline; min-width: 0; }
.method-highlight-list article > span { color: #72e2a0; font-family: Georgia, serif; font-size: 25px; font-weight: 700; line-height: 1; }
.method-highlight-list article > div { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.method-highlight-list article strong { display: block; flex: 0 0 auto; color: white; font-size: 17px; line-height: 1.5; white-space: nowrap; }
.method-highlight-list article p { min-width: 0; margin: 0; color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.7; white-space: nowrap; }
.journey-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
.journey-flow article { display: flex; min-height: 54px; padding: 10px 12px; align-items: center; justify-content: flex-start; gap: 9px; text-align: left; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.16); border-radius: 7px; transition: background .2s, border-color .2s, transform .2s; }
.journey-flow article:hover { background: rgba(255,255,255,.1); border-color: rgba(114,226,160,.42); transform: translateY(-2px); }
.journey-flow article > svg { flex: 0 0 auto; width: 21px; height: 21px; color: #6bef99; }
.journey-flow article > span { color: rgba(255,255,255,.92); font-size: 15px; font-weight: 800; line-height: 1.35; }
.method-open-note { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.method-open-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #063f31; background: #72e2a0; border-radius: 7px; }
.method-open-icon svg { width: 21px; height: 21px; }
.method-open-note > div { display: grid; gap: 5px; }
.method-open-note > div > strong { font-size: 14px; }
.method-open-note p { margin: 0; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.65; }
.method-cta { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 194px; min-height: 46px; padding: 0 14px; color: #063f31; background: #72e2a0; border: 1px solid #72e2a0; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.method-cta:hover { background: #8aefad; }
.method-cta svg { width: 17px; }
.method-collaboration { display: flex; min-width: 0; padding-left: 11%; flex-direction: column; border-left: 1px solid rgba(255,255,255,.18); }
.method-collaboration h2 { margin: 12px 0 17px; font-family: Georgia, "Songti SC", serif; font-size: 30px; line-height: 1.35; }
.method-collaboration > p { margin: 0; color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.85; }
.collaboration-note { display: block; margin-top: 20px; color: #b9f4cb; font-size: 12px; line-height: 1.7; }
.collaboration-entries { display: grid; grid-template-rows: repeat(2, minmax(118px, 1fr)); gap: 10px; flex: 1; margin-top: 18px; }
.collaboration-entry { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 16px; align-items: center; min-height: 0; padding: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.15); border-radius: 7px; }
.collaboration-entry > div:first-child { display: grid; align-content: center; gap: 7px; }
.collaboration-entry > div:first-child > span { color: #72e2a0; font-size: 12px; font-weight: 800; }
.collaboration-entry > div:first-child > small { color: rgba(255,255,255,.58); font-size: 13px; }
.collaboration-entry > div:first-child > strong { font-size: 19px; line-height: 1.45; }
.collaboration-qr { display: block; width: 116px; aspect-ratio: 1; overflow: hidden; background: #f4f8f5; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; }
.collaboration-qr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.method-top { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8%; }
.method-lead .section-kicker { color: #72e2a0; }
.method-lead h2 { margin-top: 16px; font-size: 38px; }
.method-lead > p { color: rgba(255,255,255,.65); }
.principle-quote { margin-top: 45px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.principle-quote svg { color: #53e189; }
.principle-quote blockquote { margin: 12px 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; line-height: 1.7; }
.principle-quote span { color: rgba(255,255,255,.5); font-size: 11px; }
.method-list { border-top: 1px solid rgba(255,255,255,.22); }
.method-list article { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 27px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.method-list article > span { color: #55dd88; font-family: Georgia, serif; font-size: 24px; }
.method-list h3 { margin: 0 0 8px; font-size: 20px; }
.method-list p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.75; }
.method-list button { display: flex; align-items: center; gap: 7px; margin-top: 15px; padding: 0; color: #9cf5bc; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.method-list button svg { width: 15px; }
.method-resources { margin-top: 66px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,.2); }
.method-resources .section-heading { margin-bottom: 24px; }
.method-resources .section-heading h2 { color: white; font-size: 25px; }
.method-resources .resource-grid { grid-template-columns: repeat(3, 1fr); }
.method-resources .resource-card { min-height: 220px; color: white; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.method-resources .resource-card > span { color: rgba(255,255,255,.65); }
.method-resources .resource-card button { color: #a4f5bc; }
.method-resources .resource-card:after { border-color: rgba(255,255,255,.07); }

.resources-section { background: #f5f8f6; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resource-card { position: relative; min-height: 285px; padding: 26px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 8px; }
.resource-card:after { content: ""; position: absolute; right: -24px; top: -28px; width: 110px; height: 110px; border: 20px solid rgba(0,90,58,.05); transform: rotate(35deg); }
.resource-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 42px; color: #075540; background: #d9f6e4; border-radius: 7px; }
.co-create-card .resource-icon { color: #694821; background: #ffeca8; }
.gallery-card .resource-icon { color: #315080; background: #dce8ff; }
.resource-card > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.resource-card h3 { margin: 7px 0; font-size: 19px; }
.resource-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.resource-card button { position: absolute; bottom: 24px; left: 26px; display: flex; align-items: center; gap: 7px; padding: 0; color: var(--deep); border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 13px; }
.resource-card button svg { width: 15px; }
.newsletter-band { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 58px 7%; color: #21352e; background: #bdf2ce; }
.newsletter-band p { color: #526f62; }
.inline-phone-form { flex: 0 1 510px; display: flex; padding: 5px; background: white; border: 1px solid rgba(0,70,47,.14); border-radius: 7px; }
.inline-phone-form label { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.inline-phone-form label svg { color: #7c9488; }
.inline-phone-form input { width: 100%; border: 0; outline: 0; }
.inline-phone-form button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 17px; color: white; background: var(--deep); border: 0; border-radius: 5px; cursor: pointer; font-weight: 700; }
.inline-phone-form button svg { width: 17px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px 7%; color: #71847c; background: #f8faf9; border-top: 1px solid var(--line); font-size: 12px; }
footer nav { display: flex; gap: 20px; }

.quick-float { position: absolute; z-index: 32; top: calc(100% + 9px); right: 0; width: 100%; padding: 6px; overflow: hidden; background: rgba(255,255,255,.98); border: 1px solid #d7e5dd; border-radius: 10px; box-shadow: 0 18px 44px rgba(0,45,28,.14); opacity: 0; pointer-events: none; transform: translateY(-7px) scale(.985); transform-origin: top right; transition: opacity .18s, transform .18s; backdrop-filter: blur(16px); }
.quick-float.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.quick-root { display: grid; gap: 2px; }
.quick-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 9px; align-items: center; width: 100%; min-height: 54px; padding: 0 8px; color: inherit; text-align: left; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.quick-row:hover { background: #f2f7f4; }
.quick-row > svg { color: #94a99e; width: 16px; }
.quick-row.expanded { background: #f2f7f4; }
.quick-row > svg { transition: transform .18s; }
.quick-row.expanded > svg { transform: rotate(180deg); }
.quick-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.quick-row strong { color: var(--deep); font-size: 12px; line-height: 1.35; white-space: nowrap; }
.quick-row small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.quick-icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--deep); background: #d8f7e3; border-radius: 5px; }
.quick-icon svg { width: 16px; }
.certificate-icon { color: #735c12; background: #fff1bd; }
.submission-icon { color: #285482; background: #dfeaff; }
.record-icon { color: #285482; background: #ebf2fc; }
.logout-icon { color: #9a4b40; background: #f8f0ec; }
.quick-logout { border-top: 1px solid #edf2ef; border-radius: 0 0 7px 7px; }
.quick-logout:hover { background: #fff7f4; }
.quick-logout strong { color: #8c4339; }
.quick-submit-row.submitted { background: #fffaf0; }
.quick-submit-row.submitted .submission-icon { color: #8b6b1b; background: #fff0be; }
.quick-submit-row.submitted > svg { color: #b58c23; }
.quick-detail { display: grid; grid-template-columns: 39px 1fr; gap: 10px; align-items: center; }
.quick-detail > span:last-child { display: grid; gap: 4px; min-width: 0; }
.quick-detail strong { color: #193d32; font-size: 12px; line-height: 1.4; }
.quick-detail small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.quick-date { display: grid; place-items: center; align-content: center; width: 39px; height: 43px; color: white; background: var(--deep); border-radius: 5px; font-family: Georgia, serif; font-size: 17px; line-height: 1; }
.quick-date small { margin-top: 4px; color: #b9f5cc; font-family: system-ui, sans-serif; font-size: 8px; }
.certificate-mini { display: grid; place-items: center; width: 46px; height: 46px; padding: 6px; color: #9d7714; background: #fffdf5; border: 1px solid #e5d8aa; border-radius: 8px; }
.certificate-mini img { width: 100%; height: 100%; object-fit: contain; }
.quick-cancel, .quick-view { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; margin: 10px 0 0 49px; padding: 0 9px; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 700; }
.quick-cancel { color: #a43d32; background: #fff1ef; border: 1px solid #efc8c2; }
.quick-cancel:hover { color: #8e2d24; background: #ffe7e3; border-color: #e4aaa2; }
.quick-view { color: white; background: #087247; border: 1px solid #087247; }
.quick-view:hover { background: #075e3c; }
.quick-cancel svg, .quick-view svg { width: 13px; height: 13px; }
.account-record.cancelled .quick-date { color: #718079; background: #e6ece8; }
.certificate-inline { display: grid; place-items: center; max-height: 0; margin: 0 0 0 49px; overflow: hidden; color: #275345; background: #fffdf6; border: 0 solid #decf96; border-radius: 4px; opacity: 0; transition: max-height .2s, margin-top .2s, padding .2s, opacity .15s, border-width .2s; }
.certificate-inline.open { max-height: 110px; margin-top: 9px; padding: 10px; border-width: 1px; opacity: 1; }
.certificate-inline svg { width: 19px; color: #b28c25; }
.certificate-inline strong { margin-top: 4px; font-family: Georgia, "Songti SC", serif; font-size: 12px; }
.certificate-inline small { margin-top: 3px; color: #7e8b84; font-size: 8px; }

.detail-page { display: none; min-height: 100vh; margin-left: 0; overflow-x: hidden; color: var(--ink); background: #fff; }
body.detail-view .main { display: none; }
body.detail-view .detail-page { display: block; }
.detail-page-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 7%; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.back-button { display: flex; align-items: center; gap: 8px; padding: 0; color: var(--deep); border: 0; background: transparent; cursor: pointer; font-weight: 700; }
.back-button svg { width: 18px; }
.detail-page-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7%; align-items: center; padding: 76px 7%; color: white; background: #063f31; }
.detail-page-hero > div { min-width: 0; }
.detail-page-hero h1 { max-width: 650px; margin: 16px 0; font-family: Georgia, "Songti SC", serif; font-size: 45px; line-height: 1.25; }
.detail-page-hero p { max-width: 550px; margin: 0; color: rgba(255,255,255,.72); line-height: 1.8; }
.detail-page-meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 24px 0 28px; color: #b2f5c8; font-size: 13px; }
.detail-page-meta span { display: flex; align-items: center; gap: 6px; }
.detail-page-meta svg { width: 16px; }
.detail-learning-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 570px; margin-top: 22px; padding: 12px 12px 12px 14px; color: #d9f7e2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; }
.detail-learning-state[hidden] { display: none; }
.detail-learning-state > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.detail-learning-state > div > span:last-child { display: grid; gap: 2px; }
.detail-learning-state strong { color: white; font-size: 12px; }
.detail-learning-state small { color: rgba(255,255,255,.62); font-size: 9px; line-height: 1.45; }
.detail-progress-dot { flex: 0 0 auto; width: 9px; height: 9px; background: #ffd85e; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,216,94,.12); }
.detail-learning-state.completed .detail-progress-dot { background: #66efa0; box-shadow: 0 0 0 5px rgba(102,239,160,.12); }
.detail-learning-state button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; color: #004737; background: #cbf2c7; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; font-weight: 700; }
.detail-learning-state button:hover { background: #dcf5d9; }
.detail-learning-state button:disabled { color: #729086; background: rgba(255,255,255,.12); cursor: default; }
.detail-learning-state button svg { width: 14px; }
.detail-page-cover { min-height: 0; aspect-ratio: 3407 / 1916; background: #f6fbf9 url("https://metis-online.fbcontent.cn/metis-lectio/gkSpMt11vYwVOadUcbi0V.jpg") center / contain no-repeat; border-radius: 8px; }
.detail-page-body { padding: 76px 7% 90px; }
.detail-page-body > section { max-width: 1180px; margin: 0 auto 78px; }
.detail-page-body h2 { margin: 10px 0 18px; font-family: Georgia, "Songti SC", serif; font-size: 32px; }
.detail-page-body > section > p { max-width: 700px; margin: 0; color: var(--muted); line-height: 1.9; }
.detail-intro-copy { max-width: 820px; }
.detail-intro-copy p { margin: 0; color: #62776e; font-size: 14px; line-height: 2; }
.detail-intro-copy .detail-intro-lead { color: #23483b; font-size: 16px; line-height: 1.95; }
.intro-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.intro-principles article { display: grid; grid-template-columns: 34px 1fr; gap: 12px; min-height: 142px; padding: 19px; background: #f3f8f4; border: 1px solid var(--line); border-radius: 7px; }
.intro-principles article > svg { width: 25px; height: 25px; color: #0daa57; }
.intro-principles article > div { display: grid; align-content: start; gap: 7px; }
.intro-principles strong { font-size: 15px; }
.intro-principles span { color: #687e74; font-size: 12px; line-height: 1.7; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.benefit-grid article { min-height: 190px; padding: 22px; background: #f4f8f5; border: 1px solid var(--line); border-radius: 7px; }
.benefit-grid article > svg { width: 28px; height: 28px; margin-bottom: 40px; color: #0cad58; }
.benefit-grid strong, .benefit-grid span { display: block; }
.benefit-grid strong { margin-bottom: 8px; font-size: 15px; }
.benefit-grid span { color: var(--muted); font-size: 12px; line-height: 1.65; }
.schedule-section { padding-top: 0; }
.curriculum-lead { display: block; max-width: 760px; color: #61776e; font-size: 14px; line-height: 1.9; }
.curriculum-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; }
.curriculum-summary span { display: flex; align-items: baseline; gap: 5px; min-height: 32px; padding: 0 11px; color: #4f6a5f; background: #edf8f0; border: 1px solid #d5ebdb; border-radius: 4px; font-size: 11px; }
.curriculum-summary b { color: #0a9e4e; font-family: Georgia, serif; font-size: 20px; }
.curriculum-gains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 20px; }
.curriculum-gains article { display: grid; grid-template-columns: 36px 1fr; gap: 11px; min-height: 104px; padding: 19px; background: linear-gradient(145deg, #effaf2, #f7fbf8); border: 1px solid #d7eade; border-radius: 7px; }
.curriculum-gains article > svg { width: 26px; height: 26px; color: #0cab57; }
.curriculum-gains article > div { display: grid; align-content: start; gap: 5px; }
.curriculum-gains small { color: #5d8b74; font-size: 10px; }
.curriculum-gains strong { color: #154e3c; font-size: 15px; line-height: 1.45; }
.program-list { position: relative; display: grid; margin-top: 8px; border-top: 1px solid #d5e4db; }
.program-list:before { content: ""; position: absolute; top: 36px; bottom: 36px; left: 49px; width: 1px; background: #c7ddd0; }
.program-list article { position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr) 190px; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid #d5e4db; }
.program-list article:hover { background: linear-gradient(90deg, rgba(235,249,239,.7), transparent 78%); }
.program-index { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 7px; min-height: 68px; padding: 9px 7px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); }
.program-index small { color: #0a9e4e; font-size: 10px; font-weight: 800; }
.program-index b { display: grid; place-items: center; width: 39px; height: 39px; color: white; background: var(--deep); border: 3px solid #dff4e5; border-radius: 50%; font-family: Georgia, serif; font-size: 16px; }
.program-core { min-width: 0; }
.program-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.program-meta span { min-height: 22px; padding: 0 7px; color: #55756a; background: #eef5f1; border-radius: 3px; font-size: 10px; line-height: 22px; }
.program-meta span:last-child { color: #0b8850; background: #ddf5e5; }
.program-list h3 { margin: 10px 0 8px; font-size: 20px; line-height: 1.45; }
.program-list p { margin: 0; color: #5e766d; font-size: 13px; line-height: 1.75; }
.program-list ul { display: grid; gap: 6px; margin: 15px 0 0; padding: 0; list-style: none; }
.program-list li { position: relative; padding-left: 14px; color: #46665a; font-size: 12px; line-height: 1.6; }
.program-list li:before { content: ""; position: absolute; top: .6em; left: 0; width: 5px; height: 5px; background: #1fc466; border-radius: 50%; }
.program-output { align-self: stretch; display: grid; align-content: center; gap: 7px; padding: 18px; background: #f4f8f5; border: 1px solid #dbe9e0; border-radius: 6px; }
.program-output small { color: #719086; font-size: 10px; }
.program-output strong { color: #0b5d43; font-size: 14px; line-height: 1.45; }
.program-output span { color: #6d837a; font-size: 11px; line-height: 1.6; }
.detail-takeaway { padding: 34px; background: #e6f8eb; border-radius: 7px; }
.detail-takeaway > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.detail-takeaway article { display: flex; align-items: center; gap: 11px; padding: 17px; background: white; border: 1px solid #d3e8d9; border-radius: 5px; }
.detail-takeaway article svg { color: #079e50; }
.detail-takeaway strong { font-size: 14px; }
.outcome-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.outcome-columns > article { padding: 28px; border: 1px solid var(--line); border-radius: 7px; }
.outcome-columns > article:first-child { background: #eef9f1; }
.outcome-columns > article:last-child { background: #eef6f8; }
.outcome-title { display: flex; align-items: center; gap: 13px; }
.outcome-title > svg { width: 32px; height: 32px; color: var(--deep); }
.outcome-title small { color: #0aa957; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.outcome-title h3 { margin: 4px 0 0; font-size: 19px; }
.outcome-columns ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; }
.outcome-columns li { position: relative; padding-left: 17px; color: #50685e; font-size: 13px; line-height: 1.6; }
.outcome-columns li:before { content: ""; position: absolute; top: .65em; left: 0; width: 6px; height: 6px; background: #15bc62; border-radius: 50%; }
.certificate-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7%; align-items: center; padding: 52px !important; background: #073e33; border-radius: 8px; }
.certificate-section h2 { color: white; }
.certificate-section > div:first-child > p { color: rgba(255,255,255,.62); line-height: 1.8; }
.certificate-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.certificate-rules span { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; color: #bbf5cc; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; font-size: 10px; }
.certificate-rules svg { width: 13px; }
.certificate-card { min-height: 0; overflow: hidden; background: #fff; border-radius: 7px; }
.certificate-card-image { display: block; width: 100%; height: auto; aspect-ratio: 2950 / 2102; object-fit: contain; }
.mentor-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; align-items: center; }
.mentor-section p { margin-top: 0; }
.mentor-image { min-height: 0; aspect-ratio: 2880 / 1749; background: #fff url("https://metis-online.fbcontent.cn/metis-lectio/IHXvmAwC7iBRdd6ezJSAi.png") center / contain no-repeat; border-radius: 7px; }


.scrim { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: rgba(4,26,20,.46); opacity: 0; transition: opacity .2s; backdrop-filter: blur(2px); }
.scrim.visible { pointer-events: auto; opacity: 1; }

.modal, .mini-modal { position: fixed; z-index: 80; top: 50%; left: 50%; width: min(440px, calc(100% - 32px)); padding: 34px; background: white; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,40,25,.23); opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(.98); transition: opacity .2s, transform .2s; }
.modal.open, .mini-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-close, .close-resource { position: absolute; top: 14px; right: 14px; }
.modal-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 23px; color: var(--deep); background: #d8f7e3; border-radius: 7px; }
.modal h2, .mini-modal h2 { margin: 8px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 27px; }
.modal-course, .login-modal > p, .mini-modal > p { margin: 0; color: var(--muted); line-height: 1.7; }
.modal-time { display: flex; gap: 18px; margin: 20px 0; padding: 13px 0; border-block: 1px solid var(--line); color: #4d675d; font-size: 12px; }
.modal-time span { display: flex; align-items: center; gap: 6px; }
.modal-time svg { width: 16px; }
.booking-form { display: grid; gap: 15px; }
.booking-form > label:not(.check-row) { display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
.phone-field, .code-field { display: flex; align-items: center; min-height: 47px; border: 1px solid #cbd9d1; border-radius: 6px; overflow: hidden; }
.phone-field:focus-within, .code-field:focus-within { border-color: #26b866; box-shadow: 0 0 0 3px rgba(38,184,102,.11); }
.phone-field span { padding: 0 12px; color: #6d8177; border-right: 1px solid var(--line); }
.phone-field input, .code-field input { flex: 1; min-width: 0; padding: 0 12px; border: 0; outline: 0; }
.code-field button { align-self: stretch; padding: 0 12px; color: var(--deep); border: 0; border-left: 1px solid var(--line); background: #f2f7f4; cursor: pointer; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 8px; color: #61776e; font-size: 11px; }
.booking-form .primary-action { width: 100%; margin-top: 4px; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 15px; color: #87988f; }
.privacy-note svg { width: 14px; }
.login-modal > p { margin-bottom: 18px; }
.account-guide-modal { width: min(390px, calc(100% - 32px)); padding: 30px; }
.account-guide-modal > .modal-icon { margin-bottom: 14px; }
.account-guide-modal h2 { margin-top: 5px; font-size: 25px; }
.account-sync-guide { display: grid; gap: 10px; margin: 18px 0; padding: 14px; background: #f5f9f6; border: 1px solid var(--line); border-radius: 8px; }
.account-sync-guide > span { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.account-sync-guide b { display: grid; place-items: center; width: 25px; height: 25px; color: var(--deep); background: #d8f7e3; border-radius: 50%; font-size: 11px; }
.account-sync-guide > span > span { display: grid; gap: 2px; }
.account-sync-guide strong { color: #28483d; font-size: 12px; }
.account-sync-guide small { color: #7d8f87; font-size: 10px; line-height: 1.5; }
.account-guide-actions { display: grid; gap: 9px; }
.account-guide-actions .primary-action { width: 100%; }
.account-check-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; color: var(--deep); background: white; border: 1px solid #cbdcd2; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; }
.account-check-button:hover { background: #f5f9f6; }
.account-check-button:disabled { cursor: wait; opacity: .65; }
.account-check-button svg { width: 15px; }
.account-check-button.syncing svg { animation: account-spin .8s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }
.work-submit-modal { width: min(500px, calc(100% - 32px)); max-height: none; padding: 28px 34px; overflow: visible; color: #203832; background: #ffffff; border-radius: 14px; box-shadow: 0 24px 70px rgba(15,44,35,.18); }
.work-submit-modal .modal-close { top: 16px; right: 16px; width: 38px; height: 38px; color: #8d9391; background: transparent; border: 0; }
.work-submit-modal .modal-close svg { width: 24px; height: 24px; stroke-width: 1.8; }
.work-submit-modal > .modal-icon { display: none; }
.work-submit-modal h2 { margin: 0 0 10px; color: #203832; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; line-height: 1.3; }
.work-submit-modal > p { max-width: 390px; margin: 0 0 17px; color: #718a82; font-family: Georgia, "Songti SC", serif; font-size: 14px; line-height: 1.65; }
.work-submit-form { display: grid; gap: 11px; }
.work-submit-form label, .work-submit-form .form-field { display: grid; gap: 6px; color: #315049; font-size: 12px; font-weight: 700; }
.field-label { display: inline-flex; align-items: center; gap: 4px; min-height: 16px; }
.field-label em { color: #e45757; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; }
.field-label small { margin-left: auto; color: #91a29b; font-size: 10px; font-weight: 500; }
.work-submit-form input, .work-submit-form select { width: 100%; min-height: 42px; padding: 0 13px; color: #203832; border: 1px solid #cfded6; border-radius: 10px; background: #fbfdfb; outline: 0; font-size: 13px; }
.work-submit-form select { height: 42px; padding: 1px 30px 0 13px; border-radius: 10px; line-height: normal; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6f827a 50%), linear-gradient(135deg, #6f827a 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.work-submit-form input::placeholder { color: #9aa9a2; }
.work-submit-form input:focus, .work-submit-form select:focus, .workshop-select-button:focus-visible { border-color: #1f6a55; box-shadow: 0 0 0 4px rgba(31,106,85,.1); background: white; }
.work-submit-form select:disabled { color: #9aa9a2; background: #f7faf8; }
.region-field { display: grid; gap: 7px; color: #315049; font-size: 12px; font-weight: 700; }
.region-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.workshop-select { position: relative; }
.workshop-select-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px 0 13px; color: #203832; background: #fbfdfb; border: 1px solid #cfded6; border-radius: 10px; cursor: pointer; outline: 0; text-align: left; }
.workshop-select-button:disabled { color: #315049; background: #f2f7f4; border-color: #d7e4dc; cursor: default; opacity: 1; }
.workshop-select-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.workshop-select-button > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #6f827a; transition: transform .2s ease; }
.workshop-select.open .workshop-select-button { border-color: #1f6a55; box-shadow: 0 0 0 4px rgba(31,106,85,.1); background: white; }
.workshop-select.open .workshop-select-button > svg { transform: rotate(180deg); }
.workshop-select-options { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 3px; padding: 6px; background: white; border: 1px solid #cbdcd3; border-radius: 11px; box-shadow: 0 16px 36px rgba(21,67,53,.18); transform-origin: top; animation: workshop-menu-in .16s ease-out; }
.workshop-select-options[hidden] { display: none; }
.workshop-select-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 11px; color: #25493e; background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; }
.workshop-select-option:hover, .workshop-select-option:focus-visible { background: #edf7f1; outline: 0; }
.workshop-select-option[aria-selected="true"] { color: #075d46; background: #e1f4e9; }
.workshop-select-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.workshop-select-option small { color: #7d9087; font-size: 10px; font-weight: 500; }
@keyframes workshop-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
.field-hint { color: #8a9b94; font-size: 10px; font-weight: 500; line-height: 1.55; }
.field-error { color: #c94444; font-size: 10px; font-weight: 600; line-height: 1.5; }
.field-error[hidden] { display: none; }
.work-link-field.invalid input, .workshop-field.invalid .workshop-select-button { border-color: #d85f5f; box-shadow: 0 0 0 3px rgba(216,95,95,.09); }
.work-submit-form .primary-action { width: 100%; min-height: 48px; margin-top: 4px; color: white; background: #185f4c; border-color: #185f4c; border-radius: 10px; font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.work-submit-form .primary-action:hover { background: #155541; border-color: #155541; }
.work-submit-form .primary-action:disabled { cursor: wait; opacity: .7; }
.platform-booking-modal { width: min(720px, calc(100% - 32px)); }
.platform-booking-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.platform-booking-head .modal-icon { margin-bottom: 0; flex: 0 0 auto; }
.platform-booking-head h2 { margin: 0; }
.platform-booking-modal > p { margin: 0 0 20px; color: var(--muted); line-height: 1.7; }
.platform-booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.platform-booking-grid article { display: grid; justify-items: center; gap: 10px; padding: 16px 12px 14px; background: #f5f9f6; border: 1px solid #dce8e1; border-radius: 7px; text-align: center; }
.platform-booking-grid article:nth-child(2) { background: #f8f7fb; border-color: #e1ddec; }
.platform-booking-grid article:nth-child(3) { background: #fff8f5; border-color: #f0ded6; }
.platform-booking-grid strong { color: #1f4437; font-size: 13px; }
.platform-qr-link { display: grid; place-items: center; border-radius: 6px; box-shadow: none; transition: transform .18s ease; }
a.platform-qr-link:hover { transform: translateY(-2px); box-shadow: none; }
.platform-booking-grid img { width: 132px; height: 132px; padding: 7px; background: white; border: 1px solid #d7e4dc; border-radius: 5px; box-shadow: none; filter: none; image-rendering: pixelated; }
.platform-booking-grid small { color: #75877f; font-size: 10px; }
.account-record-modal { width: min(510px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.account-record-modal > p { margin: 0 0 17px; color: var(--muted); font-size: 12px; }
.record-modal-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-right: 38px; }
.record-modal-heading > div { display: grid; gap: 4px; }
.record-modal-heading h2 { margin: 0; }
.record-modal-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.certificate-heading-icon { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; padding: 8px; overflow: hidden; background: #fffdf5; border: 1px solid #eadfb9; border-radius: 12px; }
.certificate-heading-icon img { display: block; width: 36px; height: 36px; max-width: 36px; max-height: 36px; object-fit: contain; }
.learning-record-icon { flex: 0 0 auto; width: 54px; height: 54px; margin: 0; color: #004737; background: #dcf5d9; border-radius: 12px; }
.account-record-list { display: grid; gap: 9px; max-height: min(390px, calc(100vh - 235px)); padding-right: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bfd2c7 transparent; }
.account-record-list::-webkit-scrollbar { width: 4px; }
.account-record-list::-webkit-scrollbar-thumb { background: #bfd2c7; border-radius: 4px; }
.account-record { padding: 14px; background: #f7faf8; border: 1px solid #e2ece6; border-radius: 10px; }
.certificate-record { display: grid; gap: 12px; }
.certificate-record-main { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.certificate-record-copy { display: grid; gap: 4px; min-width: 0; }
.certificate-record-copy strong { color: #193d32; font-size: 13px; }
.certificate-record-copy small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.certificate-state { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 7px; color: #7f6a2c; background: #faf4db; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.certificate-record.unlocked .certificate-state { color: #176244; background: #dcf5d9; }
.certificate-state svg { width: 12px; }
.certificate-conditions { display: flex; flex-wrap: wrap; gap: 7px; }
.certificate-conditions span { display: inline-flex; align-items: center; gap: 4px; color: #82948d; font-size: 9px; }
.certificate-conditions span.done { color: #247052; }
.certificate-conditions svg { width: 12px; }
.certificate-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; width: 100%; color: white; background: #004737; border: 1px solid #004737; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; }
.certificate-action:hover { background: #0b5b47; }
.certificate-action[disabled], .certificate-action.locked { color: #8a9b94; background: #eef3f0; border-color: #dde7e1; cursor: not-allowed; }
.certificate-action svg { width: 14px; }
.browser-storage-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 15px; padding: 12px; color: #5b6e67; background: #faf4db; border: 1px solid #eee4be; border-radius: 9px; }
.browser-storage-note > svg { width: 18px; margin-top: 1px; color: #8a6c19; }
.browser-storage-note > span { display: grid; gap: 3px; }
.browser-storage-note strong { color: #5b4d26; font-size: 11px; }
.browser-storage-note small { color: #80765c; font-size: 9px; line-height: 1.55; }
.learning-record-row { display: grid; gap: 11px; }
.learning-record-top { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.learning-record-top > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; color: #004737; background: #dcf5d9; border-radius: 8px; }
.learning-record-top > span:first-child svg { width: 16px; }
.learning-record-copy { display: grid; gap: 3px; min-width: 0; }
.learning-record-copy strong { overflow: hidden; color: #193d32; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.learning-record-copy small { color: var(--muted); font-size: 9px; }
.learning-record-percent { color: #315f50; font-size: 11px; font-weight: 700; }
.learning-progress-track { height: 5px; overflow: hidden; background: #e4ece7; border-radius: 999px; }
.learning-progress-track span { display: block; width: 0; height: 100%; background: #159966; border-radius: inherit; transition: width .35s ease; }
.learning-record-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; color: #7b8e86; font-size: 9px; }
.learning-record-meta span { display: inline-flex; align-items: center; gap: 4px; }
.learning-record-meta svg { width: 12px; }
.empty-record { display: grid; place-items: center; gap: 7px; min-height: 130px; color: #8a9a94; text-align: center; }
.empty-record svg { width: 28px; height: 28px; color: #a6b7b0; }
.empty-record strong { color: #5a7168; font-size: 12px; }
.empty-record small { font-size: 9px; }

.detail-drawer { padding: 0; }
.detail-cover { position: relative; min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px 28px 30px; color: white; background: linear-gradient(0deg, rgba(0,49,35,.9), rgba(0,62,43,.28)), url("assets/workshop-hero.jpg") center / cover; }
.detail-cover .close-layer { align-self: end; color: white; border-color: rgba(255,255,255,.3); background: rgba(0,0,0,.12); }
.detail-cover .card-tag { align-self: start; }
.detail-cover span:not(.card-tag) { color: #baf9cf; font-size: 12px; }
.detail-cover h2 { margin: 8px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 28px; line-height: 1.4; }
.detail-content { padding: 28px; }
.detail-content > p { margin: 0 0 25px; color: var(--muted); line-height: 1.8; }
.detail-content h3 { margin: 25px 0 12px; font-size: 15px; }
.detail-content ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.detail-content li { display: flex; align-items: center; gap: 9px; color: #4d675c; font-size: 13px; }
.detail-content li svg { width: 17px; color: #13bd60; }
.mentor-row { display: grid; grid-template-columns: 38px 1fr 38px 1fr; gap: 10px; align-items: center; padding: 14px; background: #f3f7f4; border-radius: 7px; }
.avatar.mint, .avatar.cyan { width: 38px; height: 38px; color: var(--deep); background: var(--mint); }
.avatar.cyan { background: var(--cyan); }
.mentor-row div { display: grid; gap: 3px; }
.mentor-row strong { font-size: 12px; }
.mentor-row small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.detail-booking { width: 100%; margin-top: 28px; }
.detail-cover.past { background-image: linear-gradient(0deg, rgba(0,49,35,.9), rgba(0,62,43,.28)), url("assets/workshop-course-details.jpg"); }

.mini-modal { width: min(470px, calc(100% - 32px)); }
.mini-modal textarea { width: 100%; margin: 18px 0 12px; padding: 12px; resize: vertical; border: 1px solid #cbd9d1; border-radius: 6px; outline: 0; }
.mini-modal textarea:focus { border-color: #26b866; box-shadow: 0 0 0 3px rgba(38,184,102,.11); }
.mini-modal .primary-action { width: 100%; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 9px; padding: 12px 17px; color: white; background: #113f32; border-radius: 6px; box-shadow: 0 12px 35px rgba(0,35,22,.2); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 17px; color: #67ee9a; }
.hidden { display: none !important; }

/* Independent course and episode learning pages */
.course-page, .episode-page { display: none; min-height: 100vh; color: #18372f; background: #f4f8f6; }
body.course-view { background: #f4f8f6; }
body.episode-view { background: #fff; }
body.course-view > .main, body.episode-view > .main,
body.course-view > .sidebar, body.episode-view > .sidebar,
body.course-view > .detail-page, body.episode-view > .detail-page { display: none; }
body.course-view .course-page, body.episode-view .episode-page { display: block; }
.learning-page-top { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 66px; padding: 0 max(22px, 1.4vw); background: rgba(255,255,255,.96); border-bottom: 1px solid #dce8e1; backdrop-filter: blur(14px); }
.learning-header-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.learning-back { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 0 0 20px; color: #285348; background: transparent; border: 0; border-left: 1px solid #d5e2dc; cursor: pointer; font-size: 12px; font-weight: 700; }
.learning-back:hover { color: #008a51; }
.learning-back svg { width: 17px; height: 17px; }
.learning-brand { display: inline-flex; align-items: center; gap: 9px; color: #315c50; text-decoration: none; }
.learning-brand img { display: block; width: 92px; height: auto; }
.learning-brand > span { width: 1px; height: 18px; background: #c7d7ce; }
.learning-brand b { font-size: 13px; font-weight: 650; letter-spacing: .035em; white-space: nowrap; }
.learning-page-account { justify-self: end; display: flex; align-items: center; gap: 8px; color: #31584d; font-size: 11px; }
.learning-account-menu { justify-self: end; }
.learning-account-avatar { display: grid; place-items: center; width: 31px; height: 31px; color: white; background: #08734e center / cover; border: 1px solid #d2e1d8; border-radius: 50%; font-size: 11px; font-weight: 700; }
.learning-account-avatar.has-image { color: transparent; }
.course-hero-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); gap: 7%; align-items: center; min-height: 460px; padding: 66px max(7%, calc((100vw - 1320px) / 2)); background: #eaf5f2; border-bottom: 1px solid #d8e7e0; }
.course-hero-copy { max-width: 690px; }
.course-category-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; color: #075b40; background: #d7f2e3; border: 1px solid #c1e5d1; font-size: 12px; font-weight: 700; }
.course-hero-copy h1 { margin: 18px 0 15px; color: #17342d; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(35px, 3.2vw, 50px); font-weight: 650; line-height: 1.24; letter-spacing: -.025em; }
.course-hero-copy > p { max-width: 660px; margin: 0; color: #60776e; font-size: 15px; line-height: 1.9; }
.course-meta-row { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 24px; color: #547067; font-size: 11px; }
.course-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.course-meta-row svg { width: 15px; height: 15px; color: #0a9b5a; }
.course-meta-row b { color: #205246; }
.course-start-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 142px; min-height: 46px; margin-top: 29px; color: white; background: #086849; border: 1px solid #086849; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; }
.course-start-button:hover { background: #07583e; }
.course-start-button svg { width: 17px; height: 17px; fill: currentColor; }
.course-cover-shell { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: #f8fbf9; border: 1px solid #cbded5; box-shadow: 0 22px 55px rgba(30,79,61,.11); }
.course-cover-shell > img { width: 100%; height: 100%; object-fit: cover; }
.course-asset-placeholder { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; min-height: 280px; color: #70867d; text-align: center; }
.course-asset-placeholder svg { width: 46px; height: 46px; color: #81a497; stroke-width: 1.35; }
.course-asset-placeholder strong { color: #49675d; font-size: 14px; }
.course-asset-placeholder small { font-size: 10px; }
.course-page-body { padding: 70px max(7%, calc((100vw - 1320px) / 2)) 100px; }
.course-product-section, .course-outline-section { max-width: 1320px; margin: 0 auto; }
.course-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.course-heading-mark { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: #0a9f5b; transform: rotate(-8deg); }
.course-heading-mark svg { width: 18px; height: 18px; transform: rotate(8deg); }
.course-section-heading > div { display: grid; gap: 2px; }
.course-section-heading small { color: #0a9f5b; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.course-section-heading h2 { margin: 0; color: #17342d; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 28px; font-weight: 650; }
.course-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.course-product-grid article { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 18px; min-height: 176px; padding: 26px 28px; overflow: hidden; background: #eef5f2; border: 1px solid #d4e3dc; }
.course-product-grid article:nth-child(2) { background: #edf4f5; }
.course-product-grid article > svg { grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; color: #0a7350; stroke-width: 1.4; }
.course-product-grid article > div { align-self: center; }
.course-product-grid strong { display: block; margin-bottom: 8px; color: #244c40; font-size: 18px; }
.course-product-grid p { margin: 0; color: #6a7f77; font-size: 12px; line-height: 1.75; }
.course-product-index { position: absolute; top: 20px; right: 22px; color: #10a963; font-family: Georgia, serif; font-size: 11px; font-weight: 700; }
.course-outline-section { margin-top: 78px; padding-top: 54px; border-top: 1px solid #d7e5de; }
.course-outline-heading { display: grid; grid-template-columns: 34px auto 1fr; }
.course-outline-heading > p { justify-self: end; max-width: 420px; margin: 0; color: #75877f; font-size: 11px; line-height: 1.65; text-align: right; }
.episode-outline-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.episode-outline-card { display: flex; min-width: 0; padding: 0; overflow: hidden; flex-direction: column; color: #263d36; background: white; border: 1px solid #d6e3dc; border-radius: 8px; cursor: pointer; text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.episode-outline-card:hover { border-color: #aed0be; box-shadow: 0 16px 36px rgba(24,70,53,.1); transform: translateY(-4px); }
.episode-outline-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #dfeee8; }
.episode-outline-media > img { width: 100%; height: 100%; object-fit: cover; }
.course-thumb-placeholder { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; color: #51786b; background: #e5f0ec; }
.episode-outline-card:nth-child(4n + 2) .course-thumb-placeholder { background: #e6eef3; }
.episode-outline-card:nth-child(4n + 3) .course-thumb-placeholder { background: #eef0df; }
.episode-outline-card:nth-child(4n + 4) .course-thumb-placeholder { background: #eee9f1; }
.course-thumb-placeholder svg { width: 35px; height: 35px; stroke-width: 1.25; }
.course-thumb-placeholder small { font-size: 10px; font-weight: 700; }
.episode-play-badge { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; color: white; background: rgba(0,55,41,.72); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(6px); }
.episode-play-badge svg { width: 18px; height: 18px; fill: currentColor; }
.episode-duration { position: absolute; right: 9px; bottom: 9px; min-height: 23px; padding: 0 7px; color: white; background: rgba(0,42,32,.78); border-radius: 4px; font-size: 9px; line-height: 23px; }
.episode-outline-copy { display: grid; gap: 13px; padding: 16px 16px 18px; }
.episode-outline-copy > strong { min-height: 44px; color: #2a3b35; font-size: 14px; line-height: 1.55; }
.episode-outline-copy > strong b { font-size: inherit; font-weight: 750; }
.episode-outline-copy > strong i { display: inline-block; width: 1px; height: 13px; margin: 0 8px -2px; background: #b7c8c0; }
.episode-outline-copy > span { display: grid; gap: 5px; }
.episode-outline-copy small { overflow: hidden; color: #7b8984; font-size: 10px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }

.episode-page { background: #fff; }
.episode-learning-shell { padding-bottom: 90px; }
.video-stage { --episode-cover: none; position: relative; width: min(1280px, calc(100% - 48px)); aspect-ratio: 16 / 9; min-height: 0; margin: 0 auto; overflow: hidden; color: white; background-color: #052a23; background-image: var(--episode-cover); background-position: center; background-size: cover; }
.video-stage:after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0,25,20,.56); pointer-events: none; }
.video-stage:not(.has-cover):before { content: "飞象老师  AI 工作坊"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.055); font-size: clamp(46px, 8vw, 112px); font-weight: 800; letter-spacing: -.04em; }
.video-stage video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; background: #000; object-fit: cover; }
.video-stage video[hidden] { display: none; }
.video-stage video::-webkit-media-controls-fullscreen-button { display: none !important; }
.video-fullscreen-action { position: absolute; top: 18px; right: 18px; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: white; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.video-fullscreen-action[hidden] { display: none; }
.video-fullscreen-action:hover { background: rgba(0,0,0,.78); }
.video-fullscreen-action:focus-visible { outline: 2px solid #6ee6a1; outline-offset: 3px; }
.video-fullscreen-action svg { width: 21px; height: 21px; }
.video-fullscreen-close { display: none; }
.video-play-button { position: absolute; top: 50%; left: 50%; z-index: 4; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; color: white; background: rgba(0,32,25,.76); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 700; transform: translate(-50%, -50%); backdrop-filter: blur(8px); }
.video-play-button[hidden] { display: none; }
.video-play-button svg { width: 18px; height: 18px; fill: currentColor; }
.video-resource-note { position: absolute; top: calc(50% + 48px); left: 50%; z-index: 4; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.48); font-size: 9px; transform: translateX(-50%); }
.video-resource-note[hidden] { display: none; }
.video-resource-note svg { width: 13px; height: 13px; }
.video-chapters { position: absolute; right: 30px; bottom: 25px; left: 30px; z-index: 4; }
.video-stage.has-video .video-chapters { display: none; }
.video-stage:fullscreen,
.video-stage:-webkit-full-screen,
.video-stage.is-player-fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; margin: 0; background: #000; }
.video-stage.is-player-fullscreen { position: fixed; inset: 0; z-index: 2147483000; }
.video-stage:fullscreen:after,
.video-stage:-webkit-full-screen:after,
.video-stage.is-player-fullscreen:after,
.video-stage:fullscreen .video-resource-note,
.video-stage:-webkit-full-screen .video-resource-note,
.video-stage.is-player-fullscreen .video-resource-note,
.video-stage:fullscreen .video-chapters,
.video-stage:-webkit-full-screen .video-chapters { display: none; }
.video-stage:fullscreen .video-fullscreen-close,
.video-stage:-webkit-full-screen .video-fullscreen-close,
.video-stage.is-player-fullscreen .video-fullscreen-close { display: grid; }
.video-stage.is-player-fullscreen .video-fullscreen-close { position: fixed; z-index: 2147483001; pointer-events: auto; }
.video-stage:fullscreen .video-fullscreen-enter,
.video-stage:-webkit-full-screen .video-fullscreen-enter,
.video-stage.is-player-fullscreen .video-fullscreen-enter { display: none; }
.video-stage.is-player-fullscreen .video-chapters { display: none; }
.video-stage:fullscreen video,
.video-stage:-webkit-full-screen video,
.video-stage.is-player-fullscreen video { object-fit: cover; }
body.player-fullscreen-fallback { overflow: hidden; }
.video-chapter-labels { display: flex; justify-content: space-between; margin-bottom: 9px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 600; }
.video-progress-track { position: relative; height: 3px; background: rgba(255,255,255,.36); }
.video-progress-track > span { display: block; width: 0; height: 100%; background: #4ee48b; }
.video-progress-track > i { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; background: #5bef93; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); }
.episode-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 70px; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding-top: 44px; }
.episode-objectives { min-width: 0; }
.episode-objectives ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.episode-objectives li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: #5d7169; font-size: 13px; line-height: 1.7; }
.episode-objectives li svg { width: 16px; height: 16px; margin-top: 4px; color: #0ba45c; }
.episode-resource-hint { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; max-width: 650px; margin-top: 32px; padding: 17px; background: #f3f8f5; border: 1px solid #dce8e1; }
.episode-resource-hint > svg { width: 24px; height: 24px; color: #167356; }
.episode-resource-hint > div { display: grid; gap: 4px; }
.episode-resource-hint strong { color: #2e5146; font-size: 12px; }
.episode-resource-hint span { color: #7b8d86; font-size: 10px; line-height: 1.55; }
.lesson-info-panel { align-self: start; padding: 26px 28px 28px; background: #f5f8f7; border: 1px solid #dce7e2; }
.lesson-info-panel header > div { display: grid; gap: 3px; }
.lesson-info-panel header small { color: #0a9f5b; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.lesson-info-panel h2 { margin: 0; color: #17342d; font-size: 28px; }
.lesson-info-list { display: grid; gap: 0; margin: 22px 0 0; }
.lesson-info-list > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid #dbe6e1; }
.lesson-info-list dt { color: #84928d; font-size: 10px; }
.lesson-info-list dd { margin: 0; color: #315348; font-size: 11px; font-weight: 650; line-height: 1.55; text-align: right; }
.lesson-source-link { display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin-top: 18px; padding: 0 14px; color: #086849; background: #e4f3eb; border: 1px solid #c9e2d5; text-decoration: none; font-size: 11px; font-weight: 700; }
.lesson-source-link:hover { background: #d8eee3; }
.lesson-source-link[hidden] { display: none; }
.lesson-source-link svg { width: 15px; height: 15px; }
.episode-selector header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.episode-selector header > div { display: grid; gap: 3px; }
.episode-selector header small { color: #0a9f5b; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.episode-selector h2 { margin: 0; color: #17342d; font-size: 28px; }
.episode-selector header > span { color: #7b8b85; font-size: 11px; }
.episode-selector-list { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bcd1c6 transparent; }
.episode-selector-item { display: grid; grid-template-columns: 22px 112px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 78px; padding: 9px 12px; color: #546b62; background: #f5f7f6; border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-align: left; }
.episode-selector-item:hover { background: #edf5f1; }
.episode-selector-item.active { color: #0b5e43; background: #e6f4ec; border-color: #c7e0d2; }
.episode-selector-item > svg { width: 15px; height: 15px; }
.episode-selector-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #dcebe5; }
.episode-selector-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-thumb-placeholder.compact { gap: 2px; background: #dcebe5; }
.course-thumb-placeholder.compact svg { width: 17px; height: 17px; fill: currentColor; }
.course-thumb-placeholder.compact small { font-size: 8px; }
.episode-selector-copy { display: grid; gap: 5px; min-width: 0; }
.episode-selector-copy small { color: #8a9892; font-size: 8px; }
.episode-selector-copy strong { overflow: hidden; color: #2d423a; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
  .course-hero-panel { grid-template-columns: 1fr; gap: 42px; }
  .course-cover-shell { width: min(680px, 100%); }
  .episode-outline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .episode-content-layout { grid-template-columns: 1fr; gap: 54px; }
  .episode-selector-list { max-height: none; }
}

@media (max-width: 600px) {
  .learning-page-top { grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; padding: 0 16px; }
  .learning-header-left { gap: 12px; }
  .learning-brand img { width: 74px; }
  .learning-brand b, .learning-brand > span, .learning-page-account, .episode-top-title { display: none; }
  .learning-back { min-height: 28px; padding-left: 12px; }
  .learning-back span { display: inline; font-size: 10px; }
  .learning-account-menu { flex-basis: 36px; width: 36px; }
  .learning-account-menu .account-state { min-height: 36px; padding: 0; border: 0; box-shadow: none; }
  .learning-account-menu .account-avatar { width: 32px; height: 32px; border-radius: 50%; }
  .learning-account-menu .account-copy, .learning-account-menu .account-state > svg { display: none; }
  .learning-account-menu .quick-float { right: 0; width: 208px; }
  .course-hero-panel { min-height: 0; padding: 44px 20px 50px; }
  .course-hero-copy h1 { font-size: 31px; }
  .course-hero-copy > p { font-size: 13px; }
  .course-meta-row { display: grid; gap: 8px; }
  .course-cover-shell { aspect-ratio: 16 / 10; }
  .course-asset-placeholder { min-height: 190px; }
  .course-page-body { padding: 52px 20px 72px; }
  .course-section-heading h2, .episode-selector h2, .lesson-info-panel h2 { font-size: 24px; }
  .course-product-grid { grid-template-columns: 1fr; }
  .course-product-grid article { min-height: 150px; padding: 22px; }
  .course-outline-section { margin-top: 58px; padding-top: 42px; }
  .course-outline-heading { grid-template-columns: 34px 1fr; }
  .course-outline-heading > p { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .episode-outline-grid { grid-template-columns: 1fr; }
  .video-stage { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .video-fullscreen-action { top: 12px; right: 12px; width: 38px; height: 38px; }
  .video-chapters { right: 20px; bottom: 22px; left: 20px; }
  .video-chapter-labels { gap: 10px; font-size: 8px; }
  .episode-content-layout { width: auto; padding: 42px 20px 0; }
  .episode-selector-item { grid-template-columns: 20px 94px minmax(0, 1fr); padding: 8px; }
}

@media (max-width: 1120px) {
  :root { --sidebar: 210px; --brand-rail: 202px; }
  .topbar { padding-right: 34px; }
  .page-nav { gap: 24px; }
  .account-menu-shell { flex-basis: 190px; width: 190px; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .method-layout { grid-template-columns: 1fr; gap: 0; }
  .method-primary .method-open-note { margin-top: 22px; }
  .method-collaboration { padding-top: 52px; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .journey-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .hero-content { width: 70%; }
}

@media (max-width: 860px) {
  :root { --sidebar: 0px; --brand-rail: 168px; }
  .sidebar { width: var(--brand-rail); transform: none; transition: none; box-shadow: none; }
  .sidebar.open { transform: none; }
  .sidebar-close { display: none; }
  .main { margin-left: 0; }
  .topbar { width: 100vw; min-height: 60px; padding: 0 18px 0 var(--brand-rail); }
  .menu-button { display: none; }
  .mobile-brand { display: none; }
  .brand-lockup { gap: 7px; }
  .brand-wordmark, .mobile-brand .brand-wordmark { width: 74px; }
  .brand-divider { height: 17px; }
  .brand-workshop { font-size: 11px; }
  .page-nav { display: none; }
  .top-account span { display: none; }
  .account-copy small, .account-state > svg { display: none; }
  .account-menu-shell { flex-basis: 176px; width: 176px; }
  .top-actions { flex: 0 0 auto; }
  .hero { min-height: 560px; }
  .hero-content { width: 76%; margin-left: 6%; }
  .hero h1 { font-size: 42px; }
  .season-strip { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr 1fr; }
  .all-courses-library { grid-template-columns: 1fr 1fr; }
  .review-card.featured { grid-column: auto; }
  .method-resources .resource-grid { grid-template-columns: 1fr 1fr; }
  .journey-flow { grid-template-columns: 1fr 1fr; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .resource-card:last-child { grid-column: span 2; }
  .newsletter-band { align-items: start; flex-direction: column; }
  .inline-phone-form { flex: auto; width: 100%; }
  .modal, .mini-modal, .toast { left: 50%; }
  .detail-page { margin-left: 0; }
  .detail-page-hero { grid-template-columns: 1fr; padding: 58px 6%; }
  .detail-page-cover { min-height: 0; }
  .detail-page-body { padding: 58px 6% 70px; }
  .intro-principles { grid-template-columns: 1fr; }
  .program-list article { grid-template-columns: 86px minmax(0, 1fr); gap: 18px; }
  .program-output { grid-column: 2; }
  .outcome-columns { grid-template-columns: 1fr; }
  .certificate-section { grid-template-columns: 1fr; }
  .mentor-section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { min-height: 650px; align-items: end; }
  .hero-media { background-position: 58% center; }
  .hero-scrim { background: linear-gradient(0deg, rgba(117,235,170,.26) 0%, rgba(201,248,244,.36) 64%, rgba(225,250,255,.2) 100%); }
  .hero-content { width: auto; margin: 0; padding: 130px 20px 38px; }
  .submission-guide { top: 18px; right: 20px; left: 20px; max-width: none; justify-content: center; padding: 9px 12px; font-size: 11px; text-align: center; }
  .hero h1 { margin-top: 18px; font-size: 34px; }
  .hero p { font-size: 14px; line-height: 1.6; }
  .hero-meta { gap: 10px 16px; }
  .reward-items { display: grid; gap: 9px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .primary-action, .hero-actions .secondary-action { width: 100%; min-width: 0; }
  .primary-action, .secondary-action { min-height: 45px; padding: 0 11px; font-size: 13px; }
  .season-strip, .review-section, .resources-section, .method-section { padding: 58px 20px; }
  .season-strip { padding-top: 67px; }
  .season-intro h2, .section-heading h2, .newsletter-band h2 { font-size: 27px; }
  .season-step { grid-template-columns: 38px 1fr 18px; gap: 10px; padding-left: 16px; }
  .season-step > span { font-size: 23px; }
  .section-heading { align-items: start; flex-direction: column; }
  .segmented { width: 100%; overflow-x: auto; }
  .segmented button { flex: 1; white-space: nowrap; }
  .review-grid { grid-template-columns: 1fr; }
  .all-courses-library { grid-template-columns: 1fr; }
  .review-card.featured, .review-card:last-child { grid-column: auto; }
  .featured .review-visual { height: auto; }
  .practice-list { grid-template-columns: 1fr; }
  .library-heading { align-items: start; flex-direction: column; }
  .method-heading h2 { font-size: 30px; }
  .method-highlight-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  .method-highlight-list { grid-template-columns: 1fr; }
  .journey-flow { grid-template-columns: 1fr 1fr; }
  .journey-flow article { min-height: 54px; }
  .method-open-note { grid-template-columns: 38px minmax(0, 1fr); }
  .method-open-icon { width: 38px; height: 38px; }
  .method-open-note .method-cta { grid-column: 1 / -1; width: 100%; }
  .method-collaboration { padding-top: 42px; }
  .method-collaboration h2 { font-size: 27px; }
  .collaboration-entry { grid-template-columns: minmax(0, 1fr) 108px; gap: 16px; min-height: 146px; padding: 16px; }
  .collaboration-qr { width: 108px; }
  .resource-grid, .method-resources .resource-grid { grid-template-columns: 1fr; }
  .resource-card:last-child { grid-column: auto; }
  .newsletter-band { padding: 48px 20px; }
  .inline-phone-form { display: grid; padding: 5px; }
  .inline-phone-form label { min-height: 44px; }
  footer { align-items: start; flex-direction: column; padding: 24px 20px; }
  .detail-drawer { padding: 0; }
  .modal, .mini-modal { padding: 28px 22px; }
  .account-state { min-height: 40px; padding: 3px 7px 3px 4px; }
  .account-avatar { width: 32px; height: 32px; }
  .account-copy strong { font-size: 11px; }
  .modal-time { gap: 10px; flex-direction: column; }
  .mentor-row { grid-template-columns: 38px 1fr; }
  .toast { width: max-content; max-width: calc(100% - 32px); }
  .account-menu-shell { flex-basis: 166px; width: 166px; }
  .quick-float { top: calc(100% + 8px); right: 0; width: 100%; }
  .detail-page-top { padding: 0 20px; }
  .detail-page-top .section-kicker { font-size: 9px; }
  .detail-page-hero { padding: 46px 20px 54px; }
  .detail-page-hero > div:first-child { width: calc(100vw - 40px); max-width: 100%; }
  .detail-page-hero h1 { max-width: 100%; font-size: 31px; }
  .detail-page-hero h1, .detail-page-hero p { overflow-wrap: anywhere; word-break: break-all; }
  .detail-page-cover { min-height: 0; }
  .detail-page-body { padding: 52px 20px 66px; }
  .detail-page-body h2 { font-size: 28px; }
  .detail-intro-copy .detail-intro-lead { font-size: 15px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-grid article { min-height: 165px; }
  .benefit-grid article > svg { margin-bottom: 25px; }
  .curriculum-gains { grid-template-columns: 1fr; gap: 9px; }
  .curriculum-gains article { min-height: 0; }
  .program-list:before { left: 31px; }
  .program-list article { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 22px 0; }
  .program-index { padding: 7px 0; }
  .program-index small { font-size: 9px; }
  .program-index b { width: 34px; height: 34px; font-size: 14px; }
  .program-list h3 { font-size: 18px; }
  .program-output { grid-column: 2; padding: 14px; }
  .outcome-columns { grid-template-columns: 1fr; }
  .certificate-section { grid-template-columns: 1fr; padding: 28px !important; }
  .certificate-card { min-height: 0; }
  .region-selects { grid-template-columns: 1fr; }
  .platform-booking-grid { grid-template-columns: 1fr; }
  .platform-booking-grid article { grid-template-columns: 1fr auto; justify-items: start; text-align: left; }
  .platform-booking-grid article img { grid-row: 1 / span 2; grid-column: 2; width: 92px; height: 92px; }
}

@media (max-width: 380px) {
  :root { --brand-rail: 148px; }
  .sidebar { padding-left: 16px; }
  .brand-lockup { gap: 6px; }
  .brand-wordmark { width: 68px; }
  .brand-divider { height: 15px; }
  .brand-workshop { font-size: 10px; }
  .topbar { padding-right: 12px; }
  .top-actions { gap: 6px; }
  .account-menu-shell { flex-basis: 146px; width: 146px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}