/**
 * 全站视觉规范（版心 / 字号 / 间距 / 组件）
 * 在 frontend.css、user.css 之后加载，home.css 之前加载。
 *
 * 版心：1350px（≥1200 生效），左右留白 24px
 * 字号：正文 16px / 次要 14px / 标题 19-24px（参考主流站点正文 16 的基准）
 * 间距：区块 32px，卡片内边距 22-26px
 * 配色：primary #165DFF / deep #0E2F56 / ink #1D2129 / muted #5A6472 / line #EFF2F7
 */

/* ==================== 1. 版心宽度 ==================== */
@media (min-width: 768px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1350px;
        max-width: calc(100% - 48px);
    }
}

/* ==================== 2. 基础排版 ==================== */
body {
    font-size: 16px;
    line-height: 1.65;
    color: #2A2F39;
    background: #F5F7FA;
    letter-spacing: .1px;
}

p {
    margin: 0 0 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1D2129;
    font-weight: 700;
    letter-spacing: 0;
}

h1 {
    font-size: 34px;
    line-height: 1.35;
    margin: 0 0 20px;
}

h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 18px;
}

h3 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 16px;
}

h4 {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 14px;
}

h5 {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 12px;
}

h6 {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 10px;
}

a {
    color: #165DFF;
}

a:hover,
a:focus {
    color: #0E4BD8;
}

small,
.small {
    font-size: 14px;
}

.text-muted {
    color: #7A8798;
}

.lead {
    font-size: 18px;
    line-height: 1.7;
}

/* 内容区高度：72(导航) + 68(页脚) */
main.content {
    min-height: calc(100vh - 140px);
}

/* ==================== 3. 顶部导航 ==================== */
@media (min-width: 768px) {
    body {
        padding-top: 72px;
    }

    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        max-height: 480px;
    }

    .navbar-white {
        min-height: 72px;
    }

    .navbar-white .navbar-brand {
        height: 72px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 20px;
        font-weight: 700;
        color: #0E2F56;
    }

    .navbar-white .navbar-nav > li > a {
        height: 72px;
        line-height: 72px;
        padding: 0 18px;
        font-size: 16px;
        color: #4A5568;
        -webkit-transition: color .2s;
        transition: color .2s;
    }

    .navbar-white .navbar-nav > li > a:hover,
    .navbar-white .navbar-nav > li > a:focus {
        color: #165DFF;
    }

    .navbar-white .navbar-nav > .active > a,
    .navbar-white .navbar-nav > .active > a:hover,
    .navbar-white .navbar-nav > .active > a:focus {
        color: #165DFF;
    }

    /* 桌面展开态：一级菜单不显示图标；<768 折叠下拉保留图标（此规则仅在 ≥768 生效） */
    .navbar-white .navbar-nav > li > a > .fa {
        display: none;
    }

    .navbar-white .navbar-nav > li > a > .avatar-img img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-top: -3px;
    }

    /* 头像那一格用 flex 垂直水平双居中。
       frontend.css 的 .nav li .avatar-img 是 30px 盒子 + vertical-align:top，
       在 72px 行框里顶在顶边（图中心 y=15，栏中心 y=36，偏上 21px），
       旧的 margin-top:-3px 只是小幅补偿，改 flex 后彻底对中 */
    .navbar-white .navbar-nav > li > a.nav-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
    }

    .navbar-white .navbar-nav > li > a.nav-avatar > .avatar-img {
        display: block;
        box-sizing: border-box;
        width: 36px;
        height: 36px;
        line-height: 36px;
        vertical-align: top;
        overflow: hidden;
    }

    .navbar-white .navbar-nav > li > a.nav-avatar > .avatar-img img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin: 0;
        vertical-align: top;
    }

    /* 下拉面板统一右对齐到「导航栏右边缘」，而不是各自 li 的右边缘。
       Bootstrap 默认 .navbar-right .dropdown-menu{right:0} 是相对 li 的：
       头像那一格只有 66px 宽，面板只能向左溢出、左边缘压在「学习平台」文字中间，
       而且两个面板右边缘相差 66px（1320 / 1386）互不齐。
       这里把 li 设为 static、让 ul 成为定位参照，两者右边缘都齐到导航栏右边缘。
       选择器必须带 #header-navbar：frontend.css 用
       `#header-navbar li.dropdown ul.dropdown-menu{min-width:100px}` 压着宽度。 */
    #header-navbar .navbar-nav.navbar-right {
        position: relative;
    }

    #header-navbar .navbar-nav.navbar-right > li.dropdown {
        position: static;
    }

    #header-navbar .navbar-nav.navbar-right > li.dropdown > .dropdown-menu {
        left: auto;
        right: 0;
        min-width: 180px;
        margin-top: 0;
        padding: 8px 0;
        border: 0;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 12px 32px rgba(14, 47, 86, .14);
    }
}

.navbar-white .dropdown-menu {
    padding: 8px 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(14, 47, 86, .14);
}

.navbar-white .dropdown-menu > li > a {
    padding: 10px 20px;
    font-size: 15px;
    color: #4A5568;
    line-height: 1.4;
}

.navbar-white .dropdown-menu > li > a:hover,
.navbar-white .dropdown-menu > li > a:focus {
    background: #F2F6FF;
    color: #165DFF;
}

.navbar-white .dropdown-menu > .divider {
    margin: 8px 0;
}

/* ==================== 4. 卡片 / 面板 ==================== */
.panel {
    margin-bottom: 32px;
    border-radius: 14px;
}

.panel-default {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(16, 42, 80, .06);
    overflow: hidden;
}

.panel-default > .panel-heading {
    background: #fff;
    border-bottom: 1px solid #EFF2F7;
    border-radius: 14px 14px 0 0;
    padding: 20px 26px;
}

.panel-default > .panel-heading .panel-title {
    font-size: 19px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}

.panel-default > .panel-heading .panel-title .fa {
    color: #165DFF;
    margin-right: 8px;
}

.panel-default > .panel-body {
    padding: 24px 26px;
}

.panel-default > .panel-footer {
    background: #FAFBFD;
    border-top: 1px solid #EFF2F7;
    padding: 16px 26px;
    border-radius: 0 0 14px 14px;
}

/* ==================== 5. 按钮 ==================== */
.btn {
    font-size: 15px;
    padding: 9px 20px;
    border-radius: 8px;
    line-height: 1.5;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.btn-sm {
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 7px;
}

.btn-xs {
    font-size: 13px;
    padding: 4px 11px;
    border-radius: 6px;
}

.btn-lg {
    font-size: 17px;
    padding: 12px 28px;
    border-radius: 10px;
}

.btn-primary {
    background-color: #165DFF;
    border-color: #165DFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #0E4BD8;
    border-color: #0E4BD8;
}

/* ==================== 6. 表单 ==================== */
.form-control {
    height: 42px;
    font-size: 15px;
    border-radius: 8px;
    border-color: #DDE3EC;
    color: #2A2F39;
}

.form-control:focus {
    border-color: #165DFF;
    box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
}

.form-control.input-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    height: 36px;
    font-size: 14px;
}

.form-control.input-lg {
    height: 50px;
    font-size: 16px;
}

.input-group-addon {
    border-radius: 8px;
    border-color: #DDE3EC;
    background: #F7F9FC;
    font-size: 15px;
}

label {
    font-weight: 500;
    color: #2A2F39;
}

.control-label {
    font-size: 15px;
}

.help-block {
    font-size: 14px;
}

/* ==================== 7. 表格 ==================== */
.table > thead > tr > th {
    font-size: 14px;
    font-weight: 600;
    color: #5A6472;
    background: #FAFBFD;
    padding: 15px 14px;
    border-bottom: 1px solid #EFF2F7;
}

.table > tbody > tr > td {
    font-size: 15px;
    padding: 15px 14px;
    color: #2A2F39;
    border-top: 1px solid #F2F4F8;
    vertical-align: middle;
}

.table > tbody > tr:hover > td {
    background: #FAFBFD;
}

/* ==================== 8. 其它常用元素 ==================== */
.label {
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    padding: .32em .7em;
}

.badge {
    font-size: 13px;
    border-radius: 10px;
    padding: 5px 9px;
}

