/* 训练营（/video-course）新版皮肤预览：html[data-vc-skin="a|b|c"] 时生效，不设置即旧版。
* 三版共用首页 token：墨色 + 一个站点蓝 + 细线、无阴影、16px 卡片圆角。 */
html[data-vc-skin] .vc-catalog {
--vk-ink: #141A26; --vk-ink-2: #4B5563; --vk-ink-3: #6B7280; --vk-ink-4: #9CA3AF;
--vk-line: rgba(20, 26, 38, .08); --vk-line-2: rgba(20, 26, 38, .14);
--vk-surface: #fff; --vk-chip: rgba(20, 26, 38, .05); --vk-hover: rgba(20, 26, 38, .04);
--vk-accent: #2B7FFF; --vk-ok: #16A34A; --vk-warn: #D97706; --vk-mute: #9CA3AF;
color: var(--vk-ink);
}
html[data-vc-skin].theme--dark .vc-catalog {
--vk-ink: #F2F3F5; --vk-ink-2: #C4C9D2; --vk-ink-3: #8F96A3; --vk-ink-4: #6B7280;
--vk-line: rgba(255, 255, 255, .08); --vk-line-2: rgba(255, 255, 255, .16);
--vk-surface: #1C1E24; --vk-chip: rgba(255, 255, 255, .06); --vk-hover: rgba(255, 255, 255, .05);
--vk-accent: #4C93FF; --vk-ok: #3FB950; --vk-warn: #E3A008; --vk-mute: #6B7280;
}
html[data-vc-skin] .vc-catalog__wrap { max-width: 1200px; padding: 0 8px 24px; }
/* ---------- 三版通用：页头文字、按钮、标签、状态点 ---------- */
html[data-vc-skin] .vc-catalog__eyebrow { display: none; }
html[data-vc-skin] .vc-catalog h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--vk-ink); }
html[data-vc-skin] .vc-catalog__lede { margin-top: 6px; font-size: 14px; color: var(--vk-ink-3); }
html[data-vc-skin] .vc-catalog__setting { border-color: var(--vk-line-2); background: transparent; color: var(--vk-ink-3); border-radius: 8px; }
html[data-vc-skin] .vc-catalog__setting:hover { color: var(--vk-ink); border-color: var(--vk-line-2); background: var(--vk-hover); }
html[data-vc-skin] .vc-btn {
height: 32px; padding: 0 14px; border-radius: 999px; box-shadow: none;
font-size: 13px; font-weight: 600; line-height: 30px; transform: none;
}
/* 原样式里 a.vc-btn--primary 用 !important 把文字锁成白色，暗色下按钮是浅底，必须覆盖 */
html[data-vc-skin] .vc-btn--primary,
html[data-vc-skin] a.vc-btn--primary,
html[data-vc-skin] a.vc-btn--primary:visited { background: var(--vk-ink) !important; border-color: var(--vk-ink) !important; color: var(--vk-surface) !important; }
html[data-vc-skin] .vc-btn--primary:hover,
html[data-vc-skin] a.vc-btn--primary:hover { background: var(--vk-ink) !important; border-color: var(--vk-ink) !important; color: var(--vk-surface) !important; opacity: .88; box-shadow: none; }
html[data-vc-skin] .vc-btn--ghost,
html[data-vc-skin] .vc-btn[aria-disabled="true"] { background: transparent; border: 1px solid var(--vk-line-2); color: var(--vk-ink-2); }
html[data-vc-skin] .vc-btn--ghost:hover { background: var(--vk-hover); color: var(--vk-ink); border-color: var(--vk-line-2); box-shadow: none; }
html[data-vc-skin] .vc-btn[aria-disabled="true"] { color: var(--vk-ink-3); }
html[data-vc-skin] .vc-tag {
height: 22px; padding: 0 8px; border: 0; border-radius: 999px;
background: var(--vk-chip); color: var(--vk-ink-3); font-size: 12px; font-weight: 500;
}
/* 状态标签：圆点 + 文字，不要彩色描边胶囊 */
html[data-vc-skin] .vc-tag[class*="vc-tag--"] { gap: 6px; padding: 0; background: none; font-weight: 600; }
html[data-vc-skin] .vc-tag[class*="vc-tag--"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-vc-skin] .vc-tag--live { color: var(--vk-ok); }
html[data-vc-skin] .vc-tag--need { color: var(--vk-warn); }
html[data-vc-skin] .vc-tag--soon { color: var(--vk-accent); }
html[data-vc-skin] .vc-tag--ended,
html[data-vc-skin] .vc-tag--archived,
html[data-vc-skin] .vc-tag--draft { color: var(--vk-mute); }
html[data-vc-skin] .vc-card__more { color: var(--vk-ink-3); font-size: 13px; font-weight: 500; text-decoration: none; }
html[data-vc-skin] .vc-card__more:hover { color: var(--vk-accent); }
html[data-vc-skin] .vc-card__order button { border-color: var(--vk-line-2); border-radius: 999px; background: transparent; color: var(--vk-ink-3); }
html[data-vc-skin] .vc-card__order button:hover:not(:disabled) { border-color: var(--vk-line-2); color: var(--vk-ink); background: var(--vk-hover); }
/* 课程卡外壳：白底细线、无阴影、无顶部亮线 */
html[data-vc-skin] .vc-card {
background: var(--vk-surface); border: 1px solid var(--vk-line); border-radius: 16px; box-shadow: none;
}
html[data-vc-skin] .vc-card::after { display: none; }
html[data-vc-skin] .vc-card:hover { border-color: var(--vk-line-2); box-shadow: none; }
html[data-vc-skin] .vc-card--muted { opacity: 1; }
html[data-vc-skin] .vc-card--muted .vc-card__cover { filter: grayscale(1); opacity: .7; }
html[data-vc-skin] .vc-card--muted h2 { color: var(--vk-ink-2); }
html[data-vc-skin] .vc-card h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--vk-ink); }
html[data-vc-skin] .vc-card__teacher { color: var(--vk-ink-3); }
html[data-vc-skin] .vc-card__desc { color: var(--vk-ink-2); }
html[data-vc-skin] .vc-card__stat { color: var(--vk-ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
/* 封面：浅色底 + 同色大字，图片封面照常显示 */
html[data-vc-skin] .vc-card__cover {
color: var(--a);
background: color-mix(in srgb, var(--a) 10%, var(--vk-surface));
}
html[data-vc-skin] .vc-card__cover::before {
background-image:
linear-gradient(color-mix(in srgb, var(--a) 14%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--a) 14%, transparent) 1px, transparent 1px);
-webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
html[data-vc-skin] .vc-card__char { color: color-mix(in srgb, var(--a) 30%, transparent); }
html[data-vc-skin] .vc-card__foot-label { color: var(--vk-ink); font-size: 12.5px; font-weight: 600; }
html[data-vc-skin] .vc-card__cover--a { --a: #2B7FFF; }
html[data-vc-skin] .vc-card__cover--b { --a: #0E9384; }
html[data-vc-skin] .vc-card__cover--c { --a: #6D5EFC; }
html[data-vc-skin] .vc-card__cover--d { --a: #3B82F6; }
html[data-vc-skin] .vc-card__cover--old,
html[data-vc-skin] .vc-card__cover--draft { --a: #6B7280; }
/* 筛选条 / 侧栏 / 分组标题：只在 B、C 出现 */
.vk-only { display: none !important; }
.vk-seg { display: inline-flex; gap: 4px; }
.vk-seg button {
position: relative; padding: 6px 12px 9px; border: 0; border-radius: 8px; background: none;
font: inherit; font-size: 14px; font-weight: 500; color: var(--vk-ink-3); cursor: pointer;
}
.vk-seg button::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
background: currentColor; opacity: 0; transform: scaleX(.4); transition: opacity .15s ease, transform .18s ease;
}
.vk-seg button:hover { color: var(--vk-ink); background: var(--vk-hover); }
.vk-seg button[aria-pressed="true"] { color: var(--vk-ink); }
.vk-seg button[aria-pressed="true"]::after { opacity: 1; transform: none; }
.vk-seg button em { margin-left: 4px; font-style: normal; font-size: 12px; color: var(--vk-ink-4); font-variant-numeric: tabular-nums; }
.vk-seg button:focus-visible { outline: 2px solid var(--vk-accent); outline-offset: 2px; }
html[data-vc-skin] .vc-card[hidden] { display: none !important; }
.vk-empty { padding: 40px 0; text-align: center; color: var(--vk-ink-3); font-size: 14px; }
/* =================================== A：首页同款卡片 =================================== */
html[data-vc-skin="a"] .vc-catalog__head {
align-items: center; margin-bottom: 16px; padding: 24px 28px;
background: var(--vk-surface); border: 1px solid var(--vk-line); border-radius: 16px;
}
html[data-vc-skin="a"] .vc-catalog__counts { gap: 40px; }
html[data-vc-skin="a"] .vc-catalog__counts b { font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--vk-ink); }
html[data-vc-skin="a"] .vc-catalog__counts b::after { content: " 门"; font-size: 13px; font-weight: 400; color: var(--vk-ink-3); letter-spacing: 0; }
html[data-vc-skin="a"] .vc-catalog__counts span { font-size: 13px; color: var(--vk-ink-3); }
html[data-vc-skin="a"] .vc-catalog__admin { margin: 0 0 16px; gap: 8px; }
html[data-vc-skin="a"] .vc-grid { gap: 16px; }
html[data-vc-skin="a"] .vc-card__cover { height: 128px; }
html[data-vc-skin="a"] .vc-card__char { font-size: 96px; bottom: -18px; }
html[data-vc-skin="a"] .vc-card__body { padding: 18px 20px 20px; }
html[data-vc-skin="a"] .vc-card__tags { margin-top: 12px; }
html[data-vc-skin="a"] .vc-card__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; margin-top: auto; border-top: 0; }
html[data-vc-skin="a"] .vc-card__meta .vc-card__stat { margin-right: auto; }
html[data-vc-skin="a"] .vc-card__meta .vc-btn { width: auto; flex: none; }
/* =================================== B：列表 =================================== */
html[data-vc-skin="b"] .vc-catalog__wrap {
background: var(--vk-surface); border: 1px solid var(--vk-line); border-radius: 16px; padding: 0; overflow: hidden;
}
html[data-vc-skin="b"] .vc-catalog__head { flex-wrap: wrap; align-items: flex-end; margin: 0; padding: 24px 28px 0; }
html[data-vc-skin="b"] .vc-catalog__counts { display: none; }
html[data-vc-skin="b"] .vk-seg--b { display: inline-flex !important; margin-bottom: -2px; }
html[data-vc-skin="b"] .vc-catalog__admin { margin: 0; padding: 14px 28px 0; gap: 8px; }
html[data-vc-skin="b"] .vc-grid {
display: flex; flex-direction: column; gap: 0; margin-top: 12px; border-top: 1px solid var(--vk-line);
}
html[data-vc-skin="b"] .vc-card {
flex-direction: row; align-items: center; gap: 20px; min-height: 0;
padding: 18px 28px; border: 0; border-bottom: 1px solid var(--vk-line); border-radius: 0; overflow: visible;
}
html[data-vc-skin="b"] .vc-card:last-child { border-bottom: 0; }
html[data-vc-skin="b"] .vc-card:hover { background: var(--vk-hover); }
html[data-vc-skin="b"] .vc-card__cover { flex: none; width: 120px; height: 80px; border-radius: 12px; }
html[data-vc-skin="b"] .vc-card__char { font-size: 64px; right: -4px; bottom: -14px; }
html[data-vc-skin="b"] .vc-card__foot-label { display: none; }
html[data-vc-skin="b"] .vc-card__body {
flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 0;
}
html[data-vc-skin="b"] .vc-card__body > h2 { grid-column: 1; }
html[data-vc-skin="b"] .vc-card__teacher,
html[data-vc-skin="b"] .vc-card__desc,
html[data-vc-skin="b"] .vc-card__tags,
html[data-vc-skin="b"] .vc-card__order { grid-column: 1; }
html[data-vc-skin="b"] .vc-card__teacher { margin-top: 2px; }
html[data-vc-skin="b"] .vc-card__desc { -webkit-line-clamp: 1; margin-top: 4px; }
html[data-vc-skin="b"] .vc-card__tags { margin-top: 8px; }
html[data-vc-skin="b"] .vc-card__order { margin-top: 8px; }
html[data-vc-skin="b"] .vc-card__meta {
grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
margin: 0; padding: 0; border: 0; min-width: 150px;
}
html[data-vc-skin="b"] .vc-card__meta .vc-btn { min-width: 104px; text-align: center; }
html[data-vc-skin="b"] .vc-grid--empty::after { content: "这个分类下暂时没有课程。"; display: block; padding: 40px 0; text-align: center; color: var(--vk-ink-3); font-size: 14px; }
/* =================================== C：分组 + 侧栏 =================================== */
html[data-vc-skin="c"] .vc-catalog__wrap {
display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; align-items: start;
}
html[data-vc-skin="c"] .vc-catalog__head { grid-column: 1 / -1; margin-bottom: 20px; align-items: flex-end; }
html[data-vc-skin="c"] .vc-catalog__counts,
html[data-vc-skin="c"] .vc-catalog__admin,
html[data-vc-skin="c"] .vc-card__order { display: none; }
html[data-vc-skin="c"] .vk-side { display: flex !important; grid-column: 2; grid-row: 2 / span 3; flex-direction: column; gap: 16px; position: sticky; top: 72px; }
html[data-vc-skin="c"] .vc-grid { grid-column: 1; display: block; }
html[data-vc-skin="c"] .vc-catalog__empty { grid-column: 1; }
.vk-group + .vk-group { margin-top: 28px; }
.vk-group__hd { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.vk-group__hd h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--vk-ink); }
.vk-group__hd span { font-size: 13px; color: var(--vk-ink-3); font-variant-numeric: tabular-nums; }
.vk-group__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html[data-vc-skin="c"] .vc-card { flex-direction: row; min-height: 0; }
html[data-vc-skin="c"] .vc-card__cover { flex: none; width: 132px; height: auto; min-height: 168px; }
html[data-vc-skin="c"] .vc-card__char { font-size: 80px; right: -8px; bottom: -14px; }
html[data-vc-skin="c"] .vc-card__foot-label { left: 12px; bottom: 10px; right: 8px; font-size: 12px; }
html[data-vc-skin="c"] .vc-card__body { padding: 16px 18px; }
html[data-vc-skin="c"] .vc-card__tags { margin-top: 10px; }
html[data-vc-skin="c"] .vc-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; margin-top: auto; }
html[data-vc-skin="c"] .vc-card__meta .vc-card__stat { margin-right: auto; }
html[data-vc-skin="c"] .vc-card__meta .vc-btn { width: auto; flex: none; margin-left: auto; }
.vk-side__card { padding: 20px 22px; background: var(--vk-surface); border: 1px solid var(--vk-line); border-radius: 16px; }
.vk-side__card h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--vk-ink); }
.vk-side__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.vk-side__stats li { margin: 0; }
.vk-side__stats b { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--vk-ink); font-variant-numeric: tabular-nums; }
.vk-side__stats span { font-size: 12.5px; color: var(--vk-ink-3); }
.vk-side__links { display: grid; gap: 8px; }
.vk-side__links .vc-btn { width: 100%; text-align: center; }
@media (max-width: 1024px) {
html[data-vc-skin="a"] .vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-vc-skin="c"] .vc-catalog__wrap { grid-template-columns: minmax(0, 1fr); }
html[data-vc-skin="c"] .vk-side { grid-column: 1; grid-row: auto; position: static; margin-top: 24px; }
}
@media (max-width: 720px) {
html[data-vc-skin] .vc-catalog__head { flex-direction: column; align-items: flex-start; }
html[data-vc-skin="a"] .vc-grid { grid-template-columns: minmax(0, 1fr); }
html[data-vc-skin="b"] .vc-card { flex-wrap: wrap; padding: 16px 18px; }
html[data-vc-skin="b"] .vc-card__body { grid-template-columns: minmax(0, 1fr); }
html[data-vc-skin="b"] .vc-card__meta { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin-top: 12px; }
.vk-group__grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 管理员左下角切换 ---------- */
.vk-switch {
position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; padding: 3px; border-radius: 999px;
background: rgba(255, 255, 255, .92); border: 1px solid rgba(20, 26, 38, .1); box-shadow: 0 4px 16px rgba(20, 26, 38, .1);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font: 500 12px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.vk-switch button { height: 26px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: #6B7280; cursor: pointer; font: inherit; }
.vk-switch button[aria-pressed="true"] { background: #141A26; color: #fff; }
.theme--dark .vk-switch { background: rgba(28, 30, 36, .92); border-color: rgba(255, 255, 255, .1); }
.theme--dark .vk-switch button[aria-pressed="true"] { background: #F2F3F5; color: #141A26; }