/* ==========================================================================
   测评中心专属样式 (evaluation/index.html & t00.html)
   采用作用域限制 (Scoping) 策略，确保不干扰公共 Header 和 Footer
   ========================================================================== */

/* 1. 频道基础颜色变量定义 - 仅在测评频道 body 生效 */
.channel-evaluation {
    --eval-primary: #f97316;
    --eval-primary-rgb: 249, 115, 22;
    --eval-hover: #ea580c;
    --eval-light: #fff7ed;
    --eval-card-bg: #ffffff;
    --eval-card-border: rgba(249, 115, 22, 0.15);
    
    /* 覆盖内容区内的全局颜色变量 */
    --primary-color: #f97316;
    --bs-primary: #f97316;
    --bs-primary-rgb: 249, 115, 22;
    --wb-green: #f97316;
    --wb-green-dark: #c2410c;
    --wb-green-tint: #fff7ed;
    --wb-green-light: #fdba74;
    --wb-green-mint: #fed7aa;

    /* 链接颜色适配 */
    --bs-link-color: #c2410c;
    --bs-link-hover-color: #9a3412;
}

/* 2. 内容区基础布局覆盖 */
.channel-evaluation .page-header, 
.channel-evaluation .quiz-section,
.channel-evaluation .portfolio-section,
.channel-evaluation .sidebar-sticky,
.channel-evaluation .offcanvas-toc {
    /* 继承变量，此处不再重复定义 */
}

.channel-evaluation .portfolio-section {
    padding-top: 25px !important; /* PC端也适当收紧，原本是 40px */
}

/* 2.1 标题颜色强制覆盖 - 将内容区内的绿色标题统一为橙色 */
.channel-evaluation .portfolio-section .text-primary,
.channel-evaluation .quiz-section .text-primary,
.channel-evaluation .eval-section-wrapper .text-primary {
    color: var(--eval-primary) !important;
}

/* 3. 精准链接颜色覆盖 - 仅在测评频道的内容区生效，且排除导航/页脚 */
.channel-evaluation .quiz-section a:not(.btn),
.channel-evaluation .portfolio-section a:not(.btn):not(.list-group-item),
.channel-evaluation .page-header a:not(.btn):not(.breadcrumb-item a) {
    color: var(--bs-link-color) !important;
}

.channel-evaluation .quiz-section a:not(.btn):hover,
.channel-evaluation .portfolio-section a:not(.btn):not(.list-group-item):hover,
.channel-evaluation .page-header a:not(.btn):not(.breadcrumb-item a):hover {
    color: var(--bs-link-hover-color) !important;
}


