:root {
  /* Brand */
  --orange: #f04b17;
  --orange-hover: #dc4212;
  --orange-2: #ff6b3a;
  --blue: #3B82F6;
  --blue-dark: #2563EB;
  /* Neutrals */
  --ink: #202938;
  --heading: #050505;
  --muted: #6b7280;
  --text-secondary: #4b5563;
  --text-tertiary: #697386;
  --text-meta: #7b8494;
  --placeholder: #9aa3af;
  --line: #e8edf3;
  --border: #edf0f4;
  --border-input: #dfe5ee;
  --bg: #f6f7f9;
  --bg-subtle: #f8f9fb;
  --footer-bg: #f9fafb;
  --card: #fff;
  /* Semantic */
  --success: #19a75b;
  --success-bg: #ecfff4;
  --warning: #c98600;
  --warning-bg: #fff7d8;
  --error: #d92d20;
  /* Typography */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 26px;
  --font-display: 44px;
  --leading-tight: 1.18;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 1.8;
  --weight-normal: 500;
  --weight-medium: 700;
  --weight-bold: 800;
  --weight-black: 900;
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-section: 70px;
  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius: 18px;
  --radius-pill: 999px;
  /* Buttons */
  --btn-height-sm: 42px;
  --btn-height: 48px;
  --btn-height-lg: 58px;
  --btn-font: 17px;
  --btn-weight: 800;
  --btn-radius: 6px;
  --btn-padding-x: 24px;
  /* Layout */
  --container: 1440px;
  --header-height: 60px;
  /* Shadow */
  --shadow: 0 12px 36px rgba(28, 39, 60, .08);
  --shadow-card: 0 10px 28px rgba(20, 28, 40, .04);
  --shadow-modal: 0 24px 68px rgba(20, 28, 40, .24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img, video, canvas { max-width: 100%; }
img { display: block; }
.site-header { height: 60px; background: #fff; box-shadow: 0 2px 8px rgba(20, 28, 40, .08); position: sticky; top: 0; z-index: 20; }
.header-inner { max-width: 1440px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 38px; padding: 0 16px; }
.brand img { width: 86px; height: auto; }
.main-nav { display: flex; gap: 42px; align-items: center; font-size: 15px; font-weight: 700; white-space: nowrap; }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; }
.search-box { flex: 1; height: 38px; max-width: 440px; min-width: 220px; border: 1px solid #d8dee8; border-radius: 4px; display: flex; align-items: center; padding: 0 16px; color: #9aa3af; background: #fbfcfe; }
.search-box input { border: 0; outline: 0; flex: 1; background: transparent; color: var(--ink); font-size: 14px; }
.search-box button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; color: #9aa3af; background: transparent; cursor: pointer; }
.header-login-button { min-width: 92px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; color: #4b5563; background: transparent; font-size: 18px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.header-login-button:hover { color: var(--orange); }
.vip-button { min-width: 92px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--orange); color: #fff; font-size: 18px; font-weight: 700; }
.header-user { position: relative; height: 52px; display: flex; align-items: center; }
.header-user::after { content: ""; position: absolute; top: 100%; right: -28px; width: 320px; height: 16px; pointer-events: none; }
.header-user:hover::after, .header-user:focus-within::after { pointer-events: auto; }
.header-user-trigger { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #a5adba; background: #d8d8d8; font-size: 8px; cursor: pointer; }
.header-user-trigger::after { content: ""; position: absolute; inset: -8px -10px; }
.header-user-crown { position: absolute; top: -8px; right: -3px; color: #ff6508; transform: rotate(-8deg); }
.header-user-menu { position: absolute; top: calc(100% + 16px); right: -20px; z-index: 80; width: 280px; padding: 0; border-radius: 6px; background: #fff; box-shadow: 0 16px 38px rgba(20, 28, 40, .14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .16s ease, visibility .16s ease, transform .16s ease; }
.header-user:hover .header-user-menu, .header-user:focus-within .header-user-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.header-user-profile { position: relative; min-height: 86px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #edf0f4; }
.header-user-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #a5adba; background: #d8d8d8; font-size: 8px; }
.header-user-profile strong { display: block; color: #151b2c; font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
.header-user-profile span { display: block; color: #7b8494; font-size: 13px; line-height: 1.35; }
.header-menu-crown { position: absolute; top: 12px; left: 52px; color: #ff6508; transform: rotate(-8deg); }
.header-user-menu > a, .header-user-menu > button { width: 100%; height: 45px; display: flex; align-items: center; gap: 18px; padding: 0 20px; border: 0; color: #4b5563; background: #fff; font-size: 15px; text-align: left; cursor: pointer; }
.header-user-menu > a svg, .header-user-menu > button svg { color: #9aa3af; flex: none; }
.header-user-menu > a:hover, .header-user-menu > button:hover { background: #f8f9fb; color: #151b2c; }
.header-user-menu > button { margin-top: 16px; border-top: 1px solid #edf0f4; }
.login-modal-layer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(20, 28, 40, .48); }
.login-modal { position: relative; width: min(460px, calc(100vw - 40px)); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 68px rgba(20, 28, 40, .24); }
.login-modal-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #98a2b3; background: #f7f8fa; cursor: pointer; }
.login-modal-close:hover { color: #273244; background: #eef1f5; }
.login-modal h2 { margin: 0; padding: 28px 32px 22px; color: #111827; font-size: 24px; line-height: 1.25; font-weight: 900; }
.login-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.login-tabs button { min-width: 0; height: 54px; border: 0; border-bottom: 2px solid transparent; color: #697386; background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.login-tabs button.active { color: var(--orange); border-bottom-color: var(--orange); }
.login-form { display: grid; gap: 18px; padding: 26px 32px 32px; }
.login-form label { display: grid; gap: 9px; color: #4b5563; font-size: 15px; font-weight: 700; }
.login-form input { width: 100%; height: 46px; border: 1px solid #dfe5ee; border-radius: 6px; padding: 0 14px; color: #273244; background: #fff; outline-color: var(--blue); }
.login-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
.login-code-row button { border: 1px solid rgba(38, 88, 232, .22); border-radius: 6px; color: var(--blue); background: #f4f7ff; font-size: 14px; font-weight: 700; cursor: pointer; }
.login-form p { margin: -4px 0 0; color: #9aa3af; font-size: 13px; }
.login-submit { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 6px; color: #fff; background: var(--orange); font-size: 17px; font-weight: 900; cursor: pointer; }
.login-submit:hover { background: var(--orange-hover); }
.wechat-login-panel { display: grid; justify-items: center; gap: 12px; padding: 32px; color: #697386; text-align: center; }
.wechat-qr { width: 148px; height: 148px; display: grid; place-items: center; border: 1px solid #edf0f4; border-radius: 10px; color: #20b455; background: #f8fdf9; }
.wechat-login-panel strong { color: #273244; font-size: 18px; }
.wechat-login-panel span { margin-bottom: 10px; font-size: 14px; }
.auth-page { min-height: calc(100vh - 60px); position: relative; display: grid; place-items: center; padding: 112px 6vw 120px; background: #f4f5f7; }
body:has(.auth-page) .float-rail, body:has(.auth-page) .leave-widget { display: none; }
.auth-home-link { position: absolute; top: 54px; right: max(6vw, 48px); display: inline-flex; align-items: center; gap: 10px; color: var(--orange); font-size: 19px; font-weight: 800; }
.auth-home-link img { width: 23px; height: 23px; display: block; flex-shrink: 0; object-fit: contain; }
.auth-shell { width: min(420px, 100%); margin: 0 auto; display: grid; place-items: center; }
.auth-card { width: 100%; padding: 28px 32px 32px; border-radius: 12px; background: #fff; box-shadow: 0 16px 42px rgba(20, 28, 40, .1); }
.auth-card-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.auth-card.wechat { display: flex; flex-direction: column; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: 24px; border-bottom: 1px solid #dfe4ec; }
.auth-tabs button { position: relative; height: 42px; border: 0; color: #9aa3af; background: transparent; font-size: 16px; font-weight: 700; cursor: pointer; }
.auth-tabs button.active { color: var(--orange); }
.auth-tabs button.active::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--orange); }
.auth-form { display: grid; gap: 16px; align-content: start; }
.auth-form[hidden], .auth-wechat[hidden] { display: none !important; }
.auth-field { position: relative; display: grid; gap: 0; }
.auth-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth-field input { width: 100%; height: 46px; border: 1px solid #dfe4ec; border-radius: 5px; padding: 0 14px; color: #273244; background: #fff; font-size: 15px; outline-color: rgba(240, 75, 23, .4); }
.auth-field input::placeholder { color: #9aa3af; }
.auth-field.password input { padding-right: 48px; }
.auth-field.password .auth-password-toggle { position: absolute; right: 10px; top: 50%; width: 32px; height: 32px; display: grid; place-items: center; border: 0; color: #9aa3af; background: transparent; transform: translateY(-50%); cursor: pointer; }
.auth-field.password .auth-password-toggle svg { grid-area: 1 / 1; }
.auth-field.password .auth-password-toggle svg[hidden] { display: none !important; }
.auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: stretch; }
.auth-code-button { height: 46px; border: 1px solid var(--orange); border-radius: 5px; color: var(--orange); background: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.auth-code-button:disabled { color: #9aa3af; border-color: #dfe4ec; cursor: not-allowed; }
.auth-agreement { margin: 0; text-align: center; color: #6b7280; font-size: 13px; line-height: 1.4; }
.auth-agreement a { color: var(--orange); font-weight: 800; text-decoration: none; }
.auth-agreement a:hover { text-decoration: underline; }
.auth-note { margin: -4px 0 0; text-align: center; color: #9aa3af; font-size: 13px; line-height: 1.5; }
.auth-submit { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 5px; color: #fff; background: var(--orange); font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 20px rgba(240, 75, 23, .16); }
.auth-submit:hover { background: var(--orange-hover); }
.auth-forgot { width: fit-content; justify-self: start; border: 0; padding: 0; margin-top: -4px; color: #9aa3af; background: transparent; font-size: 13px; cursor: pointer; }
.auth-forgot:hover { color: var(--orange); }
.auth-error { margin: 14px 0 0; color: #d92d20; font-size: 13px; font-weight: 700; text-align: center; }
.auth-loading { display: grid; place-items: center; color: #9aa3af; font-size: 16px; }
.auth-wechat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 4px; text-align: center; color: #697386; }
.auth-qr { width: 168px; height: 168px; display: grid; place-items: center; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.auth-qr-icon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 44px; height: 44px; }
.auth-qr-icon i { display: block; border-radius: 5px; background: #cfd5df; }
.auth-wechat strong { margin: 6px 0 0; color: #202938; font-size: 16px; line-height: 1.25; font-weight: 900; }
.auth-wechat > span { margin: 0 0 12px; font-size: 13px; color: #9aa3af; }
.auth-wechat .auth-agreement { margin-top: 4px; }
@media (max-width: 980px) {
  .auth-page { padding: 86px 24px 72px; }
  .auth-home-link { top: 28px; right: 24px; font-size: 17px; }
}
@media (max-width: 620px) {
  .auth-page { min-height: calc(100vh - 104px); padding: 74px 16px 42px; }
  .auth-home-link { top: 22px; right: 16px; gap: 7px; font-size: 16px; }
  .auth-card { padding: 22px 16px 26px; border-radius: 10px; }
  .auth-tabs { margin-bottom: 18px; }
  .auth-tabs button { height: 40px; font-size: 15px; }
  .auth-form { gap: 14px; }
  .auth-code-row { grid-template-columns: 1fr; gap: 10px; }
  .auth-code-button, .auth-field input, .auth-submit { height: 44px; font-size: 15px; }
  .auth-agreement { font-size: 12px; }
  .auth-qr { width: 148px; height: 148px; }
}
.section, .page-hero { max-width: var(--container); margin: 0 auto; padding: var(--space-section) var(--space-md); }
.page-hero { text-align: center; padding-bottom: 35px; }
.eyebrow { color: var(--orange); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: var(--font-3xl); line-height: var(--leading-tight); margin-bottom: 14px; color: var(--heading); }
h2 { font-size: var(--font-2xl); line-height: var(--leading-snug); margin-bottom: 22px; }
h3 { font-size: var(--font-xl); margin-bottom: 12px; }
.lede { color: var(--muted); font-size: var(--font-lg); line-height: var(--leading-loose); }
.breadcrumb { font-size: 14px; }
.breadcrumb__list { display: inline; list-style: none; margin: 0; padding: 0; }
.breadcrumb__item { display: inline; }
.breadcrumb__item + .breadcrumb__item::before { content: " > "; }
.breadcrumb a:hover { color: var(--orange); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.hero { max-width: none; height: 595px; background: linear-gradient(110deg, #ff6c75 0%, #ffb27e 100%); color: #fff; padding: 0; }
.hero-inner { max-width: 1440px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: 1fr 1.18fr; gap: 48px; align-items: center; padding: 0 16px; position: relative; }
.hero h1 { color: #fff; font-size: 44px; font-weight: 900; letter-spacing: .02em; }
.hero .lede { color: rgba(255,255,255,.95); font-size: 22px; }
.hero-image { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(122,55,28,.2); }
.hero-dots { position: absolute; bottom: 45px; left: 50%; display: flex; gap: 10px; }
.hero-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.65); }
.hero-dots i:nth-child(2) { background: #fff; }
.primary-btn, .ghost-btn, .dark-btn { min-height: var(--btn-height); padding: 0 var(--btn-padding-x); border-radius: var(--btn-radius); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 0; cursor: pointer; font-weight: var(--btn-weight); font-size: var(--btn-font); }
.primary-btn { color: #fff; background: var(--orange); }
.primary-btn:hover { background: var(--orange-hover); }
.btn-lg { min-height: var(--btn-height-lg); font-size: var(--font-lg); }
.btn-sm { min-height: var(--btn-height-sm); padding: 0 var(--space-lg); font-size: var(--font-sm); }
.ghost-btn { color: var(--text-secondary); background: #f5f6f8; border: 1px solid var(--line); }
.ghost-btn.favorite-active { color: var(--orange); border-color: rgba(240, 75, 23, .26); background: #fff4ef; }
.ghost-btn.favorite-active .lucide-heart { fill: currentColor; }
.dark-btn { color: #fff; background: var(--blue); }
.hero .primary-btn { background: #fff; color: #ff6265; min-width: 150px; margin-top: 24px; }
.video-strip { max-width: none; padding: 48px 0 70px; background: #fff; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1440px; margin: 0 auto; }
.video-tile { position: relative; min-height: 310px; background-size: cover; background-position: center; }
.video-tile::after { content: "▶"; position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.38); color: #fff; font-size: 30px; padding-left: 4px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.section-head h2 { margin: 0; }
.more-link { color: var(--orange); font-size: 18px; font-weight: 700; }
.course-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.course-card { background: #fff; border: 1px solid #edf0f4; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(20,28,40,.04); transition: .2s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.course-cover { height: 168px; background: #e9eef4 center/cover no-repeat; }
.course-body { padding: 18px; min-height: 156px; display: flex; flex-direction: column; gap: 12px; }
.course-body h3 { font-size: 19px; line-height: 1.35; min-height: 52px; }
.meta { color: #7b8494; display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.price { margin-top: auto; display: flex; align-items: end; justify-content: space-between; color: #7b8494; }
.price strong { color: var(--orange); font-size: 20px; }
.tag { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; }
.teacher-grid, .service-grid, .metric-grid, .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.category-grid { grid-template-columns: repeat(5, 1fr); }
.panel, .teacher-card, .service-card, .category-card, .order-card, .profile-card, .stat { background: #fff; border: 1px solid #edf0f4; border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 16px; }
.category-card { padding: 22px; }
.teacher-card { padding: 32px; display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.avatar { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(#dfe9e5,#f7f7f7); display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #243b53; }
.story-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.list { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.list li { padding: 20px 24px; border-radius: 12px; background: #f8f9fb; color: #4b5563; line-height: 1.7; }
.ranking li { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; }
.ranking b { color: var(--orange); font-size: 24px; }
.form { display: grid; gap: 14px; }
.form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border: 1px solid #dfe5ee; border-radius: 6px; outline-color: var(--blue); background: #fff; }
.detail-grid { display: grid; gap: 16px; padding-top: 32px; }
main:has(.detail-grid) { background: var(--card); }
.detail-grid__body { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 28px; align-items: start; }
.video-player { height: 548px; border-radius: 12px; background: #000; display: grid; place-items: center; color: #fff; }

/* 课程详情页：尺寸收敛 */
.course-detail-page .section.detail-grid { max-width: 1440px; padding: 24px 16px 56px; }
.course-detail-page .detail-grid__body { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.course-detail-page .video-player { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.course-detail-page .course-preview-play { width: 64px; height: 64px; }
.course-detail-page .course-preview-play svg { width: 28px; height: 28px; }
.course-detail-page .buy-card { padding: 24px; border-radius: var(--radius-md); }
.course-detail-page .buy-card h1 { margin: 0 0 16px; font-size: 20px; line-height: 1.35; }
.course-detail-page .buy-card .primary-btn.btn-lg { min-height: var(--btn-height); font-size: 17px; }
.course-detail-page .action-grid { gap: 12px; margin-top: 20px; }
.course-detail-page .action-grid a,
.course-detail-page .action-grid button { height: 72px; padding: 12px 10px; font-size: 14px; gap: 6px; border-radius: var(--radius-sm); }
.course-detail-page .action-grid svg { width: 22px; height: 22px; }
.course-detail-page .course-detail-toolbar { margin-top: 16px; gap: 12px; }
.course-detail-page .course-detail-toolbar__meta { gap: 12px; font-size: 14px; }
.course-detail-page .course-detail-toolbar .primary-btn,
.course-detail-page .course-detail-toolbar .ghost-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
.course-detail-page .course-detail-tabs-panel { margin-top: 16px; padding: 20px; }
.course-detail-page .tabs { gap: 28px; margin-bottom: 20px; }
.course-detail-page .tabs button { padding: 0 0 12px; font-size: 16px; }
.course-detail-page .course-detail-tab-panel h3 { font-size: 18px; margin-bottom: 12px; }
.course-detail-page .lede { font-size: 15px; line-height: 1.7; }
.course-detail-page .course-recommend-list { gap: 20px; }
.course-detail-page .course-recommend-item { gap: 16px; }
.course-detail-page .course-recommend-thumb { width: 160px; height: 90px; border-radius: var(--radius-xs); }
.course-detail-page .course-recommend-body { min-height: 90px; gap: 8px; }
.course-detail-page .course-recommend-title { font-size: 16px; }
.course-detail-page .course-recommend-label { font-size: 13px; }
.course-detail-page .breadcrumb { font-size: 14px; margin-bottom: 8px; }
.course-detail-page .course-preview-label { top: 14px; left: 14px; min-height: 28px; gap: 8px; padding: 0 12px; font-size: 13px; }
.course-detail-page .course-preview-label strong { font-size: 13px; }
.course-detail-page .course-preview-screen { width: min(420px, 70%); min-height: 160px; gap: 8px; padding: 24px; border-radius: var(--radius-md); }
.course-detail-page .course-preview-screen strong { font-size: 22px; }
.course-detail-page .course-preview-screen p { font-size: 15px; }
.course-detail-page .course-preview-control { right: 14px; bottom: 14px; width: 40px; height: 40px; }
.course-detail-page .course-preview-ended { padding: 28px; }
.course-detail-page .course-preview-ended h2 { font-size: 24px; margin-bottom: 10px; }
.course-detail-page .course-preview-ended p { font-size: 15px; margin-bottom: 18px; }
.course-detail-page .course-preview-ended .primary-btn,
.course-detail-page .course-preview-ended .ghost-btn { min-width: 108px; height: 40px; font-size: 14px; }
.course-preview-player { position: relative; overflow: hidden; transition: box-shadow .22s ease, outline-color .22s ease; }
.course-preview-player.active { outline: 3px solid rgba(240, 75, 23, .88); box-shadow: 0 0 0 8px rgba(240, 75, 23, .14), 0 22px 52px rgba(20, 28, 40, .18); }
.course-preview-play { width: 80px; height: 80px; display: grid; place-items: center; padding-left: 6px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.22); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.course-preview-play:hover { transform: scale(1.06); background: rgba(255,255,255,.3); }
.course-preview-label { position: absolute; top: 18px; left: 18px; z-index: 2; min-height: 34px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 999px; color: #fff; background: rgba(240, 75, 23, .96); font-size: 14px; font-weight: 800; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.course-preview-label strong { font-size: 15px; }
.course-preview-loading { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
.course-preview-loading i { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.28); border-top-color: var(--orange); animation: preview-spin .8s linear infinite; }
.course-preview-loading strong { font-size: 18px; font-weight: 800; }
.course-preview-screen { width: min(580px, 72%); min-height: 210px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 32px; border-radius: 14px; text-align: center; background: linear-gradient(135deg, rgba(240,75,23,.28), rgba(38,88,232,.18)); border: 1px solid rgba(255,255,255,.14); }
.course-preview-screen strong { color: #fff; font-size: 30px; line-height: 1.25; }
.course-preview-screen p { margin: 0; color: rgba(255,255,255,.82); font-size: 18px; }
.course-preview-control { position: absolute; right: 20px; bottom: 20px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); cursor: pointer; }
.course-preview-ended { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px; text-align: center; background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
.course-preview-ended h2 { color: #fff; font-size: 36px; margin-bottom: 12px; }
.course-preview-ended p { max-width: 420px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.6; margin-bottom: 24px; }
.course-preview-ended > div { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.course-preview-ended .primary-btn, .course-preview-ended .ghost-btn { min-width: 120px; height: 46px; font-size: 16px; }
.course-preview-ended .ghost-btn { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.course-preview-replay { margin-top: 18px; border: 0; color: rgba(255,255,255,.78); background: transparent; cursor: pointer; font-size: 15px; }
@keyframes preview-spin {
  to { transform: rotate(360deg); }
}
.buy-card { padding: var(--space-xl); position: sticky; top: 110px; }
.buy-card .primary-btn.btn-lg { width: 100%; font-size: 24px; font-weight: var(--weight-black); }
.buy-card h1,
.buy-card h2 {
  margin: 0 0 22px;
  color: var(--heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.course-detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.course-detail-toolbar__actions { display: flex; gap: 14px; }
.course-detail-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-tertiary);
  font-size: var(--font-lg);
}
.course-detail-tabs-panel { margin-top: var(--space-lg); }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--space-lg); }
.action-grid a, .action-grid button {
  min-width: 0;
  height: 96px;
  display: grid;
  place-items: center;
  gap: var(--space-xs);
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  background: #f7f8fa;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-base);
}
.action-grid svg { color: var(--orange); stroke: currentColor; }
.action-grid a:hover, .action-grid button:hover, .action-grid button.active { color: var(--orange); background: #fff7f4; box-shadow: inset 0 0 0 1px rgba(240,75,23,.16); }
.action-grid button.follow-trigger-pressed { color: var(--orange); background: #fff7f4; box-shadow: inset 0 0 0 2px rgba(240,75,23,.7); transform: scale(.985); }
.mobile-watch-layer { position: fixed; inset: 0; z-index: 360; display: grid; place-items: center; padding: 24px; background: rgba(20, 28, 40, .54); backdrop-filter: blur(4px); }
.mobile-watch-dialog { position: relative; width: min(420px, calc(100vw - 40px)); padding: 28px 28px 26px; border-radius: 14px; background: #fff; box-shadow: 0 24px 68px rgba(20, 28, 40, .24); animation: follow-pop .2s ease-out both; }
.mobile-watch-dialog--compact { width: min(320px, calc(100vw - 40px)); padding: 0; overflow: hidden; }
.mobile-watch-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #f5f6f8; border-bottom: 1px solid #e8eaee; }
.mobile-watch-bar h2 { margin: 0; color: #4b5563; font-size: 16px; line-height: 1.35; font-weight: 700; }
.mobile-watch-dialog--compact .mobile-watch-close { position: static; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; font-size: 22px; line-height: 1; background: transparent; }
.mobile-watch-dialog--compact .mobile-watch-close:hover { background: #eef1f5; }
.mobile-watch-body { padding: 24px; display: grid; place-items: center; }
.mobile-watch-qr-img { display: block; width: 200px; height: 200px; object-fit: contain; }
.mobile-watch-dialog--compact .mobile-watch-qr { width: 200px; height: 200px; margin: 0; padding: 0; gap: 3px; border-radius: 0; box-shadow: none; }
.mobile-watch-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #98a2b3; background: #f7f8fa; cursor: pointer; }
.mobile-watch-close:hover { color: #273244; background: #eef1f5; }
.mobile-watch-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding-right: 28px; }
.mobile-watch-head > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--orange); background: #fff2ec; }
.mobile-watch-head h2 { margin: 0 0 8px; color: #151b2c; font-size: 25px; line-height: 1.25; font-weight: 900; }
.mobile-watch-head p { margin: 0; color: #697386; font-size: 15px; line-height: 1.65; }
.mobile-watch-qr-card { width: 232px; display: grid; justify-items: center; gap: 10px; margin: 26px auto 14px; padding: 18px 18px 16px; border: 1px solid #edf0f4; border-radius: 16px; background: linear-gradient(180deg, #fff, #f8f9fb); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); animation: follow-qr-fade .22s ease-out .08s both; }
.mobile-watch-qr { width: 184px; height: 184px; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 5px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(20, 28, 40, .08); }
.mobile-watch-qr i { display: block; border-radius: 3px; background: transparent; }
.mobile-watch-qr i.active { background: #151b2c; }
.mobile-watch-qr-card strong { color: #151b2c; font-size: 19px; line-height: 1.2; font-weight: 900; }
.mobile-watch-note { margin: 0; color: #8a93a1; text-align: center; font-size: 15px; }
.follow-channel-layer { position: fixed; inset: 0; z-index: 340; display: grid; place-items: center; padding: 24px; background: rgba(20, 28, 40, .52); backdrop-filter: blur(4px); }
.follow-channel-dialog { position: relative; width: min(420px, calc(100vw - 40px)); padding: 28px 28px 26px; border-radius: 14px; background: #fff; box-shadow: 0 24px 68px rgba(20, 28, 40, .24); animation: follow-pop .2s ease-out both; }
.follow-channel-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #98a2b3; background: #f7f8fa; cursor: pointer; }
.follow-channel-close:hover { color: #273244; background: #eef1f5; }
.follow-channel-head { padding-right: 28px; }
.follow-channel-head h2 { margin: 0 0 8px; color: #151b2c; font-size: 25px; line-height: 1.25; font-weight: 900; }
.follow-channel-head p { margin: 0; color: #697386; font-size: 15px; line-height: 1.65; }
.follow-channel-qr { width: 214px; height: 214px; display: grid; place-items: center; margin: 26px auto 14px; padding: 14px; border: 1px solid #edf0f4; border-radius: 16px; background: #f8f9fb; animation: follow-qr-fade .22s ease-out .08s both; }
.follow-channel-qr img { width: 180px; height: 180px; object-fit: contain; }
.follow-channel-account { margin: 0; color: #697386; text-align: center; font-size: 16px; }
.follow-channel-account strong { color: #273244; }
@keyframes follow-pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes follow-qr-fade {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes follow-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 560px) {
  .mobile-watch-layer { align-items: end; padding: 14px; }
  .mobile-watch-dialog { width: 100%; padding: 24px 20px 22px; border-radius: 14px; }
  .mobile-watch-head { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .mobile-watch-head > span { width: 42px; height: 42px; }
  .mobile-watch-head h2 { font-size: 22px; }
  .mobile-watch-qr-card { width: 214px; }
  .mobile-watch-qr { width: 170px; height: 170px; gap: 4px; padding: 13px; }
  .follow-channel-layer { align-items: end; padding: 14px; }
  .follow-channel-dialog { width: 100%; padding: 24px 20px 22px; border-radius: 14px; }
  .follow-channel-head h2 { font-size: 22px; }
  .follow-channel-qr { width: 196px; height: 196px; }
  .follow-channel-qr img { width: 164px; height: 164px; }
}
.tabs { display: flex; gap: 50px; border-bottom: 1px solid var(--border-input); margin-bottom: var(--space-lg); }
.tabs span, .tabs button { padding: 0 0 18px; background: transparent; border: 0; font-size: 20px; color: #667085; cursor: pointer; }
.tabs .active { color: var(--blue); border-bottom: 3px solid var(--blue); }
.course-detail-tab-panel { display: none; }
.course-detail-tab-panel.active { display: block; }
.course-detail-tab-panel h3 { margin: 0 0 var(--space-md); color: var(--heading); font-size: var(--font-xl); font-weight: var(--weight-bold); }
.course-detail-tab-panel h3 + .lede { margin-bottom: var(--space-md); }
.course-recommend-label { margin: 0; color: var(--orange); font-size: var(--font-base); line-height: 1.3; font-weight: var(--weight-medium); }
.course-recommend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.course-recommend-item { display: flex; align-items: flex-start; gap: 20px; text-decoration: none; color: inherit; transition: opacity .18s ease; }
.course-recommend-item:hover { opacity: .88; }
.course-recommend-item:hover .course-recommend-title { color: var(--blue); }
.course-recommend-thumb { flex: none; width: 200px; height: 112px; border-radius: 8px; object-fit: cover; background: #e9eef4; }
.course-recommend-body { flex: 1; min-width: 0; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.course-recommend-title { margin: 0; color: var(--heading); font-size: 20px; line-height: 1.4; font-weight: var(--weight-bold); transition: color .18s ease; }
.checkout-box { position: sticky; top: 110px; }
.cart-page { min-height: 100vh; padding: 40px 0 64px; background: var(--bg); color: var(--heading); }
body:has(.cart-page) .leave-widget { display: none; }
.cart-shell { width: min(1440px, calc(100% - 96px)); margin: 0 auto; }
.cart-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: 24px; }
.cart-title-row h1 { margin: 0; color: var(--heading); font-size: 24px; line-height: var(--leading-snug); font-weight: var(--weight-black); }
.cart-title-row span { color: var(--text-meta); font-size: var(--font-base); font-weight: var(--weight-medium); }
.cart-table { overflow: hidden; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); }
.cart-table-head { height: 52px; display: grid; grid-template-columns: minmax(360px, 1fr) 120px 140px 120px 80px; align-items: center; gap: var(--space-lg); padding: 0 32px; border-bottom: 1px solid var(--border); color: var(--text-meta); font-size: var(--font-sm); font-weight: var(--weight-medium); }
.cart-table-head > span:not(.cart-col-course) { text-align: center; }
.cart-col-course { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.cart-table-body { display: grid; }
.cart-row { min-height: 120px; display: grid; grid-template-columns: minmax(360px, 1fr) 120px 140px 120px 80px; align-items: center; gap: var(--space-lg); padding: 16px 32px; border-bottom: 1px solid var(--border); background: var(--card); }
.cart-row:last-child { border-bottom: 0; }
.cart-course-cell { min-width: 0; display: grid; grid-template-columns: 18px 120px minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.cart-check { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.cart-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.cart-course-cell img { width: 120px; height: 76px; object-fit: cover; border-radius: var(--radius-xs); }
.cart-total-count { font-style: normal; }
.cart-course-cell h2 { margin: 0 0 8px; color: var(--heading); font-size: 16px; line-height: 1.35; font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-course-cell p { margin: 0 0 8px; color: var(--text-meta); font-size: var(--font-sm); line-height: 1.3; }
.cart-badge { min-width: 64px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: var(--radius-xs); font-size: 12px; font-style: normal; font-weight: var(--weight-medium); }
.cart-badge.vip { color: var(--orange); background: #fff3e4; }
.cart-badge.hot { color: var(--blue); background: #edf6ff; }
.cart-badge.new { color: var(--success); background: var(--success-bg); }
.cart-price-cell { display: grid; justify-items: center; gap: 4px; }
.cart-price-cell strong,
.cart-subtotal { color: var(--orange); font-size: 16px; line-height: 1; font-weight: var(--weight-black); text-align: center; }
.cart-price-cell del { color: var(--placeholder); font-size: var(--font-sm); line-height: 1; font-weight: var(--weight-medium); }
.cart-quantity { width: 128px; height: 36px; display: grid; grid-template-columns: 36px 1fr 36px; justify-self: center; overflow: hidden; border: 1px solid var(--border-input); border-radius: var(--radius-xs); background: var(--card); }
.cart-quantity button { display: inline-flex; align-items: center; justify-content: center; border: 0; color: var(--placeholder); background: var(--card); cursor: pointer; }
.cart-quantity button:first-child { border-right: 1px solid var(--border); }
.cart-quantity button:last-child { border-left: 1px solid var(--border); }
.cart-quantity span { display: inline-flex; align-items: center; justify-content: center; color: var(--heading); font-size: var(--font-base); }
.cart-remove { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; justify-self: center; border: 0; color: var(--placeholder); background: transparent; cursor: pointer; }
.cart-summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin: 24px 0 48px; padding: 16px 20px 16px 28px; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); }
.cart-summary > div { display: flex; align-items: center; gap: var(--space-lg); }
.cart-summary button { border: 0; color: var(--text-tertiary); background: transparent; font-size: var(--font-sm); cursor: pointer; }
.cart-summary button:first-child { color: var(--heading); font-weight: var(--weight-bold); }
.cart-summary span { color: var(--text-tertiary); font-size: var(--font-sm); }
.cart-summary span strong { color: var(--orange); font-weight: var(--weight-black); }
.cart-summary b { color: var(--heading); font-size: var(--font-base); font-weight: var(--weight-black); }
.cart-summary b strong { color: var(--orange); font-size: 22px; }
.cart-summary a, .cart-summary .cart-checkout-button { width: 140px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--btn-radius); color: #fff; background: var(--orange); font-size: var(--font-base); font-weight: var(--weight-bold); cursor: pointer; transition: background .18s ease; }
.cart-summary a:hover, .cart-summary .cart-checkout-button:hover { background: var(--orange-hover); }
.cart-recommend h2 { margin: 0 0 20px; color: var(--heading); font-size: 20px; line-height: var(--leading-snug); font-weight: var(--weight-black); }
.cart-recommend-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cart-recommend-card { min-width: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; }
.cart-recommend-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cart-recommend-card img { width: 100%; height: auto; display: block; background: var(--bg-subtle); }
.cart-recommend-card > div { padding: 16px 16px 18px; }
.cart-recommend-card h3 { margin: 0 0 8px; color: var(--heading); font-size: 16px; line-height: 1.35; font-weight: var(--weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-recommend-card p { margin: 0 0 16px; color: var(--text-meta); font-size: var(--font-sm); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-recommend-card footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.cart-recommend-card strong { color: var(--orange); font-size: var(--font-base); }
.cart-recommend-card span { color: var(--placeholder); font-size: var(--font-sm); white-space: nowrap; }
@media (max-width: 1200px) {
  .cart-shell { width: min(1180px, calc(100% - 48px)); }
  .cart-table { overflow-x: auto; }
  .cart-table-head, .cart-row { min-width: 980px; padding-left: 24px; padding-right: 24px; }
  .cart-recommend-grid { gap: 16px; }
}
@media (max-width: 900px) {
  .cart-page { padding: 28px 0 48px; }
  .cart-shell { width: calc(100% - 28px); }
  .cart-title-row { margin-bottom: 20px; }
  .cart-summary { align-items: stretch; flex-direction: column; padding: 16px; }
  .cart-summary > div { justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .cart-summary a, .cart-summary .cart-checkout-button { width: 100%; }
  .cart-recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .cart-title-row h1 { font-size: 22px; }
  .cart-title-row span, .cart-summary span, .cart-summary button { font-size: 14px; }
  .cart-recommend-grid { grid-template-columns: 1fr; }
  .cart-recommend-card > div { padding: 14px; }
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.admin-shell { display: grid; grid-template-columns: 190px 1fr; gap: 24px; }
.admin-menu { display: grid; align-content: start; gap: 8px; }
.admin-menu a { padding: 14px 16px; border-radius: 10px; background: #fff; color: #4b5563; }
.stat { padding: 24px; }
.stat strong { display: block; font-size: 28px; color: #111; margin-bottom: 8px; }
.chart-wrap { min-height: 320px; height: 320px; }
.account-page { min-height: calc(100vh - 88px); display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; color: #151b2c; }
.account-sidebar { min-height: calc(100vh - 88px); padding-top: 16px; border-right: 1px solid #edf0f4; background: #fff; }
.account-sidebar a { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 20px; color: #4b5563; font-size: 15px; font-weight: 700; }
.account-sidebar a.active { color: #ff6508; background: #fff6f1; }
.account-sidebar a svg { width: 20px; height: 20px; flex: none; fill: currentColor; stroke-width: 0; }
.account-main { min-width: 0; padding: 28px 28px 48px; background: #fff; }
.account-profile-head { display: flex; align-items: center; gap: 28px; margin: 0 0 24px; }
.account-avatar-wrap { position: relative; width: 88px; height: 88px; margin-left: 0; }
.account-avatar-wrap img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.account-avatar-wrap button { position: absolute; right: -8px; bottom: 2px; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #4b5563; background: #fff; box-shadow: 0 4px 12px rgba(20, 28, 40, .14); cursor: pointer; }
.account-avatar-wrap button svg { width: 18px; height: 18px; }
.account-profile-head h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: #151b2c; font-size: 22px; line-height: 1.25; font-weight: 900; }
.account-profile-head h1 button { border: 0; color: #4b5563; background: transparent; cursor: pointer; }
.account-profile-head h1 button svg { width: 18px; height: 18px; }
.account-profile-head p { margin: 0; color: #697386; font-size: 14px; }
.account-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
.account-panel { border: 1px solid #edf0f4; border-radius: var(--radius-md); background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 40, .04); }
.account-panel h2 { margin: 0; color: #151b2c; font-size: 18px; line-height: 1.3; font-weight: 900; }
.account-basic { min-height: 0; padding: 24px; }
.account-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.account-panel-head button { width: auto; min-width: 88px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1.5px solid #2f80ff; border-radius: var(--radius-sm); color: #2f80ff; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.account-panel-head button svg { width: 16px; height: 16px; }
.account-basic dl { display: grid; gap: 14px; margin: 0; }
.account-basic dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 0; }
.account-basic dt { color: #697386; font-size: 14px; line-height: 1.4; font-weight: 600; }
.account-basic dd { margin: 0; color: #111; font-size: 14px; line-height: 1.4; font-weight: 600; }
.account-stats { min-height: 0; padding: 24px; }
.account-stats > div { min-height: 120px; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; gap: 12px; padding-top: 12px; }
.account-stats span { display: grid; gap: 8px; color: #697386; font-size: 13px; }
.account-stats strong { color: #3b82ff; font-size: 26px; line-height: 1; }
.account-orders { padding: 24px; margin-bottom: 24px; }
.account-orders h2 { margin-bottom: 16px; }
.account-orders table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.account-orders th { height: 40px; text-align: left; color: #697386; font-size: 13px; font-weight: 700; border-bottom: 1px solid #dfe4ec; }
.account-orders td { height: 56px; color: #111; font-size: 14px; font-weight: 500; border-bottom: 1px solid #edf0f4; }
.account-orders tbody tr:last-child td { border-bottom: 0; }
.account-orders td span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 28px; border-radius: var(--radius-xs); color: #19a75b; background: #ecfff4; font-size: 13px; font-weight: 700; }
.account-progress { padding: 24px; }
.account-progress h2 { margin-bottom: 20px; }
.account-progress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.account-progress-grid article { min-width: 0; }
.account-progress-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.account-progress-grid strong { color: #111; font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-progress-grid span { color: #3b82ff; font-size: 14px; font-weight: 700; }
.account-progress progress { width: 100%; height: 8px; display: block; overflow: hidden; border: 0; border-radius: 999px; appearance: none; }
.account-progress progress::-webkit-progress-bar { background: #dfe4ec; border-radius: 999px; }
.account-progress progress::-webkit-progress-value { background: #3b82ff; border-radius: 999px; }
.account-progress progress::-moz-progress-bar { background: #3b82ff; border-radius: 999px; }
.account-progress p { margin: 10px 0 0; color: #7b8494; font-size: 13px; line-height: 1.4; }
.settings-page { background: #fff; }
.settings-main { min-width: 0; padding: 28px 28px 48px; background: #fff; }
.settings-card { min-height: 0; max-width: 720px; padding: 24px; border: 1px solid #edf0f4; border-radius: var(--radius-md); background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 40, .04); }
.settings-card h1 { margin: 0 0 24px; color: #111; font-size: 20px; line-height: 1.3; font-weight: 900; }
.settings-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 18px; }
.settings-row span { color: #697386; font-size: 14px; line-height: 1.4; font-weight: 600; }
.settings-row input { width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); outline: 0; color: #151b2c; background: #f7f8fa; font-size: 15px; }
.settings-row input::placeholder { color: #a0a8b5; }
.settings-card > button { width: 120px; height: 40px; margin: 8px 0 0 100px; border: 0; border-radius: var(--radius-sm); color: #fff; background: #f04a16; font-size: 15px; font-weight: 700; cursor: pointer; }
.orders-page { background: #f6f7f9; }
.orders-main { min-width: 0; padding: 28px 28px 48px; background: #f6f7f9; }
.orders-card { width: 100%; min-height: 0; padding: 24px; border-radius: var(--radius-md); background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 40, .04); box-sizing: border-box; }
.orders-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.orders-head h1 { margin: 0; color: #050505; font-size: 22px; line-height: 1.3; font-weight: 900; }
.orders-tools { display: flex; align-items: center; gap: 12px; }
.orders-search { width: 280px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: var(--radius-sm); color: #9aa3af; background: #f6f7f9; }
.orders-search svg { width: 18px; height: 18px; flex: none; }
.orders-search input { width: 100%; border: 0; outline: 0; color: #202938; background: transparent; font-size: 14px; }
.orders-search input::placeholder { color: #a0a8b5; }
.orders-tools > button { width: auto; min-width: 88px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); color: #4b5563; background: #f6f7f9; font-size: 14px; cursor: pointer; }
.orders-tools > button svg { width: 16px; height: 16px; }
.orders-tabs { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.orders-tabs button { height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); color: #4b5563; background: transparent; font-size: 14px; cursor: pointer; }
.orders-tabs button.active { color: #ff6508; background: #fff1eb; }
.orders-table-wrap { overflow-x: auto; border: 1px solid #dfe4ec; border-radius: var(--radius-md); }
.orders-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.orders-table th { height: 44px; padding: 0 16px; text-align: left; color: #697386; background: #f8f9fb; border-bottom: 1px solid #dfe4ec; font-size: 13px; font-weight: 700; }
.orders-table th:nth-child(1) { width: 280px; }
.orders-table th:nth-child(2) { width: 130px; }
.orders-table th:nth-child(3), .orders-table th:nth-child(4) { width: 150px; }
.orders-table th:nth-child(5) { width: 90px; }
.orders-table th:nth-child(6), .orders-table th:nth-child(7) { width: 100px; }
.orders-table td { height: 88px; padding: 0 16px; border-bottom: 1px solid #dfe4ec; color: #4b5563; font-size: 14px; font-weight: 500; }
.orders-table tbody tr:last-child td { border-bottom: 0; }
.orders-table td b { color: #111; font-size: 14px; }
.orders-course { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; }
.orders-course img { width: 88px; height: 66px; border-radius: var(--radius-xs); object-fit: cover; }
.orders-course strong { display: block; margin-bottom: 6px; color: #111; font-size: 14px; line-height: 1.3; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-course span { display: block; color: #697386; font-size: 12px; line-height: 1.35; }
.orders-table td > span { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; height: 26px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 700; }
.orders-table td > span.done { color: #19a75b; background: #ecfff4; }
.orders-table td > span.pending { color: #c98600; background: #fff7d8; }
.orders-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.orders-footer p { margin: 0; color: #4b5563; font-size: 13px; }
.orders-pagination { display: flex; align-items: center; gap: 8px; }
.orders-pagination button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #4b5563;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.orders-pagination button svg { width: 18px; height: 18px; }
.orders-pagination button:first-child,
.orders-pagination button:last-child { border-color: #dfe4ec; color: #a0a8b5; }
.orders-pagination button:hover:not(:disabled):not(.active) { color: var(--orange); border-color: rgba(255, 101, 8, .45); background: #fff7f2; }
.orders-pagination button:active:not(:disabled) { transform: scale(.94); }
.orders-pagination button.active { color: #fff; border-color: #ff6508; background: #ff6508; box-shadow: 0 4px 10px rgba(255, 101, 8, .28); }
.orders-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.orders-pagination button:disabled { color: #c8ced8; cursor: not-allowed; transform: none; box-shadow: none; }
.favorites-page { background: #f6f7f9; }
.favorites-main { min-width: 0; padding: 28px 28px 48px; background: #f6f7f9; }
.favorites-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.favorites-head h1 { margin: 0; color: #151b2c; font-size: 22px; line-height: 1.3; font-weight: 900; }
.favorites-tools { display: flex; align-items: center; gap: 12px; }
.favorites-search { width: 280px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #dfe4ec; border-radius: var(--radius-sm); color: #9aa3af; background: #fff; }
.favorites-search svg { width: 18px; height: 18px; flex: none; }
.favorites-search input { width: 100%; border: 0; outline: 0; color: #202938; background: transparent; font-size: 14px; }
.favorites-search input::placeholder { color: #a0a8b5; }
.favorites-tools > button { width: auto; min-width: 120px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 0; border-radius: var(--radius-sm); color: #fff; background: #ff6508; font-size: 14px; font-weight: 700; cursor: pointer; }
.favorites-tools > button svg { width: 18px; height: 18px; }
.favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.favorite-card { overflow: hidden; border-radius: var(--radius-md); background: #fff; box-shadow: 0 4px 14px rgba(20, 28, 40, .04); }
.favorite-cover { position: relative; height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: #e9eef4; }
.favorite-cover img { width: 100%; height: 100%; object-fit: cover; }
.favorite-cover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); pointer-events: none; }
.favorite-card:nth-child(2) .favorite-cover::after { background: rgba(0, 0, 0, .45); }
.favorite-cover time { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 2px 6px; border-radius: 4px; color: #fff; background: rgba(0, 0, 0, .35); font-size: 12px; line-height: 1.2; }
.favorite-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .25); font-size: 22px; padding-left: 3px; transform: translate(-50%, -50%); }
.favorite-body { min-height: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 12px; padding: 14px 16px; }
.favorite-body h2 { margin: 0 0 8px; color: #151b2c; font-size: 15px; line-height: 1.3; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-body p { margin: 0; color: #697386; font-size: 13px; }
.favorite-body button { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--radius-sm); color: #ff6508; background: #f7f7f7; font-size: 13px; cursor: pointer; }
.favorite-body button svg { width: 16px; height: 16px; }
.favorites-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.favorites-pagination button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe4ec;
  border-radius: var(--radius-sm);
  color: #4b5563;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.favorites-pagination button svg { width: 18px; height: 18px; }
.favorites-pagination button:hover:not(:disabled):not(.active) { color: var(--orange); border-color: rgba(255, 101, 8, .45); background: #fff7f2; }
.favorites-pagination button:active:not(:disabled) { transform: scale(.94); }
.favorites-pagination button.active { color: #fff; border-color: #ff6508; background: #ff6508; box-shadow: 0 4px 10px rgba(255, 101, 8, .28); }
.favorites-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.favorites-pagination button:disabled { color: #c8ced8; background: #fff; cursor: not-allowed; transform: none; box-shadow: none; }
.favorite-category-layer { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .78); }
.favorite-category-dialog { width: min(480px, calc(100vw - 32px)); min-height: 0; padding: 24px; border-radius: var(--radius-md); background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
.favorite-category-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.favorite-category-head h2 { margin: 0; color: #050505; font-size: 18px; line-height: 1.3; font-weight: 900; }
.favorite-category-head button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; color: #99a2af; background: transparent; cursor: pointer; }
.favorite-category-field { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid #dfe4ec; border-radius: var(--radius-sm); background: #fff; }
.favorite-category-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: #151b2c; background: transparent; font-size: 15px; }
.favorite-category-field input::placeholder { color: #9ba5b4; }
.favorite-category-field span { flex: none; color: #8f98a7; font-size: 13px; }
.favorite-category-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.favorite-category-actions button { width: 96px; height: 40px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.favorite-category-actions .cancel { border: 1px solid #dfe4ec; color: #4b5563; background: #fff; }
.favorite-category-actions .save { border: 1px solid #ff4d22; color: #fff; background: #ff4d22; }
.service-hero { max-width: none; height: 280px; background-size: cover; background-position: center; color: #fff; display: grid; place-items: center; text-align: center; }
.service-hero h1 { color: #fff; }
body:has(.home-page) { background: #f6f7f9; }
.home-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  background: #f6f7f9;
  color: #273244;
}
.home-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home-hero { position: relative; width: 100%; aspect-ratio: 1920 / 280; height: auto; overflow: hidden; background: #e8eef2; color: #fff; }
.home-hero-track { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; transition: transform .6s ease; will-change: transform; }
.home-hero-slide { width: 100%; height: 100%; flex: 0 0 100%; margin: 0; overflow: hidden; }
.home-hero-slide img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; border: 0; vertical-align: top; }
.home-hero-dots { position: absolute; left: 50%; bottom: 16px; z-index: 2; display: flex; gap: 8px; transform: translateX(-50%); }
.home-hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(155, 167, 185, .55); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.home-hero-dots button.active { background: var(--blue); transform: scale(1.15); }
.home-hero-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .home-hero-track { transition: none; }
}
.home-video-strip { margin-top: 0; overflow: hidden; background: #fff; }
.home-video-track { width: max-content; display: flex; animation: home-video-scroll 40s linear infinite; animation-play-state: running; will-change: transform; }
.home-video-strip a { position: relative; width: 10vw; flex: 0 0 10vw; aspect-ratio: 500 / 300; height: auto; display: block; background-size: cover; background-position: center; overflow: hidden; }
.home-video-strip a::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .02); }
.home-video-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; display: grid; place-items: center; padding-left: 4px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .22); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.88); transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.home-video-play svg { width: 26px; height: 26px; }
.home-video-strip a:hover .home-video-play,
.home-video-strip a:focus-visible .home-video-play { opacity: 1; background: rgba(255, 255, 255, .3); transform: translate(-50%, -50%) scale(1.06); }
@keyframes home-video-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}
.home-section { max-width: 1440px; margin: 0 auto; padding: 48px 96px 0; box-sizing: border-box; width: 100%; }
.home-recommend-section { padding-top: 48px; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.home-section-head h2 { color: #273244; font-size: 22px; line-height: 1.25; margin: 0; font-weight: 800; }
.home-section-head a { color: #ff6333; font-size: 14px; font-weight: 700; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.home-section-head a:hover { color: #e84818; transform: translateX(3px); }
.home-course-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.home-course-card { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgba(229, 233, 240, .65); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(20, 28, 40, .045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none; color: inherit; display: block; }
.home-course-card:hover { border-color: rgba(240, 75, 23, .16); box-shadow: 0 12px 24px rgba(20, 28, 40, .08); transform: translateY(-3px); }
.home-course-card img { width: 100%; height: 96px; object-fit: cover; object-position: center top; background: #e9eef4; transition: transform .28s ease; display: block; }
.home-course-card:hover img { transform: scale(1.025); }
.home-course-card h3 { color: #273244; font-size: 14px; line-height: 1.4; margin: 12px 14px 10px; font-weight: 700; }
.home-course-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 0 14px 28px; color: #8a93a1; font-size: 12px; }
.home-course-meta > span:first-child { min-width: 0; line-height: 1.3; }
.home-course-price { flex: none; display: inline-flex; flex-direction: column-reverse; align-items: flex-end; gap: 3px; color: #ff6333; white-space: nowrap; }
.home-course-price strong { color: #ff6333; font-size: 13px; line-height: 1.1; white-space: nowrap; }
.home-course-price del { color: #a7afbd; font-size: 11px; line-height: 1; }
.home-course-date { position: absolute; right: 14px; bottom: 10px; color: #8a93a1; font-size: 11px; line-height: 1; white-space: nowrap; }
.home-teacher-section { padding-top: 56px; padding-bottom: 56px; }
.home-teacher-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-teacher-card { min-height: 0; padding: 20px 22px; border: 1px solid rgba(229, 233, 240, .62); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(20, 28, 40, .045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none; color: inherit; display: block; }
.home-teacher-card:hover { border-color: rgba(240, 75, 23, .14); box-shadow: 0 12px 24px rgba(20, 28, 40, .08); transform: translateY(-2px); }
.home-teacher-card > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; float: left; margin-right: 14px; background: #dce8e6; }
.home-teacher-card h3 { color: #273244; font-size: 16px; margin: 4px 0 4px; line-height: 1.25; font-weight: 700; }
.home-teacher-card div p { color: #5f6877; font-size: 13px; margin: 0; }
.home-teacher-card > p { clear: both; color: #4b5563; font-size: 13px; line-height: 1.65; margin: 14px 0 0; }
.home-story-rank-band { background: #fff; padding: 48px 0; }
.home-story-rank {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 96px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.home-stories,
.home-story-rank .home-ranking {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.home-story-rank .home-section-head,
.home-story-rank .ranking-toolbar {
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-story-rank .home-section-head h2,
.home-story-rank .ranking-title-row h2 {
  margin: 0;
  color: #273244;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}
.home-story-rank .home-section-head a {
  line-height: 1;
  font-size: 14px;
}
.home-story-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.home-story-card {
  box-sizing: border-box;
  min-height: 0;
  padding: 16px 18px;
  border-radius: 8px;
  background: #f8f9fb;
  color: #5f6877;
}
.home-story-card p { font-size: 13px; line-height: 1.65; margin: 0 0 10px; }
.home-story-card span { display: block; color: #7b8494; font-size: 12px; line-height: 1.4; }
.home-story-card.visual {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-story-visual {
  flex: none;
  width: 100%;
  height: 96px;
  margin: 0;
  border-radius: 0;
  background: #fbe9dc;
}
.home-story-card.visual p {
  margin: 0;
  padding: 14px 18px 16px;
}
.home-story-rank .ranking-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 40px;
}
.home-story-rank .ranking-category-dropdown {
  height: 34px;
  display: flex;
  align-items: center;
}
.home-story-rank .ranking-category-trigger {
  height: 34px;
  max-width: 120px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 34px;
}
.home-story-rank .rank-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  flex: none;
}
.home-story-rank .rank-tabs button {
  height: 34px;
  min-width: 0;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
}
.home-story-rank .ranking-body { flex: 1; min-height: 0; }
.home-story-rank .ranking-list-redesign {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.home-story-rank .ranking-list-redesign li {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 0 16px;
  border-radius: 8px;
  background: #f8f9fb;
  color: #2f3a4c;
  font-size: 13px;
  line-height: 1.2;
}
.home-story-rank .ranking-list-redesign b {
  width: 28px;
  text-align: center;
  color: #aab3c1;
  font-size: 15px;
  font-weight: 700;
  font-style: normal;
}
.home-story-rank .ranking-list-redesign b.top { color: var(--orange); }
.home-story-rank .ranking-list-redesign span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-story-rank .ranking-list-redesign em {
  color: #8b95a5;
  font-style: normal;
  white-space: nowrap;
  font-size: 12px;
}
@media (min-width: 1101px) {
  .footer-inner { grid-template-columns: 240px 180px minmax(430px, 1fr) auto; }
  .footer-partners { white-space: nowrap; }
}
@media (max-width: 1200px) {
  .home-section, .home-story-rank { padding-left: 56px; padding-right: 56px; }
  .home-course-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 901px) {
  body:has(.home-page) .site-header { height: 44px; }
  body:has(.home-page) .header-inner { gap: 12px; padding-left: 56px; padding-right: 56px; }
  body:has(.home-page) .brand img { width: 70px; }
  body:has(.home-page) .main-nav { gap: 22px; font-size: 12px; }
  body:has(.home-page) .search-box { flex: 0 0 275px; height: 32px; min-width: 0; margin-left: auto; padding: 0 10px; }
  body:has(.home-page) .header-login-button,
  body:has(.home-page) .vip-button { min-width: 64px; height: 36px; font-size: 12px; }
  .home-video-play { width: 48px; height: 48px; }
  .home-video-play svg { width: 22px; height: 22px; }
  .footer { padding-top: 50px; }
  .footer-inner { padding-left: 48px; padding-right: 48px; gap: 28px; }
}
@media (max-width: 900px) {
  .site-header { height: auto; }
  .header-inner { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; gap: 18px 24px; }
  .search-box { order: 10; flex-basis: 100%; max-width: none; }
  .home-video-strip a { width: calc(100vw / 3); flex-basis: calc(100vw / 3); }
  .home-section, .home-story-rank { padding-left: 24px; padding-right: 24px; }
  .home-course-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-teacher-row, .home-story-rank { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .main-nav { width: 100%; justify-content: space-between; gap: 12px; font-size: 14px; }
  .home-video-strip a { width: 50vw; flex-basis: 50vw; }
  .home-section { padding: 36px 16px 0; }
  .home-section-head { margin-bottom: 20px; }
  .home-section-head h2,
  .home-story-rank .ranking-title-row h2 { font-size: 20px; }
  .home-course-row { grid-template-columns: 1fr; }
  .home-course-card img { height: 160px; }
  .home-teacher-section { padding-top: 40px; padding-bottom: 40px; }
  .home-story-rank-band { padding: 36px 0; }
  .home-story-rank { padding: 0 16px; }
  .home-story-rank .home-section-head,
  .home-story-rank .ranking-toolbar {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
  }
  .home-story-rank .ranking-toolbar { align-items: flex-start; flex-direction: column; }
  .home-story-rank .ranking-title-row,
  .home-story-rank .rank-tabs { height: auto; }
  .home-story-rank .ranking-list-redesign li { grid-template-columns: 28px minmax(0, 1fr); height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .home-story-rank .ranking-list-redesign em { grid-column: 2; }
}
body:has(.vip-page) { background: #f6f7f9; }
body:has(.vip-page) .footer { display: none; }
body:has(.vip-success-page) { background: #f7f8fa; }
body:has(.vip-success-page) .leave-widget,
body:has(.vip-success-page) .footer { display: none; }
body:has(.order-payment-page) { background: var(--bg); }
body:has(.order-payment-page) .float-rail,
body:has(.order-payment-page) .leave-widget,
body:has(.order-payment-page) .footer { display: none; }
.vip-page { min-height: calc(100vh - 88px); padding: 48px 24px 64px; background: #f6f7f9; color: #111827; }
.vip-hero { text-align: center; margin-bottom: 40px; }
.vip-hero h1 { color: #050505; font-size: 28px; line-height: 1.25; margin: 0 0 12px; font-weight: 900; }
.vip-hero p { color: #697386; font-size: 16px; line-height: 1.5; margin: 0; }
.vip-content { max-width: 1440px; margin: 0 auto; }
.vip-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
.vip-stat-card { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; border-radius: var(--radius-md); text-align: center; background: #fff; box-shadow: 0 8px 20px rgba(20, 28, 40, .06); }
.vip-stat-card svg { width: 32px; height: 32px; color: #2447b8; fill: rgba(36, 71, 184, .08); margin-bottom: 16px; stroke-width: 2.2; }
.vip-stat-card strong { display: block; color: #050505; font-size: 22px; line-height: 1.2; margin-bottom: 8px; font-weight: 900; }
.vip-stat-card span { color: #697386; font-size: 14px; line-height: 1.35; }
.vip-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vip-plan-card { min-height: 0; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-md); box-shadow: 0 10px 24px rgba(20, 28, 40, .08); overflow: hidden; }
.vip-plan-card.enterprise { background: linear-gradient(145deg, #fffaf0 0%, #ffedcd 100%); }
.vip-plan-card.personal { background: linear-gradient(145deg, #eef4ff 0%, #cbd6f3 100%); }
.vip-plan-card header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vip-plan-card h2 { color: #050505; font-size: 22px; line-height: 1.25; margin: 0; font-weight: 900; }
.vip-plan-card header strong { color: #ff4d22; font-size: 32px; line-height: 1; font-weight: 900; }
.vip-plan-card del { color: #a3acb8; font-size: 14px; text-decoration-thickness: 1px; }
.vip-plan-card p { color: #4b5563; font-size: 15px; line-height: 1.55; margin: 0 0 24px; }
.vip-plan-card p span { color: #ff4d22; font-weight: 700; }
.vip-plan-card ul { display: grid; gap: 14px; padding: 0; margin: 0 0 28px; list-style: none; color: #4b5563; font-size: 15px; line-height: 1.45; }
.vip-plan-card li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.vip-plan-card li svg { width: 20px; height: 20px; margin-top: 1px; stroke-width: 2.6; flex: none; }
.vip-plan-card.enterprise li svg { color: #ffb434; }
.vip-plan-card.personal li svg { color: #2447b8; }
.vip-plan-button { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-top: auto; border: 0; border-radius: var(--radius-sm); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.vip-plan-button.enterprise { background: #ffb434; }
.vip-plan-button.personal { background: #2447b8; }
.vip-checkout-layer { position: fixed; inset: 60px 0 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px 28px; background: rgba(246, 246, 246, .94); overflow-y: auto; }
.vip-checkout-dialog { width: min(560px, calc(100vw - 32px)); padding: 24px; border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 24px rgba(20, 28, 40, .16); }
.vip-checkout-dialog h2 { color: #050505; font-size: 20px; line-height: 1.25; margin: 0 0 16px; font-weight: 900; }
.vip-order-lines { margin-bottom: 20px; }
.vip-order-lines div { min-height: 44px; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 16px; border-bottom: 1px solid #dfe4ec; color: #697386; font-size: 15px; }
.vip-order-lines strong { min-width: 0; color: #273244; font-size: 15px; line-height: 1.35; text-align: right; font-weight: 500; word-break: break-word; }
.vip-order-lines .amount { color: #ff4d56; font-size: 22px; font-weight: 900; }
.vip-checkout-dialog h3 { color: #050505; font-size: 18px; line-height: 1.25; margin: 0 0 14px; font-weight: 900; }
.vip-pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.vip-pay-methods > button, .vip-transfer-trigger { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid #dfe4ec; border-radius: 8px; color: #273244; background: #fff; font-size: 15px; cursor: pointer; }
.vip-pay-methods > button:focus-visible, .vip-transfer-trigger:focus-visible { outline: 2px solid rgba(31, 122, 255, .24); outline-offset: 2px; }
.vip-pay-methods > button.active { border-color: #1f7aff; background: #eef6ff; box-shadow: 0 0 0 1px #1f7aff inset; }
.vip-alipay-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: #1f7aff; font-size: 18px; line-height: 1; font-weight: 900; }
.vip-wechat-icon { color: #18c35f; fill: rgba(24, 195, 95, .14); }
.vip-pay-methods > button svg, .vip-transfer-trigger svg { width: 24px; height: 24px; }
.vip-pay-methods svg:not(.vip-wechat-icon) { color: #4b5563; }
.vip-transfer-method { border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; overflow: hidden; }
.vip-transfer-method.active { display: contents; }
.vip-transfer-method.active .vip-transfer-trigger { border: 1px solid #1f7aff; border-radius: 8px; background: #eef6ff; box-shadow: 0 0 0 1px #1f7aff inset; }
.vip-transfer-trigger { width: 100%; border: 0; border-radius: 0; }
.vip-transfer-trigger svg { color: #4b86ff !important; }
.vip-transfer-panel { grid-column: 1 / -1; margin: 0; padding: 18px 18px 20px; border-radius: 10px; background: #f8f9fb; }
.vip-transfer-panel label { display: grid; gap: 8px; color: #697386; font-size: 15px; line-height: 1.3; margin-bottom: 14px; }
.vip-transfer-panel label > div { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 0 12px 0 14px; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; }
.vip-transfer-panel label strong { color: #273244; font-size: 17px; line-height: 1.35; font-weight: 500; }
.vip-transfer-panel label button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; color: #4b86ff; background: transparent; cursor: pointer; }
.vip-transfer-panel label button svg { color: #4b86ff !important; }
.vip-transfer-payable { margin: 26px 0 6px; text-align: center; color: #273244; font-size: 19px; font-weight: 900; }
.vip-transfer-payable strong { color: #ff4d56; }
.vip-transfer-note { margin: 0; text-align: center; color: #9aa3af; font-size: 14px; }
.vip-qr-panel { min-height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; border-radius: 10px; background: #f8f9fb; }
.vip-qr-placeholder { width: 122px; height: 122px; border-radius: 10px; background: #e5e5e5; box-shadow: 0 6px 14px rgba(20, 28, 40, .08); }
.vip-qr-panel p { color: #697386; font-size: 18px; line-height: 1.35; margin: 0; }
.vip-checkout-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vip-checkout-footer p { margin: 0; color: #4b5563; font-size: 15px; font-weight: 700; }
.vip-checkout-footer p strong { color: #ff4d56; font-size: 22px; margin-left: 8px; }
.vip-checkout-footer button, .vip-checkout-footer a { width: 120px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); color: #fff; background: #1f7aff; font-size: 15px; font-weight: 800; cursor: pointer; }
.vip-transfer-actions { display: grid; gap: 12px; }
.vip-transfer-actions button { width: 100%; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-sm); color: #fff; background: #3b82f6; font-size: 15px; font-weight: 700; cursor: pointer; }
.vip-transfer-actions p { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; color: #7b8494; font-size: 15px; }
.vip-transfer-actions svg { color: currentColor; }
.vip-voucher-layer { position: fixed; inset: 60px 0 0; z-index: 140; display: flex; align-items: flex-start; justify-content: center; padding: 22px 20px 34px; background: rgba(17, 24, 39, .62); overflow-y: auto; }
.vip-voucher-dialog { width: min(1080px, calc(100vw - 40px)); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .24); }
.vip-voucher-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 34px 26px; border-bottom: 1px solid #edf0f4; }
.vip-voucher-head h2 { color: #111827; font-size: 30px; line-height: 1.25; margin: 0 0 8px; font-weight: 900; }
.vip-voucher-head p { color: #697386; font-size: 16px; line-height: 1.55; margin: 0; }
.vip-voucher-head > button { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border: 0; border-radius: 8px; color: #9aa3af; background: #f6f7f9; cursor: pointer; }
.vip-voucher-grid { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); gap: 26px; padding: 30px 34px 32px; }
.vip-voucher-upload, .vip-voucher-sample { min-width: 0; }
.vip-voucher-upload h3, .vip-voucher-sample-title h3 { color: #111827; font-size: 22px; line-height: 1.25; margin: 0; }
.vip-voucher-dropzone { position: relative; min-height: 292px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; margin-top: 18px; padding: 30px 24px; border: 1.5px dashed #a8c5ff; border-radius: 14px; text-align: center; color: #3b82f6; background: #f7fbff; cursor: pointer; }
.vip-voucher-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vip-voucher-dropzone span { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: #e8f1ff; }
.vip-voucher-dropzone strong { color: #273244; font-size: 18px; line-height: 1.35; }
.vip-voucher-dropzone em { color: #7b8494; font-size: 14px; font-style: normal; }
.vip-voucher-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.vip-voucher-fields label { display: grid; gap: 8px; min-width: 0; }
.vip-voucher-fields label.wide { grid-column: 1 / -1; }
.vip-voucher-fields span { color: #334155; font-size: 15px; font-weight: 700; }
.vip-voucher-fields input, .vip-voucher-fields textarea { width: 100%; border: 1px solid #dfe4ec; border-radius: 8px; outline-color: #3b82f6; color: #273244; background: #fff; font-size: 15px; }
.vip-voucher-fields input { height: 42px; padding: 0 13px; }
.vip-voucher-fields textarea { min-height: 78px; padding: 11px 13px; resize: vertical; line-height: 1.55; }
.vip-voucher-fields input::placeholder, .vip-voucher-fields textarea::placeholder { color: #a3acb8; }
.vip-voucher-tips { display: grid; gap: 8px; margin-top: 18px; padding: 16px 18px; border-radius: 10px; background: #f8f9fb; }
.vip-voucher-tips p { margin: 0; color: #697386; font-size: 14px; line-height: 1.55; }
.vip-voucher-tips p::before { content: "· "; }
.vip-voucher-sample-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.vip-voucher-sample-title p { color: #7b8494; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.vip-voucher-sample-title a { height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0 14px; border-radius: 6px; color: #3b82f6; background: #eef5ff; font-size: 14px; font-weight: 700; }
.vip-voucher-sample figure { min-height: 364px; display: grid; place-items: center; margin: 0; padding: 20px; border-radius: 14px; background: #f6f7f9; }
.vip-voucher-sample img { width: 100%; max-height: 340px; object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, .08); }
.vip-voucher-sample-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #697386; font-size: 14px; line-height: 1.5; }
.vip-voucher-sample-note svg { flex: none; color: #3b82f6; }
.vip-voucher-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 20px 34px 24px; border-top: 1px solid #edf0f4; background: #fbfcfe; }
.vip-voucher-actions button { width: 132px; height: 46px; border-radius: 6px; font-size: 17px; font-weight: 700; cursor: pointer; }
.vip-voucher-actions .secondary { border: 1px solid #d8dee8; color: #334155; background: #fff; }
.vip-voucher-actions .primary { border: 0; color: #fff; background: #3b82f6; }
.vip-success-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 96px 56px;
  background: #f7f8fa;
  color: #151b2c;
}
.vip-success-card {
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .04);
}
.vip-success-check {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  color: #23c66c;
  background: #eafff3;
}
.vip-success-check svg { width: 28px; height: 28px; stroke-width: 2.8; }
.vip-success-card h1 {
  margin: 0 0 28px;
  color: #151b2c;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.vip-success-details {
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
}
.vip-success-details div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 0;
}
.vip-success-details dt {
  color: #7b8494;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
.vip-success-details dd {
  margin: 0;
  color: #151b2c;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}
.vip-success-details dd.amount {
  color: #ff4d56;
  font-size: 18px;
  font-weight: 800;
}
.vip-success-invoice {
  width: min(560px, 100%);
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
}
.vip-success-invoice strong {
  color: #151b2c;
  font-size: 15px;
  line-height: 1.3;
}
.vip-success-invoice span {
  color: #a0a8b5;
  font-size: 13px;
  font-weight: 600;
}
.vip-success-invoice button {
  width: 100px;
  height: 36px;
  border: 1px solid #dfe4ec;
  border-radius: var(--radius-sm);
  color: #4b5563;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.vip-success-home {
  width: 128px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  border-radius: var(--radius-sm);
  color: #fff;
  background: #1f7aff;
  font-size: 14px;
  font-weight: 700;
}
.vip-success-recommend {
  max-width: none;
  margin: 40px 0 0;
}
.vip-success-recommend h2 {
  margin: 0 0 20px;
  color: #151b2c;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}
.vip-success-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.vip-success-course-card {
  overflow: hidden;
  border: 1px solid rgba(229, 233, 240, .65);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 28, 40, .06);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vip-success-course-card:hover {
  border-color: rgba(240, 75, 23, .16);
  box-shadow: 0 12px 24px rgba(20, 28, 40, .08);
  transform: translateY(-3px);
}
.vip-success-course-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.vip-success-course-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 130;
  object-fit: cover;
  background: #e9eef4;
  display: block;
  transition: transform .28s ease;
}
.vip-success-course-card:hover img { transform: scale(1.025); }
.vip-success-course-card > div { padding: 16px 18px 18px; }
.vip-success-course-card h3 {
  margin: 0 0 8px;
  color: #151b2c;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
}
.vip-success-course-card p {
  min-height: 0;
  margin: 0 0 14px;
  color: #697386;
  font-size: 13px;
  line-height: 1.5;
}
.vip-success-course-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vip-success-course-card strong {
  color: #5e73ff;
  font-size: 15px;
  line-height: 1.3;
}
.vip-success-course-card span {
  color: #a0a8b5;
  font-size: 12px;
  line-height: 1.3;
}
@media (max-width: 1200px) {
  .vip-page { padding: 40px 20px 56px; }
  .vip-success-page { padding: 32px 24px 48px; }
  .vip-success-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
  .vip-plan-grid { grid-template-columns: 1fr; gap: 20px; }
  .vip-plan-card { min-height: auto; }
  .vip-checkout-layer { padding-top: 20px; }
}
@media (max-width: 640px) {
  .vip-page { min-height: calc(100vh - 70px); padding: 58px 16px 54px; }
  .vip-success-page { padding: 24px 16px 40px; }
  .vip-success-card { padding: 28px 18px 24px; }
  .vip-success-card h1 { margin-bottom: 20px; font-size: 22px; }
  .vip-success-details { width: 100%; }
  .vip-success-details div { grid-template-columns: 80px minmax(0, 1fr); }
  .vip-success-invoice { width: 100%; grid-template-columns: 1fr; gap: 10px; }
  .vip-success-invoice button { width: 100%; }
  .vip-success-home { width: 100%; }
  .vip-success-recommend { margin-top: 28px; }
  .vip-success-recommend h2 { margin-bottom: 16px; font-size: 18px; }
  .vip-success-course-grid { grid-template-columns: 1fr; gap: 12px; }
  .vip-hero { margin-bottom: 28px; }
  .vip-hero h1 { font-size: 24px; }
  .vip-hero p { font-size: 14px; }
  .vip-stat-grid { grid-template-columns: 1fr; margin-bottom: 28px; gap: 12px; }
  .vip-stat-card { min-height: 120px; padding: 20px 16px; }
  .vip-stat-card strong { font-size: 20px; }
  .vip-stat-card span { font-size: 13px; }
  .vip-plan-card { padding: 22px 18px; border-radius: var(--radius-md); }
  .vip-plan-card h2 { font-size: 20px; }
  .vip-plan-card header strong { font-size: 28px; }
  .vip-plan-card p, .vip-plan-card ul { font-size: 14px; }
  .vip-plan-card ul { gap: 12px; margin-bottom: 20px; }
  .vip-plan-button { height: 44px; font-size: 15px; }
  .vip-checkout-layer { padding: 14px; }
  .vip-checkout-dialog { width: 100%; padding: 28px 18px 24px; border-radius: 12px; }
  .vip-checkout-dialog h2 { font-size: 28px; margin-bottom: 24px; }
  .vip-order-lines div { min-height: 64px; font-size: 17px; }
  .vip-order-lines strong { font-size: 17px; text-align: right; }
  .vip-order-lines .amount { font-size: 26px; }
  .vip-checkout-dialog h3 { font-size: 24px; margin-bottom: 20px; }
  .vip-pay-methods { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .vip-pay-methods > button, .vip-transfer-trigger { height: 66px; gap: 16px; padding: 0 18px; font-size: 18px; }
  .vip-transfer-panel { margin: 0 12px 16px; padding: 18px 14px 20px; }
  .vip-transfer-panel label { font-size: 15px; }
  .vip-transfer-panel label > div { min-height: 50px; }
  .vip-transfer-panel label strong { font-size: 16px; }
  .vip-transfer-payable { font-size: 19px; }
  .vip-transfer-note { font-size: 14px; }
  .vip-qr-panel { min-height: 290px; gap: 24px; margin-bottom: 28px; }
  .vip-qr-placeholder { width: 180px; height: 180px; }
  .vip-qr-panel p { font-size: 17px; text-align: center; }
  .vip-checkout-footer { align-items: stretch; flex-direction: column; }
  .vip-checkout-footer p { font-size: 18px; }
  .vip-checkout-footer p strong { font-size: 28px; }
  .vip-checkout-footer button, .vip-checkout-footer a { width: 100%; height: 56px; font-size: 20px; }
  .vip-transfer-actions button { height: 54px; font-size: 17px; }
  .vip-transfer-actions p { align-items: flex-start; font-size: 15px; }
  .vip-voucher-layer { align-items: flex-start; padding: 14px; }
  .vip-voucher-dialog { width: 100%; border-radius: 12px; }
  .vip-voucher-head { padding: 22px 18px 18px; }
  .vip-voucher-head h2 { font-size: 24px; }
  .vip-voucher-head p { font-size: 14px; }
  .vip-voucher-grid { grid-template-columns: 1fr; gap: 24px; padding: 22px 18px 24px; }
  .vip-voucher-dropzone { min-height: 220px; }
  .vip-voucher-fields { grid-template-columns: 1fr; }
  .vip-voucher-sample-title { flex-direction: column; }
  .vip-voucher-sample-title a { align-self: flex-start; }
  .vip-voucher-sample figure { min-height: 260px; padding: 12px; }
  .vip-voucher-sample img { max-height: 250px; }
  .vip-voucher-actions { padding: 18px; }
  .vip-voucher-actions button { flex: 1; width: auto; }
}

/* —— 订单支付页 —— */
.order-payment-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.order-payment-page {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px 64px;
  background: var(--bg);
  color: var(--ink);
}
.order-payment-card {
  width: min(560px, 100%);
  padding: 28px 28px 24px;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(20, 28, 40, .1);
}
.order-payment-section + .order-payment-section { margin-top: 28px; }
.order-payment-section h2 {
  margin: 0 0 16px;
  color: var(--heading);
  font-size: 20px;
  line-height: var(--leading-snug);
  font-weight: var(--weight-black);
}
.order-payment-lines { margin: 0; }
.order-payment-lines div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border-input);
}
.order-payment-lines dt {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-base);
  font-weight: var(--weight-normal);
}
.order-payment-lines dd {
  margin: 0;
  color: #273244;
  font-size: var(--font-base);
  line-height: 1.35;
  text-align: right;
  font-weight: var(--weight-normal);
  word-break: break-word;
}
.order-payment-lines .amount {
  color: #ff4d56;
  font-size: 22px;
  font-weight: var(--weight-black);
}
.order-payment-methods {
  display: grid;
  gap: 12px;
}
.order-payment-method {
  border: 1px solid var(--border-input);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.order-payment-method.is-active {
  border-color: #1f7aff;
  background: #eef6ff;
  box-shadow: 0 0 0 1px #1f7aff inset;
}
.order-payment-method-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  color: #273244;
  background: transparent;
  font-size: 15px;
  font-weight: var(--weight-normal);
  cursor: pointer;
  text-align: left;
}
.order-payment-method-trigger:focus-visible {
  outline: 2px solid rgba(31, 122, 255, .28);
  outline-offset: -2px;
}
.order-payment-method-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
  object-fit: contain;
}
.order-payment-bank-panel {
  padding: 4px 16px 18px;
}
.order-payment-bank-panel label {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.3;
}
.order-payment-bank-panel label > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.order-payment-bank-panel label strong {
  color: #273244;
  font-size: 16px;
  line-height: 1.35;
  font-weight: var(--weight-normal);
  word-break: break-all;
}
.order-payment-copy {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  color: #4b86ff;
  background: transparent;
  cursor: pointer;
}
.order-payment-copy:focus-visible {
  outline: 2px solid rgba(31, 122, 255, .28);
  outline-offset: 1px;
  border-radius: 4px;
}
.order-payment-copy svg { color: #4b86ff; }
.order-payment-bank-payable {
  margin: 22px 0 6px;
  text-align: center;
  color: #273244;
  font-size: 18px;
  font-weight: var(--weight-black);
}
.order-payment-bank-payable strong { color: #ff4d56; }
.order-payment-bank-note {
  margin: 0;
  text-align: center;
  color: var(--placeholder);
  font-size: 14px;
}
.order-payment-qr {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding: 28px 16px;
  border-radius: 10px;
  background: var(--bg-subtle);
}
.order-payment-qr[hidden],
.order-payment-bank-panel[hidden],
.order-payment-footer[hidden],
.order-payment-bank-actions[hidden] { display: none !important; }
.order-payment-qr-placeholder {
  width: 132px;
  height: 132px;
  border-radius: 10px;
  background: #e5e5e5;
  box-shadow: 0 6px 14px rgba(20, 28, 40, .08);
}
.order-payment-qr p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
}
.order-payment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 4px;
}
.order-payment-footer p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: var(--weight-medium);
}
.order-payment-footer p strong {
  margin-left: 8px;
  color: #ff4d56;
  font-size: 22px;
  font-weight: var(--weight-black);
}
.order-payment-confirm {
  min-width: 120px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: #1f7aff;
  font-size: 15px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background .15s ease;
}
.order-payment-confirm:hover { background: var(--blue-dark); }
.order-payment-confirm:focus-visible {
  outline: 2px solid rgba(31, 122, 255, .35);
  outline-offset: 2px;
}
.order-payment-bank-actions {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.order-payment-voucher {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--blue);
  font-size: 15px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background .15s ease;
}
.order-payment-voucher:hover { background: var(--blue-dark); }
.order-payment-voucher:focus-visible {
  outline: 2px solid rgba(59, 130, 246, .35);
  outline-offset: 2px;
}
.order-payment-bank-actions > p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--text-meta);
  font-size: 14px;
}
.order-payment-bank-actions > p svg { flex: none; color: currentColor; }

body.order-payment-modal-open { overflow: hidden; }

.order-payment-voucher-layer,
.order-payment-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(20, 28, 40, .52);
  overflow-y: auto;
}
.order-payment-voucher-layer[hidden],
.order-payment-preview-layer[hidden] { display: none !important; }

.order-payment-voucher-dialog,
.order-payment-preview-dialog {
  margin: auto;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-modal);
}
.order-payment-voucher-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 28px 32px 30px;
}
.order-payment-voucher-head,
.order-payment-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.order-payment-voucher-head h2,
.order-payment-preview-head h2 {
  margin: 0;
  color: var(--heading);
  font-size: var(--font-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-black);
}
.order-payment-voucher-close,
.order-payment-preview-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 8px;
  color: var(--placeholder);
  background: transparent;
  cursor: pointer;
}
.order-payment-voucher-close:hover,
.order-payment-preview-close:hover {
  color: var(--text-secondary);
  background: var(--bg);
}
.order-payment-voucher-close:focus-visible,
.order-payment-preview-close:focus-visible {
  outline: 2px solid rgba(59, 130, 246, .35);
  outline-offset: 2px;
}

.order-payment-voucher-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0 0 26px;
  padding: 0;
  position: relative;
}
.order-payment-voucher-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 8px;
  height: 90px;
  box-sizing: border-box;
  padding: 14px 12px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), rgba(0, 0, 0, 0), linear-gradient(143deg, #ffffff 1%, #f8f9fa 98%);
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.order-payment-voucher-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 37px;
  height: 12px;
  margin-left: calc((40px - 37px) / 2);
  background: url("../assets/images/order-payment/line.svg") no-repeat center / contain;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}
.order-payment-voucher-steps strong {
  color: #273244;
  font-size: 16px;
  line-height: 1.35;
  font-weight: bold;
}
.order-payment-voucher-steps span {
  color: var(--text-meta);
  font-size: 12px;
  line-height: 1.4;
}

.order-payment-voucher-form {
  display: grid;
  gap: 16px;
}
.order-payment-voucher-form > label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #273244;
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.order-payment-voucher-form > label > span { font-weight: var(--weight-medium); }
.order-payment-voucher-form input,
.order-payment-voucher-form textarea {
  width: 100%;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  outline-color: var(--blue);
  color: #273244;
  background: var(--card);
  font-size: 14px;
  font-weight: var(--weight-normal);
  box-sizing: border-box;
}
.order-payment-voucher-form input {
  height: 42px;
  padding: 0 12px;
}
.order-payment-voucher-form textarea {
  min-height: 84px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.5;
}
.order-payment-voucher-form input::placeholder,
.order-payment-voucher-form textarea::placeholder {
  color: var(--placeholder);
}
.order-payment-voucher-form input.is-invalid,
.order-payment-voucher-form textarea.is-invalid {
  border-color: #e11d48;
  outline-color: #e11d48;
}
.order-payment-voucher-upload.is-invalid {
  border-color: #e11d48;
  background: #fff5f7;
}

.order-payment-voucher-proof {
  display: grid;
  gap: 8px;
}
.order-payment-voucher-proof-label {
  color: #273244;
  font-size: 14px;
  font-weight: var(--weight-medium);
}
.order-payment-voucher-proof-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: stretch;
}
.order-payment-voucher-upload {
  position: relative;
  min-height: 96px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1.5px dashed #c9d2e0;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
  overflow: hidden;
}
.order-payment-voucher-upload:hover { border-color: #9eb6e8; background: #f7fbff; }
.order-payment-voucher-upload:focus-within {
  outline: 2px solid rgba(59, 130, 246, .28);
  outline-offset: 1px;
}
.order-payment-voucher-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.order-payment-voucher-upload-idle {
  display: grid;
  gap: 4px;
  justify-items: center;
  color: var(--text-meta);
  font-style: normal;
  text-align: center;
}
.order-payment-voucher-upload-idle[hidden] { display: none !important; }
.order-payment-voucher-upload-idle i {
  font-size: 22px;
  font-style: normal;
  line-height: 1;
  font-weight: 400;
  color: #9aa3af;
}
.order-payment-voucher-upload-idle em {
  font-size: 13px;
  font-style: normal;
}
.order-payment-voucher-upload-preview {
  width: 100%;
  height: 96px;
  object-fit: cover;
  display: block;
}
.order-payment-voucher-upload-preview[hidden] { display: none !important; }

.order-payment-voucher-sample {
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--text-meta);
  background: #eef0f3;
  font-size: 14px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.order-payment-voucher-sample:hover {
  color: var(--blue);
  background: #e8eef8;
}
.order-payment-voucher-sample:focus-visible {
  outline: 2px solid rgba(59, 130, 246, .35);
  outline-offset: 2px;
}

.order-payment-voucher-submit {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--blue);
  font-size: 16px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background .15s ease;
}
.order-payment-voucher-submit:hover { background: var(--blue-dark); }
.order-payment-voucher-submit:focus-visible {
  outline: 2px solid rgba(59, 130, 246, .35);
  outline-offset: 2px;
}

.order-payment-preview-layer { z-index: 270; }
.order-payment-preview-dialog {
  width: min(920px, calc(100vw - 32px));
  padding: 28px 32px 30px;
}
.order-payment-preview-head { margin-bottom: 16px; }
.order-payment-preview-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(80vh, 720px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
}

@media (max-width: 900px) {
  .order-payment-page { padding: 32px 20px 56px; }
}
@media (max-width: 640px) {
  .order-payment-page { padding: 20px 14px 40px; }
  .order-payment-card { padding: 22px 16px 20px; border-radius: 12px; }
  .order-payment-section h2 { font-size: 18px; }
  .order-payment-lines div { min-height: 52px; grid-template-columns: 88px minmax(0, 1fr); font-size: 15px; }
  .order-payment-lines .amount { font-size: 20px; }
  .order-payment-method-trigger { min-height: 56px; font-size: 16px; }
  .order-payment-qr { min-height: 220px; padding: 24px 12px; }
  .order-payment-qr-placeholder { width: 148px; height: 148px; }
  .order-payment-footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .order-payment-confirm { width: 100%; height: 48px; font-size: 16px; }
  .order-payment-voucher { height: 50px; font-size: 16px; }
  .order-payment-voucher-dialog,
  .order-payment-preview-dialog { padding: 22px 16px 20px; border-radius: var(--radius-md); }
  .order-payment-voucher-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .order-payment-voucher-steps li:not(:last-child)::after { display: none; }
  .order-payment-voucher-steps li { height: auto; min-height: 0; padding: 12px 14px; text-align: left; }
  .order-payment-voucher-proof-row { grid-template-columns: minmax(0, 1fr) 84px; }
}

.collection-page { background: var(--card); color: var(--ink); }
body:has(.collection-page) { background: var(--card); }
.collection-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.collection-hero {
  --collection-hero-h: 400px;
  --collection-video-right: 96px;
  --collection-video-bottom: 64px;
  --collection-video-top-gap: 40px;
  --collection-video-gap: 48px;
  --collection-video-w: min(
    calc(100vw * 624 / 1440),
    calc((var(--collection-hero-h) - var(--collection-video-bottom) - var(--collection-video-top-gap)) * 624 / 351)
  );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--collection-hero-h);
  overflow: hidden;
}
.collection-hero::before { content: ""; position: absolute; inset: 0; background: -webkit-linear-gradient(top, #0A0A0A, #0C225C) }
.collection-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
}
.collection-hero-copy { position: relative; z-index: 1; box-sizing: border-box; width: min(640px, calc(100% - var(--collection-video-w) - var(--collection-video-right) - var(--collection-video-gap))); min-width: 0; margin: 0; padding: 0 24px 0 96px; color: #fff; }
.collection-hero-copy h1 { color: #fff; font-size: var(--font-3xl); line-height: 1.2; margin: 0 0 var(--space-lg); font-weight: var(--weight-black); letter-spacing: 0.02em; }
.collection-hero-copy ul { display: grid; gap: var(--space-sm); margin: 0 0 var(--space-xl); padding: 0; list-style: none; font-size: var(--font-lg); line-height: 1.5; font-weight: var(--weight-normal); }
.collection-hero-copy li { margin: 0; white-space: nowrap; }
.collection-hero-copy li::before { content: "· "; }
.collection-hero-button { width: 120px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-xs); color: #fff; background: var(--orange); font-size: 15px; font-weight: var(--weight-medium); box-shadow: 0 8px 18px rgba(240, 75, 23, .2); cursor: pointer; }
.collection-hero-video { position: relative; z-index: 1; width: var(--collection-video-w); aspect-ratio: 624 / 351; height: auto; border-radius: var(--radius-lg); background-image: url(https://dl.topease.net/Resources/upimages/day_180523/201805230304439273.jpg); background-size:100%; }
.collection-video-play { position: absolute; left: 50%; top: 50%; width: clamp(64px, calc(var(--collection-video-w) * 76 / 624), 96px); aspect-ratio: 1; height: auto; margin: 0; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(101, 130, 183, .58); padding-left: 5px; }
.collection-advantages { max-width: 1440px; margin: 0 auto; padding: 64px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px; background: var(--card); }
.collection-advantage-card { padding: 28px 32px; border-radius: var(--radius-md); background: var(--bg); }
.collection-advantage-card svg { color: var(--blue); margin-bottom: 20px; fill: color-mix(in srgb, var(--blue) 8%, transparent); }
.collection-advantage-card h2 { color: var(--heading); font-size: 20px; margin: 0 0 12px; }
.collection-advantage-card p { color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.65; margin: 0; }
.collection-process-section { padding: 70px 96px 104px; background: var(--bg); }
.collection-process-section > h2, .collection-knowledge-section > h2, .collection-qa-section > h2 { color: var(--heading); text-align: center; font-size: 30px; line-height: var(--leading-snug); margin-bottom: 64px; }
.collection-process-wrap { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 630px; gap: 120px; align-items: center; }
.collection-process-list { position: relative; display: grid; gap: 48px; margin: 0; padding: 0; list-style: none; }
.collection-process-list::before { content: ""; position: absolute; left: 18px; top: 22px; bottom: 26px; width: 3px; background: var(--border-input); }
.collection-process-list li { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: start; cursor: pointer; }
.collection-process-list li > span { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--text-secondary); background: var(--border-input); font-size: var(--font-xl); transition: background .25s ease, color .25s ease; }
.collection-process-list li.active > span { color: #fff; background: var(--blue); }
.collection-process-list h3 { color: var(--heading); font-size: 20px; margin-bottom: 8px; }
.collection-process-list p { color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.65; margin: 0; }
.collection-report-card { position: relative; width: 630px; height: 645px; max-width: 100%; border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 16px 32px rgba(20, 28, 40, .08); overflow: hidden; }
.collection-report-track { position: relative; width: 100%; height: 100%; }
.collection-report-slide { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.collection-report-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.collection-report-slide img { width: 100%; height: 100%; object-fit: contain; }
.collection-knowledge-section { padding: 64px; background: var(--card); }
.collection-knowledge-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.collection-knowledge-card { padding: 32px; border-radius: var(--radius-md); background: var(--bg); }
.collection-knowledge-card img { width: 100%; height: 220px; border-radius: 10px; object-fit: cover; margin-bottom: 24px; }
.collection-knowledge-card h3 { color: var(--heading); font-size: 22px; line-height: 1.35; margin-bottom: 16px; }
.collection-knowledge-card p { color: var(--text-secondary); font-size: 16px; line-height: 1.65; margin-bottom: 8px; }
.collection-qa-section { padding: 64px; background: var(--bg); }
.collection-qa-grid { max-width: 1440px; margin: 0 auto 70px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.collection-qa-grid h3 { color: var(--heading); font-size: 20px; line-height: 1.45; margin-bottom: 16px; }
.collection-qa-grid p { color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.75; margin: 0; }
.collection-bottom-button { width: 176px; height: var(--btn-height); margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-xs); color: #fff; background: var(--orange); font-size: var(--font-lg); font-weight: var(--weight-medium); cursor: pointer; }
.collection-apply-layer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: rgba(20, 28, 40, .52); overflow-y: auto; }
.collection-apply-dialog { width: min(480px, calc(100vw - 40px)); margin: auto; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-modal); }
.collection-apply-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.collection-apply-head h2 { color: var(--heading); font-size: var(--font-xl); line-height: var(--leading-snug); margin: 0; font-weight: var(--weight-medium); }
.collection-apply-head button,
.collection-apply-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; color: var(--placeholder); background: transparent; cursor: pointer; }
.collection-apply-x svg { width: 20px; height: 20px; }
.collection-apply-form { padding: 20px 24px 0; display: grid; gap: 16px; }
.collection-apply-form p { margin: 0; color: var(--text-tertiary); font-size: var(--font-sm); line-height: 1.4; }
.collection-apply-form label { display: grid; gap: 8px; color: var(--ink); font-size: var(--font-sm); line-height: 1.25; font-weight: var(--weight-medium); }
.collection-apply-form em { color: var(--error); font-style: normal; }
.collection-apply-form input { width: 100%; height: var(--btn-height-sm); padding: 0 var(--space-md); border: 1px solid var(--border-input); border-radius: var(--radius-sm); outline-color: var(--orange); color: var(--ink); background: var(--card); font-size: var(--font-sm); }
.collection-apply-form input::placeholder { color: var(--placeholder); }
.collection-apply-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin: 4px -24px 0; padding: 16px 24px; background: var(--bg); }
.collection-apply-actions button { min-width: 88px; height: var(--btn-height-sm); border-radius: var(--radius-sm); font-size: var(--font-sm); font-weight: var(--weight-medium); cursor: pointer; }
.collection-apply-close { border: 1px solid var(--border-input); color: var(--text-secondary); background: var(--card); }
.collection-apply-submit { border: 0; color: #fff; background: var(--orange); }
@media (max-width: 1200px) {
  .collection-advantages, .collection-knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-process-wrap { grid-template-columns: 1fr; gap: 60px; }
  .collection-report-card { width: min(630px, 100%); height: auto; aspect-ratio: 630 / 645; margin: 0 auto; }
  .collection-apply-layer { padding-top: 20px; }
}
@media (max-width: 760px) {
  .collection-hero {
    --collection-video-right: 20px;
    --collection-video-bottom: 24px;
    --collection-video-top-gap: 120px;
    --collection-video-w: min(58vw, calc((var(--collection-hero-h) - var(--collection-video-bottom) - var(--collection-video-top-gap)) * 624 / 351));
    background-size: cover;
    background-position: center top;
  }
  .collection-hero-copy { width: min(58%, 360px); padding: 0 12px 0 20px; }
  .collection-hero-copy h1 { font-size: 26px; margin-bottom: 14px; }
  .collection-hero-copy ul { gap: 8px; margin-bottom: 18px; font-size: 12px; }
  .collection-hero-copy li { white-space: normal; }
  .collection-hero-button { width: 96px; height: 36px; font-size: 14px; }
  .collection-hero-video { top: auto; }
  .collection-video-play { width: 54px; max-width: 54px; }
  .collection-advantages, .collection-process-section, .collection-knowledge-section, .collection-qa-section { padding-left: 20px; padding-right: 20px; }
  .collection-advantages, .collection-knowledge-grid, .collection-qa-grid { grid-template-columns: 1fr; gap: 24px; }
  .collection-process-section > h2, .collection-knowledge-section > h2, .collection-qa-section > h2 { font-size: 24px; margin-bottom: 42px; }
  .collection-process-list li { grid-template-columns: 60px 1fr; }
  .collection-knowledge-card img { height: 220px; }
  .collection-apply-layer { padding: 14px; }
  .collection-apply-dialog { width: 100%; border-radius: var(--radius-md); }
  .collection-apply-head { min-height: 52px; padding: 0 16px; }
  .collection-apply-head h2 { font-size: var(--font-lg); }
  .collection-apply-form { padding: 16px 16px 0; gap: 14px; }
  .collection-apply-actions { margin: 4px -16px 0; padding: 14px 16px; gap: 10px; }
  .collection-apply-actions button { min-width: 0; flex: 1; }
}
body:has(.about-page) { background: var(--card); }
.about-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  background: var(--card);
  color: var(--ink);
}
.about-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.about-hero { height: 400px; background: url("../assets/images/about/hero.jpg") center / cover no-repeat; }
.about-feature-section { padding: 64px 96px; background: var(--bg); }
.about-feature-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.about-feature-card { padding: 28px 32px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(20, 28, 40, .03); }
.about-feature-card span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: #fff1e9; color: var(--orange); margin-bottom: 20px; }
.about-feature-card h2 { color: var(--heading); font-size: 20px; margin: 0 0 12px; }
.about-feature-card p { color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.65; margin: 0; }
.about-intro-section { padding: 64px 96px; background: var(--card); }
.about-section-head { text-align: center; margin-bottom: 48px; }
.about-section-head h2 { color: var(--heading); font-size: 30px; line-height: var(--leading-snug); margin: 0 0 16px; }
.about-section-head p { color: var(--text-tertiary); font-size: var(--font-lg); margin: 0; }
.about-intro-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-intro-grid img { width: 100%; height: 360px; border-radius: 10px; object-fit: cover; box-shadow: 0 12px 28px rgba(20, 28, 40, .08); }
.about-intro-copy p { color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.75; margin: 0 0 var(--space-md); }
.about-intro-copy ul { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.about-intro-copy li { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: var(--font-lg); }
.about-intro-copy li svg { color: var(--orange); stroke-width: 3; flex: none; }
.about-advantage-section { padding: 64px 96px; background: var(--bg); }
.about-stat-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; }
.about-stat strong { display: block; color: var(--orange); font-size: 28px; line-height: 1.1; margin-bottom: 10px; }
.about-stat span { color: var(--text-tertiary); font-size: var(--font-lg); }
.about-partner-section { padding: 64px 96px; background: var(--card); }
.about-partner-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.about-partner { height: 72px; display: grid; place-items: center; border-radius: 10px; background: var(--bg-subtle); color: var(--placeholder); font-size: 18px; font-weight: var(--weight-bold); font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.about-contact-section { padding: 64px 96px; background: var(--bg); }
.about-contact-card { max-width: 1440px; margin: 0 auto; padding: 40px 48px 48px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(20, 28, 40, .04); }
.about-contact-card .about-section-head { margin-bottom: 32px; }
.about-contact-grid { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; }
.about-contact-grid a,
.about-contact-grid span { display: inline-flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: var(--font-lg); text-decoration: none; }
.about-contact-grid a:hover { color: var(--orange); }
.about-contact-grid svg { width: 22px; height: 22px; color: var(--orange); fill: color-mix(in srgb, var(--orange) 8%, transparent); flex: none; }
@media (max-width: 1200px) {
  .about-hero { height: 360px; }
  .about-feature-section, .about-intro-section, .about-advantage-section, .about-partner-section, .about-contact-section { padding-left: 56px; padding-right: 56px; }
  .about-feature-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-intro-grid img { height: auto; }
  .about-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .about-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .about-hero { height: 260px; background-position: center; }
  .about-feature-section, .about-intro-section, .about-advantage-section, .about-partner-section, .about-contact-section { padding: 48px 20px; }
  .about-section-head { margin-bottom: 32px; }
  .about-section-head h2 { font-size: 26px; }
  .about-stat-grid, .about-partner-grid { grid-template-columns: 1fr; }
  .about-contact-card { padding: 28px 20px; }
  .about-contact-grid { align-items: flex-start; flex-direction: column; gap: 16px; }
}
body:has(.teacher-recruit-page) { background: var(--card); }
.teacher-recruit-page { background: var(--card); color: var(--ink); }
.teacher-recruit-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.teacher-recruit-hero { position: relative; display: flex; align-items: center; height: 560px; background: url("../assets/images/teacher-recruit/hero.jpg") center / cover no-repeat; }
.teacher-recruit-hero-copy { box-sizing: border-box; width: min(720px, 100%); padding: 48px 24px 48px 96px; color: var(--ink); }
.teacher-recruit-hero-copy h1 { margin: 0 0 var(--space-md); color: var(--heading); font-size: var(--font-3xl); line-height: var(--leading-snug); font-weight: var(--weight-black); }
.teacher-recruit-hero-lead { margin: 0 0 var(--space-xl); color: var(--text-secondary); font-size: var(--font-lg); line-height: 1.7; }
.teacher-recruit-join-button { width: 120px; height: var(--btn-height-sm); display: inline-flex; align-items: center; justify-content: center; margin: 0 0 var(--space-2xl); border: 0; border-radius: var(--radius-xs); color: #fff; background: var(--blue); font-size: var(--font-base); font-weight: var(--weight-medium); cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.teacher-recruit-join-button:hover { background: var(--blue-dark); box-shadow: 0 8px 18px rgba(18, 98, 255, .22); }
.teacher-recruit-join-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.teacher-recruit-hero-points { display: grid; gap: var(--space-md); margin: 0; }
.teacher-recruit-hero-points div { margin: 0; }
.teacher-recruit-hero-points dt { display: inline; margin: 0; color: var(--heading); font-size: var(--font-base); font-weight: var(--weight-bold); }
.teacher-recruit-hero-points dd { display: inline; margin: 0; color: var(--text-secondary); font-size: var(--font-base); line-height: 1.7; }
.teacher-recruit-benefits { padding: 64px 0; background: var(--card); }
.teacher-recruit-head { max-width: 1440px; margin: 0 auto 48px; padding: 0 96px; text-align: center; }
.teacher-recruit-head h2, .teacher-recruit-contact h2 { color: var(--heading); font-size: 28px; line-height: var(--leading-snug); margin: 0 0 var(--space-md); }
.teacher-recruit-head p { color: var(--text-tertiary); font-size: var(--font-lg); margin: 0; letter-spacing: .02em; }
.teacher-recruit-benefit-grid { max-width: 1440px; margin: 0 auto; padding: 0 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.teacher-recruit-benefit-card { padding: 28px 32px; border-radius: var(--radius-md); background: #eef6ff; }
.teacher-recruit-benefit-title { display: flex; align-items: center; gap: var(--space-md); margin-bottom: 20px; }
.teacher-recruit-benefit-title svg { color: var(--blue); flex: none; stroke-width: 2.6; width: 28px; height: 28px; }
.teacher-recruit-benefit-title h3 { color: var(--heading); font-size: 20px; line-height: 1.3; margin: 0; font-weight: var(--weight-bold); }
.teacher-recruit-benefit-card p { color: var(--text-secondary); font-size: var(--font-base); line-height: 1.65; margin: 0 0 8px; }
.teacher-recruit-benefit-card p:last-child { margin-bottom: 0; }
.teacher-recruit-contact { padding: 64px 0; background: var(--bg); }
.teacher-recruit-contact h2 { max-width: 1440px; margin: 0 auto 48px; padding: 0 96px; text-align: center; }
.teacher-recruit-contact-grid { max-width: 1440px; margin: 0 auto; padding: 0 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.teacher-recruit-contact-card, .teacher-recruit-qr-card { min-height: 320px; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.teacher-recruit-contact-card { padding: 40px 48px; display: grid; gap: 32px; }
.teacher-recruit-contact-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--space-md); color: var(--blue); }
.teacher-recruit-contact-row span { display: block; color: var(--text-meta); font-size: var(--font-sm); margin-bottom: 6px; }
.teacher-recruit-contact-row strong { display: block; color: var(--ink); font-size: var(--font-xl); line-height: 1.25; }
.teacher-recruit-qr-card { display: grid; place-items: center; align-content: center; gap: var(--space-xl); padding: 40px 32px; }
.teacher-recruit-qr-box { width: 160px; height: 160px; display: block; object-fit: contain; background: transparent; }
.teacher-recruit-qr-card p { color: var(--text-secondary); font-size: var(--font-lg); margin: 0; }
.teacher-join-layer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px 20px; background: rgba(20, 28, 40, .52); overflow-y: auto; }
.teacher-join-dialog { width: min(480px, calc(100vw - 40px)); height: 510px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-modal); }
.teacher-join-head { flex: none; min-height: 64px; display: flex; align-items: center; padding: 0 28px; border-bottom: 1px solid var(--border); }
.teacher-join-head h2 { color: var(--heading); font-size: 22px; line-height: 1.25; margin: 0; font-weight: var(--weight-medium); }
.teacher-join-body { flex: 1; min-height: 0; padding: 28px 28px 20px; overflow-y: auto; }
.teacher-join-body h3 { color: var(--text-secondary); font-size: 16px; line-height: 1.25; margin: 0 0 28px; font-weight: var(--weight-medium); }
.teacher-join-list { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.teacher-join-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; }
.teacher-join-row > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #edf3ff; }
.teacher-join-row em { display: block; color: var(--text-meta); font-style: normal; font-size: 13px; line-height: 1.25; margin-bottom: 6px; }
.teacher-join-row strong { display: block; color: var(--ink); font-size: 16px; line-height: 1.35; font-weight: var(--weight-normal); overflow-wrap: anywhere; }
.teacher-join-actions { flex: none; min-height: 72px; display: flex; align-items: center; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg); }
.teacher-join-close { min-width: 88px; height: var(--btn-height-sm); padding: 0 24px; border: 0; border-radius: var(--radius-sm); color: #fff; background: var(--blue); font-size: var(--font-sm); font-weight: var(--weight-medium); cursor: pointer; }
.teacher-join-close:hover { background: var(--blue-dark); }
@media (max-width: 1100px) {
  .teacher-recruit-hero { height: auto; min-height: 430px; background-size: cover; background-position: center top; }
  .teacher-recruit-hero-copy { padding: 40px 32px; }
  .teacher-recruit-hero-copy h1 { font-size: 34px; }
  .teacher-recruit-hero-lead { font-size: 16px; }
  .teacher-recruit-head, .teacher-recruit-benefit-grid, .teacher-recruit-contact h2, .teacher-recruit-contact-grid { padding-left: 32px; padding-right: 32px; }
  .teacher-recruit-benefit-grid, .teacher-recruit-contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .teacher-recruit-contact-card { padding: 32px; }
}
@media (max-width: 640px) {
  .teacher-recruit-hero { min-height: 0; height: auto; background-size: cover; background-position: center top; }
  .teacher-recruit-hero-copy { padding: 32px 20px 40px; }
  .teacher-recruit-hero-copy h1 { font-size: 28px; margin-bottom: 12px; }
  .teacher-recruit-hero-lead { font-size: 15px; margin-bottom: 20px; }
  .teacher-recruit-join-button { width: 112px; height: 40px; margin-bottom: 24px; font-size: 15px; }
  .teacher-recruit-hero-points { gap: 12px; }
  .teacher-recruit-hero-points dt, .teacher-recruit-hero-points dd { font-size: 14px; }
  .teacher-recruit-benefits, .teacher-recruit-contact { padding: 48px 0; }
  .teacher-recruit-head, .teacher-recruit-benefit-grid, .teacher-recruit-contact h2, .teacher-recruit-contact-grid { padding-left: 20px; padding-right: 20px; }
  .teacher-recruit-head { margin-bottom: 32px; }
  .teacher-recruit-contact h2 { margin-bottom: 32px; }
  .teacher-recruit-head h2, .teacher-recruit-contact h2 { font-size: 24px; }
  .teacher-recruit-head p, .teacher-recruit-benefit-card p { font-size: 15px; }
  .teacher-recruit-benefit-card { padding: 24px; }
  .teacher-recruit-benefit-title { gap: 12px; margin-bottom: 16px; }
  .teacher-recruit-benefit-title h3 { font-size: 18px; }
  .teacher-recruit-contact-card { padding: 28px 24px; gap: 24px; }
  .teacher-recruit-contact-row strong { font-size: 14px; }
  .teacher-recruit-qr-box { width: 140px; height: 140px; }
  .teacher-recruit-qr-card { min-height: 0; padding: 32px 24px; gap: 20px; }
  .teacher-join-layer { padding: 16px; }
  .teacher-join-dialog { width: 100%; height: auto; min-height: 0; max-height: calc(100vh - 32px); border-radius: var(--radius-md); }
  .teacher-join-head { min-height: 56px; padding: 0 20px; }
  .teacher-join-head h2 { font-size: 18px; }
  .teacher-join-body { padding: 24px 20px; }
  .teacher-join-body h3 { font-size: 15px; margin-bottom: 20px; }
  .teacher-join-list { gap: 20px; }
  .teacher-join-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .teacher-join-row > span { width: 40px; height: 40px; }
  .teacher-join-row > span svg { width: 18px; height: 18px; }
  .teacher-join-row em { font-size: 12px; }
  .teacher-join-row strong { font-size: 15px; }
  .teacher-join-actions { min-height: 64px; padding: 14px 16px; }
  .teacher-join-close { flex: 1; min-width: 0; }
}
body:has(.credit-report-page) { background: #f5f7fa; }
.credit-report-page { background: #f5f7fa; color: #1f2937; }
.credit-hero { height: 700px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); align-items: center; gap: 110px; padding: 72px 112px 80px; background: linear-gradient(90deg, #262626 0%, #383838 45%, #696969 100%); }
.credit-hero-copy p { color: #ff6933; font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.credit-hero-copy h1 { color: #fff; font-size: 60px; line-height: 1.18; font-weight: 400; margin-bottom: 32px; letter-spacing: .02em; }
.credit-hero-copy h2 { color: rgba(255,255,255,.88); font-size: 20px; line-height: 1.75; font-weight: 400; margin-bottom: 48px; }
.credit-video-button { width: 162px; height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 4px; color: #fff; background: rgba(255,255,255,.12); font-size: 21px; cursor: pointer; }
.credit-hero-tags { display: flex; align-items: center; gap: 32px; margin-top: 48px; color: rgba(255,255,255,.74); font-size: 16px; white-space: nowrap; }
.credit-hero-tags span { display: inline-flex; align-items: center; gap: 12px; }
.credit-hero-tags svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: #333; background: #ff6933; stroke-width: 4; }
.credit-video-word { color: rgba(0,0,0,.24); font-size: 88px; justify-self: center; }
.credit-sample-section { padding: 64px 0; background: #f5f7fa; }
.credit-sample-section > h2, .credit-purchase-section > h2, .credit-notes-section > h2 { color: #050505; text-align: center; font-size: 35px; line-height: 1.25; margin-bottom: 64px; }
.credit-purchase-section > h2 { margin-bottom: 64px; }
.credit-sample-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.credit-sample-card { padding: 24px 26px 30px; border-radius: 12px; background: #fff; border: 1px solid #e9edf3; box-shadow: 0 8px 18px rgba(20, 28, 40, .04); }
.credit-sample-card img { width: 100%; height: 218px; object-fit: fill; border-radius: 10px; margin-bottom: 16px; }
.credit-sample-card h3 { color: #111827; font-size: 18px; margin-bottom: 8px; }
.credit-sample-card p { color: #6b7280; font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
.credit-sample-card button { width: 100%; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; border: 1px solid #244b7d; color: #244b7d; background: #fff; font-size: 16px; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.credit-sample-card button:hover { color: #fff; background: #244b7d; border-color: #244b7d; box-shadow: 0 6px 14px rgba(36, 75, 125, .22); }
.credit-sample-card button:active { background: #1c3c66; border-color: #1c3c66; box-shadow: none; }
.credit-sample-card button:focus-visible { outline: 2px solid #244b7d; outline-offset: 2px; }
.credit-purchase-section { padding: 64px; background: #eef2f6; }
.credit-purchase-card { max-width: 1440px; margin: 0 auto; padding: 32px 30px 38px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px rgba(20, 28, 40, .04); overflow-x: auto; }
.credit-tabs { display: flex; align-items: center; gap: 52px; border-bottom: 1px solid #d7dde6; margin-bottom: 36px; min-width: 920px; }
.credit-tabs button { position: relative; height: 54px; border: 0; background: transparent; color: #697386; font-size: 18px; cursor: pointer; transition: color .18s ease; }
.credit-tabs button:hover { color: #244b7d; }
.credit-tabs button.active { color: #244b7d; }
.credit-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #244b7d; }
.credit-tabs button:focus-visible { outline: 2px solid #244b7d; outline-offset: 2px; }
.credit-table { width: 100%; min-width: 920px; table-layout: fixed; border-collapse: collapse; color: #4b5563; font-size: 17px; }
.credit-table col:nth-child(1) { width: 12%; }
.credit-table col:nth-child(2) { width: 14%; }
.credit-table col:nth-child(3) { width: 22%; }
.credit-table col:nth-child(4) { width: 10%; }
.credit-table col:nth-child(5) { width: 10%; }
.credit-table col:nth-child(6) { width: 16%; }
.credit-table col:nth-child(7) { width: 16%; }
.credit-table th { height: 58px; padding: 0 18px; text-align: left; color: #4b5563; background: #f6f7f9; font-weight: 800; }
.credit-table td { height: 72px; padding: 0 18px; border-bottom: 1px solid #dfe4ec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-table tbody tr:last-child td { border-bottom: 0; }
.credit-table td:nth-child(6) { color: #244b7d; font-weight: 900; }
.credit-table a, .credit-table .credit-apply-button { width: 56px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; color: #fff; background: #244b7d; font-size: 16px; cursor: pointer; }
.credit-notes-section { padding: 64px; background: #f5f7fa; }
.credit-notes-card { max-width: 1440px; margin: 0 auto; padding: 38px 34px; border-radius: 10px; background: #e5f0fb; }
.credit-notes-card p { display: flex; align-items: center; gap: 20px; color: #4b5563; font-size: 19px; line-height: 1.6; margin: 0 0 26px; }
.credit-notes-card p:last-child { margin-bottom: 0; }
.credit-notes-card svg { color: #438de6; fill: rgba(67, 141, 230, .12); flex: none; }
@media (max-width: 1200px) {
  .credit-hero { grid-template-columns: 1fr; gap: 40px; padding: 64px 32px; }
  .credit-hero-tags { flex-wrap: wrap; gap: 24px; margin-top: 70px; }
  .credit-purchase-section, .credit-notes-section { padding-left: 32px; padding-right: 32px; }
  .credit-sample-grid { grid-template-columns: 1fr; padding: 0 32px; }
}
@media (max-width: 640px) {
  .credit-hero { min-height: 560px; padding: 44px 20px; }
  .credit-hero-copy h1 { font-size: 42px; }
  .credit-hero-copy h2 { font-size: 18px; }
  .credit-hero-tags { align-items: flex-start; flex-direction: column; margin-top: 44px; }
  .credit-video-word { display: none; }
  .credit-purchase-section, .credit-notes-section { padding-left: 20px; padding-right: 20px; }
  .credit-sample-grid { padding: 0 20px; }
  .credit-sample-section > h2, .credit-purchase-section > h2, .credit-notes-section > h2 { font-size: 30px; }
  .credit-notes-card p { align-items: flex-start; font-size: 16px; }
}
.float-rail { position: fixed; right: 28px; top: 58%; transform: translateY(-50%); z-index: 15; width: 58px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); overflow: hidden; }
.float-rail a,
.float-rail button.qr-float-item { width: 100%; height: 58px; display: grid; place-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid #edf0f4; color: #4b5563; background: #fff; font-size: 12px; cursor: pointer; text-decoration: none; transition: color .25s ease; }
.float-rail a svg,
.float-rail button.qr-float-item svg { width: 18px; height: 18px; color: currentColor; transition: color .25s ease; }
.float-rail a:hover,
.float-rail a:focus-visible,
.float-rail button.qr-float-item:hover,
.float-rail button.qr-float-item:focus-visible,
.float-rail button.qr-float-item.follow-trigger-pressed { color: var(--orange); background: #fff; outline: none; }
.footer {
  width: 100%;
  box-sizing: border-box;
  background: var(--footer-bg);
  padding: 64px 16px 34px;
}
.footer-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .7fr 1.1fr 1fr;
  gap: 40px;
  color: #697386;
  padding-top: 0;
  border-top: 0;
}
.footer-logo img { width: 88px; }
.footer h3 { color: #202938; font-size: 17px; margin: 0 0 20px; line-height: 1.3; font-weight: 700; }
.footer-col > a,
.footer-col > p { display: block; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #697386; }
.footer-col > a:last-child,
.footer-col > p:last-child { margin-bottom: 0; }
.footer a { transition: color .18s ease; }
.footer a:hover { color: var(--orange); }
.footer-partners { margin: 0; }
.footer-partners a { display: inline; margin: 0; font-size: 14px; }
.footer-partners a:hover { color: var(--orange); }
.footer-partners-label { color: #697386; }
.qr-row { display: flex; gap: 32px; justify-content: flex-end; }
.qr-row img { width: 88px; height: 88px; margin-bottom: 8px; }
.qr-row span { display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.record { grid-column: 1/-1; text-align: center; border-top: 1px solid #e5e7eb; padding-top: 30px; margin-top: 48px; font-size: 13px; line-height: 2; }
.record-badge-line { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.record-badge-line img { width: 16px; height: 16px; flex: none; object-fit: contain; }
@media (max-width: 1000px) {
  .header-inner { gap: 14px; }
  .hero { height: auto; }
  .hero-inner, .detail-grid__body, .split, .story-rank, .admin-shell, .footer-inner { grid-template-columns: 1fr; }
  .buy-card { position: static; }
  .course-preview-player { height: 460px; }
  .course-detail-page .course-preview-player { height: auto; }
  .account-page { grid-template-columns: 1fr; }
  .account-sidebar { min-height: auto; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 0; border-right: 0; border-bottom: 1px solid #edf0f4; }
  .account-sidebar a { height: 48px; justify-content: center; padding: 0 8px; font-size: 13px; gap: 6px; }
  .account-main { padding: 20px 16px 40px; }
  .account-overview-grid, .account-progress-grid { grid-template-columns: 1fr; }
  .account-orders { overflow-x: auto; }
  .account-orders table { min-width: 720px; }
  .settings-main { padding: 20px 16px 40px; }
  .settings-card { min-height: auto; padding: 20px; }
  .settings-row { grid-template-columns: 80px minmax(0, 1fr); }
  .settings-card > button { margin-left: 92px; }
  .orders-main { padding: 20px 16px 40px; }
  .orders-card { padding: 20px 16px; }
  .orders-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .orders-tools { width: 100%; }
  .orders-search { flex: 1; width: auto; }
  .orders-tabs { gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .orders-tabs button { flex: none; }
  .favorites-main { padding: 20px 16px 40px; }
  .favorites-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
  .favorites-tools { width: 100%; }
  .favorites-search { flex: 1; width: auto; }
  .favorites-grid { gap: 16px; }
  .favorite-category-dialog { width: min(440px, calc(100vw - 32px)); padding: 20px; }
  .favorite-category-head { margin-bottom: 16px; }
  .favorite-category-head h2 { font-size: 17px; }
  .favorite-category-field { height: 40px; }
  .favorite-category-field input { font-size: 14px; }
  .favorite-category-actions button { width: 88px; height: 36px; font-size: 13px; }
  .hero-inner { padding: 60px 18px; }
  .course-grid, .category-grid, .teacher-grid, .service-grid, .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site-header { height: auto; }
  .brand img { width: 86px; }
  .vip-button { height: 42px; min-width: 88px; font-size: 16px; }
  .course-preview-player { height: 260px; border-radius: 10px; }
  .course-detail-page .course-preview-player { height: auto; border-radius: var(--radius-sm); }
  .course-preview-screen { width: calc(100% - 32px); min-height: 150px; padding: 22px; }
  .course-preview-screen strong { font-size: 22px; }
  .course-preview-ended { padding: 22px; }
  .course-preview-ended h2 { font-size: 28px; }
  .course-preview-ended p { font-size: 15px; }
  .course-preview-ended > div { flex-direction: column; width: min(260px, 100%); }
  .course-preview-ended .primary-btn, .course-preview-ended .ghost-btn { width: 100%; }
  .action-grid { grid-template-columns: 1fr; }
  .course-detail-page .buy-card h1 { font-size: 18px; }
  .course-detail-page .action-grid a,
  .course-detail-page .action-grid button { height: 64px; }
  h1 { font-size: 32px; }
  .hero h1 { font-size: 34px; }
  .account-sidebar { grid-template-columns: repeat(2, 1fr); }
  .account-sidebar a { justify-content: flex-start; padding: 0 14px; font-size: 14px; }
  .account-profile-head { gap: 16px; }
  .account-avatar-wrap, .account-avatar-wrap img { width: 72px; height: 72px; }
  .account-avatar-wrap button { width: 32px; height: 32px; }
  .account-profile-head h1 { font-size: 20px; }
  .account-profile-head p, .account-basic dt, .account-basic dd, .account-stats span { font-size: 13px; }
  .account-basic, .account-stats, .account-orders, .account-progress { padding: 18px 16px; }
  .account-basic dl div { grid-template-columns: 72px minmax(0, 1fr); }
  .account-stats > div { height: auto; grid-template-columns: 1fr; gap: 16px; padding-top: 12px; }
  .account-stats strong { font-size: 22px; }
  .account-orders th, .account-orders td { font-size: 13px; }
  .account-panel h2 { font-size: 16px; }
  .settings-main { padding: 16px 12px 36px; }
  .settings-card { padding: 18px 14px; }
  .settings-card h1 { margin-bottom: 18px; font-size: 18px; }
  .settings-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
  .settings-row span { font-size: 13px; }
  .settings-row input { height: 40px; font-size: 14px; }
  .settings-card > button { width: 100%; margin: 4px 0 0; }
  .orders-main { padding: 16px 12px 36px; }
  .orders-card { min-height: auto; padding: 16px 12px; }
  .orders-head h1 { font-size: 20px; }
  .orders-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .orders-search, .orders-tools > button { width: 100%; height: 40px; }
  .orders-tabs button { height: 34px; padding: 0 12px; font-size: 13px; }
  .orders-footer { align-items: flex-start; flex-direction: column; }
  .orders-pagination { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .favorites-main { padding: 16px 12px 36px; }
  .favorites-head h1 { font-size: 20px; }
  .favorites-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .favorites-search, .favorites-tools > button { width: 100%; height: 40px; }
  .favorite-body { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .favorite-body button { width: 128px; }
  .favorite-category-layer { padding: 14px; }
  .favorite-category-dialog { width: 100%; padding: 18px 16px; }
  .favorite-category-head { margin-bottom: 16px; }
  .favorite-category-head h2 { font-size: 16px; }
  .favorite-category-head button { width: 32px; height: 32px; }
  .favorite-category-field { height: 40px; padding: 0 12px; }
  .favorite-category-field input { font-size: 14px; }
  .favorite-category-field span { font-size: 12px; }
  .favorite-category-actions { gap: 10px; margin-top: 16px; }
  .favorite-category-actions button { flex: 1; width: auto; height: 40px; font-size: 14px; }
  .course-grid, .category-grid, .teacher-grid, .service-grid, .metric-grid, .video-grid { grid-template-columns: 1fr; }
  .teacher-card { grid-template-columns: 1fr; }
  .footer-inner { gap: 24px; }
  .qr-row { justify-content: flex-start; }
}
.timeline { display: grid; gap: 16px; padding: 0; margin: 0; counter-reset: step; }
.timeline li { list-style: none; position: relative; padding: 18px 18px 18px 58px; border-radius: 12px; background: #f8f9fb; color: #4b5563; }
.timeline li::before { counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 900; }
.tabs .tab { color: #667085; border-bottom: 0; cursor: pointer; }
.tabs .tab.active { color: var(--blue); border-bottom: 3px solid var(--blue); }
.home-ranking { position: relative; min-height: 560px; }
.ranking-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ranking-title-row { display: flex; align-items: center; gap: 28px; position: relative; }
.ranking-title-row h2 { margin: 0; font-size: 30px; }
.category-filter { position: relative; }
.category-trigger { height: 48px; padding: 0 20px; border: 0; border-radius: 8px; background: #f8f9fb; color: #343d4f; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; cursor: pointer; }
.rank-tabs { display: flex; align-items: center; gap: 14px; }
.rank-tabs button { height: 48px; padding: 0 22px; border: 0; border-radius: 8px; color: #4b5563; background: #f8f9fb; font-size: 17px; cursor: pointer; }
.rank-tabs button.active { color: #fff; background: var(--orange); }
.ranking-body { position: relative; display: block; }
.ranking-list-redesign { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
.ranking-list-redesign li { min-height: 56px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 16px; padding: 0 22px; border-radius: 12px; background: #f9fafc; color: #2f3a4c; font-size: 17px; }
.ranking-list-redesign b { color: #aab3c1; font-size: 22px; font-style: normal; }
.ranking-list-redesign b.top { color: var(--orange); }
.ranking-list-redesign em { color: #8b95a5; font-style: normal; white-space: nowrap; }
.category-dropdown { position: absolute; left: 0; top: calc(100% + 14px); z-index: 12; width: 186px; display: none; padding-top: 0; }
.category-filter:hover .category-dropdown { display: block; }
.category-menu-card { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(20, 28, 40, .08); }
.category-menu-card button, .category-menu-card a { width: 100%; height: 56px; padding: 0 18px; border: 0; border-bottom: 1px solid #f0f2f5; background: #fff; display: flex; align-items: center; gap: 12px; color: #424b5b; font-size: 17px; font-weight: 700; cursor: pointer; }
.category-menu-card button:last-child, .category-menu-card a:last-child { border-bottom: 0; }
.category-menu-card button svg, .category-menu-card a svg { color: #424b5b; }
.category-menu-card button.selected, .category-menu-card a.selected { color: #424b5b; }
.category-menu-card button.selected svg, .category-menu-card a.selected svg { color: #424b5b; }
.category-menu-card button:hover, .category-menu-card a:hover { background: #fff7f4; color: var(--orange); }
.category-menu-card button:hover svg, .category-menu-card a:hover svg { color: var(--orange); }
@media (max-width: 1000px) {
  .ranking-toolbar { align-items: flex-start; flex-direction: column; }
  .category-dropdown { width: 186px; }
}
@media (max-width: 640px) {
  .ranking-title-row, .rank-tabs { width: 100%; justify-content: space-between; gap: 10px; }
  .ranking-list-redesign li { grid-template-columns: 28px 1fr; }
  .ranking-list-redesign em { grid-column: 2; }
}
.nav-dropdown { position: relative; height: 88px; display: flex; align-items: center; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-menu { position: absolute; top: 76px; left: 0; z-index: 30; display: none; padding-top: 10px; }
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { display: block; }
.nav-menu p { margin: 0 0 8px; color: #b8bec8; font-size: 14px; font-weight: 400; }
.nav-menu-card { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 16px 42px rgba(20, 28, 40, .12); border: 1px solid #eef1f5; }
.nav-course-menu { width: 320px; }
.nav-business-menu { width: 320px; }
.nav-menu-card a,
.nav-menu-card button,
.nav-menu-card summary { min-height: 56px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #f0f2f5; color: #424b5b; font-size: 16px; font-weight: 700; background: #fff; }
.nav-menu-card a:last-child, .nav-menu-card button:last-child { border-bottom: 0; }
.nav-menu-card button { width: 100%; border-left: 0; border-right: 0; border-top: 0; font: inherit; cursor: pointer; }
.nav-menu-card a:hover, .nav-menu-card button:hover { background: #fff7f4; color: var(--orange); }
.nav-menu-card summary:hover { background: #fff; color: #2f3a4c; }
.nav-menu-card a span,
.nav-menu-card button span,
.nav-menu-card summary span,
.nav-menu-card .nav-menu-heading span { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.nav-menu-card a svg,
.nav-menu-card button svg,
.nav-menu-card summary svg,
.nav-menu-card .nav-menu-heading svg { color: currentColor; flex: none; }
.nav-menu-card a.selected, .nav-menu-card button.selected { color: var(--orange); }
.nav-menu-card .nav-menu-parent { height: 64px; color: #2f3a4c; }
.nav-menu-card .nav-sub-row { background: #f8f9fb; color: #5f6877; font-weight: 600; }
.nav-menu-card .nav-sub-row em { color: #a7afbd; font-size: 14px; font-style: normal; font-weight: 500; white-space: nowrap; }
.nav-menu-card .nav-sub-row.selected { color: var(--orange); }
.nav-course-menu .nav-menu-card a,
.nav-course-menu .nav-menu-card button,
.nav-course-menu .nav-menu-card summary { min-height: 46px; padding: 0 16px; gap: 12px; font-size: 15px; }
.nav-course-menu .nav-menu-card .nav-menu-parent { height: 52px; }
.nav-course-menu .nav-menu-card a span,
.nav-course-menu .nav-menu-card button span,
.nav-course-menu .nav-menu-card summary span { gap: 10px; }
.nav-course-menu .nav-menu-card .nav-sub-row em { font-size: 13px; }
.ranking-category-dropdown { height: 48px; position: relative; z-index: 20; }
.ranking-category-dropdown .nav-menu { top: 100%; padding-top: 14px; z-index: 40; }
.ranking-category-dropdown.is-closing .nav-menu { display: none !important; }
.ranking-category-trigger {
  height: 48px;
  max-width: 160px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: #f8f9fb;
  color: #343d4f;
  font-size: 17px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-category-trigger:hover { color: var(--orange); background: #fff7f4; }
.ranking-category-trigger.has-selection {
  color: var(--orange);
  background: #fff7f4;
  font-weight: 700;
}
.home-story-rank .ranking-category-dropdown .nav-menu-card button.selected {
  color: var(--orange);
  background: #fff7f4;
}
.nav-menu-group { border-bottom: 1px solid #f0f2f5; }
.nav-menu-group:hover .nav-menu-parent,
.nav-menu-group:focus-within .nav-menu-parent { color: #2f3a4c; }
.nav-menu-card .nav-menu-group .nav-menu-parent { border-bottom: 0; cursor: default; list-style: none; }
.nav-menu-card .nav-menu-group .nav-menu-parent::-webkit-details-marker { display: none; }
.nav-menu-group .nav-sub-row:last-child { border-bottom: 0; }
.nav-menu-group .nav-collapse-icon { width: 28px; height: 28px; padding: 5px; cursor: pointer; pointer-events: auto; transition: transform .18s ease; }
.nav-menu-group[open] .nav-collapse-icon { transform: rotate(180deg); }
.nav-business-menu { width: 320px; }
.nav-business-menu .nav-menu-card {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 28, 40, .1);
}
.nav-business-menu .nav-menu-card a,
.nav-business-menu .nav-menu-card .nav-menu-heading {
  min-height: 46px;
  padding: 0 16px;
  gap: 12px;
  color: #374151;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
.nav-business-menu .nav-menu-card .nav-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f2f5;
  cursor: default;
}
.nav-business-menu .nav-menu-card a span,
.nav-business-menu .nav-menu-card .nav-menu-heading span { gap: 12px; }
.nav-business-menu .nav-menu-card a span svg,
.nav-business-menu .nav-menu-card .nav-menu-heading span svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.8;
}
.nav-business-menu .nav-menu-card .nav-menu-parent {
  height: 52px;
  color: #30394a;
  background: #fff;
}
.nav-business-menu .nav-menu-card .nav-menu-parent span svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}
.nav-business-menu .nav-menu-card .nav-menu-parent > svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  stroke-width: 3;
}
.nav-business-menu .nav-menu-card .nav-sub-row {
  min-height: 46px;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  color: #4b5563;
  background: #fafbfc;
  font-weight: 700;
}
.nav-business-menu .nav-menu-card .nav-sub-row span {
  min-width: 0;
  font-size: 15px;
}
.nav-business-menu .nav-menu-card .nav-sub-row em {
  justify-self: start;
  color: #9aa3af;
  font-size: 13px;
  font-weight: 500;
}
.nav-business-menu .nav-menu-card > a:last-child {
  min-height: 46px;
  justify-content: flex-start;
  color: #30394a;
  background: #fff;
}
.nav-business-menu .nav-menu-card a:hover {
  color: var(--orange);
  background: #fff7f4;
}
.nav-business-menu .nav-menu-card .nav-sub-row:hover { background: #fff7f4; }
@media (max-width: 1000px) {
  .nav-dropdown { height: auto; }
  .nav-menu { display: none !important; }
}
body:has(.activity-page) { background: var(--bg); }
.activity-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  min-height: 100vh;
  padding: 24px 96px 96px;
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}
.activity-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.activity-breadcrumb {
  max-width: 1440px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.activity-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.activity-breadcrumb a:hover { color: var(--orange); }
.activity-toolbar {
  max-width: 1440px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.activity-search {
  width: min(420px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #9aa3af;
  box-sizing: border-box;
}
.activity-search svg { flex: none; }
.activity-search input, .activity-date-actions input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--heading);
  font-size: var(--font-base);
}
.activity-search input::placeholder, .activity-date-actions input::placeholder { color: #9aa3af; }
.activity-date-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.activity-date-box {
  position: relative;
  width: 180px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 36px 0 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  cursor: pointer;
}
.activity-date-box input[type="date"] {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--heading);
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
}
.activity-date-box input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.activity-date-box svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3af;
  pointer-events: none;
}
.activity-date-actions button {
  width: auto;
  min-width: 88px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: #fff;
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.activity-list { max-width: 1440px; margin: 0 auto; display: grid; gap: 24px; }
.activity-card {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: stretch;
  gap: 32px;
  padding: 28px 32px;
  background: #fef6f3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-sizing: border-box;
}
.activity-copy h2 {
  color: var(--heading);
  font-size: var(--font-xl);
  line-height: 1.3;
  font-weight: var(--weight-bold);
  margin: 0 0 12px;
}
.activity-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: var(--font-base);
  margin: 0 0 12px;
}
.activity-date svg { flex: none; }
.activity-desc {
  max-width: 640px;
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.65;
  margin: 0 0 20px;
}
.activity-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.activity-primary, .activity-secondary {
  flex: 0 1 auto;
  min-width: 120px;
  max-width: none;
  height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-sizing: border-box;
}
.activity-primary { border: 0; color: #fff; background: var(--orange); cursor: pointer; }
.activity-secondary { color: var(--heading); background: #fff; border: 1px solid var(--border); }
.activity-card img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  display: block;
  background: transparent;
}
.activity-enroll-layer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 164px 24px 48px; background: rgba(246, 247, 249, .42); overflow-y: auto; }
.activity-enroll-dialog { position: relative; width: min(680px, calc(100vw - 48px)); padding: 48px 48px 46px; border-radius: 16px; background: #fff; box-shadow: 0 20px 42px rgba(20, 28, 40, .16); }
.activity-enroll-close { position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; color: #9aa3af; background: transparent; cursor: pointer; }
.activity-enroll-dialog h2 { color: #050505; font-size: 31px; line-height: 1.25; margin: 0 0 34px; }
.activity-enroll-form { display: grid; gap: 24px; }
.activity-enroll-form label { display: grid; gap: 10px; color: #3f4a5c; font-size: 17px; font-weight: 700; }
.activity-enroll-form em { color: #e53e3e; font-style: normal; }
.activity-enroll-form input { width: 100%; height: 62px; padding: 0 22px; border: 1px solid #d8dee8; border-radius: 10px; outline-color: #2f67e8; color: #111827; background: #fff; font-size: 20px; }
.activity-enroll-form input::placeholder { color: #a7afbd; }
.activity-enroll-form input[readonly] { color: #111827; background: #fbfcfe; }
.activity-payment-block { margin-top: 28px; }
.activity-payment-block h3 { color: #050505; font-size: 20px; margin: 0 0 16px; }
.activity-payment-block .vip-pay-methods { grid-template-columns: 1fr; margin-bottom: 0; }
.activity-payment-block .vip-pay-methods .vip-qr-panel { min-height: 172px; gap: 12px; margin: 0; }
.activity-payment-block .vip-pay-methods .vip-qr-placeholder { width: 122px; height: 122px; }
.activity-payment-block .vip-pay-methods .vip-qr-panel p { font-size: 16px; }
.activity-payment-block .vip-pay-methods .vip-checkout-footer { margin-top: 18px; }
.activity-payment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.activity-payment-grid button { height: 134px; display: grid; place-items: center; align-content: center; gap: 13px; border: 1px solid #dfe4ec; border-radius: 14px; color: #1f2937; background: #fff; font-size: 18px; cursor: pointer; }
.activity-payment-grid button.active { border-color: #2f67e8; background: #eef5ff; box-shadow: 0 0 0 1px #2f67e8 inset; }
.activity-pay-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 22px; font-weight: 900; line-height: 1; }
.activity-pay-icon.alipay { background: #1d7ff0; }
.activity-payment-grid svg { color: #4b5563; }
.activity-payment-grid svg.wechat { color: #0bbf5e; fill: rgba(11, 191, 94, .12); }
.activity-pay-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 68px; color: #697386; font-size: 19px; }
.activity-pay-summary strong { color: #050505; font-size: 31px; letter-spacing: 1px; }
.activity-pay-button { width: 100%; height: 68px; display: inline-flex; align-items: center; justify-content: center; margin-top: 25px; border: 0; border-radius: 6px; color: #fff; background: #2f67e8; font-size: 22px; font-weight: 700; cursor: pointer; }
.activity-pay-agreement { margin: 22px 0 0; text-align: center; color: #7b8494; font-size: 15px; }
.activity-pay-agreement a { color: #2f67e8; }
.activity-success-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 28, 40, .52);
}
.activity-success-dialog {
  position: relative;
  width: min(480px, calc(100vw - 40px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px 40px;
  border-radius: 16px;
  text-align: center;
  background: #fff;
  box-shadow: 0 24px 68px rgba(20, 28, 40, .24);
  box-sizing: border-box;
}
.activity-success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #98a2b3;
  background: #f7f8fa;
  cursor: pointer;
}
.activity-success-close:hover { color: #273244; background: #eef1f5; }
.activity-success-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--orange);
}
.activity-success-icon svg { width: 36px; height: 36px; stroke-width: 3.5; }
.activity-success-dialog h2 {
  margin: 0 0 12px;
  color: var(--heading);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 900;
}
.activity-success-dialog > p {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.activity-success-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.activity-success-actions a {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}
.activity-success-actions a svg { width: 16px; height: 16px; flex: none; }
.activity-success-actions .detail {
  color: #fff;
  background: linear-gradient(90deg, #ff6508 0%, #ff8f50 100%);
  border: 0;
}
.activity-success-actions .detail:hover { filter: brightness(1.03); }
.activity-success-actions .home {
  color: var(--orange);
  border: 1px solid var(--orange);
  background: #fff;
}
.activity-success-actions .home:hover { background: #fff7f2; }
@media (max-width: 1200px) {
  .activity-page { padding: 20px 24px 64px; }
  .activity-toolbar, .activity-date-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .activity-search, .activity-date-box, .activity-date-actions button { width: 100%; }
  .activity-card { grid-template-columns: 1fr; padding: 22px 20px; gap: 20px; }
  .activity-card img { width: 100%; height: auto; }
  .activity-enroll-layer { padding-top: 96px; }
}
@media (max-width: 640px) {
  .activity-page { padding: 16px 16px 48px; }
  .activity-copy h2 { font-size: 18px; }
  .activity-buttons { flex-direction: column; align-items: stretch; }
  .activity-primary, .activity-secondary { width: 100%; min-width: 0; }
  .activity-enroll-layer { padding: 82px 14px 32px; }
  .activity-enroll-dialog { width: 100%; padding: 30px 18px 28px; border-radius: 12px; }
  .activity-enroll-close { top: 16px; right: 14px; }
  .activity-enroll-dialog h2 { font-size: 26px; margin-bottom: 26px; }
  .activity-enroll-form { gap: 18px; }
  .activity-enroll-form input { height: 54px; font-size: 17px; }
  .activity-payment-block { margin-top: 30px; }
  .activity-payment-grid { grid-template-columns: 1fr; gap: 12px; }
  .activity-payment-grid button { height: 82px; grid-template-columns: 34px 1fr; justify-items: start; padding: 0 22px; }
  .activity-pay-summary { margin-top: 34px; }
  .activity-pay-summary strong { font-size: 26px; }
  .activity-pay-button { height: 56px; font-size: 19px; }
  .activity-success-layer { padding: 16px; }
  .activity-success-dialog { width: 100%; padding: 36px 20px 28px; }
  .activity-success-icon { width: 64px; height: 64px; margin-bottom: 20px; }
  .activity-success-icon svg { width: 30px; height: 30px; }
  .activity-success-dialog h2 { font-size: 20px; }
  .activity-success-dialog > p { margin-bottom: 22px; font-size: 13px; }
  .activity-success-actions { flex-direction: column; gap: 10px; }
  .activity-success-actions a { width: 100%; }
}
body:has(.activity-detail-page) { background: var(--bg); }
.activity-detail-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  min-height: 100vh;
  padding: 24px 96px 96px;
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}
.activity-detail-breadcrumb {
  max-width: 1440px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.activity-detail-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.activity-detail-breadcrumb a:hover { color: var(--orange); }
.activity-detail-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 32px 36px;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(20, 28, 40, .06);
  box-sizing: border-box;
}
.activity-poster-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  padding: 24px 40px;
  border-radius: var(--radius-md);
  background: #f5f8fc;
}
.activity-poster {
  width: 200px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 22px rgba(20, 28, 40, .12);
}
.activity-poster-copy h2 {
  color: var(--heading);
  font-size: var(--font-xl);
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: var(--weight-bold);
}
.activity-poster-copy p {
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.65;
  margin: 0 0 16px;
}
.activity-share-qr {
  width: 120px;
  height: 120px;
  object-fit: cover;
  background: #fff;
  border-radius: var(--radius-xs);
}
.activity-detail-cover {
  width: 100%;
  height: 320px;
  margin-top: 24px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.activity-detail-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  padding-top: 32px;
}
.activity-detail-main { min-width: 0; }
.activity-detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--orange);
  background: #fff0eb;
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  margin-bottom: 12px;
}
.activity-detail-main h1 {
  color: var(--heading);
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 24px;
  font-weight: var(--weight-bold);
}
.activity-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.activity-info-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #9aa3af;
}
.activity-info-item svg { color: #a7afbd; }
.activity-info-item span {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  margin-bottom: 4px;
}
.activity-info-item strong {
  color: var(--heading);
  font-size: var(--font-base);
  line-height: 1.4;
  font-weight: var(--weight-medium);
}
.activity-detail-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.activity-detail-section h2 {
  color: var(--heading);
  font-size: var(--font-lg);
  margin: 0 0 18px;
  font-weight: var(--weight-bold);
}
.lecturer-card-inline { display: flex; align-items: center; gap: 16px; }
.lecturer-card-inline img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2f7;
}
.lecturer-card-inline h3 {
  color: var(--heading);
  font-size: var(--font-lg);
  margin: 0 0 6px;
  font-weight: var(--weight-bold);
}
.lecturer-card-inline p {
  color: var(--text-secondary);
  font-size: var(--font-base);
  margin: 0;
  line-height: 1.5;
}
.activity-course-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.activity-course-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.5;
}
.activity-course-list svg { color: var(--orange); stroke-width: 3; flex: none; margin-top: 2px; }
.activity-notes-section { border-bottom: 0; padding-bottom: 8px; }
.activity-notes-section ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.55;
}
.activity-signup-card {
  position: sticky;
  top: 100px;
  padding: 24px 22px;
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: 0 10px 28px rgba(20, 28, 40, .08);
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.activity-signup-card strong {
  display: block;
  color: var(--orange);
  font-size: 28px;
  margin-bottom: 8px;
  line-height: 1.2;
}
.activity-signup-card p {
  color: var(--text-tertiary);
  font-size: var(--font-base);
  margin: 0 0 20px;
}
.activity-signup-primary, .activity-signup-secondary {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-sizing: border-box;
}
.activity-signup-primary { color: #fff; background: var(--orange); margin-bottom: 12px; }
.activity-signup-secondary { color: var(--heading); background: #f5f6f8; margin-bottom: 24px; }
.activity-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-base);
}
.activity-contact-line + .activity-contact-line { border-top: 0; padding-top: 12px; }
.activity-contact-line svg { color: #a7afbd; flex: none; }
@media (max-width: 1200px) {
  .activity-detail-page { padding: 20px 24px 64px; }
  .activity-detail-shell { padding: 20px; }
  .activity-poster-panel { grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 24px; }
  .activity-poster { width: 160px; }
  .activity-detail-cover { height: 240px; }
  .activity-detail-content { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .activity-signup-card { position: static; }
}
@media (max-width: 760px) {
  .activity-detail-page { padding: 16px 16px 48px; }
  .activity-detail-shell { padding: 16px; }
  .activity-poster-panel { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 20px 16px; }
  .activity-poster { width: 160px; }
  .activity-detail-cover { height: 180px; }
  .activity-detail-main h1 { font-size: 18px; }
  .activity-info-grid { grid-template-columns: 1fr; gap: 16px; }
  .activity-signup-primary, .activity-signup-secondary { height: 40px; font-size: var(--font-base); }
}
.recommend-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  background: var(--card);
  min-height: 100vh;
  color: var(--ink);
}
.recommend-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.recommend-breadcrumb {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 96px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.recommend-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.recommend-breadcrumb a:hover { color: var(--orange); }
.recommend-filter {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 96px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  width: 100%;
}
.recommend-cats {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--heading);
  font-size: var(--font-base);
  line-height: 1.5;
}
.recommend-cats-label {
  flex: none;
  color: var(--text-tertiary);
  white-space: nowrap;
  line-height: 1.5;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
}
.recommend-cats-list {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.recommend-cats-list a {
  color: var(--heading);
  text-decoration: none;
  line-height: 1.5;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
}
.recommend-cats-list a:hover { color: var(--blue); }
.recommend-cats-list a.active { color: var(--blue); font-weight: var(--weight-bold); }
.recommend-search {
  width: 240px;
  height: 36px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--border-input, #dfe4ec);
  border-radius: var(--radius-xs);
  color: var(--placeholder);
  flex: none;
  align-self: flex-end;
}
.recommend-search svg { width: 16px; height: 16px; flex: none; }
.recommend-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--font-sm); }
.recommend-search input::placeholder { color: var(--placeholder); }
.recommend-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 96px 96px;
  box-sizing: border-box;
  width: 100%;
}
.recommend-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.recommend-summary p { margin: 0; color: var(--text-tertiary); font-size: var(--font-base); }
.recommend-summary b { color: var(--blue); }
.recommend-summary div { display: flex; align-items: center; gap: 20px; }
.recommend-summary button { border: 0; background: transparent; color: var(--text-secondary); font-size: var(--font-base); cursor: pointer; padding: 0; }
.recommend-summary button.active { color: var(--orange); font-weight: var(--weight-bold); }
.recommend-summary button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.recommend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.recommend-card {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(20, 28, 40, .04);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.recommend-card:hover { border-color: color-mix(in srgb, var(--orange) 35%, var(--border)); box-shadow: 0 10px 24px rgba(20, 28, 40, .07); transform: translateY(-2px); }
.recommend-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg); }
.recommend-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recommend-duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-width: 52px;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.recommend-card-body { padding: 16px 18px 18px; }
.recommend-card-body h2 { color: var(--heading); font-size: var(--font-lg); line-height: 1.4; margin: 0 0 10px; font-weight: var(--weight-bold); }
.recommend-highlight { color: var(--blue); background: #eaf1ff; border-radius: 4px; padding: 0 3px; }
.recommend-card-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--text-tertiary); font-size: var(--font-sm); line-height: 1.5; }
.recommend-card-meta span { min-width: 0; }
.recommend-card-meta em { font-style: normal; white-space: nowrap; flex: none; }
.recommend-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; }
.recommend-pagination button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--heading);
  font-size: var(--font-lg);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.recommend-pagination button svg { display: block; width: 18px; height: 18px; margin: 0; }
.recommend-pagination button:hover:not(:disabled):not(.active) {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--border));
  background: #fff7f2;
}
.recommend-pagination button:active:not(:disabled) { transform: scale(.94); }
.recommend-pagination button.active {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 6px 14px rgba(240, 75, 23, .22);
}
.recommend-pagination button:disabled { color: var(--placeholder); cursor: not-allowed; box-shadow: none; transform: none; }
.recommend-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (min-width: 1600px) {
  .recommend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .recommend-breadcrumb, .recommend-filter, .recommend-content { padding-left: 56px; padding-right: 56px; }
  .recommend-filter { flex-wrap: wrap; min-height: 0; }
  .recommend-search { width: 220px; }
  .recommend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
}
@media (max-width: 760px) {
  .recommend-breadcrumb, .recommend-filter, .recommend-content { padding-left: 20px; padding-right: 20px; }
  .recommend-content { padding-top: 24px; padding-bottom: 64px; }
  .recommend-filter { flex-direction: column; align-items: stretch; padding-top: 16px; padding-bottom: 16px; }
  .recommend-cats { gap: 10px; }
  .recommend-cats-list { gap: 10px 14px; }
  .recommend-search { width: 100%; }
  .recommend-summary { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .recommend-grid { grid-template-columns: 1fr; gap: 14px; }
  .recommend-card-meta { flex-direction: column; gap: 6px; }
  .recommend-pagination { margin-top: 28px; }
}
body:has(.teacher-list-page) { background: var(--bg); }
.teacher-list-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  padding: 48px 96px 96px;
}
.teacher-list-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.teacher-list-head { max-width: 1440px; margin: 0 auto 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.teacher-sort-tabs { display: flex; align-items: center; gap: 28px; }
.teacher-sort-tabs button { border: 0; background: transparent; color: var(--text-secondary); font-size: var(--font-lg); font-weight: var(--weight-bold); cursor: pointer; padding: 0; }
.teacher-sort-tabs button.active { color: var(--orange); }
.teacher-sort-tabs button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.teacher-list-head > p { margin: 0; color: var(--text-tertiary); font-size: var(--font-lg); }
.teacher-list-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.teacher-list-card {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 16px 18px;
  align-items: start;
  padding: 20px 22px;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 22px rgba(20, 28, 40, .04);
  border: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.teacher-list-card:hover { border-color: var(--blue); box-shadow: 0 10px 24px rgba(20, 28, 40, .07); }
.teacher-photo-wrap { position: relative; width: 100px; height: 100px; border-radius: 10px; overflow: visible; background: var(--card); }
.teacher-photo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 18px rgba(20, 28, 40, .06); }
.teacher-photo-wrap span { position: absolute; right: -10px; top: -8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #ffb400; }
.teacher-photo-wrap span svg { width: 14px; height: 14px; }
.teacher-list-info { min-width: 0; padding-right: 96px; }
.teacher-list-info h2 { color: var(--heading); font-size: 18px; line-height: 1.3; margin: 0 0 6px; font-weight: var(--weight-bold); }
.teacher-list-info p { color: var(--text-tertiary); font-size: var(--font-sm); line-height: 1.55; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.teacher-list-info .teacher-list-role { color: var(--text-secondary); font-size: var(--font-base); font-weight: var(--weight-medium); margin: 0 0 8px; display: block; -webkit-line-clamp: unset; overflow: visible; }
.teacher-list-info em { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: var(--font-sm); font-style: normal; margin-top: 4px; }
.teacher-detail-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: auto;
  min-width: 88px;
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue);
  border-radius: var(--radius-xs);
  color: var(--blue);
  background: var(--card);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.teacher-detail-btn:hover { background: var(--blue); color: #fff; }
.teacher-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; }
.teacher-pagination button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--heading);
  font-size: var(--font-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.teacher-pagination button:hover:not(:disabled):not(.active) {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 45%, var(--border));
  background: #fff7f2;
}
.teacher-pagination button:active:not(:disabled) { transform: scale(.94); }
.teacher-pagination button.active {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 6px 14px rgba(240, 75, 23, .22);
}
.teacher-pagination button:disabled {
  color: var(--placeholder);
  border-color: var(--border);
  background: var(--card);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.teacher-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1200px) {
  .teacher-list-page { padding: 40px 56px 80px; }
  .teacher-list-grid { gap: 16px 18px; }
}
@media (max-width: 900px) {
  .teacher-list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .teacher-list-page { padding: 32px 20px 64px; }
  .teacher-list-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .teacher-sort-tabs { gap: 20px; }
  .teacher-list-card { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .teacher-photo-wrap { width: 88px; height: 88px; }
  .teacher-list-info { padding-right: 0; padding-top: 40px; }
  .teacher-detail-btn { top: 16px; right: 16px; }
  .teacher-pagination { margin-top: 36px; }
}
body:has(.stories-page) { background: var(--bg); }
.stories-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  min-height: 100vh;
  padding: 24px 96px 96px;
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}
.stories-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stories-breadcrumb {
  max-width: 1440px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.stories-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.stories-breadcrumb a:hover { color: var(--orange); }
.stories-sort {
  max-width: 1440px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.stories-sort button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.stories-sort button svg { width: 16px; height: 16px; }
.stories-sort button.active { color: var(--blue); }
.stories-sort button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.story-feed { max-width: 1440px; margin: 0 auto; display: grid; gap: 20px; }
.story-feed-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 16px rgba(20, 28, 40, .04);
  padding: 20px 22px;
  box-sizing: border-box;
}
.story-feed-card.split {
  display: grid;
  grid-template-columns: minmax(240px, 420px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.story-side-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: #e9eef4;
}
.story-content time {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  margin-bottom: 12px;
}
.story-metric {
  padding: 12px 14px;
  background: #f8f9fb;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.story-metric h2 {
  color: var(--orange);
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 8px;
  line-height: 1.35;
}
.story-metric p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--font-base);
  margin: 0;
}
.story-metric svg { color: var(--blue); flex: none; }
.story-metric b {
  color: var(--blue);
  font-size: 22px;
  margin-left: 2px;
  line-height: 1.1;
}
.story-desc {
  color: var(--text-secondary);
  font-size: var(--font-base);
  line-height: 1.65;
  margin: 0 0 16px;
}
.story-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-tertiary);
  font-size: var(--font-base);
}
.story-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  cursor: pointer;
  transition: color .15s ease, transform .12s ease;
}
.story-actions button:hover { color: var(--orange); }
.story-actions button:active { transform: scale(.96); }
.story-actions button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.story-feed-card.text .story-content time,
.story-feed-card.image .story-content time { margin-bottom: 12px; }
.story-feed-card.text .story-metric,
.story-feed-card.image .story-metric { margin-bottom: 14px; }
.story-wide-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 400;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
  background: #e9eef4;
}
.story-wide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.story-wide-image.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .22);
  pointer-events: none;
}
.story-wide-image .story-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  backdrop-filter: blur(4px);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.story-wide-image .story-play svg { width: 28px; height: 28px; display: block; }
.story-wide-image .story-play:hover {
  background: rgba(255, 255, 255, .4);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .24);
}
.story-wide-image .story-play:active { transform: translate(-50%, -50%) scale(.96); }
.story-wide-image .story-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.stories-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
.stories-pagination button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8dee8;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.stories-pagination button svg { width: 18px; height: 18px; }
.stories-pagination button:hover:not(:disabled):not(.active) { color: var(--orange); border-color: rgba(255, 101, 8, .45); background: #fff7f2; }
.stories-pagination button:active:not(:disabled) { transform: scale(.94); }
.stories-pagination button.active { color: #fff; border-color: var(--orange); background: var(--orange); box-shadow: 0 4px 10px rgba(255, 101, 8, .28); }
.stories-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.stories-pagination button:disabled { color: #c8ced8; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 1200px) {
  .stories-page { padding: 20px 24px 64px; }
  .story-feed-card.split { grid-template-columns: 1fr; gap: 16px; }
  .story-side-image { height: 200px; }
}
@media (max-width: 640px) {
  .stories-page { padding: 16px 16px 48px; }
  .story-feed-card { padding: 16px; }
  .story-metric b { font-size: 20px; }
}
body:has(.teacher-detail-page) { background: #f6f7f9; }
.teacher-detail-page {
  --font-3xl: 36px;
  --font-2xl: 26px;
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 14px;
  --font-sm: 12px;
  min-height: 100vh;
  padding: 40px 24px 96px;
  background: #f6f7f9;
  color: var(--ink);
}
.teacher-detail-breadcrumb {
  max-width: 1440px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.teacher-detail-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.teacher-detail-breadcrumb a:hover { color: var(--orange); }
.teacher-detail-shell {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
  background: var(--card);
  border: 1px solid #eef1f5;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20, 28, 40, .05);
  overflow: hidden;
}
.teacher-profile-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 40px 36px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid #eef1f5;
  border-radius: 0;
  box-shadow: none;
}
.teacher-detail-avatar {
  width: 168px;
  height: 168px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
}
.teacher-profile-panel h1 {
  width: 100%;
  color: var(--heading);
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: var(--weight-bold);
  text-align: center;
}
.teacher-profile-panel > p.teacher-detail-role {
  width: 100%;
  color: #4b5563;
  font-size: 16px;
  font-weight: var(--weight-medium);
  margin: 0 0 18px;
  text-align: center;
}
.teacher-tags { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.teacher-tags span {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #2f80ff;
  font-size: 13px;
}
.teacher-profile-panel > p {
  width: 100%;
  max-width: none;
  text-align: left;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}
.teacher-course-panel {
  min-width: 0;
  padding: 32px 36px 36px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.teacher-course-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding: 0; }
.teacher-course-head h2 { color: var(--heading); font-size: 22px; margin: 0; font-weight: var(--weight-bold); }
.teacher-course-head span { color: #697386; font-size: 15px; }
.teacher-course-list { display: grid; gap: 18px; }
.teacher-course-item {
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.teacher-course-item img {
  width: 280px;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: none;
}
.teacher-course-body { min-width: 0; display: flex; flex-direction: column; padding: 2px 0; }
.teacher-course-item h3 { color: #050505; font-size: 18px; line-height: 1.35; margin: 0 0 10px; font-weight: 700; }
.teacher-course-item p { color: #4b5563; font-size: 14px; line-height: 1.65; margin: 0 0 14px; flex: 1; }
.teacher-course-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.teacher-course-meta span { color: #697386; font-size: 14px; }
.teacher-course-meta a {
  flex: none;
  width: 108px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease;
}
.teacher-course-meta a:hover { background: #e04512; box-shadow: 0 6px 14px rgba(240, 75, 23, .22); }
.teacher-detail-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.teacher-detail-pagination button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #697386;
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .18s ease, background .18s ease, transform .12s ease;
}
.teacher-detail-pagination button:hover:not(:disabled):not(.active) {
  color: var(--orange);
  background: #fff7f2;
}
.teacher-detail-pagination button:active:not(:disabled) { transform: scale(.94); }
.teacher-detail-pagination button.active {
  color: #fff;
  background: var(--orange);
  box-shadow: none;
}
.teacher-detail-pagination button:disabled {
  color: #c8ced8;
  cursor: not-allowed;
  transform: none;
}
.teacher-detail-pagination button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1200px) {
  .teacher-detail-page { padding: 28px 40px 80px; }
  .teacher-detail-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .teacher-profile-panel { padding: 32px 28px; }
  .teacher-course-panel { padding: 28px; }
  .teacher-course-item { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
  .teacher-course-item img { width: 220px; height: 118px; }
}
@media (max-width: 900px) {
  .teacher-detail-shell { grid-template-columns: 1fr; }
  .teacher-profile-panel { border-right: 0; border-bottom: 1px solid #eef1f5; padding: 28px 24px; align-items: center; text-align: center; }
  .teacher-profile-panel > p { text-align: center; }
  .teacher-detail-avatar { width: 140px; height: 140px; margin-bottom: 16px; }
  .teacher-course-panel { padding: 24px 20px 28px; }
  .teacher-course-item { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .teacher-course-item img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .teacher-course-meta a { width: auto; min-width: 100px; padding: 0 16px; }
  .teacher-detail-pagination { justify-content: center; }
}
@media (max-width: 760px) {
  .teacher-detail-page { padding: 24px 16px 64px; }
  .teacher-profile-panel h1 { font-size: 24px; }
  .teacher-course-head { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 16px; }
}
aside.float-rail { overflow: visible !important; z-index: 100; }
aside.float-rail .qr-float-item { position: relative; overflow: visible; }
aside.float-rail .qr-float-item::before { content: ""; position: absolute; right: 100%; top: 0; width: 18px; height: 100%; }
aside.float-rail .float-qr { position: absolute; right: calc(100% + 14px); top: 50%; z-index: 200; width: 138px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 12px 34px rgba(20, 28, 40, .16); border: 1px solid #eef1f5; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateX(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
aside.float-rail .float-qr::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 14px; height: 14px; background: #fff; border-top: 1px solid #eef1f5; border-right: 1px solid #eef1f5; }
aside.float-rail .float-qr img { display: block; width: 118px; height: 118px; object-fit: contain; }
aside.float-rail .qr-float-item:hover .float-qr { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.leave-widget { position: fixed; left: 24px; bottom: 24px; z-index: 140; width: 360px; overflow: hidden; border: 1px solid rgba(223, 228, 236, .9); border-radius: var(--radius-md); background: #fff; box-shadow: 0 12px 32px rgba(20, 28, 40, .16); }
.leave-widget.success { width: 360px; }
.leave-widget.collapsed { width: 148px; }
.leave-widget-head { width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border: 0; color: #fff; background: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: 0; cursor: pointer; }
.leave-widget-head svg { flex: none; stroke-width: 3; width: 16px; height: 16px; }
.leave-toggle-icon { font-size: 12px; line-height: 1; }
.leave-widget-body { padding: 16px 16px 18px; background: #fff; }
.leave-widget-body > p { margin: 0 0 14px; color: #4b5563; font-size: 13px; line-height: 1.6; }
.leave-message-field { position: relative; display: block; margin-bottom: 10px; }
.leave-message-field textarea { width: 100%; height: 88px; padding: 12px 12px 28px; border: 1px solid #dfe4ec; border-radius: var(--radius-sm); outline-color: var(--blue); color: #273244; background: #fff; resize: none; font-size: 14px; line-height: 1.5; box-sizing: border-box; }
.leave-message-field textarea::placeholder, .leave-input-field input::placeholder { color: #9aa3af; }
.leave-message-field span { position: absolute; right: 12px; bottom: 10px; color: #9aa3af; font-size: 12px; }
.leave-widget-error, .leave-widget-notice { display: block; margin: 0 0 10px 2px; font-size: 13px; font-weight: 400; }
.leave-widget-error { color: #ff4d22; }
.leave-widget-notice { color: #22a06b; }
.leave-input-field { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; margin-bottom: 10px; border: 1px solid #dfe4ec; border-radius: var(--radius-sm); color: #9aa3af; background: #fff; box-sizing: border-box; }
.leave-input-field > span { display: inline-flex; flex: none; color: #9aa3af; }
.leave-input-field > span svg { display: block; width: 16px; height: 16px; }
.leave-input-field input { width: 100%; border: 0; outline: 0; color: #273244; background: transparent; font-size: 14px; }
.leave-submit { width: 100%; height: 40px; border: 0; border-radius: var(--radius-sm); color: #fff; background: var(--blue); font-size: 15px; letter-spacing: 0; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.leave-submit:hover { background: var(--blue-dark); box-shadow: 0 8px 18px rgba(37, 99, 235, .22); }
.leave-submit:active { background: var(--blue-dark); box-shadow: none; }
.leave-submit:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.leave-success-panel { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px 28px; text-align: center; background: #fff; }
.leave-success-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; color: #52c41a; background: #f6ffed; }
.leave-success-icon svg { width: 28px; height: 28px; stroke-width: 3; }
.leave-success-panel h2 { margin: 0 0 8px; color: var(--heading); font-size: 18px; line-height: 1.25; font-weight: var(--weight-medium); }
.leave-success-panel p { margin: 0 0 24px; color: var(--text-meta); font-size: 13px; line-height: 1.5; }
.leave-success-back { min-width: 96px; height: 36px; padding: 0 20px; border: 0; border-radius: var(--radius-xs); color: #fff; background: var(--blue); font-size: 14px; font-weight: var(--weight-medium); cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.leave-success-back:hover { background: var(--blue-dark); box-shadow: 0 8px 18px rgba(37, 99, 235, .22); }
.leave-success-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* —— 联合国采购（单页 Tab：需求 / 课程 / 介绍） —— */
body:has(.un-procurement-page) { background: var(--bg); }
.un-procurement-page {
  --font-xl: 20px;
  --font-lg: 16px;
  --font-base: 16px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 16px;
}
.un-procurement-hero { position: relative; width: 100%; aspect-ratio: 1440 / 256; height: auto; background: url("../assets/images/un-procurement/hero.jpg") center / cover no-repeat; }
.un-procurement-hero h1, .un-procurement-hero p { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.un-procurement-tabbar { position: relative; height: 65px; display: flex; align-items: stretch; justify-content: center; background: var(--card); box-shadow: 0 2px 8px rgba(20, 28, 40, .08); }
.un-procurement-tabs { height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 64px; background: transparent; }
.un-procurement-tabs [role="tab"] { position: relative; min-width: 80px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--font-lg); font-weight: var(--weight-normal); cursor: pointer; }
.un-procurement-tabs [role="tab"].active { color: var(--blue); font-weight: var(--weight-medium); }
.un-procurement-tabs [role="tab"].active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); }
/* author display:grid 等会盖掉 UA 的 [hidden]，必须强制隐藏非激活面板 */
.un-procurement-page [data-tab-panel][hidden] { display: none !important; }
.un-demand-section { padding: 35px var(--space-xl) 56px; }
.un-demand-card { min-height: 626px; max-width: 1376px; margin: 0 auto; padding: 26px var(--space-lg) var(--space-lg); display: flex; flex-direction: column; border-radius: var(--radius-md); background: var(--card); box-shadow: 0 3px 10px rgba(20, 28, 40, .06); }
.un-demand-filter { display: grid; grid-template-columns: minmax(420px, 1fr) auto; gap: var(--space-md); align-items: center; }
.un-search-field { height: 40px; display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-sm); border: 1px solid var(--border-input); border-radius: var(--radius-xs); color: var(--placeholder); background: var(--card); }
.un-search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: var(--font-lg); }
.un-search-field input::placeholder { color: var(--placeholder); }
.un-date-filter { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.un-date-filter span { color: var(--text-secondary); font-size: var(--font-lg); font-weight: var(--weight-medium); }
.un-date-filter i { color: var(--placeholder); font-style: normal; }
.un-date-box { position: relative; width: 166px; height: 40px; display: inline-flex; align-items: center; padding: 0 36px 0 10px; border: 1px solid var(--border-input); border-radius: var(--radius-xs); background: var(--card); cursor: pointer; }
.un-date-box input[type="date"] { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: var(--font-lg); font-family: inherit; cursor: pointer; }
.un-date-box input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.un-date-box svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--heading); pointer-events: none; }
.un-query-button { width: 80px; height: 40px; border: 0; border-radius: var(--radius-xs); color: #fff; background: var(--blue); font-size: var(--font-lg); cursor: pointer; }
.un-table-wrap { margin-top: var(--space-lg); overflow-x: auto; }
.un-demand-table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; color: var(--text-secondary); font-size: var(--font-lg); }
.un-demand-table col:nth-child(1) { width: 122px; }
.un-demand-table col:nth-child(3), .un-demand-table col:nth-child(4) { width: 174px; }
.un-demand-table col:nth-child(5) { width: 134px; }
.un-demand-table th { height: 44px; padding: 0 var(--space-md); text-align: left; color: var(--text-secondary); background: var(--bg); font-weight: var(--weight-medium); }
.un-demand-table td { height: 57px; padding: 0 var(--space-md); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.un-demand-table td:nth-child(2) { color: var(--ink); }
.un-download-link { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: var(--font-lg); }
.un-download-link svg { flex: none; }
.un-demand-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); color: var(--text-secondary); }
.un-demand-footer p { margin: 0; font-size: var(--font-lg); }
.un-demand-footer strong { color: var(--blue); font-weight: var(--weight-normal); }
.un-pagination { display: flex; align-items: center; gap: var(--space-xs); }
.un-pagination button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-input); border-radius: 5px; color: var(--heading); background: var(--card); font-size: var(--font-lg); cursor: pointer; }
.un-pagination button.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.un-pagination button:disabled { color: var(--placeholder); background: var(--card); cursor: not-allowed; }
.un-course-section { min-height: 674px; padding: 32px var(--space-xl) 58px; }
.un-course-list { max-width: 1376px; margin: 0 auto; display: grid; gap: var(--space-lg); }
.un-course-card { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 32px; align-items: center; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--card); box-shadow: 0 3px 10px rgba(20, 28, 40, .05); }
.un-course-thumb { width: 122px; height: 122px; display: grid; place-items: center; justify-self: center; overflow: hidden; }
.un-course-thumb.logo img { width: 122px; height: 108px; object-fit: cover; }
.un-course-thumb.cover { border-radius: var(--radius-md); }
.un-course-thumb.cover img { width: 122px; height: 122px; object-fit: cover; border-radius: var(--radius-md); }
.un-course-copy h2 { color: var(--ink); font-size: 20px; line-height: var(--leading-snug); margin: 0 0 16px; font-weight: var(--weight-black); }
.un-course-copy p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0 0 16px; }
.un-course-button { width: 139px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-xs); color: #fff; font-size: 16px; font-weight: var(--weight-medium); }
.un-course-button.blue { background: var(--blue); }
.un-course-button.orange { background: var(--orange); }
.un-intro-section { padding: 32px var(--space-xl) 64px; display: grid; gap: 31px; }
.un-intro-card { max-width: 1376px; width: 100%; margin: 0 auto; padding: 32px var(--space-xl); border-radius: var(--radius-md); background: var(--card); box-shadow: 0 3px 10px rgba(20, 28, 40, .05); }
.un-intro-card h2 { color: var(--heading); font-size: 20px; line-height: var(--leading-snug); margin: 0 0 24px; font-weight: var(--weight-black); }
.un-intro-card h3 { color: var(--ink); font-size: 16px; line-height: 1.35; margin: 0 0 20px; font-weight: var(--weight-black); }
.un-intro-card p { color: var(--muted); font-size: 16px; line-height: 1.75; margin: 0; }
.un-intro-card.overview { min-height: 310px; }
.un-intro-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 24px; }
.un-intro-card.meaning { min-height: 382px; padding-bottom: 38px; }
.un-meaning-list { display: grid; gap: 31px; }
.un-meaning-list h3 { font-size: 16px; margin-bottom: 22px; }
.un-intro-card.agencies { min-height: 260px; }
.un-agency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 168px; max-width: 1000px; }
.un-agency-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 16px; }
.un-agency-item svg { color: #4A90E2; }
@media (max-width: 1200px) {
  .un-demand-filter { grid-template-columns: 1fr; }
  .un-date-filter { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 1080px) {
  .un-procurement-tabs { height: 65px; }
}
@media (max-width: 900px) {
  .un-intro-two-col, .un-agency-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .un-agency-grid { max-width: none; }
}
@media (max-width: 760px) {
  .un-procurement-hero { aspect-ratio: 1440 / 256; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 0 28px; background: linear-gradient(145deg, #0d6fff 0%, #50b8ff 100%); overflow: hidden; }
  .un-procurement-hero::before { content: ""; position: absolute; left: -18%; right: -18%; bottom: -46px; height: 135px; border-radius: 50% 50% 0 0; background: rgba(0, 82, 230, .52); transform: rotate(-4deg); }
  .un-procurement-hero::after { content: ""; position: absolute; left: -8%; right: -22%; bottom: 12px; height: 88px; border-radius: 50%; background: rgba(121, 198, 255, .36); transform: rotate(5deg); }
  .un-procurement-hero h1, .un-procurement-hero p { position: relative; z-index: 1; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; border: 0; color: #fff; }
  .un-procurement-hero h1 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
  .un-procurement-hero p { font-size: 16px; line-height: 1.6; }
  .un-procurement-tabs { height: 60px; gap: 26px; }
  .un-procurement-tabs [role="tab"] { min-width: auto; font-size: 16px; }
  .un-demand-section { padding: var(--space-lg) var(--space-md) 42px; }
  .un-demand-card { min-height: auto; padding: 18px 14px 20px; }
  .un-search-field { height: 44px; }
  .un-date-filter { gap: 10px; }
  .un-date-box { width: calc(50% - 18px); min-width: 132px; }
  .un-query-button { width: 100%; margin-top: 4px; }
  .un-demand-table { font-size: var(--font-base); }
  .un-demand-footer { align-items: flex-start; flex-direction: column; margin-top: 28px; }
  .un-pagination { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
  .un-course-section { min-height: auto; padding: var(--space-lg) var(--space-md) 42px; }
  .un-course-card { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .un-course-thumb { justify-self: start; }
  .un-course-copy h2 { font-size: 20px; }
  .un-course-copy p { font-size: 16px; }
  .un-intro-section { padding: var(--space-lg) var(--space-md) 42px; gap: 22px; }
  .un-intro-card { padding: 26px 20px; }
  .un-intro-card h2 { font-size: 20px; margin-bottom: 22px; }
  .un-intro-card h3, .un-meaning-list h3 { font-size: 16px; margin-bottom: 14px; }
  .un-intro-card p { font-size: var(--font-base); line-height: 1.72; }
}
@media (max-width: 760px) {
  .leave-widget { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
  .leave-widget.success { width: auto; }
  .leave-widget.collapsed { right: auto; width: 140px; }
  .leave-widget-head { height: 40px; padding: 0 12px; font-size: 14px; }
  .leave-widget-body { padding: 14px 14px 16px; }
  .leave-widget-body > p { margin-bottom: 12px; font-size: 13px; }
  .leave-message-field textarea { height: 88px; font-size: 14px; }
  .leave-widget-error, .leave-widget-notice { font-size: 13px; }
  .leave-input-field { height: 52px; }
  .leave-input-field input { font-size: 16px; }
  .leave-submit { height: 52px; font-size: 19px; }
  .leave-success-panel { min-height: 300px; padding: 36px 20px 32px; }
  .leave-success-icon { width: 72px; height: 72px; margin-bottom: 22px; }
  .leave-success-icon svg { width: 34px; height: 34px; }
  .leave-success-panel h2 { margin-bottom: 10px; font-size: 22px; }
  .leave-success-panel p { margin-bottom: 28px; font-size: 14px; }
  .leave-success-back { min-width: 108px; height: 38px; font-size: 14px; }
}

@media (min-width: 1201px) and (max-width: 1440px) {
  :root { --radius: 14px; }

  .header-inner { max-width: 1440px; gap: 32px; padding-left: 48px; padding-right: 48px; }
  .main-nav { gap: 34px; }
  .search-box { max-width: 400px; }

  .section, .page-hero { max-width: 1440px; }
  .hero-inner { max-width: 1440px; }

  .home-section, .home-story-rank { max-width: 1440px; padding-left: 48px; padding-right: 48px; }

  .float-rail { right: 16px; }
  .leave-widget { left: 18px; bottom: 18px; width: 360px; }
  .leave-widget.success { width: 360px; }
  .leave-widget.collapsed { width: 148px; }
  .leave-widget-head { height: 40px; padding: 0 14px; font-size: 14px; }
  .leave-widget-body { padding: 16px; }
  .leave-widget-body > p { font-size: 13px; }
  .leave-input-field, .leave-submit { height: 52px; }

  .cart-shell { width: min(1440px, calc(100% - 56px)); }
  .cart-table-head, .cart-row { min-width: 980px; padding-left: 24px; padding-right: 24px; }
  .cart-recommend-grid { gap: 16px; }

  .account-page { grid-template-columns: 200px minmax(0, 1fr); }
  .account-sidebar a { height: 48px; gap: 10px; padding: 0 16px; font-size: 14px; }
  .account-main, .orders-main, .favorites-main, .settings-main { padding-left: 24px; padding-right: 24px; }
  .account-profile-head p, .account-basic dt, .account-basic dd { font-size: 13px; }
  .account-panel h2 { font-size: 17px; }
  .favorites-grid { gap: 16px; }
  .favorite-body { grid-template-columns: minmax(0, 1fr) 88px; padding: 12px 14px; }
  .favorite-body h2 { font-size: 14px; }
  .favorite-body button { height: 34px; font-size: 12px; }

  .vip-page { padding: 36px 24px 36px; }
  .vip-hero { margin-bottom: 32px; }
  .vip-content { max-width: 1440px; }
  .vip-stat-grid, .vip-plan-grid { gap: 16px; }
  .vip-stat-card { min-height: 140px; padding: 20px 14px; }
  .vip-stat-card svg { margin-bottom: 12px; }
  .vip-stat-card strong { font-size: 20px; margin-bottom: 6px; }
  .vip-stat-card span, .vip-plan-card p, .vip-plan-card ul { font-size: 14px; }
  .vip-plan-card { padding: 24px; }
  .vip-plan-card h2 { font-size: 20px; }
  .vip-plan-card header strong { font-size: 28px; }
  .vip-plan-button { height: 44px; font-size: 15px; }
  .vip-success-page { padding: 36px 48px 48px; }

  .activity-page { padding: 20px 48px 72px; }
  .activity-toolbar { gap: 16px; }
  .activity-search { width: min(360px, 100%); }
  .activity-date-box { width: 160px; }
  .activity-card { grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 24px; padding: 24px 26px; }
  .activity-detail-page { padding: 20px 48px 72px; }
  .activity-detail-shell { padding: 24px 26px; }
  .activity-poster-panel { gap: 28px; padding: 22px 28px; }
  .activity-detail-cover { height: 280px; }
  .activity-detail-content { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }

  .collection-hero-copy h1 { font-size: 32px; }
  .collection-advantages, .collection-process-section, .collection-knowledge-section, .collection-qa-section { padding-left: 56px; padding-right: 56px; }
  .collection-advantages { gap: 24px; padding-top: 70px; padding-bottom: 82px; }
  .collection-advantage-card { padding: 24px 28px; }
  .collection-process-wrap { grid-template-columns: minmax(0, 1fr) 630px; gap: 64px; }
  .collection-report-card { width: 630px; height: 645px; }
  .collection-knowledge-grid { gap: 32px; }
  .collection-knowledge-card { padding: 30px 28px 38px; }
  .collection-knowledge-card img { height: 220px; }
  .collection-qa-grid { gap: 44px 82px; }

  .credit-hero { min-height: 560px; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 70px; padding: 58px 72px 64px; }
  .credit-hero-copy p { margin-bottom: 34px; }
  .credit-hero-copy h1 { font-size: 54px; margin-bottom: 34px; }
  .credit-hero-copy h2 { font-size: 20px; margin-bottom: 48px; }
  .credit-hero-tags { gap: 34px; margin-top: 72px; font-size: 18px; }
  .credit-video-word { font-size: 72px; }
  .credit-purchase-section, .credit-notes-section { padding-left: 64px; padding-right: 64px; }
  .credit-sample-grid { padding: 0 64px; }
  .credit-sample-card img { height: 190px; }

  .about-feature-section, .about-intro-section, .about-advantage-section, .about-partner-section, .about-contact-section { padding-left: 56px; padding-right: 56px; }
  .about-intro-grid { gap: 48px; }
  .teacher-recruit-hero { height: auto; min-height: 520px; background-size: cover; }
  .teacher-recruit-hero-copy { padding-left: 64px; }
  .teacher-recruit-hero-copy h1 { font-size: 36px; }
  .teacher-recruit-head, .teacher-recruit-benefit-grid, .teacher-recruit-contact h2, .teacher-recruit-contact-grid { padding-left: 56px; padding-right: 56px; }
  .teacher-recruit-benefit-grid { gap: 24px; }
  .teacher-recruit-benefit-card { padding: 24px 28px; }
  .teacher-recruit-contact-card { padding: 32px 36px; }

  .stories-page { padding: 20px 48px 72px; }
  .story-feed-card.split { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 20px; }
  .story-side-image { height: 200px; }

}

@media (min-width: 901px) {
  .home-story-rank { align-items: start; }
}


/* 纯 HTML 版通用增强 */
[data-include]:empty { min-height: 1px; }
.static-toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 300; transform: translateX(-50%);
  padding: 12px 20px; border-radius: 8px; color: #fff; background: rgba(17, 24, 39, .92);
  box-shadow: 0 12px 32px rgba(17, 24, 39, .2); font-size: 15px;
}
.static-modal-layer {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center;
  padding: 24px; background: rgba(20, 28, 40, .52);
}
.static-modal {
  position: relative; width: min(520px, calc(100vw - 40px)); padding: 32px;
  border-radius: 14px; background: #fff; box-shadow: 0 24px 68px rgba(20, 28, 40, .24);
}
.static-modal h2 { margin: 0 0 12px; }
.static-modal p { color: #697386; line-height: 1.7; }
.static-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.static-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; }
.leave-toggle-icon { font-size: 12px; line-height: 1; transition: transform .2s ease; }
.leave-widget.collapsed .leave-toggle-icon { transform: rotate(180deg); }
.admin-static-charts { align-items: stretch; }
.admin-static-charts .panel { min-width: 0; }
.static-line-chart {
  position: relative; height: 250px; margin: 24px 12px 0;
  border-left: 1px solid #dfe5ee; border-bottom: 1px solid #dfe5ee;
  background: repeating-linear-gradient(to bottom, transparent 0 49px, #edf0f4 50px);
}
.static-line-chart::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(164deg, transparent 0 26%, #0b6b5c 26.4% 27.2%, transparent 27.6% 42%, #0b6b5c 42.4% 43.2%, transparent 43.6% 54%, #0b6b5c 54.4% 55.2%, transparent 55.6% 68%, #0b6b5c 68.4% 69.2%, transparent 69.6%);
  opacity: .9;
}
.static-line-chart i {
  position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px;
  border: 3px solid #fff; border-radius: 50%; background: #0b6b5c;
  box-shadow: 0 2px 7px rgba(11, 107, 92, .35); transform: translate(-50%, -50%);
}
.chart-labels { display: flex; justify-content: space-between; margin: 10px 4px 0; color: #697386; font-size: 13px; }
.static-funnel { height: 286px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.static-funnel span {
  width: var(--w); min-height: 48px; display: grid; place-items: center;
  color: #fff; background: var(--c); font-weight: 800;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.static-bars {
  height: 300px; display: flex; align-items: end; justify-content: space-around; gap: 18px;
  padding: 30px 24px 42px; border-bottom: 1px solid #dfe5ee;
  background: repeating-linear-gradient(to bottom, transparent 0 49px, #edf0f4 50px);
}
.static-bars span {
  position: relative; width: min(90px, 15%); height: var(--h); min-height: 42px;
  border-radius: 10px 10px 0 0; background: #0b6b5c;
}
.static-bars b { position: absolute; top: -25px; left: 50%; color: #0b6b5c; transform: translateX(-50%); }
.static-bars em {
  position: absolute; left: 50%; top: calc(100% + 12px); width: 110px;
  color: #697386; font-size: 13px; font-style: normal; text-align: center; transform: translateX(-50%);
}

/* UI 设计规范示范（见 docs/UI-SPEC.md） */
.ui-spec-showcase {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg) 0%, var(--card) 120px);
}
.ui-spec-showcase__head { margin-bottom: var(--space-2xl); }
.ui-spec-showcase__head h2 { margin-bottom: var(--space-sm); }
.ui-spec-block {
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.ui-spec-block h2 {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  color: var(--heading);
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
}
.ui-spec-block > p {
  margin: calc(var(--space-lg) * -1) 0 var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
}
.ui-spec-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-md); }
.ui-spec-swatch {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.ui-spec-swatch i {
  height: 56px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(0, 0, 0, .06);
}
.ui-spec-swatch strong { color: var(--heading); font-size: var(--font-sm); font-weight: var(--weight-bold); }
.ui-spec-swatch code { color: var(--text-meta); font-size: var(--font-xs); font-family: Consolas, "Courier New", monospace; }
.ui-spec-type-scale { display: grid; gap: var(--space-md); }
.ui-spec-type-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}
.ui-spec-type-row:last-child { border-bottom: 0; }
.ui-spec-type-row span { color: var(--text-meta); font-size: var(--font-xs); font-family: Consolas, "Courier New", monospace; }
.ui-spec-type-display { font-size: var(--font-display); line-height: var(--leading-snug); font-weight: var(--weight-black); color: var(--heading); }
.ui-spec-type-h1 { font-size: var(--font-3xl); line-height: var(--leading-tight); font-weight: var(--weight-black); color: var(--heading); }
.ui-spec-type-h2 { font-size: var(--font-2xl); line-height: var(--leading-snug); font-weight: var(--weight-bold); color: var(--heading); }
.ui-spec-type-h3 { font-size: var(--font-xl); line-height: 1.35; font-weight: var(--weight-bold); color: var(--heading); }
.ui-spec-type-lede { font-size: var(--font-lg); line-height: var(--leading-loose); color: var(--muted); }
.ui-spec-type-body { font-size: var(--font-base); line-height: var(--leading-relaxed); color: var(--ink); }
.ui-spec-type-caption { font-size: var(--font-sm); line-height: var(--leading-relaxed); color: var(--text-meta); }
.ui-spec-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.ui-spec-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-md); }
.ui-spec-btn-row:last-child { margin-bottom: 0; }
.ui-spec-btn-label { width: 100%; margin: 0 0 var(--space-xs); color: var(--text-meta); font-size: var(--font-xs); font-weight: var(--weight-medium); }
.ui-spec-forms { display: grid; gap: var(--space-lg); max-width: 480px; }
.ui-spec-forms label { display: grid; gap: var(--space-xs); color: var(--text-secondary); font-size: 15px; font-weight: var(--weight-medium); }
.ui-spec-forms input, .ui-spec-forms select {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border-input); border-radius: var(--btn-radius);
  color: var(--ink); background: var(--card); outline-color: var(--blue);
}
.ui-spec-forms input::placeholder { color: var(--placeholder); }
.ui-spec-forms .hint { margin: calc(var(--space-xs) * -1) 0 0; color: var(--placeholder); font-size: 13px; }
.ui-spec-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ui-spec-badge {
  min-width: 78px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border-radius: var(--radius-xs); font-size: 15px; font-weight: var(--weight-medium);
}
.ui-spec-badge--vip { color: var(--orange); background: #fff3e4; }
.ui-spec-badge--hot { color: var(--blue); background: #edf6ff; }
.ui-spec-badge--success { color: var(--success); background: var(--success-bg); }
.ui-spec-badge--warning { color: var(--warning); background: var(--warning-bg); }
.ui-spec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg); }
.ui-spec-card-demo {
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); box-shadow: var(--shadow-card); transition: .2s ease;
}
.ui-spec-card-demo:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ui-spec-card-demo__cover { height: 120px; background: linear-gradient(135deg, #e9eef4, #dfe9e5); }
.ui-spec-card-demo__body { padding: var(--space-md); display: grid; gap: var(--space-sm); }
.ui-spec-card-demo__body h3 { margin: 0; font-size: 19px; line-height: 1.35; color: var(--heading); }
.ui-spec-card-demo__meta { color: var(--text-meta); font-size: var(--font-sm); }
.ui-spec-card-demo__price { color: var(--orange); font-size: 20px; font-weight: var(--weight-bold); }
.ui-spec-spacing { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-end; }
.ui-spec-space-item { display: grid; gap: var(--space-xs); text-align: center; }
.ui-spec-space-item i { display: block; background: var(--orange); opacity: .75; border-radius: 2px; margin: 0 auto; }
.ui-spec-space-item span { color: var(--text-meta); font-size: var(--font-xs); font-family: Consolas, "Courier New", monospace; }
.ui-spec-radius { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.ui-spec-radius-item { display: grid; gap: var(--space-xs); justify-items: center; }
.ui-spec-radius-item i {
  width: 64px; height: 64px; background: var(--bg-subtle); border: 1px solid var(--border);
}
.ui-spec-radius-item span { color: var(--text-meta); font-size: var(--font-xs); }
@media (max-width: 640px) {
  .ui-spec-block { padding: var(--space-lg); }
  .ui-spec-type-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .ui-spec-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}