/* 视频站 PHP 前台样式。列表、卡片沿用现网 portald 页面的样子（youtubeLiteCSS / typePageCSS），
   页头按设计 §7.1 改为：站名 + 订阅 + 账号一行，搜索框一行。 */
:root {
  --vs-text: #0f0f0f; --vs-muted: #606060; --vs-faint: #8a8a8a; --vs-line: #e5e5e5; --vs-bg: #fff; --vs-panel: #fff;
  --vs-chip: #f2f2f2; --vs-hover: #f2f2f2; --vs-current: #e8f0fe; --vs-blue: #1a73e8; --vs-link-hover: #065fd4;
  --vs-input: #c6c6c6; --vs-thumb: #e5e7eb;
}
:root { color-scheme: light; }
/* 深色：页头开关（cookie vs_theme=dark）打开时；默认浅色，不跟随手机设置 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --vs-text: #f1f1f1; --vs-muted: #aaa; --vs-faint: #8a8a8a; --vs-line: #303030; --vs-bg: #0f0f0f; --vs-panel: #181818;
  --vs-chip: #272727; --vs-hover: #272727; --vs-current: #1e2a3d; --vs-link-hover: #8ab4f8; --vs-input: #3a3a3a; --vs-thumb: #272727;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--vs-text); background: var(--vs-bg); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
a { color: inherit; }
.vs-link { color: var(--vs-blue); text-decoration: none; font-weight: 600; }
.vs-muted { color: var(--vs-muted); font-size: 13px; }

/* 各站可配置的推广栏：纯文案与独立按钮。 */
.vs-notice { color: #3c2f00; background: #fbbc04; font-weight: 600; }
.vs-notice-inner { width: min(100% - 40px, 1400px); min-height: 44px; margin: auto; padding: 7px 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.vs-notice-inner > span { min-width: 0; overflow-wrap: anywhere; }
.vs-notice-btn { flex: none; padding: 5px 12px; border-radius: 6px; color: #fff; background: #1d4ed8; text-decoration: none; }

/* 页头 */
.vs-header { padding: 14px 0; border-bottom: 1px solid var(--vs-line); background: var(--vs-bg); }
.vs-header-inner { width: min(100% - 40px, 1400px); margin: auto; display: grid; grid-template-columns: minmax(0, auto) minmax(160px, 520px) auto; align-items: center; gap: 16px 28px; }
.vs-logo { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--vs-text); font-size: 21px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vs-logo span:last-child { overflow: hidden; text-overflow: ellipsis; }
.vs-site-icon { display: block; flex: none; width: 32px; height: 32px; border-radius: 8px; }
.vs-logo-mark { position: relative; flex: none; width: 30px; height: 21px; border-radius: 6px; background: #f00; }
.vs-logo-mark::after { content: ""; position: absolute; left: 12px; top: 6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; }
.vs-header-actions { display: flex; justify-self: end; align-items: center; gap: 8px; min-width: 0; }
.vs-header-traffic { width: min(100% - 40px, 1400px); margin: 10px auto 0; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; border: 1px solid var(--vs-line); border-radius: 17px; background: none; color: var(--vs-text); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.vs-btn:hover { background: var(--vs-hover); }
.vs-btn-sub { border-color: #2563eb; color: #fff; background: #2563eb; }
.vs-btn-sub:hover { background: #1d4ed8; }
.vs-btn-off { color: var(--vs-muted); }
.vs-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--vs-line); border-radius: 50%; background: none; color: var(--vs-text); font-size: 16px; line-height: 1; cursor: pointer; }
.vs-theme::before { content: "🌙"; }
:root[data-theme="dark"] .vs-theme::before { content: "☀️"; }
.vs-theme:hover { background: var(--vs-hover); }
.vs-search { width: 100%; min-width: 0; height: 40px; display: flex; align-items: center; border: 1px solid var(--vs-input); border-radius: 20px; overflow: hidden; background: var(--vs-panel); }
.vs-search-icon { flex: none; width: 15px; height: 15px; margin-left: 14px; margin-right: 10px; border: 2px solid var(--vs-muted); border-radius: 50%; position: relative; }
.vs-search-icon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; background: var(--vs-muted); transform: rotate(45deg); }
.vs-search input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; padding: 0 12px 0 0; color: var(--vs-text); background: transparent; font-size: 16px; }
.vs-search button { align-self: stretch; min-width: 72px; border: 0; border-left: 1px solid var(--vs-input); color: var(--vs-text); background: var(--vs-chip); cursor: pointer; font-weight: 600; font-size: 14px; }

/* 列表 */
.vs-main { width: min(100% - 40px, 1400px); margin: 0 auto; padding: 28px 0 56px; }
.vs-main h1 { margin: 0 0 20px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.vs-heading-en { display: block; margin-top: 4px; color: var(--vs-muted); font-size: 14px; font-weight: 500; }
.vs-channels { width: min(100%, 520px); margin: 0 0 20px; border: 1px solid var(--vs-input); border-radius: 6px; background: var(--vs-panel); }
.vs-channels summary { position: relative; display: block; padding: 9px 40px 9px 12px; cursor: pointer; list-style: none; }
.vs-channels summary::-webkit-details-marker { display: none; }
.vs-channels summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--vs-muted); border-bottom: 2px solid var(--vs-muted); transform: rotate(45deg); }
.vs-channels[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.vs-channels[open] summary { border-bottom: 1px solid var(--vs-line); }
.vs-channel-list { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vs-channel-list a { display: block; padding: 9px 12px; border-bottom: 1px solid var(--vs-line); text-decoration: none; }
.vs-channel-list a:last-child { border-bottom: 0; }
.vs-channel-list a:hover { background: var(--vs-hover); }
.vs-channel-list a[aria-current="page"] { background: var(--vs-current); }
.ch-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ch-name-en { display: block; margin-top: 2px; color: var(--vs-muted); font-size: 12px; line-height: 1.35; }
.vs-tabs { display: flex; gap: 8px; margin: 0 0 14px; border-bottom: 1px solid var(--vs-line); }
.vs-tabs a { padding: 9px 16px 8px; border-bottom: 3px solid transparent; color: var(--vs-muted); font-size: 16px; font-weight: 600; text-decoration: none; }
.vs-tabs a[aria-current="page"] { border-bottom-color: var(--vs-text); color: var(--vs-text); }
.vs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.vs-grid.vs-shorts { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 12px; }
.vs-card { min-width: 0; }
.vs-card-main { display: block; color: inherit; text-decoration: none; }
/* 卡片下方的频道：头像 + 名字，链到频道页 */
.vs-card-ch { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 8px; color: inherit; text-decoration: none; }
.vs-card-ch .vs-channel { margin-top: 0; }
.vs-card-ch .vs-channel-en { margin-top: 1px; }
a.vs-card-ch:hover .vs-channel:first-child { color: var(--vs-text); text-decoration: underline; }
.vs-ch-text { display: block; min-width: 0; }
.vs-avatar-img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--vs-thumb); }
.vs-avatar-text { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #94a3b8; font-size: 14px; font-weight: 700; }
.vs-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--vs-thumb); }
.vs-shorts .vs-thumb { aspect-ratio: 9 / 16; border-radius: 8px; }
.vs-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.vs-dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 5px; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, .82); font-size: 12px; font-weight: 600; line-height: 1.3; }
.vs-title { display: -webkit-box; overflow: hidden; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vs-card-main:hover .vs-title { color: var(--vs-link-hover); }
.vs-title-zh { display: block; overflow: hidden; margin-top: 3px; color: var(--vs-text); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.vs-channel { display: block; overflow: hidden; margin-top: 6px; color: var(--vs-muted); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.vs-channel-en { margin-top: 2px; color: var(--vs-faint); font-size: 12px; }
.vs-stats { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 64px); overflow: hidden; padding: 2px 5px; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, .72); font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }   /* 缩略图左下：播放量 · 点赞 */
.vs-shorts .vs-stats { max-width: calc(100% - 12px); }   /* 短视频没有时长角标 */
.vs-empty { margin: 40px 0; color: var(--vs-muted); font-size: 15px; }
.vs-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 36px; }
.vs-pager a, .vs-pager span { box-sizing: border-box; min-width: 40px; padding: 9px 12px; border: 1px solid var(--vs-input); border-radius: 4px; background: var(--vs-chip); font-weight: 600; text-align: center; text-decoration: none; }
.vs-pager .vs-pg-step { min-width: 80px; }
.vs-pager [aria-current="page"] { border-color: var(--vs-text); background: var(--vs-text); color: var(--vs-bg); }
.ch-no { display: inline-block; min-width: 1.8em; margin-right: 4px; color: var(--vs-muted); font-weight: 600; }
.vs-footer { margin: 0 0 32px; text-align: center; font-size: 14px; }
.vs-footer a { color: var(--vs-muted); text-decoration: none; }