/* 3. 面包屑专项样式 (确保在橙色 Banner 上清晰) */
.channel-evaluation .page-header .breadcrumb-item a {
    color: #ffffff !important;
    opacity: 1 !important;
}
.channel-evaluation .page-header .breadcrumb-item a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}
.channel-evaluation .page-header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 4. 测评中心按钮通用适配 - 仅针对内容区，排除页脚 */
.channel-evaluation .btn-primary,
.channel-evaluation .btn-scale.btn-primary {
    background: #f97316 !important;
    background-color: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
    --bs-btn-bg: #f97316 !important;
    --bs-btn-border-color: #f97316 !important;
    --bs-btn-hover-bg: #ea580c !important;
    --bs-btn-hover-border-color: #c2410c !important;
    --bs-btn-active-bg: #c2410c !important;
    --bs-btn-active-border-color: #9a3412 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.channel-evaluation .btn-primary:hover,
.channel-evaluation .btn-scale.btn-primary:hover {
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-color: #c2410c !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3) !important;
    filter: brightness(1.1) !important;
}

.channel-evaluation .btn-outline-primary,
.channel-evaluation .btn-scale.btn-outline-primary {
    color: #ea580c !important;
    border-color: #f97316 !important;
    background: transparent !important;
    background-color: transparent !important;
    --bs-btn-color: #ea580c !important;
    --bs-btn-border-color: #f97316 !important;
    --bs-btn-hover-bg: #f97316 !important;
    --bs-btn-hover-border-color: #f97316 !important;
    --bs-btn-hover-color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.channel-evaluation .btn-outline-primary:hover,
.channel-evaluation .btn-scale.btn-outline-primary:hover {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border-color: #f97316 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.2) !important;
}

/* 强力修复：确保 FAQ 区域的“查看更多问答”按钮保持反白，不受频道橙色干扰 */
.channel-evaluation .footer-faq .btn-faq-more,
.channel-evaluation .footer-faq .btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    --bs-btn-color: #ffffff !important;
    --bs-btn-border-color: #ffffff !important;
}

.channel-evaluation .footer-faq .btn-faq-more:hover,
.channel-evaluation .footer-faq .btn-outline-primary:hover {
    background-color: #ffffff !important;
    color: #017ACF !important;
    border-color: #ffffff !important;
}

/* 4.2 导航栏内公共组件修复 (语言切换器) - 增强视觉突出度 */
.channel-evaluation .navbar .lang-toggle {
    display: inline-flex !important;
    width: 32px !important; /* 增大尺寸从 24px 到 32px */
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(59, 130, 246, 0.1) !important; /* 柔和蓝色背景代替纯白 */
    color: #2563eb !important; /* 更深的蓝色 */
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.channel-evaluation .navbar .lang-toggle:hover {
    background: #3b82f6 !important; /* 悬停时背景填满 */
    color: #ffffff !important; /* 悬停时文字变白 */
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-2px) scale(1.1);
}

.channel-evaluation .navbar .lang-toggle i {
    font-size: 0.95rem !important;
}

.channel-evaluation .navbar .lang-menu {
    border-color: rgba(59, 130, 246, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(30, 58, 138, 0.18) !important;
    margin-top: 0 !important; /* 移除间距，修复鼠标滑过消失的 Bug */
    backdrop-filter: blur(10px);
}

/* 增加透明桥接层，确保从按钮滑向菜单时不掉线 */
.channel-evaluation .lang-switcher:hover .lang-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.channel-evaluation .navbar .lang-option {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    border-left: 3px solid transparent;
}

.channel-evaluation .navbar .lang-option.is-current {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
    font-weight: 700;
    border-left-color: #3b82f6;
}

.channel-evaluation .navbar .lang-option.is-current .lang-checked {
    color: #3b82f6 !important;
}

/* 增强悬停动效：换成深蓝色，视觉更稳重且突出 */
.channel-evaluation .navbar .lang-option:hover {
    background: #1e3a8a !important; /* 深蓝色 Navy Blue */
    color: #ffffff !important;
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3); /* 对应深蓝色的投影 */
    border-left-color: #ffffff;
    z-index: 1;
}

.channel-evaluation .navbar .lang-option:hover .lang-checked,
.channel-evaluation .navbar .lang-option:hover .lang-option-name {
    color: #ffffff !important;
}

/* 5. 反馈框与选项 (quiz.css 覆盖) */
.channel-evaluation .feedback-correct {
    background-color: #fff7ed !important;
    border-left-color: #f97316 !important;
    color: #c2410c !important;
}
.channel-evaluation .feedback-incorrect {
    background-color: #fff1f2 !important;
    border-left-color: #ef4444 !important;
    color: #991b1b !important;
}
.channel-evaluation .opt-btn.selected {
    border-color: #f97316 !important;
    background: #fff7ed !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.18) !important;
}
.channel-evaluation .opt-btn.selected .opt-num,
.channel-evaluation .opt-btn.selected .opt-key {
    background: #f97316 !important;
    color: #fff !important;
}

/* 6. 侧边栏与 Filter 导航逻辑 */
.channel-evaluation .filter-container {
    margin-bottom: 0 !important;
}
.channel-evaluation #course-container {
    margin-top: -30px !important; /* 强制整体上移 */
}
.channel-evaluation .eval-section-wrapper {
    margin-bottom: 2rem !important; /* 减小分类区块之间的间距 (从 mb-5 的 3rem 降至 2rem) */
}
.channel-evaluation .eval-section-wrapper:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.channel-evaluation .eval-section-wrapper h6:first-child {
    margin-top: 0 !important;
}
.channel-evaluation .filter-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}
.channel-evaluation .filter-btn {
    padding: 8px 18px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.channel-evaluation .filter-btn:hover {
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}
.channel-evaluation .filter-btn.active {
    background: #f97316;
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

.channel-evaluation .nav-group-header {
    padding: 8px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
}
.channel-evaluation .nav-group-header:first-child {
    border-top: none;
}

.channel-evaluation .phase-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}
/* 统一使用主题橙色系 */
.channel-evaluation .phase-a-bg { background-color: #f97316; }
.channel-evaluation .phase-b-bg { background-color: #f97316; }
.channel-evaluation .phase-c-bg { background-color: #f97316; }
.channel-evaluation .phase-d-bg { background-color: #f97316; }
.channel-evaluation .phase-e-bg { background-color: #f97316; }
.channel-evaluation .phase-f-bg { background-color: #f97316; }

.channel-evaluation #course-sidebar-nav .list-group-item {
    border: none;
    border-left: 4px solid transparent !important;
    transition: all 0.2s ease;
    background: transparent;
    margin-bottom: 2px;
    padding: 1rem 1.25rem !important;
    color: #334155 !important;
}

.channel-evaluation #course-sidebar-nav .list-group-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
    padding-left: 1.5rem !important;
    color: #f97316 !important;
}

.channel-evaluation #course-sidebar-nav .list-group-item.active {
    background-color: rgba(249, 115, 22, 0.05) !important;
    color: #f97316 !important;
    font-weight: 600;
    border-left-color: #f97316 !important;
}

/* 6.2 侧边栏滚动条美化 - 统一橙色主题 */
.channel-evaluation .sidebar-sticky {
    scrollbar-color: rgba(249, 115, 22, 0.3) transparent !important;
}

.channel-evaluation .sidebar-sticky::-webkit-scrollbar-thumb {
    background-color: rgba(249, 115, 22, 0.25) !important;
}

.channel-evaluation .sidebar-sticky::-webkit-scrollbar-thumb:hover {
    background-color: rgba(249, 115, 22, 0.45) !important;
}

/* 侧边栏卡片头部 - 借鉴家长营的彩色页眉 */
.channel-evaluation .portfolio-section .card-header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
    padding: 1.25rem !important;
}
.channel-evaluation .portfolio-section .card-header h6 {
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}
.channel-evaluation .portfolio-section .card-header i {
    color: #ffffff !important;
}

/* 侧边栏整体阴影 */
.channel-evaluation .portfolio-section .card.shadow-sm {
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    border-radius: 16px !important;
}

.channel-evaluation #course-sidebar-nav i.text-primary {
    color: #f97316 !important;
}

.channel-evaluation .smaller { font-size: 0.75rem; }

/* 隐私提示框样式 */
.channel-evaluation .privacy-notice-wrapper {
    max-width: 800px;
    background: #fff;
    border: 1px dashed #f97316;
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.channel-evaluation .privacy-notice-wrapper:hover {
    background: #fff7ed;
    border-style: solid;
}
.channel-evaluation .notice-content {
    max-height: 2.8em;
    overflow: hidden;
    transition: max-height 0.5s ease;
    color: #64748b;
    line-height: 1.6;
}
.channel-evaluation .privacy-notice-wrapper.expanded .notice-content {
    max-height: 1000px;
}
.channel-evaluation .notice-content i {
    color: #f97316;
}
.channel-evaluation .toggle-hint {
    font-size: 0.7rem;
    color: #f97316;
    font-weight: 700;
    margin-top: 4px;
    display: block;
}
.channel-evaluation .text3-link {
    color: #f97316;
    text-decoration: underline;
    font-weight: 600;
}



/* 7. 频道特有按钮样式 */
.channel-evaluation .btn-orange {
    background-color: var(--eval-primary) !important;
    border-color: var(--eval-primary) !important;
    color: #ffffff !important;
}

.channel-evaluation .btn-orange:hover {
    background-color: var(--eval-hover) !important;
    border-color: var(--eval-hover) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(var(--eval-primary-rgb), 0.3);
}

.channel-evaluation .btn-purple {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.channel-evaluation .btn-purple:hover {
    background-color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}

.channel-evaluation .btn-outline-orange {
    color: var(--eval-primary) !important;
    border-color: var(--eval-primary) !important;
    background-color: transparent !important;
}

.channel-evaluation .btn-outline-orange:hover {
    background-color: var(--eval-primary) !important;
    color: #ffffff !important;
}

/* 8. 按钮交互增强 (Shine Effect) */
.channel-evaluation .btn-orange,
.channel-evaluation .btn-purple,
.channel-evaluation .actions .btn-primary {
    position: relative;
    overflow: hidden !important;
    z-index: 1;
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
}

.channel-evaluation .btn-orange::before,
.channel-evaluation .btn-purple::before,
.channel-evaluation .actions .btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.6s;
    z-index: -1;
}

.channel-evaluation .btn-orange:hover::before,
.channel-evaluation .btn-purple:hover::before,
.channel-evaluation .actions .btn-primary:hover::before {
    left: 100%;
}

/* 8. t00.html 专用：量表选择卡片样式 */
.channel-evaluation .scale-section-title {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #475569;
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #f1f5f9;
}

.channel-evaluation .scale-section-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 12px;
}

.channel-evaluation .scale-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.channel-evaluation .scale-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.1);
    border-color: #f97316;
}