.pagination > li > a,
.pagination > li > span {
    font-size: 15px;
    padding: 8px 15px;
    color: #5A6472;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: #165DFF;
    border-color: #165DFF;
}

.breadcrumb {
    font-size: 14px;
    border-radius: 10px;
    background: #F7F9FC;
}

.breadcrumb > .active {
    color: #7A8798;
}

.alert {
    font-size: 15px;
    border-radius: 10px;
    padding: 16px 20px;
}

.nav-tabs > li > a {
    font-size: 16px;
    padding: 12px 22px;
    color: #5A6472;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #165DFF;
    font-weight: 600;
}

.well {
    border-radius: 12px;
    font-size: 15px;
    padding: 20px 24px;
}

.list-group-item {
    font-size: 15px;
    padding: 14px 20px;
    border-color: #EFF2F7;
}

/* ==================== 9. 会员中心侧栏 ==================== */
.sidenav {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(16, 42, 80, .06);
    padding: 10px 0;
    margin-bottom: 32px;
    overflow: hidden;
}

.sidenav .list-group {
    margin-bottom: 0;
}

.sidenav .list-group-heading {
    font-size: 13px;
    color: #9AA5B5;
    padding: 10px 22px 8px;
    letter-spacing: .4px;
    background: transparent;
    border: 0;
}

.sidenav .list-group-item {
    border: 0;
    padding: 0;
    background: transparent;
}

.sidenav .list-group-item > a {
    display: block;
    padding: 12px 22px;
    font-size: 15px;
    color: #4A5568;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.sidenav .list-group-item > a:hover,
.sidenav .list-group-item > a:focus {
    background: #F5F8FF;
    color: #165DFF;
    text-decoration: none;
}

.sidenav .list-group-item.active {
    background: #F0F4FF;
}

.sidenav .list-group-item.active > a {
    color: #165DFF;
    font-weight: 600;
    border-left: 3px solid #165DFF;
    padding-left: 19px;
}

/* ==================== 10. 页脚 ==================== */
footer.footer {
    margin-top: 40px;
    background: #1D2129;
    color: #8A94A6;
}

footer.footer .copyright {
    background: #1D2129;
    font-size: 14px;
    letter-spacing: .2px;
    line-height: 68px;
    color: #8A94A6;
}

footer.footer .copyright a {
    color: #A8B2C1;
    text-decoration: none;
}

footer.footer .copyright a:hover {
    color: #fff;
}

/* ==================== 11. 响应式 ==================== */
@media (max-width: 991px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 21px;
    }

    .panel-default > .panel-heading {
        padding: 16px 18px;
    }

    .panel-default > .panel-body {
        padding: 18px;
    }

    .panel {
        margin-bottom: 22px;
    }
}

@media (max-width: 767px) {
    .panel-default > .panel-heading .panel-title {
        font-size: 17px;
    }

    footer.footer .copyright {
        line-height: 40px;
        font-size: 13px;
    }
}

/* ==================== 12. 内页通用组件（对齐首页设计语言） ==================== */
/* 配色：primary #165DFF / secondary #0E2F56 / neutral #F5F7FA / text #1D2129 #4A5568 #8A94A6 #9AA5B5 */

/* ---------- 页面容器 ---------- */
.page-inner {
    background: #F5F7FA;
    margin: -15px;
    padding: 0 0 56px;
    min-height: calc(100vh - 140px);
}

.page-inner > .container {
    padding-top: 32px;
}

