/* 视频教程 - 依赖 front-theme.css */
/* 视频教程 - SwiftAdmin 风格 */
.vd-body {
    margin: 0;
    background: var(--sa-bg);
    color: var(--sa-text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.vd-content { padding: 20px 0 48px; }
.vd-solutions,
.vd-detail-wrap { width: min(1170px, calc(100% - 32px)); margin: 0 auto; }

/* hero */
.vd-hero-text { padding: 24px 10px 10px 0; }
.vd-hero-text h1 {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 700;
    color: var(--sa-text-title);
}
.vd-hero-text > p {
    margin: 0 0 18px;
    color: var(--sa-muted);
    line-height: 1.8;
    font-size: 15px;
}
.vd-notice {
    margin: 0 0 16px;
    color: #dc2626;
    font-size: 13px;
}
.vd-hero-actions .layui-btn { margin: 0 8px 10px 0; }
.vd-hero-image {
    text-align: right;
    padding-top: 10px;
}
.vd-hero-image img {
    max-width: 100%;
    height: auto;
}

/* course cards - 对齐官方 layui-project */
.vd-course-grid { margin-top: 28px; }
.vd-project {
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    height: 100%;
}
.vd-project:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}
.vd-cover {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--sa-brand-soft);
}
.vd-project-body { padding: 14px 14px 16px; }
.vd-project-body h2 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}
.vd-project-body h2 a {
    color: var(--sa-text);
    text-decoration: none;
}
.vd-project-body h2 a:hover { color: var(--sa-brand); }
.vd-project-meta {
    display: flex;
    justify-content: space-between;
    color: var(--sa-text-hint);
    font-size: 12px;
}
.vd-likes { color: #ef4444; }
.vd-lesson-count {
    margin-top: 8px;
    color: var(--sa-muted);
    font-size: 12px;
}

/* breadcrumb */
.vd-breadcrumb {
    margin: 8px 0 16px;
    color: var(--sa-text-hint);
    font-size: 13px;
}
.vd-breadcrumb a {
    color: var(--sa-muted);
    text-decoration: none;
}
.vd-breadcrumb a:hover { color: var(--sa-brand); }
.vd-breadcrumb .layui-icon { font-size: 12px; margin: 0 4px; }

/* course head */
.vd-course-head {
    overflow: hidden;
    padding: 0;
    margin-bottom: 20px;
}
.vd-player-view {
    position: relative;
    background: var(--sa-text-title);
    min-height: 280px;
}
.vd-player-view img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    opacity: .92;
}
.vd-quickview {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(24, 144, 255, .92);
    color: #fff;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}
.vd-quickview:hover { background: var(--sa-brand-dark); color: #fff; }
.vd-player-intro { padding: 28px 24px; }
.vd-player-intro h1 {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 700;
}
.vd-player-price .item {
    margin-bottom: 10px;
    color: var(--sa-muted);
    font-size: 14px;
}
.vd-player-price .item span { color: var(--sa-text); }
.vd-player-action { margin-top: 22px; }
.vd-player-action .layui-btn { margin-right: 10px; margin-bottom: 8px; }

/* playlist */
.vd-playlist { list-style: none; margin: 0; padding: 0; }
.vd-playlist a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px dashed var(--sa-line-soft);
    color: var(--sa-text-secondary);
    text-decoration: none;
    font-size: 14px;
}
.vd-playlist a:hover,
.vd-playlist a.is-on { color: var(--sa-brand); }
.vd-playlist em {
    margin-left: auto;
    font-style: normal;
    color: var(--sa-text-hint);
    font-size: 12px;
}
.vd-article {
    line-height: 1.8;
    color: var(--sa-muted);
    font-size: 14px;
}

/* author / users */
.vd-author {
    display: flex;
    gap: 12px;
    padding: 16px;
}
.vd-author-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.vd-author-desc strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sa-text);
}
.vd-author-desc p {
    margin: 0;
    color: var(--sa-muted);
    font-size: 13px;
    line-height: 1.5;
}
.vd-active-users {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 8px;
}
.vd-active-users li {
    text-align: center;
    overflow: hidden;
}
.vd-active-users img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 6px;
}
.vd-active-users span {
    display: block;
    font-size: 12px;
    color: var(--sa-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* player */
.vd-player-box {
    overflow: hidden;
    background: #000;
    margin-bottom: 8px;
}
.vd-player-box iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
}

.vd-empty {
    text-align: center;
    color: var(--sa-text-hint);
    padding: 28px 0;
    font-size: 14px;
}

.layui-card { margin-bottom: 16px; }
.layui-card-header h5 { margin: 0; font-size: 15px; }

@media (max-width: 992px) {
    .vd-hero-text h1 { font-size: 28px; }
    .vd-hero-image { text-align: center; margin-top: 12px; }
    .vd-player-view img { height: 220px; }
    .vd-player-box iframe { height: 240px; }
    .vd-active-users { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .vd-player-intro { padding: 18px 16px; }
    .vd-player-intro h1 { font-size: 20px; }
}

/* comments */
.vd-comments { margin-top: 4px; }
.vd-comment-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--sa-line-soft);
}
.vd-comment-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.vd-comment-item strong { margin-right: 8px; color: var(--sa-text); }
.vd-comment-item span { color: var(--sa-text-hint); font-size: 12px; }
.vd-comment-item p { margin: 6px 0 0; color: var(--sa-muted); line-height: 1.6; }