/* 关于本站 */
.vs-about { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px; font-size: 16px; line-height: 1.8; }
.vs-about h1 { font-size: 22px; margin: 8px 0 18px; }

/* 会员中心 */
.vs-me { max-width: 640px; margin: 0 auto; padding: 16px 16px 60px; }
.vs-me-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 14px; }
.vs-me-top h1 { margin: 0; font-size: 18px; }
.vs-card-box { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--vs-line); border-radius: 10px; background: var(--vs-panel); }
.vs-card-box h2 { margin: 0 0 10px; font-size: 15px; }
.vs-account { display: flex; align-items: center; gap: 14px; }
.vs-avatar { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: #2563eb; font-size: 20px; font-weight: 700; }
.vs-account-name { font-size: 17px; font-weight: 700; word-break: break-all; }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.vs-card-box p { margin: 8px 0 0; }
.vs-menu { padding: 0; }
.vs-menu a, .vs-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--vs-line); text-decoration: none; font-weight: 600; }
.vs-menu > :last-child { border-bottom: 0; }
.vs-logout { display: block; margin: 24px auto 0; width: fit-content; padding: 9px 28px; border: 1px solid var(--vs-line); border-radius: 20px; color: #d93025; text-decoration: none; font-weight: 600; }

/* 播放页 */
.vs-play { width: min(100% - 32px, 1100px); margin: 0 auto; padding: 14px 0 48px; }
.vs-play-top { margin-bottom: 10px; }
.vs-back { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border: 1px solid var(--vs-line); border-radius: 17px; color: var(--vs-blue); font-weight: 700; text-decoration: none; }
.vs-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.vs-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vs-player-short { width: min(100%, calc(78vh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; }
.vs-play-info h1 { margin: 14px 0 4px; font-size: 19px; line-height: 1.4; }
.vs-play-zh { margin-top: 2px; color: var(--vs-text); font-size: 17px; font-weight: 500; line-height: 1.4; }
.vs-play-channel { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--vs-muted); font-weight: 600; text-decoration: none; }
.vs-play-channel .vs-avatar-img { width: 36px; height: 36px; }
.vs-play-channel:hover span:last-child { color: var(--vs-text); text-decoration: underline; }
.vs-play-meta { margin-top: 4px; color: var(--vs-muted); font-size: 13px; }
.vs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.vs-act { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 16px; border: 1px solid var(--vs-line); border-radius: 18px; background: var(--vs-chip); color: var(--vs-text); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; }
.vs-act.on { border-color: #f59e0b; background: #fff7e6; color: #92400e; }
:root[data-theme="dark"] .vs-act.on { background: #3a2a08; color: #fcd34d; border-color: #92400e; }
.vs-act[disabled] { opacity: .6; }
.vs-act b { font-weight: 700; }
.vs-act b:empty { display: none; }
.vs-sub-h { margin: 26px 0 12px; font-size: 17px; }
.vs-main > .vs-fav { margin: -6px 0 18px; }   /* 频道页标题下的“收藏频道” */
.vs-sort { display: flex; gap: 8px; margin: 0 0 16px; }   /* 列表排序：热门 / 最新 */
.vs-main h1 + .vs-sort { margin-top: -8px; }
.vs-sort a { padding: 5px 14px; border-radius: 8px; background: var(--vs-chip); color: var(--vs-text); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.vs-sort a[aria-current="page"] { background: var(--vs-text); color: var(--vs-bg); }

/* 收藏夹、最近看过 */
.vs-me-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 8px; }
.vs-me-top > :last-child { justify-self: end; }
.vs-me-top h1 { margin: 0 !important; font-size: 18px !important; }
.vs-chan-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.vs-chan-card { position: relative; flex: none; width: 140px; color: var(--vs-text); text-decoration: none; }
.vs-chan-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--vs-thumb); }
.vs-chan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-new { position: absolute; top: 6px; right: 6px; min-width: 20px; padding: 1px 6px; border-radius: 10px; color: #fff; background: #ef4444; font-size: 12px; font-weight: 700; text-align: center; }
.vs-chan-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-del { display: none; position: absolute; top: 4px; left: 4px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: rgba(220, 38, 38, .92); font-size: 14px; line-height: 26px; text-align: center; cursor: pointer; }
.vs-managing .vs-del { display: block; }
.vs-card { position: relative; }
.vs-gone .vs-thumb { background: var(--vs-chip); }
.vs-gone { opacity: .55; }
.vs-when { display: block; margin-top: 3px; color: var(--vs-faint); font-size: 12px; }
.vs-empty-s { margin: 8px 0 20px; }

/* 页面内提示条、确认框（代替 alert/confirm，旧 App 的网页视图不显示那两个） */
#vs-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2147483647; display: none; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px; color: #fff; background: rgba(17, 24, 39, .94);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 15px; line-height: 1.45; transform: translateX(-50%); }
#vs-toast.on { display: flex; animation: vs-nav-in .15s ease-out; }
#vs-toast a { flex: none; padding: 6px 14px; border-radius: 16px; color: #fff; background: #2563eb; font-weight: 700; text-decoration: none; white-space: nowrap; }
#vs-ask { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.vs-ask-box { width: min(100%, 340px); padding: 20px; border-radius: 14px; background: var(--vs-panel); color: var(--vs-text); }
.vs-ask-box p { margin: 0 0 18px; font-size: 16px; font-weight: 600; }
.vs-ask-box div { display: flex; justify-content: flex-end; gap: 10px; }

/* 点链接后的转圈（与现网 navLoadingHTML 一致） */
#vs-nav-loading { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 2147483646; pointer-events: none; color: #5f6368; background: rgba(255,255,255,.72); font-size: 15px; }
#vs-nav-loading.on { display: flex; animation: vs-nav-in .15s ease-out; }
#vs-nav-loading i { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(26,115,232,.18); border-top-color: #1a73e8; animation: vs-spin .8s linear infinite; }
@keyframes vs-spin { to { transform: rotate(360deg); } }
@keyframes vs-nav-in { from { opacity: 0; } }
:root[data-theme="dark"] #vs-nav-loading { color: #9aa0a6; background: rgba(15,17,21,.72); }

/* 分类站（学科站）：首页学段 × 学科、面包屑、分类页、课程页、播放页的课程 */
.vs-stages { display: grid; gap: 18px; margin: 0 0 30px; }
.vs-stage h2 { margin: 0 0 10px; font-size: 17px; }
.vs-subjects { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vs-subject { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--vs-line); border-left: 5px solid var(--vs-subj, #2563eb); background: var(--vs-panel); text-decoration: none; }
.vs-subject:hover { background: var(--vs-hover); }
.vs-subject b { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.vs-subbed { flex: none; padding: 1px 6px; border-radius: 4px; color: #166534; background: #dcfce7; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.5; }
:root[data-theme="dark"] .vs-subbed { color: #86efac; background: #14532d; }
.vs-sub-state { margin: -6px 0 14px; color: var(--vs-muted); font-size: 13px; }
.vs-sub-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vs-sub-state .vs-btn { min-height: 34px; }
.vs-sub-state.on { color: #15803d; font-weight: 600; }
:root[data-theme="dark"] .vs-sub-state.on { color: #86efac; }
.vs-play-info .vs-sub-state { margin: 6px 0 0; }
.vs-subject span { color: var(--vs-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-subject i { font-style: normal; }
.vs-subject i + i::before { content: " · "; }
.vs-subject-chinese { --vs-subj: #dc2626; } .vs-subject-math { --vs-subj: #2563eb; } .vs-subject-english { --vs-subj: #16a34a; }
.vs-subject-physics { --vs-subj: #9333ea; } .vs-subject-chemistry { --vs-subj: #ea580c; }
/* 面包屑：链接做成按钮（手机上好点） */
.vs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--vs-muted); font-size: 14px; }
.vs-crumbs a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 14px; border: 1px solid var(--vs-line); border-radius: 17px; background: var(--vs-chip); color: var(--vs-blue); font-weight: 600; text-decoration: none; }
.vs-crumbs a:hover { background: var(--vs-hover); }
.vs-crumbs span { padding: 0 2px; color: var(--vs-text); font-weight: 600; }
.vs-crumbs i { font-style: normal; color: var(--vs-faint); }
.vs-main .vs-crumbs + h1 { margin-bottom: 6px; }
.vs-cat-desc, .vs-course-meta { margin: 0 0 14px; color: var(--vs-muted); }
.vs-course-meta a { color: var(--vs-blue); text-decoration: none; }
.vs-site-navigation { width: min(100% - 40px, 1400px); margin: 20px auto 0; }
.vs-category-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vs-nav-group, .vs-nav-group-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vs-nav-group { max-width: 100%; }
.vs-nav-group-framed { padding: 8px 10px; border: 1px solid var(--vs-line); border-radius: 12px; background: var(--vs-panel); }
.vs-nav-group-label { flex: none; margin-right: 2px; color: var(--vs-muted); font-weight: 600; font-size: 13px; }
.vs-category-button { display: inline-flex; flex: none; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; color: var(--vs-text); background: var(--vs-hover); font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.vs-category-button:hover { color: var(--vs-blue); background: var(--vs-current); }
.vs-category-button[aria-current] { color: #fff; background: #2563eb; }
.vs-category-button:focus-visible, .vs-notice-btn:focus-visible, .vs-theme:focus-visible { outline: 2px solid var(--vs-blue); outline-offset: 3px; }
.vs-site-navigation + .vs-main { padding-top: 20px; }
@media (max-width: 480px) {
  .vs-category-nav, .vs-nav-group, .vs-nav-group-items { gap: 6px; }
  .vs-category-button { padding: 8px 9px; font-size: 13px; }
}
.vs-grades { flex-wrap: wrap; }
.vs-lesson-count { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, .82); font-size: 12px; font-weight: 600; line-height: 1.3; }
.vs-course-tags { display: block; margin-top: 4px; color: var(--vs-text); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-cat-tag { display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 4px; color: var(--vs-blue); background: var(--vs-current); font-size: 12px; font-weight: 600; line-height: 1.5; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-cat-tag + .vs-card-ch { margin-top: 6px; }
.vs-pop-tag { margin-right: 4px; color: #b45309; background: #fef3c7; }
:root[data-theme="dark"] .vs-pop-tag { color: #fcd34d; background: #3a2a08; }
.vs-lesson-views { flex: none; color: var(--vs-muted); font-size: 12px; }
.vs-start { display: inline-flex; margin: 0 0 6px; }
.vs-lessons { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--vs-line); }
.vs-lessons li { border-bottom: 1px solid var(--vs-line); }
.vs-lessons a { display: flex; align-items: center; gap: 12px; padding: 10px 6px; text-decoration: none; }
.vs-lessons a:hover { background: var(--vs-hover); }
.vs-lessons .vs-title { margin-top: 0; font-size: 15px; }
.vs-lesson-no { flex: none; width: 2.4em; color: var(--vs-muted); font-weight: 700; text-align: right; }
.vs-lesson-thumb { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--vs-thumb); }
.vs-lesson-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-lesson-text { min-width: 0; flex: 1; }
.vs-lessons li[aria-current] a { background: var(--vs-current); }
.vs-lessons li[aria-current] .vs-lesson-no { color: var(--vs-blue); }
.vs-play-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.vs-play-top .vs-crumbs { margin: 0; }
.vs-course-box { margin-top: 18px; border: 1px solid var(--vs-line); border-radius: 10px; background: var(--vs-panel); overflow: hidden; }
.vs-course-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px 4px; font-weight: 700; }
.vs-course-head a { min-width: 0; color: var(--vs-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-course-head span { flex: none; color: var(--vs-muted); font-size: 13px; font-weight: 600; }
.vs-course-nav { display: flex; gap: 10px; padding: 8px 14px 12px; }
.vs-course-nav a { text-decoration: none; }
.vs-autonext { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--vs-muted); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.vs-autonext + .vs-next { margin-left: 0 !important; }
.vs-next-pop { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 2147483647; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px);
  padding: 12px 14px; border-radius: 12px; color: #fff; background: rgba(17, 24, 39, .94); box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 15px; transform: translateX(-50%); }
.vs-next-pop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-next-pop .vs-btn { flex: none; color: #fff; border-color: rgba(255,255,255,.3); }
.vs-course-nav .vs-next { margin-left: auto; border-color: #2563eb; color: #fff; background: #2563eb; }
.vs-lessons-mini { max-height: 320px; overflow-y: auto; margin: 0; -webkit-overflow-scrolling: touch; }
.vs-lessons-mini a { padding: 8px 10px; }
.vs-lessons-mini .vs-title { font-size: 14px; -webkit-line-clamp: 1; }
.vs-lessons-mini .vs-title-zh { font-size: 12px; }
@media (max-width: 1050px) { .vs-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .vs-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vs-subject { padding: 10px 10px 10px 11px; border-left-width: 4px; }
  .vs-subject b { font-size: 16px; }
  .vs-subject i { display: block; }
  .vs-subject i + i::before { content: none; }
  .vs-stages { gap: 14px; margin-bottom: 22px; }
  .vs-stage h2 { margin-bottom: 8px; font-size: 16px; }
  .vs-lesson-thumb { width: 120px; }
  .vs-lessons .vs-title { font-size: 14px; }
}

@media (max-width: 1050px) { .vs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .vs-header { padding: 12px 0; }
  .vs-header-inner { width: min(100% - 24px, 1400px); grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .vs-search { grid-row: 2; grid-column: 1 / -1; }
  .vs-header-actions { grid-row: 1; grid-column: 2; gap: 6px; }
  .vs-header-traffic, .vs-notice-inner, .vs-site-navigation { width: min(100% - 24px, 1400px); }
  .vs-nav-group-framed { flex-basis: 100%; gap: 10px; }
  .vs-nav-group-framed .vs-nav-group-label { width: 28px; }
  .vs-nav-group-framed .vs-nav-group-items { flex: 1; }
  .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .vs-grid.vs-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-main { width: min(100% - 24px, 1400px); padding-top: 22px; }
}
@media (max-width: 480px) {
  .vs-pager { gap: 6px; }
  .vs-pager a, .vs-pager span { min-width: 34px; padding: 8px 6px; }
  .vs-pager .vs-pg-step { min-width: 0; padding: 8px 10px; }
  .vs-grid { grid-template-columns: 1fr; }
  .vs-grid.javx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .vs-grid.vs-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .vs-courses .vs-title { font-size: 14px; }
  .vs-courses .vs-course-tags, .vs-courses .vs-channel { font-size: 12px; }
  .vs-title { font-size: 16px; }
  .vs-logo { font-size: 19px; }
  .vs-btn { min-height: 32px; padding: 5px 11px; font-size: 13px; }
}

/* 内部下载页 /dl/（pages/download.php、static/dl.js） */
.vs-dl { max-width: 760px; margin: 0 auto; padding: 16px 16px 60px; }
.vs-dl h1 { font-size: 20px; margin: 4px 0 6px; }
.vs-dl h1 small, .vs-dl h2 small { font-size: 13px; font-weight: 400; color: var(--vs-muted); }
.vs-dl h2 { font-size: 16px; }
.vs-dl-quota { margin: 0 0 14px; color: var(--vs-muted); font-size: 13px; }
.vs-dl-box { padding: 14px; border: 1px solid var(--vs-line); border-radius: 12px; background: var(--vs-panel); margin-bottom: 16px; }
.vs-dl-box h2 { margin: 0 0 10px; }
.vs-dl-form { display: flex; gap: 8px; }
.vs-dl-form input { flex: 1; min-width: 0; min-height: 38px; padding: 6px 12px; border: 1px solid var(--vs-input); border-radius: 19px; background: var(--vs-bg); color: var(--vs-text); font: inherit; font-size: 14px; }
.vs-dl-msg { min-height: 1.2em; margin: 8px 0 0; font-size: 14px; color: var(--vs-muted); }
.vs-dl-msg.bad { color: #dc2626; }
.vs-dl-probe { margin-top: 10px; }
.vs-dl-video { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.vs-dl-video img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--vs-thumb); flex: none; }
.vs-dl-title { font-weight: 600; line-height: 1.4; }
.vs-dl-meta { margin-top: 4px; color: var(--vs-muted); font-size: 13px; }
.vs-dl-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.vs-dl-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--vs-line); border-radius: 10px; cursor: pointer; }
.vs-dl-choice:has(input:checked) { border-color: var(--vs-blue); background: var(--vs-current); }
.vs-dl-choice.off { opacity: .55; cursor: not-allowed; }
.vs-dl-choice-name { font-weight: 600; }
.vs-dl-choice small { flex-basis: 100%; padding-left: 24px; color: var(--vs-muted); font-size: 12px; }
.vs-dl-clip { margin: 12px 0; font-size: 14px; }
.vs-dl-subs { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; font-size: 14px; }
.vs-dl-subs[hidden] { display: none; }
.vs-dl-clip summary { cursor: pointer; color: var(--vs-blue); }
.vs-dl-clip label { display: inline-block; margin: 8px 8px 4px 0; }
.vs-dl-clip input { min-height: 32px; padding: 4px 8px; border: 1px solid var(--vs-input); border-radius: 8px; background: var(--vs-bg); color: var(--vs-text); font: inherit; }
.vs-dl-hint { display: block; color: var(--vs-faint); font-size: 12px; margin: 6px 0; }
.vs-dl-go { min-width: 120px; margin-top: 4px; }
.vs-dl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vs-dl-row select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--vs-input); border-radius: 8px; background: var(--vs-bg); color: var(--vs-text); font: inherit; }
.vs-dl-lessons { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow: auto; font-size: 14px; }
.vs-dl-lessons label { display: flex; gap: 6px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--vs-line); }
.vs-dl-lessons small { margin-left: auto; color: var(--vs-faint); }
.vs-dl-jobs { list-style: none; margin: 0; padding: 0; }
.vs-dl-job { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--vs-line); }
.vs-dl-job-name { font-weight: 600; word-break: break-all; }
.vs-dl-job-info { grid-column: 1; color: var(--vs-muted); font-size: 13px; }
.vs-dl-job.failed .vs-dl-job-info { color: #dc2626; }
.vs-dl-job-acts { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; align-items: center; }
.vs-dl-bar { grid-column: 1; height: 6px; border-radius: 3px; background: var(--vs-chip); overflow: hidden; }
.vs-dl-bar i { display: block; height: 100%; background: var(--vs-blue); transition: width .5s; }
@media (max-width: 560px) {
  .vs-dl-video img { width: 112px; }
  .vs-dl-choices { grid-template-columns: 1fr; }
  .vs-dl-job { grid-template-columns: 1fr; }
  .vs-dl-job-acts { grid-column: 1; grid-row: auto; }
}

/* JAVX：使用现有栅格与主题，播放器不超出页面。 */
.javx-player video{display:block;width:100%;max-height:75vh;background:#10131a;border-radius:12px}.javx-player p{min-height:1.5em}.vs-main h1{overflow-wrap:anywhere}.vs-muted{color:var(--muted,#687387)}
.javx-navigation .vs-category-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-width:thin}
.javx-player-stage{position:relative;background:#10131a;border-radius:12px;overflow:hidden;aspect-ratio:16/9;max-height:75vh}
.javx-player-stage video{height:100%;object-fit:contain;border-radius:0}
.javx-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:2px solid #fff;border-radius:50%;background:rgba(18,25,40,.8);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 18px #0006}
.javx-play-button span{width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:23px solid #fff;margin-left:6px}
.javx-play-button:disabled{opacity:.6;cursor:wait}.javx-play-button[hidden]{display:none}.javx-play-button:focus-visible{outline:3px solid var(--vs-blue);outline-offset:4px}
.javx-video-categories{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.javx-recommendations{margin-top:32px}

.javx-proxy-choice{margin:16px 0;padding:18px;text-align:center;border:2px solid var(--vs-blue);border-radius:12px;background:var(--vs-panel)}
.javx-proxy-choice[hidden]{display:none}.javx-proxy-choice p{margin:10px 0 0;font-size:14px}
.javx-proxy-button{display:inline-block;padding:13px 26px;background:var(--vs-blue);color:#fff;border:0;border-radius:9px;font-size:18px;font-weight:700;cursor:pointer}
.javx-proxy-button:disabled{opacity:.65;cursor:wait}.javx-proxy-button:focus-visible{outline:3px solid var(--vs-text);outline-offset:4px}

/* JAVX 详情封面下方：浏览与点赞采集计数。 */
.javx-video-counts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;max-width:calc(75vh * 16 / 9);gap:8px 22px;margin-top:12px;color:var(--vs-muted);font-size:14px}
.javx-video-counts:empty{display:none}
.javx-video-count{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.javx-video-count svg{width:18px;height:18px;flex:none}