/* ---------- 页头横幅 ---------- */
.page-hero {
    background: -webkit-linear-gradient(120deg, #0E2F56 0%, #165DFF 100%);
    background: linear-gradient(120deg, #0E2F56 0%, #165DFF 100%);
    border-radius: 14px;
    padding: 30px 36px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(14, 47, 86, .18);
    margin-bottom: 24px;
}

.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.page-hero::before {
    width: 220px;
    height: 220px;
    right: -60px;
    top: -110px;
}

.page-hero::after {
    width: 120px;
    height: 120px;
    right: 180px;
    bottom: -70px;
}

.page-hero .ph-crumb {
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.page-hero .ph-crumb a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
}

.page-hero .ph-crumb a:hover {
    color: #fff;
    text-decoration: none;
}

.page-hero .ph-crumb .fa {
    margin: 0 6px;
    font-size: 12px;
}

.page-hero .ph-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
    position: relative;
    z-index: 1;
    /* 必须显式声明：否则会被全局 h1{color:#1D2129} 抢走颜色 */
    color: #fff;
}

.page-hero .ph-title .fa {
    margin-right: 12px;
    font-size: 22px;
    color: rgba(255, 255, 255, .9);
}

.page-hero .ph-desc {
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, .75);
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

/* 横幅右侧统计 / 操作 */
.page-hero .ph-extra {
    position: absolute;
    right: 36px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.page-hero .ph-stat {
    text-align: center;
    margin-left: 40px;
}

.page-hero .ph-stat b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
}

.page-hero .ph-stat span {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    line-height: 18px;
    margin-top: 2px;
}

/* ---------- 过滤条 ---------- */
.filter-bar {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(16, 42, 80, .07);
    padding: 18px 24px;
    margin-bottom: 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px 16px;
}

.filter-bar .f-label {
    font-size: 14px;
    color: #8A94A6;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.filter-bar .f-label .fa {
    margin-right: 6px;
    color: #165DFF;
}

.filter-bar .f-pills {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

.filter-bar .f-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 18px;
    border: 1px solid #E5EAF2;
    background: #fff;
    color: #4A5568;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.filter-bar .f-pill:hover,
.filter-bar .f-pill:focus {
    color: #165DFF;
    border-color: rgba(22, 93, 255, .5);
    text-decoration: none;
}

.filter-bar .f-pill.active {
    background: #165DFF;
    border-color: #165DFF;
    color: #fff;
}

/* 二级分类：去掉边框、浅底，表示从属关系 */
.filter-bar .f-pill.f-pill-sub {
    background: #F5F7FA;
    border-color: #F5F7FA;
    padding: 6px 14px;
    font-size: 13px;
}

.filter-bar .f-pill.f-pill-sub:hover,
.filter-bar .f-pill.f-pill-sub:focus {
    border-color: rgba(22, 93, 255, .5);
    color: #165DFF;
}

.filter-bar .f-pill.f-pill-sub.active {
    background: #165DFF;
    border-color: #165DFF;
    color: #fff;
}

.filter-bar .f-search {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.filter-bar .f-search .form-control {
    width: 280px;
    border-radius: 20px 0 0 20px;
    border-color: #E5EAF2;
    box-shadow: none;
}

.filter-bar .f-search .btn {
    border-radius: 0 20px 20px 0;
}

/* 清除按钮：不并入搜索胶囊，改为独立的两侧圆角矩形 */
.filter-bar .f-search .btn-default {
    border-radius: 20px;
    margin-left: 6px;
}

.filter-bar .f-count {
    font-size: 14px;
    color: #8A94A6;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.filter-bar .f-count b {
    color: #165DFF;
}

/* ---------- 卡片面板（与首页 panel-card 同值） ---------- */
.page-inner .panel-card {
    background: #fff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(16, 42, 80, .07);
    margin-bottom: 32px;
    overflow: hidden;
}

.page-inner .panel-card > .panel-heading {
    background: #fff;
    border-bottom: 1px solid #EFF2F7;
    border-radius: 0;
    padding: 20px 28px;
}

.page-inner .panel-card > .panel-heading .panel-title {
    font-size: 20px;
    font-weight: 700;
    color: #1D2129;
    line-height: 30px;
    margin: 0;
}

.page-inner .panel-card > .panel-heading .panel-title .fa {
    color: #165DFF;
    margin-right: 10px;
}

.page-inner .panel-card > .panel-body {
    padding: 24px 28px;
}

.page-inner .panel-card > .panel-body.flush {
    padding: 0;
}

.sec-sub {
    font-size: 14px;
    font-weight: 400;
    color: #9AA5B5;
    margin-left: 12px;
}

.sec-more {
    font-size: 14px;
    color: #165DFF;
    text-decoration: none;
    line-height: 30px;
}

.sec-more:hover,
.sec-more:focus {
    color: #0E4BD8;
    text-decoration: none;
}

/* 蓝色标题条（与首页同值） */
.panel-heading-bar {
    background: #165DFF;
    padding: 20px 28px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.panel-heading-bar .hd-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 30px;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.panel-heading-bar .hd-title .fa {
    margin-right: 10px;
    -webkit-flex: none;
    flex: none;
    line-height: 1;
}

/* ---------- 胶囊按钮（与首页同值） ---------- */
.btn-pill {
    display: inline-block;
    padding: 7px 18px;
    white-space: nowrap;
    border-radius: 22px;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 0;
    cursor: pointer;
}

.btn-pill-primary {
    background: #165DFF;
    color: #fff;
}

.btn-pill-primary:hover,
.btn-pill-primary:focus {
    background: #0E4BD8;
    color: #fff;
    text-decoration: none;
}

.btn-pill-ghost {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.btn-pill-ghost:hover,
.btn-pill-ghost:focus {
    background: rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
}

.btn-pill-outline {
    background: #fff;
    color: #165DFF;
    border: 1px solid rgba(22, 93, 255, .55);
}

.btn-pill-outline:hover,
.btn-pill-outline:focus {
    background: #F0F5FF;
    color: #0E4BD8;
    text-decoration: none;
}

/* ---------- 空态 / 提示条（与首页同值） ---------- */
.empty-box {
    padding: 64px 0;
    text-align: center;
    color: #B4BDCB;
    font-size: 16px;
}

.empty-box .fa {
    display: block;
    font-size: 40px;
    margin-bottom: 14px;
    opacity: .5;
}

.tip-bar {
    background: #F5F7FA;
    padding: 14px 28px;
    font-size: 14px;
    color: #5A6472;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.tip-bar a {
    color: #165DFF;
    text-decoration: none;
}

.tip-bar a:hover {
    text-decoration: underline;
}

/* ---------- 统计条 ---------- */
.stat-strip {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.stat-strip .st-item {
    -webkit-flex: 1;
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 22px 12px;
    border-right: 1px solid #F0F2F5;
}

.stat-strip .st-item:last-child {
    border-right: 0;
}

.stat-strip .st-item b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    color: #165DFF;
}

.stat-strip .st-item b.orange {
    color: #E67E22;
}

.stat-strip .st-item b.green {
    color: #27AE60;
}

.stat-strip .st-item span {
    display: block;
    font-size: 13px;
    color: #8A94A6;
    line-height: 18px;
    margin-top: 4px;
}

/* ---------- 课程卡（与首页同值，网格列数可调） ---------- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
}

.course-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 卡片式课程：上方长方形封面图，下方名称与信息 */
.course-item {
    display: block;
    background: #fff;
    border: 1px solid #EFF2F7;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(16, 42, 80, .05);
    -webkit-transition: -webkit-transform .2s, box-shadow .2s, border-color .2s;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.course-item:hover,
.course-item:focus {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(16, 42, 80, .12);
    border-color: rgba(22, 93, 255, .35);
    text-decoration: none;
    color: inherit;
}

/* 内页卡片信息行略收紧，避免 4 项元信息换行 */
.page-inner .course-meta {
    font-size: 13px;
    gap: 4px 12px;
}

.course-thumb {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: auto;
    /* 与首页卡片一致的 3:2 封面比例，宽度随列宽自适应 */
    aspect-ratio: 3 / 2;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    color: #fff;
    font-size: 40px;
    position: relative;
    overflow: hidden;
}

.course-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.course-thumb i {
    position: relative;
    z-index: 1;
}

.course-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    background: rgba(14, 47, 86, .62);
    color: #fff;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    padding-left: 4px;
    -webkit-transition: background .2s, -webkit-transform .2s;
    transition: background .2s, transform .2s;
    z-index: 2;
}

.course-item:hover .course-play {
    background: rgba(22, 93, 255, .85);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.course-ctype {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 9px;
    background: rgba(14, 47, 86, .74);
    color: #fff;
    border-radius: 0 10px 0 0;
}

.course-thumb.is-video::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 47, 86, .22);
    z-index: 1;
}

.course-thumb.is-video > i {
    display: none;
}

.course-body {
    display: block;
    padding: 14px 16px 16px;
}

.course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1D2129;
    margin: 0 0 8px;
    min-height: 48px;
}

.course-item:hover .course-title {
    color: #165DFF;
}

.course-meta {
    font-size: 14px;
    color: #8A94A6;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.course-meta .fa {
    margin-right: 4px;
}

.course-meta .fa-star-o {
    color: #FAAD14;
}

/* ---------- 讲师卡（与首页同值，4 列） ---------- */
.teacher-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 14px 14px 20px;
}

.teacher-grid .teacher-cell {
    width: 50%;
    padding: 0 6px;
    box-sizing: border-box;
}

.teacher-grid.cols-3 > .teacher-cell {
    width: 33.3333%;
}

.teacher-grid.cols-4 > .teacher-cell {
    width: 25%;
}

.teacher-item {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    gap: 16px;
    padding: 18px;
    border: 1px solid #F0F2F5;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    margin: 6px 0;
    -webkit-transition: all .2s;
    transition: all .2s;
    box-sizing: border-box;
}

.teacher-item:hover,
.teacher-item:focus {
    border-color: rgba(22, 93, 255, .4);
    background: #F8FAFF;
    text-decoration: none;
    color: inherit;
}

.teacher-avatar {
    -webkit-flex: 0 0 92px;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #0E2F56;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 92px;
    text-align: center;
    overflow: hidden;
}

.teacher-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

/* 讲师头像已统一放大到 92px，首页与讲师列表共用同一套样式 */

.teacher-body {
    min-width: 0;
    -webkit-flex: 1;
    flex: 1;
}

.teacher-name {
    font-size: 16px;
    font-weight: 600;
    color: #1D2129;
    line-height: 22px;
}

.teacher-level {
    font-size: 12px;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    background: rgba(22, 93, 255, .1);
    color: #165DFF;
    margin-left: 8px;
    position: relative;
    top: -1px;
    display: inline-block;
}

.teacher-title {
    font-size: 14px;
    color: #5A6472;
    margin: 4px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.teacher-exp {
    font-size: 14px;
    color: #9AA5B5;
    margin: 4px 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.teacher-meta {
    font-size: 13px;
    color: #9AA5B5;
    margin-top: 8px;
}

.teacher-meta span + span {
    margin-left: 16px;
}

.teacher-meta .fa-star {
    color: #FAAD14;
}

.teacher-meta .fa-play-circle-o {
    color: #165DFF;
}

/* ---------- 排行条（与首页同值） ---------- */
.rank-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-bottom: 1px solid #F0F2F5;
}

.rank-item:last-child {
    border-bottom: 0;
}

.rank-item.top {
    background: -webkit-linear-gradient(left, rgba(22, 93, 255, .06), rgba(255, 255, 255, 0));
    background: linear-gradient(90deg, rgba(22, 93, 255, .06), rgba(255, 255, 255, 0));
}

.rank-no {
    -webkit-flex: 0 0 28px;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    background: #F2F4F7;
    color: #9AA5B5;
}

.rank-no.n1 {
    background: #FAAD14;
    color: #fff;
}

.rank-no.n2 {
    background: #C9D2DE;
    color: #fff;
}

.rank-no.n3 {
    background: #B07B4F;
    color: #fff;
}

.rank-avatar {
    -webkit-flex: 0 0 38px;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0E2F56;
    color: #fff;
    font-size: 15px;
    line-height: 38px;
    text-align: center;
    overflow: hidden;
}

.rank-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.rank-body {
    min-width: 0;
    -webkit-flex: 1;
    flex: 1;
}

.rank-name {
    font-size: 16px;
    font-weight: 500;
    color: #1D2129;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rank-lv {
    font-size: 13px;
    color: #9AA5B5;
    line-height: 18px;
}

/* 排行行里的等级徽章：小色块 + 深色名称，避免浅底色配白字看不清 */
.rank-lv .lv-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #fff;
    padding: 0 7px;
    border-radius: 4px;
    margin-right: 6px;
}

.rank-lv .lv-name {
    color: #5A6472;
    margin-right: 12px;
}

.rank-lv .rk-badge {
    color: #8A94A6;
}

.rank-lv .rk-badge .fa {
    margin-right: 4px;
}

.rank-h {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: right;
}

.rank-h b {
    font-size: 18px;
    color: #165DFF;
    line-height: 24px;
}

.rank-h b.orange {
    color: #E67E22;
}

.rank-h span {
    display: block;
    font-size: 12px;
    color: #9AA5B5;
    line-height: 16px;
}

/* ---------- 计划条目 ---------- */
.plan-item {
    padding: 24px 28px;
    border-bottom: 1px solid #F0F2F5;
}

.plan-item:last-child {
    border-bottom: 0;
}

/* ---------- panel-card 内表格 ---------- */
.page-inner .panel-card > .table {
    margin: 0;
}

.page-inner .panel-card > .table > thead > tr > th {
    background: #FAFBFD;
    color: #8A94A6;
    font-weight: 600;
    border-bottom: 1px solid #EFF2F7;
    padding: 14px 20px;
}

.page-inner .panel-card > .table > tbody > tr > td {
    padding: 14px 20px;
    vertical-align: middle;
}

/* ---------- 进度条统一 ---------- */
.page-inner .progress {
    border-radius: 6px;
    background: #EEF2F8;
    box-shadow: none;
}

.page-inner .progress-bar {
    background: #165DFF;
    box-shadow: none;
}

.page-inner .progress-bar-success {
    background: #27AE60;
}

/* ---------- 状态标签统一 ---------- */
.page-inner .label {
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
    .page-hero .ph-extra {
        position: static;
        -webkit-transform: none;
        transform: none;
        margin-top: 18px;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .page-hero .ph-stat {
        margin-left: 0;
        margin-right: 40px;
        text-align: left;
    }
}

@media (max-width: 1199px) {
    .course-grid,
    .course-grid.cols-3,
    .course-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-grid.cols-3 > .teacher-cell,
    .teacher-grid.cols-4 > .teacher-cell {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .course-grid,
    .course-grid.cols-3,
    .course-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    /* 封面比例由 aspect-ratio 3/2 自适应，不再固定高度 */

    .teacher-grid.cols-3 > .teacher-cell,
    .teacher-grid.cols-4 > .teacher-cell,
    .teacher-grid > .teacher-cell {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .page-inner {
        padding-bottom: 40px;
    }

    .page-inner > .container {
        padding-top: 20px;
    }

    .page-hero {
        padding: 22px 20px;
    }

    .page-hero .ph-title {
        font-size: 21px;
        line-height: 30px;
    }

    .page-hero .ph-extra {
        margin-top: 14px;
    }

    .page-hero .ph-stat {
        margin-right: 24px;
    }

    .page-hero .ph-stat b {
        font-size: 20px;
        line-height: 26px;
    }

    .filter-bar {
        padding: 14px 16px;
    }

    /* 移动端：搜索框弹性收缩，按钮/清除不压缩，避免横向溢出 */
    .filter-bar .f-search {
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .filter-bar .f-search .form-control {
        width: auto;
        min-width: 0;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .filter-bar .f-search .input-group-btn {
        width: auto;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .filter-bar .f-search .btn {
        white-space: nowrap;
    }

    .page-inner .panel-card > .panel-heading {
        padding: 16px 18px;
    }

    .page-inner .panel-card > .panel-heading .panel-title {
        font-size: 17px;
    }

    .page-inner .panel-card > .panel-body {
        padding: 18px;
    }

    .rank-item {
        padding: 14px 18px;
    }
}

/* ---------- 学习地图卡片（内页） ---------- */
.map-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 14px;
}

/* 我的岗位能力模型（项库按岗位独立设置） */
.cmodel-post {
    border: 1px solid #EFF2F5;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: #FAFBFF;
}

.cmodel-post:last-child {
    margin-bottom: 0;
}

.cmodel-post-name {
    font-size: 15px;
    font-weight: 700;
    color: #1A2B4C;
    margin-bottom: 12px;
}

.cmodel-post-name .fa {
    color: #165DFF;
    margin-right: 6px;
}

.cmodel-group {
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.cmodel-group:last-child {
    margin-bottom: 0;
}

.cmodel-group-label {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 12px;
    color: #fff;
    border-radius: 10px;
    padding: 3px 10px;
    margin-top: 2px;
}

.cmodel-group-label.g-ability {
    background: #165DFF;
}

.cmodel-group-label.g-quality {
    background: #FAAD14;
}

.cmodel-items {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.cmodel-item {
    background: #fff;
    border: 1px solid #E5EBF5;
    border-radius: 8px;
    padding: 6px 12px;
    max-width: 100%;
}

.cmodel-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #1A2B4C;
    margin-right: 8px;
}

.cmodel-item-desc {
    font-size: 12px;
    color: #7A8699;
}

.map-grid .map-cell {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

/* 一行两列：最后一行只有 1 个（奇数序）时铺满整行 */
.map-grid .map-cell:last-child:nth-child(odd) {
    width: 100%;
}

.map-card {
    border: 1px solid #F0F2F5;
    border-radius: 12px;
    padding: 22px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-transition: all .2s;
    transition: all .2s;
    background: #fff;
}

.map-card:hover {
    border-color: rgba(22, 93, 255, .4);
    background: #F8FAFF;
    box-shadow: 0 6px 18px rgba(16, 42, 80, .06);
}

.map-card .mc-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.map-card .mc-icon {
    -webkit-flex: 0 0 44px;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    color: #fff;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
}

.map-card .mc-name {
    font-size: 17px;
    font-weight: 600;
    color: #1D2129;
    line-height: 24px;
}

.map-card .mc-badges {
    margin-top: 2px;
    font-size: 12px;
    line-height: 18px;
}

.map-card .mc-badges .mc-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 12px;
}

.map-card .mc-tag.p-blue {
    background: rgba(22, 93, 255, .1);
    color: #165DFF;
}

.map-card .mc-tag.p-green {
    background: rgba(39, 174, 96, .12);
    color: #27AE60;
}

.map-card .mc-desc {
    font-size: 14px;
    color: #8A94A6;
    line-height: 22px;
    height: 44px;
    overflow: hidden;
    margin-bottom: 14px;
}

.map-card .mc-meta {
    font-size: 13px;
    color: #9AA5B5;
    margin-bottom: 10px;
}

.map-card .mc-meta .fa {
    margin-right: 4px;
}

.map-card .mc-meta span + span {
    margin-left: 14px;
}

.map-card .mc-progress {
    height: 8px;
    border-radius: 4px;
    background: #EEF2F8;
    overflow: hidden;
    margin-bottom: 16px;
}

.map-card .mc-progress i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #165DFF;
}

.map-card .mc-progress i.green {
    background: #27AE60;
}

.map-card .mc-foot {
    margin-top: auto;
}

.map-card .mc-foot .btn-pill {
    display: block;
    text-align: center;
}

@media (max-width: 1199px) {
    .map-grid .map-cell {
        width: 50%;
    }
}

@media (max-width: 767px) {
    .map-grid .map-cell {
        width: 100%;
    }
}

/* ---------- 标签云（能力标签） ---------- */
.tag-cloud {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-cloud .tag-chip {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 18px;
    background: #F0F5FF;
    color: #165DFF;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #D6E4FF;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.tag-cloud .tag-chip:hover {
    background: #165DFF;
    color: #fff;
    border-color: #165DFF;
}

/* ---------- 计划条目内容（内页/平台首页） ---------- */
.plan-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 12px;
}

.plan-title {
    font-size: 16px;
    font-weight: 600;
    color: #1D2129;
    text-decoration: none;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.plan-title:hover,
.plan-title:focus {
    color: #165DFF;
    text-decoration: none;
}

.plan-pct {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #165DFF;
}

.plan-sub {
    font-size: 13px;
    color: #9AA5B5;
    margin: 6px 0 10px;
}

.plan-item .mc-progress {
    height: 8px;
    border-radius: 4px;
    background: #EEF2F8;
    overflow: hidden;
}

.plan-item .mc-progress i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #165DFF;
}

.plan-item .mc-progress i.green {
    background: #27AE60;
}

/* ---------- 荣誉页 ---------- */
.honor-badge {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: #FBFCFE;
    border: 6px solid #C9D2DE;
    color: #8A94A6;
    font-size: 52px;
    box-shadow: 0 10px 26px rgba(16, 42, 80, .12);
}

.honor-badge.muted {
    background: #EEF2F8;
    color: #B4BDCB;
    box-shadow: none;
}

.honor-lv {
    text-align: center;
    margin-top: 16px;
    font-size: 19px;
    font-weight: 700;
    color: #1D2129;
    line-height: 28px;
}

.honor-lv .lv-tag {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: 2px;
}

.honor-lv-sub {
    text-align: center;
    font-size: 14px;
    color: #8A94A6;
    margin-top: 6px;
}

.honor-h {
    text-align: center;
    margin: 22px 0 4px;
}

.honor-h b {
    font-size: 40px;
    font-weight: 700;
    color: #E67E22;
    line-height: 44px;
}

.honor-h span {
    font-size: 14px;
    color: #8A94A6;
    margin-left: 8px;
}

.honor-progress {
    height: 12px;
    border-radius: 6px;
    background: #EEF2F8;
    overflow: hidden;
    margin: 14px 0 10px;
}

.honor-progress i {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: -webkit-linear-gradient(90deg, #FAAD14, #E67E22);
    background: linear-gradient(90deg, #FAAD14, #E67E22);
}

.honor-note {
    font-size: 14px;
    color: #8A94A6;
    line-height: 22px;
}

/* 等级阶梯 */
.ladder-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 14px 18px;
}

.ladder-item {
    width: 20%;
    padding: 14px 8px;
    text-align: center;
    box-sizing: border-box;
}

.ladder-dot {
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 22px;
    color: #fff;
    background: #F1F3F5;
    color: #B6BEC6;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.ladder-item.is-passed .ladder-dot {
    opacity: .85;
}

.ladder-item.is-current {
    background: #FFF8F1;
    border-radius: 12px;
}

.ladder-item.is-current .ladder-dot {
    box-shadow: 0 0 0 4px rgba(230, 126, 34, .3);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

.ladder-item.is-current .ladder-name {
    color: #1D2129;
    font-weight: 700;
}

.ladder-name {
    font-size: 13px;
    color: #4A5568;
    margin-top: 8px;
    line-height: 18px;
}

.ladder-item.is-locked .ladder-name {
    color: #AAB3BD;
}

.ladder-meta {
    font-size: 12px;
    color: #9AA5B5;
    line-height: 16px;
    margin-top: 2px;
}

@media (max-width: 1199px) {
    .ladder-item {
        width: 25%;
    }
}

@media (max-width: 991px) {
    .ladder-item {
        width: 33.3333%;
    }
}

/* 提示条（荣誉页的提示/冻结） */
.notice-bar {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 16px;
}

.notice-bar .fa {
    margin-top: 4px;
}

.notice-bar.info {
    background: #F0F5FF;
    color: #2B5FD9;
}

.notice-bar.warn {
    background: #FFF9EC;
    color: #B7791F;
}

.notice-bar.success {
    background: #EFF8F1;
    color: #1F8A4C;
}

/* ---------- 奖励周期卡 ---------- */
.reward-stats {
    display: -webkit-flex;
    display: flex;
    gap: 32px;
    padding: 14px 18px;
    background: #F7F9FC;
    border-radius: 10px;
}

.reward-stats .rs-item b {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    color: #E67E22;
}

.reward-stats .rs-item span {
    display: block;
    font-size: 13px;
    color: #8A94A6;
    margin-top: 2px;
}

/* 计划条目按钮区 */
.plan-actions {
    margin-top: 14px;
}


/* ---------- 等高栅格（同一行面板底部对齐） ---------- */
@media (min-width: 992px) {
    .row-flex {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .row-flex > [class*="col-"] {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .row-flex > [class*="col-"] > .panel-card {
        -webkit-flex: 1;
        flex: 1;
    }

    /* 侧栏堆叠多卡时按内容高度排列，避免卡片内部留白 */
    .row-flex > .col-stack > .panel-card {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
}


/* ---------- 13. 详情页组件（课程详情 / 讲师详情） ---------- */
/* 横幅内的类型/等级角标：默认浅蓝底蓝字压在蓝色渐变上不可读，改白底蓝字 */
.page-hero .ph-title .teacher-level {
    background: #fff;
    color: #165DFF;
    border: 0;
    vertical-align: middle;
    font-size: 12px;
    line-height: 18px;
    padding: 2px 10px;
}

/* 蓝底标题栏内的小字统计 */
.panel-heading-bar .hd-title .sec-sub {
    color: rgba(255, 255, 255, .85);
    font-weight: 400;
}

/* 点赞 / 分享按钮组：保持 bootstrap 的 btn-danger/btn-default 切换类，仅做胶囊化外观 */
.act-btns {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.act-btns .btn {
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
    border: 0;
}

.act-btns .btn-default {
    background: #EFF2F7;
    color: #4A5568;
}

.act-btns .btn-default:hover,
.act-btns .btn-default:focus {
    background: #E3E9F2;
    color: #1D2129;
}

.act-btns .btn-danger {
    background: #F53F3F;
    color: #fff;
}

.act-btns .btn-info {
    background: #165DFF;
    color: #fff;
}

.act-btns .act-count {
    font-size: 13px;
    color: #8A94A6;
    margin-left: 4px;
}

.act-btns .act-count b {
    color: #165DFF;
}

/* 学习目标 / 学习对象卡片 */
.goal-box {
    background: #F5F8FF;
    border-left: 3px solid #165DFF;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 24px;
    color: #4A5568;
}

.goal-box .gb-head {
    font-weight: 700;
    color: #165DFF;
    margin-bottom: 6px;
}

.goal-box .gb-head .fa {
    margin-right: 6px;
}

.goal-box ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

/* 详情页课程简介：左侧封面 + 右侧基本信息 */
.detail-intro {
    display: -webkit-flex;
    display: flex;
    gap: 50px;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.detail-intro .di-media {
    -webkit-flex: 0 0 340px;
    flex: 0 0 340px;
    min-width: 0;
}

.detail-intro .di-media .course-thumb {
    border-radius: 12px;
}

.detail-intro .di-info {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.detail-intro .di-info .goal-box:first-child {
    margin-top: 0;
}

/* 点赞 / 分享 / 评论 三个按钮平均分布整行，与封面留出间距
   说明：Chrome 对 <button> 的 flex:1 1 0 等分有怪癖，这里用 Grid 强制三等分 */
.detail-intro .di-media .act-btns {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.detail-intro .di-media .act-btns .btn,
.detail-intro .di-media .act-btns .act-count {
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    /* 关键：解除 min-width:auto 的最小内容宽度限制，三者才能真正等宽 */
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
}

/* 「评论 N 条」改成与点赞/分享同款的按钮版式 */
.detail-intro .di-media .act-btns .act-count {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    background: #EFF2F7;
    color: #4A5568;
    margin: 0;
    cursor: default;
}

.detail-intro .di-media .act-btns .act-count .fa {
    margin-right: 4px;
}

.detail-intro .di-media .act-btns .act-count b {
    color: #165DFF;
    margin: 0 2px;
}

/* 章节列表 */
.ch-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-list .ch-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 13px 4px;
    border-bottom: 1px dashed #EFF2F7;
    min-width: 0;
}

.ch-list .ch-item:last-child {
    border-bottom: 0;
}

.ch-list .ch-no {
    -webkit-flex: none;
    flex: none;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background: #EFF2F7;
    color: #165DFF;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin-right: 12px;
}

.ch-list .ch-body {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.ch-list .ch-title {
    font-size: 14px;
    color: #1D2129;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-list .ch-sub {
    font-size: 12px;
    color: #9AA5B5;
    line-height: 18px;
    margin-top: 2px;
}

.ch-list .ch-act {
    -webkit-flex: none;
    flex: none;
    margin-left: 14px;
}

/* 章节右侧操作区：状态标签 + 按钮统一宽度，保证各行严格对齐 */
.ch-list .ch-ops {
    -webkit-flex: none;
    flex: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    margin-left: 14px;
}

.ch-list .ch-ops .ch-state {
    -webkit-flex: none;
    flex: none;
    width: 62px;
    text-align: right;
    margin-right: 12px;
}

.ch-list .ch-ops .btn-pill {
    -webkit-flex: none;
    flex: none;
    width: 112px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* 章节锁定态：未完成前面章节时置灰 */
.ch-list .ch-item.is-locked .ch-no {
    background: #F2F4F8;
    color: #C4CCD8;
}

.ch-list .ch-item.is-locked .ch-title {
    color: #9AA5B5;
}

/* 评论 / 评价列表 */
.cm-item {
    display: -webkit-flex;
    display: flex;
    padding: 14px 0;
    border-bottom: 1px dashed #EFF2F7;
    min-width: 0;
}

.cm-item:last-child {
    border-bottom: 0;
}

.cm-avatar {
    -webkit-flex: none;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #EFF2F7;
    margin-right: 12px;
}

.cm-avatar img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.cm-body {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.cm-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.cm-name {
    font-size: 14px;
    font-weight: 600;
    color: #1D2129;
}

.cm-stars {
    color: #FAAD14;
    font-size: 13px;
    margin-left: 8px;
}

.cm-time {
    margin-left: auto;
    font-size: 12px;
    color: #9AA5B5;
}

.cm-text {
    font-size: 14px;
    color: #4A5568;
    line-height: 22px;
    margin: 6px 0 0;
}

/* 评价表单 */
.rate-form .form-control {
    border-radius: 10px;
    border-color: #E3E9F2;
    box-shadow: none;
}

.rate-form .rate-select {
    width: 220px;
    margin-bottom: 10px;
}

.rate-form textarea {
    resize: vertical;
}

.rate-form .submit-row {
    margin-top: 12px;
}

/* 讲师详情头部卡 */
.td-media {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    min-width: 0;
}

.td-avatar {
    -webkit-flex: none;
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #EFF2F7;
    line-height: 96px;
    text-align: center;
    margin-right: 20px;
}

.td-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.td-avatar i {
    font-size: 40px;
    color: #B0C4D8;
}

.td-body {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.td-name {
    font-size: 20px;
    font-weight: 700;
    color: #1D2129;
    margin: 0;
    line-height: 28px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.td-name .teacher-level {
    margin-left: 10px;
}

.td-meta {
    font-size: 14px;
    color: #4A5568;
    line-height: 24px;
    margin-top: 8px;
}

.td-meta .muted {
    color: #8A94A6;
}

.td-intro {
    font-size: 13px;
    color: #8A94A6;
    line-height: 22px;
    margin-top: 6px;
}

/* 表格横向滚动容器（窄屏表格不挤压） */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap > .table {
    margin-bottom: 0;
    min-width: 560px;
}

/* 单元格不换行，超宽交给横向滚动，避免窄屏逐字竖排 */
.table-wrap > .table > thead > tr > th,
.table-wrap > .table > tbody > tr > td {
    white-space: nowrap;
}

/* 快捷入口列表 */
.qk-list {
    padding: 4px 0;
}

.qk-list .qk-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 12px 24px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px dashed #EFF2F7;
}

.qk-list .qk-item:last-child {
    border-bottom: 0;
}

.qk-list .qk-item:hover,
.qk-list .qk-item:focus {
    background: #F5F7FA;
    text-decoration: none;
    color: inherit;
}

.qk-list .qk-icon {
    -webkit-flex: none;
    flex: none;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
    background: #EFF4FF;
    color: #165DFF;
    text-align: center;
    font-size: 15px;
    margin-right: 12px;
}

.qk-list .qk-icon.b-orange {
    background: #FFF4E6;
    color: #E67E22;
}

.qk-list .qk-icon.b-green {
    background: #EAF8F0;
    color: #27AE60;
}

.qk-list .qk-text {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #1D2129;
    line-height: 20px;
}

.qk-list .qk-desc {
    display: block;
    font-size: 12px;
    color: #9AA5B5;
    line-height: 18px;
}

.qk-list .qk-item > .fa-angle-right {
    color: #C4CCD8;
    font-size: 16px;
}

/* 侧栏纵向堆叠（多卡片） */
@media (min-width: 992px) {
    .col-stack {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        gap: 16px;
    }
}

/* 学习章节媒体区 */
.study-media {
    min-height: 280px;
}

.study-media.flush {
    min-height: 0;
    padding: 0;
}

.study-media.flush .study-note {
    padding: 10px 24px 16px;
}

.study-media video {
    width: 100%;
    max-height: none;
    display: block;
    border-radius: 0;
    background: #0B1D38;
}

/* 视频缺失占位块（与卡片同宽满幅） */
.study-media .video-fallback {
    height: 480px;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
}

.study-media .video-fallback .fa {
    font-size: 42px;
    opacity: .9;
}

.study-media .video-fallback span {
    font-size: 15px;
}

.study-media .video-fallback em {
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    word-break: break-all;
}

.study-media iframe {
    width: 100%;
    height: 720px;
    border: 1px solid #EFF2F7;
    border-radius: 12px;
    background: #fff;
}

/* DOC 课件满幅预览（与视频一致，去边框圆角不留白边）：全屏按钮悬浮在预览框内右上角 */
.doc-wrap {
    position: relative;
}

.study-media.flush .doc-wrap iframe {
    border: none;
    border-radius: 0;
}

.study-media.flush .media-empty {
    border-radius: 0;
}

.btn-doc-full {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #E2E8F0;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-transition: background .2s;
    transition: background .2s;
}

.btn-doc-full:hover {
    background: rgba(255, 255, 255, .22);
}

.doc-wrap:fullscreen,
.doc-wrap:-webkit-full-screen {
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.doc-wrap:fullscreen .btn-doc-full,
.doc-wrap:-webkit-full-screen .btn-doc-full {
    margin-left: 0;
}

.doc-wrap:fullscreen iframe,
.doc-wrap:-webkit-full-screen iframe {
    height: calc(100vh - 20px);
    border-radius: 0;
}

/* 不支持全屏 API 时的兜底（如 iPhone Safari） */
.doc-wrap.doc-fullscreen-fallback {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.doc-wrap.doc-fullscreen-fallback iframe {
    height: calc(100% - 20px);
    border-radius: 0;
}

.study-media .study-note {
    font-size: 12px;
    color: #9AA5B5;
    margin-top: 10px;
}

.study-bar {
    border-top: 1px solid #EFF2F7;
    padding: 14px 24px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

.study-bar .study-duration {
    font-size: 13px;
    color: #8A94A6;
}

.study-bar .bar-acts {
    margin-left: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

/* 学习页双栏布局：左播放区 + 右目录/讲师/推荐 */
.page-hero-slim {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 14px 24px;
    margin-bottom: 16px;
}

/* 精简横幅只有面包屑一行，去掉 ph-crumb 自带的 margin-bottom 才能垂直居中 */
.page-hero-slim .ph-crumb {
    margin-bottom: 0;
}

.study-grid {
    display: -webkit-flex;
    display: flex;
    gap: 16px;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.study-main {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.study-aside {
    -webkit-flex: 0 0 340px;
    flex: 0 0 340px;
    width: 340px;
}

.study-head {
    margin-bottom: 2px;
}

.study-h1 {
    font-size: 22px;
    line-height: 30px;
    color: #1D2129;
    margin: 0 0 10px;
    font-weight: 700;
}

.study-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #8A94A6;
}

.study-meta a {
    color: #4A5568;
}

.study-meta a:hover {
    color: #165DFF;
}

.study-prog {
    padding: 16px 20px;
}

.study-prog .prog-top {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #4A5568;
    margin-bottom: 10px;
}

.study-prog .prog-sub {
    color: #8A94A6;
}

.study-prog .prog-sub b {
    color: #165DFF;
}

.study-prog .prog-track {
    height: 8px;
    border-radius: 4px;
    background: #EFF2F7;
    overflow: hidden;
}

.study-prog .prog-track i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: -webkit-linear-gradient(90deg, #165DFF, #6AA1FF);
    background: linear-gradient(90deg, #165DFF, #6AA1FF);
    -webkit-transition: width .4s;
    transition: width .4s;
}

.study-notes-ta {
    width: 100%;
    border: 1px solid #E4E9F0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: #1D2129;
    resize: vertical;
    min-height: 96px;
    margin-bottom: 12px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.study-notes-ta:focus {
    border-color: #165DFF;
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
    box-shadow: 0 0 0 3px rgba(22, 93, 255, .12);
}

.dir-card .dir-list {
    max-height: 460px;
    overflow-y: auto;
}

.dir-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F4F9;
    border-left: 3px solid transparent;
    color: #4A5568;
    font-size: 13px;
    -webkit-transition: background .15s;
    transition: background .15s;
}

.dir-item:hover {
    background: #F5F8FC;
}

.dir-item.is-current {
    background: #F0F6FF;
    color: #165DFF;
    font-weight: 600;
}

.dir-item .dir-ico {
    color: #9AA5B5;
}

.dir-item.is-current .dir-ico {
    color: #165DFF;
}

.dir-item .dir-name {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-item .dir-dur {
    font-size: 12px;
    color: #9AA5B5;
    white-space: nowrap;
}

.dir-item .dir-dur .dir-done {
    color: #27AE60;
    margin-right: 2px;
}

.rec-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.rec-item {
    display: -webkit-flex;
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    -webkit-transition: background .15s;
    transition: background .15s;
}

.rec-item:hover {
    background: #F5F8FC;
}

.rec-item .rec-cover {
    width: 84px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: none;
    flex: none;
}

.rec-item .rec-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rec-item .rec-initial {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    opacity: .9;
}

.rec-item .rec-name {
    margin: 0;
    font-size: 13px;
    color: #1D2129;
    font-weight: 600;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-item .rec-meta {
    margin: 5px 0 0;
    font-size: 12px;
    color: #9AA5B5;
}

/* 胶囊按钮禁用态 */
.btn-pill[disabled],
.btn-pill.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* 答题页 */
.q-list {
    padding: 4px 4px 0;
}

.q-list .q-item {
    padding: 18px 0 8px;
    border-bottom: 1px dashed #EFF2F7;
}

.q-list .q-item:last-child {
    border-bottom: 0;
}

.q-list .q-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-bottom: 10px;
}

.q-list .q-no {
    -webkit-flex: none;
    flex: none;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    background: #165DFF;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin-right: 12px;
}

.q-list .q-title {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #1D2129;
    font-weight: 600;
    line-height: 24px;
}

.q-list .q-score {
    -webkit-flex: none;
    flex: none;
    margin-left: 10px;
}

.q-list .q-opts {
    padding-left: 38px;
}

.q-list .q-opts label {
    display: block;
    font-weight: normal;
    font-size: 14px;
    color: #4A5568;
    padding: 7px 14px;
    border-radius: 8px;
    margin-bottom: 3px;
    cursor: pointer;
    -webkit-transition: background .15s;
    transition: background .15s;
}

.q-list .q-opts label:hover {
    background: #F5F8FF;
}

.q-list .q-opts input {
    margin-right: 8px;
    vertical-align: -2px;
}

.q-list .q-opts textarea {
    border-radius: 10px;
}

/* 迷你进度条（表格内） */
.prog-mini {
    height: 8px;
    border-radius: 4px;
    background: #EFF2F7;
    overflow: hidden;
    max-width: 220px;
}

.prog-mini i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: -webkit-linear-gradient(left, #165DFF, #4E7EFF);
    background: linear-gradient(90deg, #165DFF, #4E7EFF);
}

.prog-mini i.green {
    background: -webkit-linear-gradient(left, #27AE60, #5BC98A);
    background: linear-gradient(90deg, #27AE60, #5BC98A);
}

/* 地图详情阶段卡 */
.stage-card {
    border: 1px solid #F0F2F5;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 16px;
    overflow: hidden;
}

.stage-card:last-child {
    margin-bottom: 0;
}

.stage-card.is-locked {
    opacity: .72;
}

.stage-card .st-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 18px;
    background: #F8FAFF;
    border-bottom: 1px solid #F0F2F5;
}

.stage-card.is-done .st-head {
    background: #F0FAF4;
}

.stage-card .stage-no {
    -webkit-flex: none;
    flex: none;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    background: #165DFF;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.stage-card.is-done .stage-no {
    background: #27AE60;
}

.stage-card.is-locked .stage-no {
    background: #C9D2DE;
}

.stage-card .stage-name {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1D2129;
}

.stage-card .stage-hours {
    font-size: 13px;
    color: #8A94A6;
}

.stage-card .st-body {
    padding: 16px 18px;
}

.stage-card .stage-badges {
    margin: 10px 0 12px;
}

.stage-card .stage-badges .label {
    margin: 0 6px 6px 0;
}

/* 奖品卡 */
.prize-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 8px 8px 14px;
}

.prize-grid .prize-cell {
    width: 33.3333%;
    padding: 8px;
    box-sizing: border-box;
}

.prize-card {
    border: 1px solid #F0F2F5;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: #fff;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.prize-card:hover {
    border-color: rgba(22, 93, 255, .4);
    box-shadow: 0 6px 18px rgba(16, 42, 80, .06);
}

.prize-card .prize-icon {
    height: 64px;
    line-height: 64px;
    font-size: 36px;
}

.prize-card .prize-icon.virtual {
    color: #FAAD14;
}

.prize-card .prize-icon.real {
    color: #165DFF;
}

.prize-card .prize-name {
    font-size: 15px;
    font-weight: 700;
    color: #1D2129;
    margin: 6px 0 2px;
}

.prize-card .prize-desc {
    font-size: 13px;
    color: #8A94A6;
    margin-bottom: 8px;
}

.prize-card .prize-meta {
    margin-bottom: 10px;
}

.prize-card .prize-meta .label {
    margin: 0 3px;
}

.prize-card .prize-act {
    margin-top: auto;
}

@media (max-width: 767px) {
    .prize-grid .prize-cell {
        width: 50%;
    }

    .study-bar .bar-acts {
        margin-left: 0;
        width: 100%;
    }

    /* 阶段课程表：窄屏隐藏学分/学时两列，课程/类型/状态一屏可见 */
    .stage-card .table-wrap > .table {
        min-width: 0;
    }

    .stage-card .table > thead > tr > th:nth-child(3),
    .stage-card .table > thead > tr > th:nth-child(4),
    .stage-card .table > tbody > tr > td:nth-child(3),
    .stage-card .table > tbody > tr > td:nth-child(4) {
        display: none;
    }
}

/* 详情页响应式 */
@media (max-width: 767px) {
    .ch-list .ch-no {
        display: none;
    }

    .ch-list .ch-item {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        padding: 12px 2px;
    }

    /* 标题与右侧操作按钮同处一行：标题列可收缩换行，按钮不换行 */
    .ch-list .ch-body {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ch-list .ch-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 20px;
    }

    .ch-list .ch-act {
        margin-left: 8px;
    }

    .ch-list .ch-ops {
        margin-left: 8px;
    }

    .ch-list .ch-ops .ch-state {
        width: 52px;
        margin-right: 8px;
    }

    .ch-list .ch-ops .btn-pill {
        width: 104px;
    }

    .td-media {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
    }

    .td-avatar {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .td-name {
        -webkit-justify-content: center;
        justify-content: center;
    }

    .cm-time {
        margin-left: 12px;
    }

    /* 未包裹滚动容器的表格：由卡片自身横向滚动兜底 */
    .page-inner .panel-card {
        overflow-x: auto;
    }

    .page-inner .panel-card > .table,
    .page-inner .panel-card > .panel-body > .table {
        min-width: 600px;
    }

    .page-inner .panel-card > .table > thead > tr > th,
    .page-inner .panel-card > .table > tbody > tr > td,
    .page-inner .panel-card > .panel-body > .table > thead > tr > th,
    .page-inner .panel-card > .panel-body > .table > tbody > tr > td {
        white-space: nowrap;
    }
}

/* ---------- 学习页响应式 ---------- */
@media (max-width: 1199px) {
    .study-grid {
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .study-main,
    .study-aside {
        width: 100%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .dir-card .dir-list {
        max-height: none;
    }

    /* 章节目录与推荐并排，避免移动端拉得过长 */
    .study-aside .study-aside-row {
        display: -webkit-flex;
        display: flex;
        gap: 16px;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    .study-aside .study-aside-row > .panel-card {
        margin-top: 0 !important;
        -webkit-flex: 1;
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .study-aside .study-aside-row {
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    /* 纵向排列后子卡按内容收缩，需显式撑满 */
    .study-aside .study-aside-row > .panel-card {
        width: 100%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .study-h1 {
        font-size: 18px;
        line-height: 26px;
    }

    .study-meta .act-btns {
        margin-left: 0 !important;
    }

    .study-media video {
        max-height: 220px;
    }

    .study-media .video-fallback,
    .study-media .media-empty {
        height: 220px;
    }

    .study-media iframe {
        height: 480px;
    }

    .page-hero-slim {
        padding: 12px 16px;
    }
}

/* 右栏卡片：同款蓝色标题条，尺寸收紧以适配窄栏 */
.study-aside .panel-heading-bar {
    padding: 14px 20px;
}

.study-aside .panel-heading-bar .hd-title {
    font-size: 16px;
    line-height: 24px;
}

.study-aside .panel-heading-bar .hd-title .sec-sub {
    font-size: 12px;
}

.study-aside .panel-card > .panel-body {
    padding: 18px 20px;
}

/* 讲师/用户头像缺省：首字色块 */
.td-avatar .td-initial {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 50%;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

/* 媒体缺失占位块（视频/课件演示数据） */
.study-media .media-empty {
    height: 320px;
    border-radius: 12px;
    background: -webkit-linear-gradient(135deg, #165DFF, #0E2F56);
    background: linear-gradient(135deg, #165DFF, #0E2F56);
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
}

.study-media .media-empty .fa {
    font-size: 38px;
    opacity: .9;
}

.study-media .media-empty span {
    font-size: 15px;
}

.study-media .media-empty em {
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    word-break: break-all;
}

/* 目录锁定项 + 锁定的下一章按钮 */
.dir-item.is-locked {
    background: #FAFBFD;
    color: #B4BCC9;
    cursor: not-allowed;
}

.dir-item.is-locked .dir-ico {
    color: #C4CCD8;
}

.dir-item.is-locked .dir-dur {
    color: #C4CCD8;
}

.btn-pill.pill-locked {
    opacity: .6;
    cursor: not-allowed;
    color: #9AA5B5;
    border-color: #E4E9F0;
    background: #FAFBFD;
}

/* 元信息中的已学习时长（原底部操作条移入） */
.study-meta .study-dur {
    color: #8A94A6;
}

.study-meta .study-dur .fa {
    color: #165DFF;
}

/* 进度卡内的学习操作行 */
.study-prog .prog-acts {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* 点赞/分享位于进度卡左下：占据行首，导航按钮靠右 */
.study-prog .prog-acts .act-btns {
    margin: 0;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-right: auto;
}

.study-prog .prog-acts .act-btns .btn {
    margin: 0;
}

@media (max-width: 767px) {
    .study-prog .prog-acts {
        -webkit-justify-content: stretch;
        justify-content: stretch;
    }

    .study-prog .prog-acts .btn-pill {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        text-align: center;
    }

    /* 移动端点赞/分享独占一行，两个按钮等分（Chrome 对 button 的 flex 等分有怪癖，用 Grid） */
    .study-prog .prog-acts .act-btns {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
        margin-right: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 过滤条：两级分类的第二行（子分类行整行显示） */
.filter-bar .f-pills-sub {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 12px;
    background: #F7F9FC;
    border-radius: 10px;
}

.filter-bar .f-sub-label {
    -webkit-flex: none;
    flex: none;
    font-size: 12px;
    color: #9AA5B5;
    margin-right: 4px;
}

.filter-bar .f-sub-label .fa {
    color: #165DFF;
}

.filter-bar .f-caret {
    margin-left: 4px;
    font-size: 12px;
    opacity: .75;
}

/* 详情页简介 ≤767 堆叠：封面在上、信息在下 */
@media (max-width: 767px) {
    .detail-intro {
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .detail-intro .di-media {
        width: 100%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    /* 堆叠后信息列必须铺满整行（父级 align-items:flex-start 会按内容收缩） */
    .detail-intro .di-info {
        width: 100%;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
}

/* 评论打星：可点击星星 + 星级文字提示 */
.star-rate {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rate-stars {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    font-size: 20px;
    line-height: 24px;
    color: #E5EAF2;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.rate-stars i {
    -webkit-transition: color .15s, transform .15s;
    transition: color .15s, transform .15s;
}

.rate-stars i.on {
    color: #FFB300;
}

.rate-stars i:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.rate-tip {
    font-size: 13px;
    color: #8A94A6;
    line-height: 20px;
}

/* 章节解锁规则说明 */
.ch-tip {
    font-size: 12px;
    line-height: 18px;
    color: #8A94A6;
    margin: 0 0 10px;
}

.ch-tip .fa {
    color: #165DFF;
    margin-right: 5px;
}

/* 推荐学习条目中的评分 */
.rec-meta .rec-score {
    color: #165DFF;
    font-weight: 600;
}

.rec-meta .rec-score .fa {
    color: #FFB300;
    margin-right: 2px;
}

/* 筛选 pill 上的可选数量角标 */
.filter-bar .f-count-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    min-width: 16px;
    border-radius: 9px;
    background: rgba(22, 93, 255, .08);
    color: #165DFF;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.filter-bar .f-pill.active .f-count-badge {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* 讲师筛选条两行排布：级别行 + 领域灰底行 */
.teacher-filter .filter-bar .f-pills-sub {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

/* ==================== PDF 在线阅读器（pdf.js canvas 渲染，无浏览器下载按钮） ==================== */
.pdf-viewer {
    width: 100%;
    background: #1E293B;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}
.pdf-toolbar {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1E293B;
    color: #E2E8F0;
    font-size: 13px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pdf-toolbar .btn-pdf-nav {
    background: transparent;
    border: 1px solid #475569;
    color: #E2E8F0;
    border-radius: 6px;
    min-width: 30px;
    height: 26px;
    line-height: 24px;
    padding: 0 8px;
    cursor: pointer;
    font-size: 13px;
}
.pdf-toolbar .btn-pdf-nav:hover {
    background: #334155;
}
.pdf-page-ind input {
    width: 52px;
    text-align: center;
    border: 1px solid #475569;
    background: transparent;
    color: #fff;
    border-radius: 6px;
    height: 26px;
    margin: 0 4px;
}
.pdf-page-ind input::-webkit-outer-spin-button,
.pdf-page-ind input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.pdf-sep {
    width: 1px;
    height: 18px;
    background: #475569;
    margin: 0 4px;
}
.pdf-tip {
    margin-left: auto;
    color: #94A3B8;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@media (max-width: 720px) {
    .pdf-tip {
        font-size: 11px;
    }
}
.pdf-pages {
    height: 720px;
    overflow: auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    gap: 16px;
    padding: 14px;
    box-sizing: border-box;
    background: #334155;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
/* 连续多页：页面纵向堆叠，鼠标滚轮/滚动条直接下移 */
.pdf-pages .pdf-page-item {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    line-height: 0;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 16px rgba(15, 23, 42, .35);
    overflow: hidden;
}
/* 缩放后页面宽于容器时改为左对齐，避免居中把左侧裁掉后无法滚动查看 */
.pdf-pages.is-wide {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.pdf-pages .pdf-canvas {
    display: block;
    background: #fff;
    max-width: none;
    -webkit-user-select: none;
    user-select: none;
}
.pdf-pages .pdf-page-no {
    position: absolute;
    right: 8px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .55);
    color: #E2E8F0;
    font-size: 11px;
    line-height: 16px;
    pointer-events: none;
}
.pdf-pages .pdf-loading {
    margin: 140px auto;
    color: #CBD5E1;
    font-size: 14px;
}
.doc-wrap:fullscreen .pdf-pages,
.doc-wrap:-webkit-full-screen .pdf-pages {
    height: calc(100% - 46px);
}
.doc-wrap.doc-fullscreen-fallback .pdf-pages {
    height: calc(100% - 46px);
}