.channel-evaluation .scale-card.recommended {
    border-color: #fdba74;
    background: #fffcf9;
}

.channel-evaluation .scale-card .recommend-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f97316;
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
}

.channel-evaluation .scale-card .scale-icon {
    width: 48px;
    height: 48px;
    background: #fff7ed;
    color: #f97316;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.channel-evaluation .scale-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
    line-height: 1.4;
}

.channel-evaluation .scale-card .scale-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 12px;
    font-weight: 500;
}

.channel-evaluation .scale-card .scale-desc {
    font-size: 0.88rem;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.6;
    flex-grow: 1;
}

.channel-evaluation .scale-card .scale-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.channel-evaluation .scale-card .scale-tag {
    font-size: 0.65rem;
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.channel-evaluation .scale-card .btn-scale {
    width: 100%;
    padding: 10px;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* 具体的量表组强调色适配 */
.channel-evaluation .scale-card.snap-parent-full,
.channel-evaluation .scale-card.snap-parent-quick { border-top: 4px solid #f97316; }
.channel-evaluation .scale-card.snap-teacher-full,
.channel-evaluation .scale-card.snap-teacher-quick { border-top: 4px solid #ea580c; }
.channel-evaluation .scale-card.vanderbilt { border-top: 4px solid #c2410c; }
.channel-evaluation .scale-card.swan { border-top: 4px solid #fb923c; }
.channel-evaluation .scale-card.rs5 { border-top: 4px solid #fdba74; }

/* 9. 其他 UI 细节适配 */
.channel-evaluation .progress-fill {
    background: linear-gradient(90deg, #fdba74, #f97316) !important;
}
.channel-evaluation .rule-box,
.channel-evaluation .warn-box,
.channel-evaluation .tip-box {
    background: #fff7ed !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
}

.channel-evaluation .time-badge i,
.channel-evaluation .meta-item i {
    color: #f97316 !important;
    margin-right: 4px;
}

/* 移动端侧边栏增强样式 - 借鉴家长营 */
.channel-evaluation .offcanvas-toc {
    width: 60% !important;
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, 0.85) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.channel-evaluation .offcanvas-toc .offcanvas-header {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.channel-evaluation .offcanvas-toc .toc-link {
    background: white;
    margin-bottom: 10px;
    padding: 12px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #334155;
    transition: all 0.3s ease;
}
.channel-evaluation .offcanvas-toc .toc-link:active, 
.channel-evaluation .offcanvas-toc .toc-link.active {
    background: #fff7ed;
    border-color: rgba(249, 115, 22, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.1);
}
.channel-evaluation .offcanvas-toc .toc-link.active {
    color: #f97316 !important;
    font-weight: 600;
}
.channel-evaluation .offcanvas-toc .toc-group {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    margin: 15px 0 10px 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.channel-evaluation .mobile-toc-btn {
    background: #f97316 !important;
    box-shadow: -2px 0 12px rgba(249, 115, 22, 0.4) !important;
}

.channel-evaluation .eval-section-wrapper h6.text-primary {
    color: #475569 !important;
}
.channel-evaluation .eval-section-wrapper h6.text-primary span.phase-dot {
    box-shadow: none;
}

.channel-evaluation .quiz-card .text-orange,
.channel-evaluation .quiz-card .text-orange *,
.channel-evaluation .quiz-card strong.text-orange,
.channel-evaluation .quiz-card strong.text-orange * {
    color: #c2410c !important;
}

/* 对比表格与名词解释 */
.channel-evaluation .compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
}
.channel-evaluation .compare-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    padding: 12px 16px;
    border-bottom: 2px solid #e2e8f0;
}
.channel-evaluation .compare-table td {
    padding: 12px 16px;
    font-size: 0.88rem;
    border-bottom: 1px solid #f1f5f9;
}
.channel-evaluation .glossary-list dt {
    color: #c2410c;
    font-weight: 700;
    margin-top: 1.25rem;
}

/* 测评中心卡片样式 (index.html) */
.channel-evaluation .portfolio-card.compact-card {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.15) !important;
    border-radius: 20px !important;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.channel-evaluation .portfolio-card.compact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.12) !important;
    border-color: #f97316 !important;
}

.channel-evaluation .card-accent-dot {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 8px;
    height: 8px;
    background: #f97316;
    border-radius: 50%;
    opacity: 0.6;
}

.channel-evaluation .completed-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #f97316; /* 统一使用橙色，不再使用绿色 */
    color: white;
    font-size: 0.65rem;
    padding: 4px 12px;
    border-bottom-left-radius: 12px;
    font-weight: 700;
    display: none; /* 默认隐藏，由 JS 控制显示 */
}
.channel-evaluation .portfolio-card.completed .completed-badge {
    display: block;
}

.channel-evaluation .card-accent-dot,
.channel-evaluation .category-badge,
.channel-evaluation .recommend-badge {
    display: none !important;
}

.channel-evaluation .portfolio-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.channel-evaluation .card-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.channel-evaluation .category-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #f97316;
    background: #fff7ed;
    padding: 2px 8px;
    border-radius: 6px;
}

.channel-evaluation .time-badge {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.channel-evaluation .portfolio-info h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.4;
}
.channel-evaluation .portfolio-info h5 a {
    color: #1e293b !important;
    text-decoration: none;
}
.channel-evaluation .portfolio-info h5 a:hover {
    color: #f97316 !important;
}

.channel-evaluation .portfolio-info p {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.6;
    flex-grow: 1;
}

.channel-evaluation .card-cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff7ed !important;
    color: #f97316 !important;
    border: 1px solid rgba(249, 115, 22, 0.1) !important;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}
.channel-evaluation .portfolio-card:hover .card-cta-btn {
    background: #f97316 !important;
    color: #fff !important;
}
.channel-evaluation .portfolio-card:hover .card-cta-btn span,
.channel-evaluation .portfolio-card:hover .card-cta-btn i,
.channel-evaluation .portfolio-card:hover .card-cta-btn::before {
    color: #fff !important;
}
.channel-evaluation .card-cta-btn:hover {
    background: #ea580c !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.channel-evaluation .card-cta-btn:hover span,
.channel-evaluation .card-cta-btn:hover i,
.channel-evaluation .card-cta-btn:hover::before {
    color: #fff !important;
}
/* 10. 移动端专项适配 */
@media (max-width: 768px) {
    .channel-evaluation .filter-buttons {
        padding: 4px;
        gap: 4px;
        border-radius: 12px;
    }
    .channel-evaluation .filter-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
        border-radius: 8px;
    }
    .channel-evaluation .filter-container {
        margin-bottom: 10px !important; /* 恢复正向间距，防止遮挡 */
    }
    .channel-evaluation #course-container {
        margin-top: 0 !important; /* 移除负外边距 */
    }
    /* 卡片高密度优化 */
    .channel-evaluation .portfolio-info {
        padding: 12px !important;
    }
    .channel-evaluation .portfolio-info h5 {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
    }
    .channel-evaluation .portfolio-info p {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }
    .channel-evaluation .card-top-meta {
        margin-bottom: 6px !important;
    }
    .channel-evaluation .card-cta-btn {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }
    .channel-evaluation .eval-section-wrapper {
        margin-bottom: 1.5rem !important;
    }
    
    /* 移动端隐藏内容区大标题，PC端保留 */
    .channel-evaluation .page-header h1,
    .channel-evaluation .portfolio-section h2.text-primary {
        display: none !important;
    }

    /* 恢复移动端温馨提示的呼吸感，防止与面包屑挨得太近 */
    .channel-evaluation .portfolio-section {
        padding-top: 25px !important;
    }
    .channel-evaluation .privacy-notice-wrapper {
        margin-top: 0 !important;
    }
}