/* 星云课堂公共视觉：已上线页面、账号、课程与基础控件。 */
:root {
  --ink: #1a1d23;
  --ink-2: #4a505c;
  --muted: #626c7b;
  --bg: #ffffff;
  --panel: #f4f5f7;
  --line: #eceef1;
  --accent: #2f6fb3;
  --accent-soft: #e6eef8;
  --price: #1a1d23;
  --radius: 10px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-menu: 10px;
  --radius-pill: 999px;
  --space-control: 12px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input::file-selector-button { font-family: inherit; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 1000; padding: 10px 16px; background: #fff; color: var(--accent); border: 2px solid currentColor; border-radius: var(--radius-control); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.copyright-company, .copyright-rights { display: inline-block; }
.password-field { display: flex; align-items: stretch; margin: 0 0 16px; gap: 6px; }
.password-field input { min-width: 0; flex: 1; margin: 0; }
.password-toggle { flex: none; min-width: 48px; min-height: 44px; border: 1px solid #b7c4d5; border-radius: var(--radius-control); background: #fff; color: #2866a5; cursor: pointer; font: inherit; font-size: 14px; }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.course-search { display: flex; gap: var(--space-control); align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.course-search input { flex: 1; min-width: 140px; max-width: 400px; margin: 0; }
.course-search button, .course-search > a { flex: none; }
.course-pagination { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.course-pagination > div { display: flex; gap: 10px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: 1128px; margin: 0 auto; padding: 0 24px; }

/* 顶栏 */
/* 原生校验和焦点恢复滚动时，为固定顶栏及字段标签保留可见空间。 */
html:has(> body.site-page) { scroll-padding-top: 88px; }
.site-page :is(input, select, textarea, button, [contenteditable="true"]) { scroll-margin-top: 24px; }
.topbar { background: #fff; position: sticky; top: 0; z-index: 20; }
.topbar-inner {
  max-width: 1128px; margin: 0 auto; padding: 0 24px;
  height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 44px; height: 30px; object-fit: contain; flex-shrink: 0; }
.logo-text { font-size: 19px; font-weight: 800; letter-spacing: .06em; }
.user-entry {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; transition: background .2s;
}
.user-entry:hover { background: var(--panel); }
.user-entry svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }

/* 横幅 */
.banner {
  margin-top: 20px; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center;
  aspect-ratio: 1080 / 292; min-height: 240px;
  border-radius: 14px; overflow: hidden; position: relative;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.55) 0, transparent 40%),
    linear-gradient(120deg, #cfe3f6 0%, #a9cbee 45%, #7eaee0 100%);
  border: 1px solid #d9e6f3;
}

/* 区块 */
.block { padding-top: 48px; }
.block-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; }

.empty {
  background: var(--panel); border-radius: 4px;
  min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 40px 16px;
}
.empty p { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.btn-outline {
  min-width: 170px; text-align: center; padding: 10px 24px;
  background: #fff; border: 1px solid #dfe2e7; border-radius: 4px;
  font-size: 14px; font-weight: 600; transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }


/* 课程广场 */
.course-list { display: grid; gap: 40px; padding-bottom: 32px; }
.course { display: grid; grid-template-columns: 380px 1fr auto; gap: 40px; align-items: center; }
.cover {
  aspect-ratio: 380 / 216; border-radius: var(--radius); overflow: hidden;
  padding: 20px 22px; color: #fff; position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  transition: transform .25s;
}
.course:hover .cover { transform: translateY(-3px); }
.cover::after {
  /* 封面右侧的云形装饰 */
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.12);
}
.cover-brand { position: absolute; top: 16px; left: 22px; font-size: 13px; font-weight: 700; letter-spacing: .1em; opacity: .9; }
.cover strong { font-size: 30px; font-weight: 900; letter-spacing: .04em; }
.cover-tagline { font-size: 14px; opacity: .9; border-left: 2px solid rgba(255,255,255,.7); padding-left: 8px; }
.cover-a { background: linear-gradient(135deg, #15365c 0%, #2f6fb3 100%); }
.cover-b { background: linear-gradient(135deg, #1d3b3a 0%, #2e8073 100%); }
.cover-c { background: linear-gradient(135deg, #3a2a1f 0%, #b9773d 100%); }

.course-info .course-title { font-size: 17px; font-weight: 700; transition: color .2s; }
.course:hover .course-info .course-title { color: var(--accent); }
.tags { margin-top: 12px; display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.price { font-size: 26px; font-weight: 800; color: var(--price); white-space: nowrap; }
.price small { font-size: 15px; font-weight: 700; }

/* 页脚 */
.footer { padding: 24px 0 32px; }
.footer-inner {
  max-width: 1128px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  font-size: 12px; color: var(--muted);
}
.footer a:hover { color: var(--ink-2); }
.site-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.site-page > main { flex: 1; min-width: 0; padding-bottom: 24px; }
.site-page > .topbar, .site-page > .footer { flex-shrink: 0; }
.footer-copyright .footer-inner { text-align: center; font-size: 12px; line-height: 1.8; }

/* 平板 */
@media (max-width: 960px) {
  .course { grid-template-columns: 300px 1fr auto; gap: 24px; }
}

/* 手机课程卡片 */
@media (max-width: 640px) {
  html:has(> body.site-page) { scroll-padding-top: 76px; }
  .container { padding: 0 16px; }
  .topbar-inner { padding: 0 16px; height: 64px; }
  .logo-mark { width: 38px; height: 27px; }
  .logo-text { font-size: 17px; }

  .banner { grid-template-columns: 1fr; aspect-ratio: auto; min-height: 0; margin-top: 8px; }

  .block { padding-top: 32px; }
  .block-title { margin-bottom: 16px; }
  .empty { min-height: 150px; gap: 20px; }

  .course-list { gap: 28px; }
  .course { grid-template-columns: 1fr auto; grid-template-areas: "cover cover" "info price"; gap: 12px 16px; align-items: start; }
  .cover { grid-area: cover; }
  .cover strong { font-size: 26px; }
  .course-info { grid-area: info; }
  .course-info .course-title { font-size: 16px; }
  .tags { margin-top: 6px; }
  .price { grid-area: price; font-size: 22px; }

  .footer-inner { padding: 0 16px; gap: 4px 14px; }
}

/* ================= 以下为网站新增 ================= */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.nowrap { white-space: nowrap; }
.container.narrow { max-width: 520px; padding-top: 32px; padding-bottom: 48px; }
.page-h1 { font-size: 22px; font-weight: 800; margin-bottom: 16px; }

/* 顶栏右侧 */
.top-actions { display: flex; align-items: center; gap: 16px; }
.top-link { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.top-link:hover { color: var(--accent); }
.top-btn { font-size: 14px; font-weight: 700; padding: 6px 16px; border-radius: 999px; background: var(--ink); color: #fff; }
.avatar-menu { position: relative; }
.avatar-menu summary { list-style: none; cursor: pointer; }
.avatar-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
.menu-pop {
  position: absolute; right: 0; top: 46px; width: min(240px, calc(100vw - 32px)); min-width: 0; background: #fff; border-radius: var(--radius-menu);
  box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 8px; display: flex; flex-direction: column; z-index: 40;
}
.menu-pop a, .menu-pop button { display: block; text-align: left; padding: 9px 12px; border-radius: 6px; font-size: 14px; background: none; border: 0; font: inherit; cursor: pointer; color: var(--ink); width: 100%; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--panel); }
.menu-name { overflow-wrap: anywhere; padding: 6px 12px 10px; font-weight: 700; border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* 按钮与卡片 */
.btn {
  display: inline-block; padding: 10px 22px; border-radius: var(--radius-control); background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; border: 0; cursor: pointer; text-align: center;
}
.btn:hover { background: #255d98; }
.btn-outline { display: inline-block; cursor: pointer; font-family: inherit; }
.btn-sm { padding: 6px 14px; font-size: 13px; min-width: 0; }
.btn-lg { padding: 12px 30px; font-size: 16px; }
.btn-block { display: block; width: 100%; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; }
.card.center { text-align: center; }
.card hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; }

/* 提示条 */
.flash { margin: 12px 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: #eaf6ee; color: #1f6b3a; }
main > .flash { max-width: 1080px; margin: 16px auto 0; }
.flash-error { background: #fdecec; color: #a33030; }
.flash-info { background: var(--accent-soft); color: #234e7d; }
.flash-warn { background: #fff5e0; color: #8a5a00; }

/* 表单 */
form label { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
form label small { display: block; font-weight: 400; margin-top: 4px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid #dfe2e7; border-radius: var(--radius-control); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[disabled] { background: var(--panel); color: var(--ink-2); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
label.check input { width: auto; margin: 0; }
label.check a { color: var(--accent); }
.form-foot { display: flex; justify-content: space-between; margin-top: 16px; font-size: 14px; color: var(--accent); }
.prose p { margin-bottom: 12px; }
.prose h2 { font-size: 17px; margin: 20px 0 8px; }

/* 首页「我的课程」 */
.block-head { display: flex; justify-content: space-between; align-items: baseline; }
.block-link { font-size: 14px; color: var(--accent); font-weight: 600; }
.my-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.my-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.my-card .cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.my-card-body { padding: 20px 18px 22px; flex: 1; }
.my-card-body h2, .my-card-body h3 { font-size: 18px; margin-bottom: 16px; overflow-wrap: anywhere; }
.my-card-body .small { font-size: 13px; margin-top: 12px; line-height: 1.6; }
.my-card.expired .cover { opacity: .65; }
.progress { height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.progress span { display: block; height: 100%; background: var(--accent); }
.more { margin-top: 16px; text-align: right; font-size: 14px; color: var(--accent); }
.owned-badge { font-size: 14px; font-weight: 700; color: #1f6b3a; background: #eaf6ee; padding: 4px 12px; border-radius: 999px; }

/* 封面图 */
.cover.has-img { background: #15365c; }
.cover.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-img { padding: 0; }
.cover.has-img::after { display: none; }

/* 课程详情 */
.detail-head { display: grid; grid-template-columns: 460px 1fr; gap: 40px; padding-top: 32px; align-items: start; }
.detail-sub { font-size: 16px; color: var(--ink-2); }
.detail-info .tags { margin: 12px 0; }
.detail-info .price { margin: 16px 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.detail-actions p { flex-basis: 100%; }

/* 课程目录 */
.outline .chapter { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; background: #fff; }
.outline summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.outline summary::-webkit-details-marker { display: none; }
.ch-chevron, .l-arrow { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ch-chevron { color:var(--muted); align-self:center; transition:transform 180ms ease, color 150ms ease; }
.outline details[open] > summary .ch-chevron { transform:rotate(180deg); }
.ch-count { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted); }
.outline ol { list-style: none; margin: 0; padding: 0 8px 8px; }
.outline li > a, .outline li > div { display: flex; gap: 14px; align-items: center; padding: 10px 8px; border-radius: 6px; }
.outline li > a:hover { background: var(--panel); }
.outline li.current > a { background: var(--accent-soft); }
.l-no { width: 34px; color: var(--muted); font-size: 13px; flex: none; }
.l-body { flex: 1; display: flex; flex-direction: column; }
.l-title { font-size: 15px; }
.l-dur { font-size: 12px; color: var(--muted); }
.l-state { color: #2e8b57; font-weight: 700; }
.outline li > div .l-title { color: var(--ink-2); }

/* 领课页 */
.redeem-card .result-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; }
.result-icon.ok { background: #2e8b57; }
.result-icon.bad { background: #c25050; }
.redeem-course { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.redeem-card p { margin-bottom: 12px; }
.stack-btns { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.stack-btns .btn-outline { padding: 12px 30px; font-size: 16px; }

@media (max-width: 960px) {
  .detail-head { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .top-actions { gap: 10px; }
  .top-link { font-size: 14px; }
  .card { padding: 20px 16px; }
  .my-grid { grid-template-columns: 1fr; }
}

/* 页脚公安备案：图标在号码前 */
.police-beian { display: inline-flex; align-items: center; gap: 4px; }
.police-beian img { width: 13px; height: 14px; }

/* 横幅自带文案：按原比例完整展示，窄屏不裁掉船名和目的地。 */
.banner-hero { display: block; position: relative; aspect-ratio: auto; min-height: 0; background: #14284a; border: 0; }
.banner-hero .banner-bg { display: block; width: 100%; height: auto; aspect-ratio: 2112 / 744; }

/* 站点设置里写的富文本 */
.prose.rich img { max-width: 100%; height: auto; }
.prose.rich ul, .prose.rich ol { padding-left: 1.4em; margin-bottom: 12px; }
.prose.rich blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--line); color: var(--ink-2); }
.prose.rich a { color: var(--accent); text-decoration: underline; }
.prose.rich li[data-list="bullet"] { list-style-type: disc; }

/* 窄屏内容可收缩，长标题和链接不会撑开课程卡片。 */
.course-info, .detail-info, .l-body { min-width: 0; overflow-wrap: anywhere; }
.tags { flex-wrap: wrap; }
.prose.rich { overflow-wrap: anywhere; }
@media (min-width: 641px) and (max-width: 960px) {
  .banner-hero { min-height: 0; }
}
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
  .top-link, .top-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .avatar-menu summary { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .row-between, .form-foot { flex-wrap: wrap; gap: 8px; }
}

/* 首页内容细节；顶栏边界由共用页壳统一。 */
.home .banner-hero { border-radius: 12px; }
.home .banner-hero h1 { font-size: clamp(30px, 4vw, 52px); letter-spacing: .04em; }
.home .block { padding-top: 40px; }
.home .block-title { font-size: 22px; margin-bottom: 24px; }
.home .empty {
  min-height: 120px; padding: 28px 32px; border-radius: 8px;
  flex-direction: row; justify-content: space-between; gap: 24px;
}
.home .empty p { font-size: 16px; font-weight: 400; }
.home .empty .btn-outline {
  min-width: 120px; flex-shrink: 0; padding: 12px 24px;
  border-color: var(--accent); background: var(--accent); color: #fff; border-radius: 6px;
}
.home .empty .btn-outline:hover { background: #255d98; border-color: #255d98; }
.home .footer { padding-top: 24px; }
.home .footer-inner { color: #747c89; }
.home a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 640px) {
  .home .banner-hero h1 { font-size: 30px; }
  .home .block { padding-top: 32px; }
  .home .block-title { font-size: 20px; margin-bottom: 16px; }
  .home .empty { min-height: 112px; padding: 20px; gap: 16px; flex-wrap: wrap; }
  .home .empty p { font-size: 15px; flex: 1 1 150px; }
  .home .empty .btn-outline { min-width: 104px; padding: 10px 16px; }
}

/* 首页账号入口：圆形头像，课程入口收进个人菜单。 */
.home .avatar-menu summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 44px; min-height: 44px; padding: 4px; border-radius: 50%;
  transition: background-color .15s ease;
}
.home .avatar-menu summary:hover,
.home .avatar-menu[open] summary { background: #f1f5f9; }
.home .avatar-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 我的课程：数量与有上限的渐进展开。 */
#my-courses [hidden] { display: none !important; }
#my-courses { scroll-margin-top: 90px; }
.my-courses-head { align-items: center; gap: 16px; margin-bottom: 24px; }
.home .my-courses-head .block-title { margin: 0; }
.course-heading { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.course-count { font-size: 15px; color: #77808d; }
.course-expand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #286cb2; font-size: 14px; font-weight: 600; white-space: nowrap; }
.course-expand:hover, .course-collapse:hover { color: #164c86; }
.course-collapse { color: #737d8a; font-size: 13px; padding: 10px 0; }
.course-study { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; min-height: 58px; background: #eef5fd; color: #216bb3; font-size: 15px; font-weight: 600; }
.course-study:hover { background: #e1efff; color: #154f8c; }
.course-study span { font-size: 23px; line-height: 1; }

/* 首页一课一行：沿用封面及学习入口，仅调整这一处的卡片布局。 */
.home-banner-wrap { display: contents; }
.my-card-mobile-subtitle, .my-card-mobile-progress, .my-card-mobile-arrow { display: none; }
.home .my-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.home .my-card {
  display: grid; grid-template-columns: minmax(0, 31%) minmax(0, 1fr) auto;
  align-items: center; gap: 32px; padding: 18px;
  border-color: #e1e6ed; border-radius: var(--radius-card); overflow: visible;
}
.home .my-card-cover { display: block; min-width: 0; border-radius: 8px; }
.home .my-card .cover { border-radius: 8px; }
.home .my-card .cover strong { font-size: 24px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .my-card-body { min-width: 0; padding: 0; }
.home .my-card-body h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.45; }
.home .my-card-type { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.home .my-card-body .small { margin: 12px 0 0; font-size: 15px; }
.home .my-card .progress { margin-bottom: 0; }
.home .course-study {
  justify-content: center; gap: 18px; min-height: 52px; min-width: 168px; padding: 12px 24px;
  font-size: 17px;
  border-radius: 8px; background: var(--accent); color: #fff; white-space: nowrap;
}
.home .course-study:hover { background: #255d98; color: #fff; }
@media (max-width: 900px) {
  .home .my-card { gap: 22px; }
  .home .my-card-body h3 { font-size: 20px; }
  .home .my-card-type, .home .my-card-body .small { font-size: 14px; }
  .home .course-study { gap: 12px; min-width: 0; padding: 12px 18px; }
}
@media (max-width: 700px) {
  .home-owned { background: #f5f7fb; }
  .home-owned .home-content { padding: 0; }
  .home-owned .home-banner-wrap { display: block; padding: 8px 16px 16px; background: #fff; }
  .home-owned .banner-hero { margin: 0; }
  .home-owned #my-courses { padding: 24px 12px 0; }
  .home-owned .footer-inner { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .home .my-grid { gap: 12px; }
  .home .my-card {
    position: relative; grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    gap: 12px; padding: 8px; align-items: center; background: #fff; border-color: #eceff4;
    box-shadow: 0 2px 8px #162e4903;
  }
  .home .my-card-cover { grid-area: auto; border-radius: 6px; }
  .home .my-card-body { grid-area: 1 / 2; padding: 0 18px 0 0; }
  .home .my-card-body h3 { font-size: 16px; line-height: 1.4; margin-bottom: 4px; overflow-wrap: anywhere; }
  .home .my-card-type, .home .my-card .progress, .home .my-card-desktop-meta { display: none; }
  .home .my-card-mobile-subtitle {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 4px;
  }
  .home .my-card-mobile-progress { display: block; margin: 0; color: var(--accent); font-size: 14px; line-height: 1.5; font-weight: 600; }
  .home .course-study, .home .course-study:hover {
    position: static; grid-area: 1 / 2; justify-self: end; align-self: center; width: 18px; min-width: 0; min-height: 44px;
    padding: 0; gap: 0; background: transparent; color: #929db1; font-size: 0;
  }
  /* 扩大既有学习链接的触控范围，不增加点击脚本或改变学习目标。 */
  .home .course-study::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
  .home .course-study > span { display: none; }
  .home .my-card-mobile-arrow { display: block; width: 18px; height: 18px; }
  .home .course-study:focus-visible { outline: none; }
  .home .my-card:has(.course-study:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
  .home .my-card .cover { grid-area: auto; aspect-ratio: 16 / 9; padding: 10px; border-radius: 6px; }
  .home .my-card .cover-brand { top: 7px; left: 10px; font-size: 8px; }
  .home .my-card .cover strong { font-size: 14px; line-height: 1.35; margin-top: 12px; -webkit-line-clamp: 2; }
  .home .my-card .cover-tagline { display: none; }
}
@media (max-width: 360px) {
  .home .my-card { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 8px; }
  .home .my-card-mobile-arrow { width: 16px; height: 16px; }
  .home .my-card .cover { padding: 8px; }
  .home .my-card .cover strong { font-size: 12px; }
}
@media (max-width: 760px) {
  .my-courses-head { flex-wrap: wrap; gap: 12px; }
  .course-heading { gap: 10px; }
  .course-count { font-size: 13px; }
  .course-expand { font-size: 13px; }
}
@media (max-width: 640px) {
  .my-grid { grid-template-columns: 1fr; }
  .my-courses-head { margin-bottom: 20px; }
  .course-heading { min-width: 0; flex-wrap: wrap; gap: 4px 8px; }
  .course-count { white-space: nowrap; }
  .my-card-body .small { font-size: 14px; }
}

/* 超过九门：在已展开的课程列表末尾查看全部。 */
.course-view-all { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; margin-top: 24px; padding: 14px 20px; border: 1px solid #dce8f5; border-radius: 10px; background: #f3f7fc; color: #286cb2; font-size: 14px; font-weight: 600; transition: background-color .15s, border-color .15s; }
.course-view-all:hover { background: #e8f1fb; border-color: #b9d2ed; }

/* 账号资料：选定的居中个人卡片，所有尺寸均保留触屏操作空间。 */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-menu summary { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 50%; }
.avatar-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.account-page { min-height: 100svh; display: flex; flex-direction: column; }
.account-page main { flex: 1; }
.account-shell { width: min(100% - 40px, 534px); margin: 80px auto 64px; }
.account-card { padding: 44px 32px 26px; border: 1px solid #dfe4eb; border-radius: 12px; background: white; }
.profile-avatar-area { text-align: center; margin-bottom: 28px; }
.profile-avatar-picker { position: relative; display: block; width: 112px; margin: 0 auto 14px; cursor: pointer; }
.profile-avatar { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--accent); color: #fff; font-size: 48px; font-weight: 500; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-camera { position: absolute; right: -3px; bottom: 0; width: 38px; height: 38px; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 2px 5px #162e4912; }
.avatar-camera img { width: 20px; height: 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.profile-avatar-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 50%; }
.avatar-change { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; padding: 6px 16px; }
.avatar-help { color: #778395; font-size: 13px; }
.avatar-feedback { font-size: 13px; color: var(--accent); margin-top: 5px; }
.avatar-feedback:empty { display: none; }
.account-form label { margin-bottom: 24px; }
.account-form .profile-avatar-picker { margin-bottom: 10px; }
.account-form input:not([type=file]) { height: 52px; font-size: 16px; border-radius: 8px; }
.account-phone { display: block; position: relative; }
.account-phone input { background: #f3f5f7; color: #657082; padding-right: 44px; }
.account-phone img { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; opacity: .55; transform: translateY(-50%); }
.account-save { width: 100%; min-height: 52px; margin-top: 8px; border-radius: 8px; }
.account-password { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 20px; color: var(--accent); font-size: 15px; }
.account-logout { display: flex; justify-content: center; margin-top: 30px; }
.account-logout button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: transparent; color: #657082; font: inherit; cursor: pointer; }
.account-logout img { width: 20px; height: 20px; opacity: .55; }
.account-page .footer-inner { font-size: 12px; text-align: center; justify-content: center; }
@media (max-width: 600px) {
  .account-shell { width: calc(100% - 32px); margin: 28px auto 36px; }
  .account-card { padding: 30px 22px 20px; }
  .profile-avatar, .profile-avatar-picker { width: 96px; height: 96px; }
  .profile-avatar { font-size: 42px; }
  .account-form label { margin-bottom: 20px; }
  .account-logout { margin-top: 20px; }
}

/* 资料保存成功：轻量浮层，避免横幅挤动页面。 */
.success-toast { position: fixed; z-index: 100; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(420px, calc(100vw - 48px)); overflow-wrap: anywhere; line-height: 1.6; padding: 16px 22px; border: 1px solid #e6ebe8; border-radius: 12px; background: #fff; color: #26352e; box-shadow: 0 8px 32px #162e491c, 0 2px 8px #162e490a; font-size: 15px; font-weight: 500; pointer-events: none; }
.success-toast-check { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: #279665; color: white; font-size: 15px; font-weight: 700; }

/* 规则与有效期等辅助信息保持可读，避免 small 默认缩成 11.7px。 */
form label small { font-size: 14px; line-height: 1.6; color: var(--muted); }
/* 联系方式共用居中布局：先读说明，再扫码或复制微信号。 */
.contact-card { padding: 36px 32px 28px; text-align: center; }
.contact-card .page-h1 { margin-bottom: 12px; }
.contact-intro { margin: 0 0 12px; font-size: 21px; line-height: 1.5; font-weight: 650; letter-spacing: -.02em; }
.contact-description { margin: 0; color: #647084; font-size: 15px; line-height: 1.85; }
.contact-invitation { margin: 26px 0 0; color: #49576a; font-size: 15px; }
.contact-method { display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
.contact-qr { width: 196px; max-width: 100%; padding: 10px; border: 1px solid #e5eaf0; border-radius: 12px; background: #fff; }
.contact-qr img { display: block; width: 100%; height: auto; border-radius: 4px; }
.contact-wechat { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px; font-size: 15px; color: #647084; }
.contact-wechat strong { color: var(--ink); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.contact-actions .btn { min-height: 44px; min-width: 176px; max-width: 100%; }
.contact-actions .btn:focus-visible, .contact-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-copy-status { color: #647084; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.contact-copy-status:empty { display: none; }
.contact-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.contact-foot { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--accent); }
.contact-foot a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  .contact-card { padding: 28px 18px 20px; }
  .contact-intro { font-size: 19px; }
  .contact-description { font-size: 14px; }
  .contact-qr { width: 184px; }
  .contact-foot { margin-top: 24px; padding-top: 16px; }
}

/* 平板课程详情保持封面与信息并排，避免大封面占满首屏。 */
@media (min-width: 641px) and (max-width: 1100px) {
  .detail-head { grid-template-columns: minmax(220px, 38%) minmax(0, 1fr); gap: 24px; }
  .detail-head > .cover { width: 100%; max-height: 240px; aspect-ratio: 16 / 9; }
  .detail-info .page-h1 { font-size: 25px; }
  .detail-sub { font-size: 16px; }
}

/* 学员开通与领课确认沿用轻量表单卡片，窄屏按钮自动换行。 */
.claim-account{margin:22px 0;padding:16px;border-radius:10px;background:#f4f7fb;overflow-wrap:anywhere}
.claim-account p{margin:0 0 6px;color:#687588}.redeem-card form+.form-foot,.redeem-card form+form{margin-top:16px}
.btn-text{border:0;background:transparent;color:#526581;cursor:pointer;font:inherit;padding:10px;line-height:1.5}

/* 课程详情：紧凑概览，信息只渲染一次，按尺寸重排。 */
.detail-page { padding-top:32px; }
.detail-overview { display:grid; grid-template-columns:minmax(240px,360px) minmax(0,1fr); grid-template-areas:"cover info" "cover meta" "price actions"; column-gap:36px; position:relative; }
.detail-overview .detail-head, .detail-purchase { display:contents; }
.detail-overview .cover { grid-area:cover; display:flex; width:100%; height:auto; max-height:none; aspect-ratio:16/9; margin:0 0 28px; border-radius:10px; overflow:hidden; }
.detail-overview .cover img { width:100%; height:100%; object-fit:contain; }
.detail-overview .detail-info { grid-area:info; align-self:end; padding-top:12px; }
.detail-info .page-h1 { font-size:30px; line-height:1.45; margin:0; overflow-wrap:anywhere; }
.detail-info .detail-sub { margin:10px 0 0; overflow-wrap:anywhere; }
.detail-info .tags { margin:10px 0 0; flex-wrap:wrap; overflow-wrap:anywhere; }
.detail-meta { grid-area:meta; align-self:start; margin:12px 0 40px; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.detail-overview::before { content:""; grid-row:3; grid-column:1/-1; background:#eff6fd; border-radius:8px; }
.detail-purchase > .price, .detail-access { grid-area:price; align-self:center; margin:0; padding:22px 24px; z-index:1; }
.detail-access { font-size:18px; color:var(--accent); font-weight:600; }
.detail-overview .detail-actions { grid-area:actions; justify-content:flex-end; align-self:center; margin:0; padding:18px 24px 18px 0; z-index:1; }
.detail-actions .btn, .detail-actions .btn-outline { min-width:136px; text-align:center; padding:12px 20px; font-size:15px; }
.detail-actions button:disabled { opacity:.6; cursor:default; }
.detail-content { margin:32px 0 48px; }
.detail-tabs { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.detail-tabs a { position:relative; padding:12px 2px 15px; color:var(--muted); font-size:16px; font-weight:600; transition:color 150ms ease; }
.detail-tabs a::after { content:""; position:absolute; height:3px; left:0; right:0; bottom:-1px; border-radius:3px; background:var(--accent); transform:scaleX(0); transition:transform 180ms ease; }
.detail-tabs .is-active { color:var(--accent); }
.detail-tabs .is-active::after { transform:scaleX(1); }
.detail-tabs a:focus-visible, .detail-panel:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.detail-panel[hidden] { display:none; }
.detail-panel.prose { padding:24px; border:1px solid #e4e9f0; border-radius:12px; overflow-wrap:anywhere; white-space:pre-line; }
.detail-panel.prose > p { max-width:760px; }
/* 章节头与课时共用完整边界；交互反馈只落在当前可操作行。 */
.course-detail .outline .chapter { border:1px solid #e4e9f0; border-radius:12px; margin-bottom:12px; overflow:hidden; }
.course-detail .outline summary { align-items:center; min-height:62px; padding:18px 20px; background:#fff; font-weight:600; transition:background-color 150ms ease; }
.course-detail .outline details[open] > summary { background:#f8fafc; border-bottom:1px solid #e9eef4; }
.course-detail .ch-title { min-width:0; overflow-wrap:anywhere; line-height:1.55; }
.course-detail .ch-count { white-space:nowrap; align-self:center; font-size:12px; }
.course-detail .outline ol { padding:0; }
.course-detail .outline li + li { border-top:1px solid #eef1f5; }
.course-detail .outline li > a, .course-detail .outline li > div { gap:16px; min-height:72px; padding:18px 20px; border-radius:0; background:#fff; transition:background-color 150ms ease, color 150ms ease; }
.course-detail .l-no { width:32px; font-size:12px; font-variant-numeric:tabular-nums; }
.course-detail .l-body { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; }
.course-detail .l-title { font-size:15px; line-height:1.65; }
.course-detail .l-dur { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.course-detail .l-state { width:18px; flex:none; display:flex; align-items:center; justify-content:center; color:#8796a8; }
.course-detail .l-arrow { width:16px; height:16px; transition:transform 150ms ease, color 150ms ease; }
.course-detail .outline summary:focus-visible, .course-detail .outline li > a:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; background:#eef5fc; }
@media (hover:hover) and (pointer:fine) {
  .detail-tabs a:hover { color:var(--accent); }
  .course-detail .outline summary:hover { background:#eff4f9; }
  .course-detail .outline summary:hover .ch-chevron { color:var(--accent); }
  .course-detail .outline li > a:hover { background:#f0f6fc; color:var(--accent); }
  .course-detail .outline li > a:hover .l-arrow { color:var(--accent); transform:translateX(2px); }
}
.course-detail .outline li > a:active { background:#e5effa; }
@media (prefers-reduced-motion:reduce) {
  .detail-tabs a, .detail-tabs a::after, .course-detail .outline summary, .course-detail .outline li > a, .ch-chevron, .l-arrow { transition:none; }
}
@media (min-width:641px) and (max-width:900px) {
  .detail-overview { grid-template-columns:minmax(220px,36%) minmax(0,1fr); column-gap:24px; }
  .detail-info .page-h1 { font-size:26px; }
}
@media (max-width:640px) {
  .detail-page { padding-top:16px; }
  .detail-overview { grid-template-columns:minmax(0,1fr); grid-template-areas:"cover" "info" "price" "meta" "actions"; column-gap:0; }
  .detail-overview .cover { margin:0 0 18px; }
  .detail-overview .detail-info { padding:0; margin-bottom:20px; }
  .detail-info .page-h1 { font-size:24px; line-height:1.4; }
  .detail-info .detail-sub { font-size:15px; }
  .detail-overview::before { grid-row:3/6; grid-column:1; }
  .detail-purchase > .price, .detail-access { padding:18px 18px 0; }
  .detail-meta { margin:8px 18px 16px; z-index:1; font-size:13px; }
  .detail-overview .detail-actions { padding:0 18px 18px; flex-direction:column; gap:10px; align-items:stretch; }
  .detail-actions .btn, .detail-actions .btn-outline { width:100%; min-width:0; }
  .detail-content { margin-top:24px; }
  .detail-tabs { gap:24px; margin-bottom:18px; }
  .detail-panel.prose { padding:18px; }
  .course-detail .outline summary { padding:16px 14px; gap:10px; min-height:60px; }
  .course-detail .outline li > a, .course-detail .outline li > div { padding:16px 14px; gap:12px; min-height:76px; }
  .course-detail .l-no { width:26px; }
  .course-detail .l-body { grid-template-columns:minmax(0,1fr); gap:3px; }
}
.account-security-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px; margin-top:24px; }
.account-security-actions .account-password { margin:0; padding:6px 0; font-size:15px; }
.form-card form > p.muted { margin-bottom:16px; }
.form-card .redeem-course + p { margin-bottom:20px; }
.course-detail .l-state img { width:16px; height:16px; display:block; opacity:.7; }

/* 表单占位提示轻于已输入内容。 */
input::placeholder { color: #667180; opacity: 1; font-weight: 400; }

/* 用户可编辑的长标题在所有使用位置保持可读；封面文字仅作视觉摘要。 */
.my-card-body h2, .my-card-body h3, .redeem-course, .flash, .cover strong, .cover-tagline { overflow-wrap: anywhere; }
.cover:not(.has-img) { container-type: inline-size; padding-top: 44px; }
.cover strong { font-size: clamp(16px, 8cqw, 30px); line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cover-tagline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }

.course-list-actions { text-align: center; }
.course-list-actions .course-collapse { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 12px; }

/* 会员课：仅后台展示类型控制，沿用品牌蓝和原生键盘行为。 */
.member-course-option{padding:14px 16px;background:var(--soft,#f6f8fc);border:1px solid var(--line,#e6eaf0);border-radius:12px}
.member-switch{display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important;position:relative;min-height:44px;cursor:pointer;width:fit-content;font-weight:600}
.member-switch input[type=checkbox]{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.member-switch-track{display:inline-block;width:44px;height:26px;border-radius:20px;background:#b6becb;position:relative;flex-shrink:0;transition:background .16s}
.member-switch-track:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .16s}
.member-switch input:checked+.member-switch-track{background:var(--blue,#2563eb)}
.member-switch input:checked+.member-switch-track:after{transform:translateX(18px)}
.member-switch input:focus-visible+.member-switch-track{outline:3px solid #86b5ff;outline-offset:3px}
.member-switch:has(input:disabled){cursor:default;opacity:.65}
.member-course-option p{margin:6px 0;line-height:1.65;overflow-wrap:anywhere}
.member-impact{margin-top:10px;font-size:13px}.member-impact summary{cursor:pointer;min-height:32px;padding:5px 0}.member-impact p{max-width:70ch}
.member-ordinary-term{min-width:0}.member-ordinary-term[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.member-switch-track,.member-switch-track:after{transition:none}}

.member-change-warning{padding:10px 12px;background:#fff5df;color:#744700;border-radius:8px}

/* 认证页只保留品牌、返回入口与卡片中的身份切换。 */
.auth-page .form-card > .page-h1 { text-align: center; margin-bottom: 24px; }
.auth-page .topbar-inner > .top-link { display: inline-flex; align-items: center; min-height: 44px; }
.auth-page .form-card > .redeem-course { text-align: center; }
.auth-page .form-card > .redeem-course + .small { text-align: center; }
.status-card .status-message { max-width: 30em; margin-inline: auto; text-wrap: pretty; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.status-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; flex: 1 1 140px; padding: 10px 16px; font-size: 15px; }
.course-study-muted { color: var(--ink-2); background: var(--panel); }
.course-study-muted:hover { color: var(--accent); background: #edf1f6; }
@media (min-width: 641px) and (max-width: 900px) { .my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }