/*
102教材资源

*/


/*
102教材资源 加入了“搭配”

*/


/*
818教材资源系统样式

*/

/*
818教材资源系统样式 - 修复版
*/

/* ============================================
   2025-8-18 新增：教材资源系统样式
   ============================================ */

/* 主容器 */
#hnc-teaching-resources {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    --hnc-full-bleed-gap: 48px;
    margin-top: calc(-1 * var(--hnc-full-bleed-gap));
    padding: calc(24px + var(--hnc-full-bleed-gap)) 24px 40px 24px;
    background: #f9fafb;
}

/* 同页其它模块：拉满宽度并与教材资源对齐 */
#hnc-gtq-module,
#hnc-confunwords-module,
#hnc-allofme-module,
#hnc-first-class-module,
#hnc-timeline-module,
#hnc-phonology-module,
#hnc-teaching-resources ~ .hnc-module-card {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 640px) {
    #hnc-gtq-module,
    #hnc-confunwords-module,
    #hnc-allofme-module,
    #hnc-first-class-module,
    #hnc-timeline-module,
    #hnc-phonology-module,
    #hnc-teaching-resources ~ .hnc-module-card {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 附属模块区：弱化展示 */
#hnc-secondary-modules {
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
}

#hnc-secondary-modules.hnc-secondary-inline {
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
}

#hnc-secondary-modules .hnc-secondary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 12px;
}

#hnc-secondary-modules .hnc-secondary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: none;
}

#hnc-secondary-modules .hnc-secondary-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    line-height: 1;
}

#hnc-secondary-modules .hnc-secondary-note {
    color: #94a3b8;
    font-size: 12px;
}

#hnc-secondary-modules .hnc-secondary-list[hidden] {
    display: none;
}

#hnc-secondary-modules .hnc-secondary-list {
    margin-top: 12px;
}

#hnc-secondary-modules .hnc-module-card {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#hnc-secondary-modules .hnc-entry-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#hnc-secondary-modules .hnc-entry-card h2 {
    margin-bottom: 6px;
    font-size: 18px;
    color: #0f172a;
}

#hnc-secondary-modules .hnc-entry-card p {
    font-size: 13px;
    color: #64748b;
}

#hnc-secondary-modules .hnc-entry-lock-hint,
#hnc-secondary-modules .hnc-entry-cta {
    font-size: 12px !important;
}

#hnc-secondary-modules .hnc-dashboard,
#hnc-secondary-modules [id$="-dashboard"] {
    margin-top: 12px;
}

@media (max-width: 640px) {
    #hnc-secondary-modules .hnc-secondary-row {
        gap: 8px;
    }
}

/* ============================================
   解构器浮层抽屉（教材资源页内调用）
   ============================================ */
#hnc-deconstructor-root {
    position: fixed;
    right: 18px;
    top: 120px;
    bottom: auto;
    z-index: 10000;
}

#hnc-deconstructor-toggle {
    background: #111827;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
    transition: transform 0.2s ease, background 0.2s ease;
}

#hnc-deconstructor-toggle:hover {
    background: #1f2937;
    transform: translateY(-1px);
}

#hnc-deconstructor-root.is-open #hnc-deconstructor-toggle {
    opacity: 0;
    pointer-events: none;
}

#hnc-deconstructor-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(560px, 92vw);
    height: 100vh;
    background: #f8fafc;
    box-shadow: -16px 0 36px rgba(15, 23, 42, 0.2);
    transform: translateX(110%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    z-index: 10002;
}

#hnc-deconstructor-root.is-open #hnc-deconstructor-panel {
    transform: translateX(0);
}

#hnc-deconstructor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10001;
}

#hnc-deconstructor-root.is-open #hnc-deconstructor-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.hnc-deconstructor-open {
    overflow: hidden;
}

.hnc-deconstructor-panel-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #111827;
}

.hnc-deconstructor-panel-header button {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #6b7280;
}

.hnc-deconstructor-panel-header button:hover {
    color: #111827;
}

.hnc-deconstructor-panel-body {
    padding: 16px 18px 24px;
    overflow-y: auto;
}

#hnc-deconstructor-panel #hnc-deconstructor-section {
    max-width: 100%;
}

#hnc-deconstructor-panel .hnc-vocabulary-grid {
    grid-template-columns: 1fr;
    gap: 0.9em;
}

#hnc-deconstructor-panel .hnc-vocab-card {
    padding: 1.1em;
    min-width: 0;
}

#hnc-deconstructor-panel .hnc-vocab-definition,
#hnc-deconstructor-panel .hnc-synonyms-list,
#hnc-deconstructor-panel .hnc-example-english,
#hnc-deconstructor-panel .hnc-example-chinese {
    word-break: break-word;
}

@media (max-width: 640px) {
    #hnc-deconstructor-panel {
        width: 100vw;
    }
    #hnc-deconstructor-root {
        right: 12px;
        top: 84px;
        bottom: auto;
    }
    #hnc-deconstructor-toggle {
        padding: 10px 14px;
    }
}

/* 搜索区域 */
.hnc-search-container {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 28px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

.hnc-search-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.hnc-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
}

.hnc-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hnc-search-hint {
    color: #64748b;
    font-size: 14px;
    margin-top: 8px;
}

/* ============================================
   Minimalist UI Refactor - Buttons & Controls
   ============================================ */

/* Primary Button (Dark/Black theme for high contrast minimalist look) */
.hnc-teaching-primary-btn,
.hnc-card-actions .hnc-use-resource-btn,
#hnc-teaching-resources .hnc-use-resource-btn,
#hnc-teaching-resources .hnc-teaching-primary-btn {
    background: #18181b !important;
    /* Zinc-900 */
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.hnc-teaching-primary-btn:hover,
.hnc-card-actions .hnc-use-resource-btn:hover,
#hnc-teaching-resources .hnc-use-resource-btn:hover,
#hnc-teaching-resources .hnc-teaching-primary-btn:hover {
    background: #27272a !important;
    /* Zinc-800 */
    transform: translateY(-1px) !important;
}

/* Secondary Button (Outline/Ghost theme) */
.hnc-teaching-secondary-btn,
.hnc-share-btn,
.hnc-trans-ctrl-btn,
.hnc-scaffold-mini-btn,
.vocab-speed-btn,
.toggle-translation-btn,
.vocab-control-btn,
#global-translation-toggle,
#hnc-back-to-search,
#hnc-teaching-resources .hnc-teaching-secondary-btn {
    background: #ffffff !important;
    color: #52525b !important;
    /* Zinc-600 */
    border: 1px solid #e4e4e7 !important;
    /* Zinc-200 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.hnc-teaching-secondary-btn:hover,
.hnc-share-btn:hover,
.hnc-trans-ctrl-btn:hover,
.hnc-scaffold-mini-btn:hover,
.vocab-speed-btn:hover,
.toggle-translation-btn:hover,
.vocab-control-btn:hover,
#global-translation-toggle:hover,
#hnc-back-to-search:hover,
#hnc-teaching-resources .hnc-teaching-secondary-btn:hover {
    background: #f4f4f5 !important;
    /* Zinc-100 */
    color: #18181b !important;
    /* Zinc-900 */
    border-color: #d4d4d8 !important;
    /* Zinc-300 */
}

/* Active State for Secondary Buttons (e.g., Speed selection, Toggled buttons) */
.vocab-speed-btn.active,
.toggle-translation-btn.active,
.hnc-trans-ctrl-btn.active {
    background: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #18181b !important;
    /* Active border becomes dark */
    font-weight: 600 !important;
}

/* Translation Exercise Specific Buttons - Unifying the colorful mess */
.hnc-trans-btn {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

    /* Default to minimalistic outline style */
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    color: #52525b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.hnc-trans-btn:hover {
    background: #fafafa !important;
    color: #18181b !important;
    border-color: #a1a1aa !important;
}

/* Specific overrides for 'visual' separation without using strong colors */
/* Play Button: keeping a very subtle tint or icon */
.hnc-trans-btn-play::before {
    content: "▶";
    font-size: 10px;
    margin-right: 2px;
}

/* Active/Toggled States for Translation Buttons */
.hnc-trans-btn-hide,
/* When showing translation (Hide button) */
.hnc-trans-btn-backbone.active,
.hnc-trans-btn-scaffold.active {
    background: #f4f4f5 !important;
    border-color: #52525b !important;
    color: #18181b !important;
}

/* Quick Control Buttons in Header */
.hnc-trans-ctrl-btn {
    /* Resetting the gradient look to the shared secondary style */
    /* Handled by the group selector above, just ensuring no conflict */
    background-image: none !important;
}

/* 15-Cloze Option Buttons */
.hnc-cloze-option {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.hnc-cloze-option:hover {
    border-color: #a1a1aa !important;
    background: #fafafa !important;
}

.hnc-cloze-option.selected {
    border-color: #18181b !important;
    background: #f4f4f5 !important;
    box-shadow: 0 0 0 1px #18181b !important;
}

.hnc-cloze-option.used {
    opacity: 0.5 !important;
    background: #f4f4f5 !important;
    border-color: #e4e4e7 !important;
    cursor: default !important;
}

/* Minimalist Card & Layout Refinements */
.hnc-resource-card {
    border: 1px solid #f4f4f5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.hnc-resource-card:hover {
    border-color: #e4e4e7 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Remove gradient headers */
.hnc-panel-header,
#vocab-current-subtitle {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}

.hnc-panel-header h4 {
    color: #18181b !important;
    font-weight: 600 !important;
}

/* Search Input Minimalist */
.hnc-search-input {
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.hnc-search-input:focus {
    border-color: #18181b !important;
    box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.1) !important;
}

/* Feedback/Status Colors - Keep but muted */
.text-success {
    color: #059669 !important;
}

.text-error {
    color: #dc2626 !important;
}

.hnc-feedback-item.correct {
    background: #f0fdf9 !important;
    border-left-color: #059669 !important;
}

.hnc-feedback-item.incorrect {
    background: #fef2f2 !important;
    border-left-color: #dc2626 !important;
}


/* 搜索结果 */
.hnc-results-container {
    margin-top: 24px;
}

.hnc-results-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1e293b;
}

#hnc-results-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1200px) {
    #hnc-results-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #hnc-results-list {
        grid-template-columns: 1fr;
    }
}

.hnc-resource-card {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hnc-resource-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.hnc-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    overflow: visible;
    position: relative;
    padding-right: 86px;
}

.hnc-card-header.has-textbook-badge {
    padding-left: 96px;
}

.hnc-card-header h4 {
    margin: 0;
    margin-right: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}

.hnc-textbook-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1e40af;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    max-width: 68%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hnc-exam-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

#hnc-teaching-resources .hnc-textbook-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#hnc-teaching-resources .hnc-exam-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.hnc-card-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.hnc-share-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.hnc-share-btn:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.hnc-share-btn.copied {
    background: #ecfdf3;
    border-color: #22c55e;
    color: #166534;
}

.hnc-card-actions .hnc-use-resource-btn {
    flex: 1;
    text-align: center;
    margin-top: 0;
    padding: 11px 14px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hnc-card-actions .hnc-use-resource-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

/* ============================================
   2025-11-07 覆盖：教材资源列表简洁主题
   ============================================ */

#hnc-teaching-resources *[class^="hnc-"] {
    box-shadow: none;
}

#hnc-teaching-resources .hnc-search-container,
#hnc-teaching-resources .hnc-resource-card,
#hnc-teaching-resources .hnc-card-header,
#hnc-teaching-resources .hnc-use-resource-btn,
#hnc-teaching-resources .hnc-card-meta,
#hnc-teaching-resources .hnc-search-container input,
#hnc-teaching-resources .hnc-search-container button {
    background-image: none !important;
}

#hnc-teaching-resources .hnc-resource-card {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

#hnc-teaching-resources .hnc-card-header {
    background-color: transparent !important;
}

#hnc-teaching-resources .hnc-use-resource-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

#hnc-teaching-resources .hnc-teaching-primary-btn {
    background-color: #2563eb !important;
}

#hnc-teaching-resources .hnc-teaching-secondary-btn {
    background-color: #ffffff !important;
}

/* ============================================
   2025-01-21 更新：左右分栏布局样式 - 修复版
   ============================================ */

/* 练习容器整体 */
.hnc-exercise-container {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    max-width: 100%;
}

/* 顶部标题栏 */
/* 既省空间又不失美观 */
.hnc-exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 16px 6px 16px;
    /* 适度压缩 */
    border-bottom: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
}

.hnc-exercise-controls {
    display: flex;
    gap: 10px;
}

.hnc-layout-btn {
    background: #10b981;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.hnc-layout-btn:hover {
    background: #059669;
}

/* 修复后的主体左右分栏 */
.hnc-exercise-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* 修复：改为最大高度而不是固定高度 */
    max-height: 700px;
    min-height: 500px;
}

/* 修复后的左侧文章区 */
.hnc-exercise-left {
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-height: 700px;
    /* 添加最大高度 */
    overflow: hidden;
    /* 防止溢出 */
}

/* 修复后的右侧题目区 */
.hnc-exercise-right {
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-height: 700px;
    /* 添加最大高度 */
    overflow: hidden;
    /* 防止溢出 */
}

/* 面板标题 */
.hnc-panel-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hnc-panel-header h4 {
    margin: 0;
    font-size: 16px;
}

.hnc-panel-tip {
    font-size: 12px;
    opacity: 0.9;
}

/* 文章内容区（可滚动） */
.hnc-reading-passage {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

#hnc-passage-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* 段落样式优化 */
.hnc-paragraph {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.2s;
}

.hnc-paragraph:hover {
    background: #e2e8f0;
}

.hnc-paragraph-label {
    background: #3b82f6;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 14px;
}

.hnc-paragraph p {
    margin: 0;
    color: #334155;
    line-height: 1.7;
    text-align: justify;
}

/* 题目区域（可滚动） */
.hnc-questions-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* 题目样式优化 */
.hnc-question-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #e2e8f0;
    transition: all 0.2s;
}

.hnc-question-item:hover {
    border-left-color: #3b82f6;
    background: #f0f9ff;
}

.hnc-question-number {
    background: #6366f1;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 13px;
}

.hnc-question-content {
    flex: 1;
}

.hnc-question-content p {
    margin: 0 0 8px 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
}

/* 选择下拉框优化 */
.hnc-answer-select {
    padding: 6px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    min-width: 100px;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
}

.hnc-answer-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hnc-answer-select:hover {
    border-color: #94a3b8;
}

/* 已选择的样式 */
.hnc-answer-select[value]:not([value=""]) {
    background: #e0f2fe;
    border-color: #0284c7;
}

/* 操作按钮区 */
.hnc-exercise-actions {
    padding: 15px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

/* 反馈区域优化 */
.hnc-feedback {
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
    position: relative;
}

.hnc-feedback h4 {
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 20px;
}

.hnc-feedback-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #e2e8f0;
}

.hnc-feedback-item.correct {
    border-left-color: #10b981;
    background: #f0fdf4;
}

.hnc-feedback-item.incorrect {
    border-left-color: #ef4444;
    background: #fef2f2;
}

.text-success {
    color: #10b981;
    font-weight: 600;
}

.text-error {
    color: #ef4444;
    font-weight: 600;
}

/* 滚动条美化 */
.hnc-reading-passage::-webkit-scrollbar,
.hnc-questions-area::-webkit-scrollbar {
    width: 8px;
}

.hnc-reading-passage::-webkit-scrollbar-track,
.hnc-questions-area::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.hnc-reading-passage::-webkit-scrollbar-thumb,
.hnc-questions-area::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.hnc-reading-passage::-webkit-scrollbar-thumb:hover,
.hnc-questions-area::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* 加载动画 */
.hnc-loader {
    text-align: center;
    padding: 40px;
}

.hnc-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 无结果提示 */
.hnc-no-results {
    text-align: center;
    padding: 40px;
    color: #64748b;
    font-size: 16px;
}

/* 上下布局模式（可切换） */
.hnc-exercise-main.vertical-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 移动端响应式 */
@media (max-width: 1024px) {
    .hnc-exercise-main {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }

    .hnc-exercise-left,
    .hnc-exercise-right {
        height: 500px;
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .hnc-search-wrapper {
        flex-direction: column;
    }

    .hnc-exercise-header {
        flex-direction: column;
        gap: 15px;
    }

    .hnc-exercise-controls {
        width: 100%;
        justify-content: center;
    }

    .hnc-exercise-left,
    .hnc-exercise-right {
        height: 400px;
        max-height: 400px;
    }

    .hnc-exercise-actions {
        flex-direction: column;
    }

    .hnc-teaching-primary-btn,
    .hnc-teaching-secondary-btn {
        width: 100%;
    }

    /* 强制阅读匹配在移动端改为单列、自动高度，覆盖桌面放大样式 */
    #hnc-reading-exercise .hnc-exercise-main,
    #hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #hnc-reading-exercise .hnc-exercise-left,
    #hnc-reading-exercise .hnc-exercise-right,
    #hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-left,
    #hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-right {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #hnc-reading-exercise .hnc-reading-passage,
    #hnc-reading-exercise .hnc-questions-area,
    #hnc-reading-exercise.hnc-reading-expanded .hnc-reading-passage,
    #hnc-reading-exercise.hnc-reading-expanded .hnc-questions-area {
        max-height: none !important;
        height: auto !important;
    }

    .hnc-exercise-actions {
        justify-content: stretch;
    }
}

/* 完成状态指示 */
.hnc-question-item.completed {
    background: #f0fdf4;
    border-left-color: #10b981;
}

.hnc-question-item.completed .hnc-question-number {
    background: #10b981;
}

/* ===== 强制层：练习结果两列网格 + 圆点锁定（放在CSS最底部） ===== */
#hnc-teaching-resources #hnc-feedback .hnc-feedback-list {
    display: grid !important;
    gap: 16px !important;
}

#hnc-teaching-resources #hnc-feedback .hnc-feedback-item {
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border-radius: 8px !important;
    border-left: 6px solid #e2e8f0 !important;
}

#hnc-teaching-resources #hnc-feedback .hnc-feedback-item.correct {
    border-left-color: #10b981 !important;
}

#hnc-teaching-resources #hnc-feedback .hnc-feedback-item.incorrect {
    border-left-color: #ef4444 !important;
}

#hnc-teaching-resources #hnc-feedback .hnc-feedback-number {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    line-height: normal !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
}

#hnc-teaching-resources #hnc-feedback .hnc-feedback-content {
    text-align: left !important;
    justify-self: stretch !important;
}

/* 强制把题号恢复为灰色圆点（放在所有样式的最后） */
#hnc-teaching-resources #hnc-feedback .hnc-feedback-number {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;

    /* background:#e2e8f0 !important;      关键：加 !important，防止被清掉 */
    border: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    /* 文字颜色同时锁定，避免主题改色 */
}

/* ============================================
   15选10 完形填空专用样式
   ============================================ */

/* 完形填空文章样式 */
.hnc-cloze-passage {
    line-height: 1.8;
    font-size: 16px;
    color: #334155;
    text-align: justify;
}

/* 空格样式 - 优化版 */
.hnc-cloze-blank {
    display: inline-block;
    position: relative;
    min-width: 80px;
    /* 稍微减小最小宽度 */
    padding: 6px 10px;
    /* 均衡的内边距 */
    margin: 0 3px;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    /* 稍微减小圆角 */
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    /* 改为居中对齐，配合较小的内边距 */
    line-height: normal;
    /* 重置行高，避免继承外部的大行高 */
}

.hnc-cloze-blank:hover {
    background: #eff6ff;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.hnc-cloze-blank.filled {
    background: #dbeafe;
    border-color: #2563eb;
    color: #1e40af;
    font-weight: 600;
}

/* 数字标签 - 居中显示 */
.hnc-blank-number {
    position: absolute;
    top: -10px;
    left: 8px;
    transform: none;
    background: #3b82f6;
    color: white;
    font-size: 12px;
    padding: 3px 7px;
    /* 椭圆形，适配双位数 */
    border-radius: 14px;
    font-weight: bold;
    z-index: 1;
    line-height: 1;
    white-space: nowrap;
    /* 防止数字换行 */
    min-width: 16px;
    /* 确保最小宽度 */
    text-align: center;
}

/* 空格内容 - 去掉内部虚线 */
.hnc-blank-content {
    display: inline-block;
    min-width: 60px;
    text-align: center;
    font-weight: 500;
    border: none !important;
    /* 去掉任何边框 */
    text-decoration: none !important;
    /* 去掉下划线 */
}

/* 备选词汇区域 */
.hnc-cloze-instructions {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #3b82f6;
}

.hnc-cloze-instructions h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 16px;
}

.hnc-cloze-instructions p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* 选项网格布局 */
.hnc-cloze-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
}

/* 单个选项卡片 */
.hnc-cloze-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.hnc-cloze-option:hover {
    border-color: #94a3b8;
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 选中状态 */
.hnc-cloze-option.selected {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 已使用状态 */
.hnc-cloze-option.used {
    opacity: 0.5;
    background: #f1f5f9;
    border-color: #cbd5e1;
    cursor: not-allowed;
    transform: none !important;
}

.hnc-cloze-option.used:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
}

/* 选项字母标识 */
.hnc-option-letter {
    background: #6366f1;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.hnc-cloze-option.used .hnc-option-letter {
    background: #94a3b8;
}

/* 选项详细信息 */
.hnc-option-details {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.hnc-option-word {
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    margin-bottom: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.hnc-option-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
}

.hnc-option-pos {
    background: #e0e7ff;
    color: #4338ca;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.hnc-option-chinese {
    color: #64748b;
    font-style: italic;
}

/* 已使用标记 */
.hnc-cloze-option.used::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 8px;
    color: #10b981;
    font-weight: bold;
    font-size: 16px;
}

/* 选项滚动条美化 */
.hnc-cloze-options::-webkit-scrollbar {
    width: 8px;
}

.hnc-cloze-options::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.hnc-cloze-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.hnc-cloze-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    .hnc-cloze-options {
        grid-template-columns: 1fr;
        max-height: 300px;
    }

    .hnc-cloze-option {
        padding: 10px;
    }

    .hnc-option-letter {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .hnc-cloze-blank {
        min-width: 60px;
        padding: 1px 6px;
    }

    .hnc-blank-number {
        width: 14px;
        height: 14px;
        font-size: 9px;
        top: -7px;
    }
}

/* ============================================
   15选10 修复版 - 解决重叠和布局问题
   ============================================ */

/* 1. 移除之前添加的伪元素标题（避免重复） */
#hnc-teaching-resources .hnc-questions-area::before {
    display: none !important;
}

/* 2. 右侧面板基础设置 */
#hnc-teaching-resources .hnc-exercise-right {
    height: 700px !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. 问题区域弹性布局 */
#hnc-teaching-resources .hnc-questions-area {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    overflow: hidden !important;
}

/* 4. 列表容器占满空间 */
#hnc-teaching-resources #hnc-questions-list {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* 5. 选项网格 - 默认横向布局 */
#hnc-teaching-resources .hnc-exercise-main:not(.vertical-layout) .hnc-cloze-options {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: minmax(50px, auto) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    align-content: start !important;
}

/* 6. 垂直布局时的选项网格 */
#hnc-teaching-resources .hnc-exercise-main.vertical-layout .hnc-cloze-options {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    /* 垂直布局改为5列 */
    grid-auto-rows: minmax(45px, auto) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    max-height: 300px !important;
    /* 限制高度避免占用过多空间 */
}

/* 7. 垂直布局时调整主容器 */
#hnc-teaching-resources .hnc-exercise-main.vertical-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    max-height: none !important;
    height: auto !important;
}

/* 8. 垂直布局时的左右面板 */
#hnc-teaching-resources .hnc-exercise-main.vertical-layout .hnc-exercise-left {
    height: 400px !important;
    max-height: 50vh !important;
}

#hnc-teaching-resources .hnc-exercise-main.vertical-layout .hnc-exercise-right {
    height: auto !important;
    max-height: none !important;
    min-height: 300px !important;
}

/* 9. 选项卡片样式（改为 grid，避免单词断行） */
#hnc-teaching-resources .hnc-cloze-option {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: white !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    min-height: 64px !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* 10. 选项卡片悬停效果 */
#hnc-teaching-resources .hnc-cloze-option:not(.used):hover {
    border-color: #6366f1 !important;
    background: #f0f9ff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important;
}

/* 11. 已使用状态 */
#hnc-teaching-resources .hnc-cloze-option.used {
    opacity: 0.5 !important;
    background: #f8f9fa !important;
    cursor: not-allowed !important;
}

/* 12. 选中状态 */
#hnc-teaching-resources .hnc-cloze-option.selected {
    border-color: #3b82f6 !important;
    background: #dbeafe !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* 13. 字母标识优化 */
#hnc-teaching-resources .hnc-option-letter {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
}

#hnc-teaching-resources .hnc-option-word {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
}

#hnc-teaching-resources .hnc-option-meta {
    white-space: nowrap !important;
}

/* 14. 响应式 - 中等屏幕 */
@media (max-width: 1200px) {
    #hnc-teaching-resources .hnc-cloze-options {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

/* 15. 响应式 - 小屏幕 */
@media (max-width: 768px) {
    #hnc-teaching-resources .hnc-cloze-options {
        grid-template-columns: 1fr !important;
        max-height: 360px !important;
    }
}

/* 16. 清理多余的备选词汇标题 */
#hnc-teaching-resources .hnc-panel-header:has(+ .hnc-questions-area) {
    display: flex !important;
}

/* 17. 确保只有一个备选词汇标题 */
#hnc-teaching-resources #hnc-right-panel-title:contains("备选词汇")~#hnc-right-panel-title {
    display: none !important;
}

/* ============================================
   词汇VTT高亮样式
   ============================================ */

/* 词汇项基础样式 */
.vocab-item {
    margin-bottom: 14px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #f4f7ff 100%);
    border: 1px solid #e5e7eb;
    border-left: 4px solid #4f46e5;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
    transition: all 0.25s ease;
}

.vocab-item-content {
    position: relative;
}

/* 词汇高亮效果 */
.vocab-item.vocab-highlighted {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: #4338ca;
    border-left-color: #4338ca;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.2);
}

/* 单词行样式 */
.vocab-word-line {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.vocab-number {
    display: inline-block;
    width: 30px;
    color: #6b7280;
}

.vocab-word {
    font-weight: bold;
    color: #111827;
    margin-right: 10px;
}

.vocab-ipa {
    color: #475569;
    font-style: italic;
}

/* 释义行样式 */
.vocab-meaning-line {
    margin-bottom: 10px;
}

.vocab-pos {
    display: inline-block;
    background: #e0e7ff;
    color: #4338ca;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 8px;
}

.vocab-chinese {
    color: #1f2937;
    font-weight: 500;
}

/* 例句样式 */
.vocab-example-line {
    margin-top: 12px;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.example-en {
    color: #475569;
    margin-bottom: 5px;
}

.example-cn {
    color: #64748b;
    font-size: 14px;
}

.vocab-tts-btn {
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all 0.2s;
}

.vocab-tts-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
}

/* 速度按钮样式 */
.vocab-speed-btn {
    padding: 6px 14px;
    margin-right: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    color: #0f172a;
    font-weight: 500;
}

.vocab-speed-btn:hover {
    background: #e0f2fe;
}

.vocab-speed-btn.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* 字幕显示区样式 */
#vocab-current-subtitle {
    font-weight: 500;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
}

/* 高亮动画 */
@keyframes vocabPulse {
    0% {
        transform: translateX(5px) scale(1);
    }

    50% {
        transform: translateX(5px) scale(1.02);
    }

    100% {
        transform: translateX(5px) scale(1);
    }
}

.vocab-item.vocab-highlighted {
    animation: vocabPulse 1s ease-in-out;
}

/* 词汇导航条 */
.hnc-vocab-panel {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 18px 18px 12px;
    margin-bottom: 12px;
}

.hnc-vocab-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hnc-vocab-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.hnc-vocab-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.hnc-vocab-toolbar {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.hnc-vocab-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hnc-vocab-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hnc-vocab-search input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 200px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hnc-vocab-search input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.vocab-nav-btn {
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vocab-nav-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
}

.vocab-nav-btn.active,
.vocab-nav-btn.solid {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.vocab-nav-btn.ghost {
    background: #fff;
    color: #0f172a;
}

.vocab-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
}

.vocab-section-title.cet4 {
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.vocab-section-title.cet6 {
    border: 1px solid #fecdd3;
    color: #be123c;
}

/* ============================================
   汉译英卡片恢复样式
   ============================================ */
.hnc-trans-container.column-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hnc-trans-topbar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.hnc-trans-left {
    flex: 1 1 auto;
    min-width: 0;
}

.hnc-trans-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.hnc-trans-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
    line-height: 1.5;
}

.hnc-trans-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
}

.hnc-trans-text {
    font-size: 18px;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.6;
}

.hnc-trans-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hnc-trans-btn,
.hnc-trans-ctrl-btn,
.hnc-scaffold-mini-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hnc-trans-btn:hover,
.hnc-trans-ctrl-btn:hover,
.hnc-scaffold-mini-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.hnc-trans-btn-play {
    color: #3b82f6;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.hnc-trans-btn-play:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.hnc-trans-btn-show {
    color: #6366f1;
    border-color: #e0e7ff;
    background: #eef2ff;
}

.hnc-trans-btn-show:hover {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.hnc-trans-btn-backbone,
.hnc-scaffold-mini-btn.ghost,
.hnc-trans-ctrl-secondary {
    background: #ffffff;
    border: 1px solid #dce3ed;
    color: #1f2937;
    box-shadow: none;
}

.hnc-trans-btn-backbone:hover,
.hnc-scaffold-mini-btn.ghost:hover,
.hnc-trans-ctrl-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.hnc-trans-btn-scaffold {
    color: #f97316;
    border-color: #ffedd5;
    background: #fff7ed;
}

.hnc-trans-btn-scaffold:hover {
    background: #f97316;
    color: white;
    border-color: #f97316;
}

.hnc-trans-backbone {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    padding: 12px;
    border-radius: 10px;
    margin: 8px 0 10px 0;
    line-height: 1.6;
    color: #0f172a;
}

.hnc-trans-backbone span[data-bb-cn],
.hnc-trans-backbone span[data-bb-en] {
    font-size: 26px;
    font-weight: 700;
}

.hnc-trans-content {
    margin-top: 6px;
}

.hnc-trans-version {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 10px;
}

.hnc-trans-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
}

.hnc-trans-en {
    color: #0f172a;
    font-size: 26px;
    line-height: 1.6;
    font-weight: 700;
}

.hnc-trans-card.active {
    border-color: #2563eb;
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.18);
}

.hnc-trans-btn-active {
    background: #f3f4f6 !important;
    /* Light gray */
    border-color: #d1d5db !important;
    /* Subtle border */
    color: #1f2937 !important;
    /* Dark text for contrast */
}

.hnc-trans-audio-box,
.hnc-trans-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    margin-bottom: 12px;
}

.hnc-trans-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.hnc-trans-panel-body {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Legacy gradient removal - these are now handled by the unified Minimalist section above */

.hnc-trans-ctrl-btn {
    /* Styles handled by unified selector above */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hnc-trans-ctrl-btn:hover {
    filter: none;
    /* Removed brightness filter */
}

/* Removed specific primary/secondary colors for translation controls to enforce monochrome */

.hnc-trans-scaffold {
    margin-top: 10px;
    background: #ffffff;
    /* Cleaner white background */
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
}

/* ... existing scaffold header styles ... */
.hnc-trans-scaffold-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* ... */

/* Removing gradient from #vocab-current-subtitle */
#vocab-current-subtitle {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    padding: 15px 20px;
    background: #ffffff !important;
    /* White */
    color: #18181b !important;
    /* Dark text */
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hnc-trans-scaffold-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.hnc-trans-scaffold-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 12px;
    font-weight: 700;
}

.hnc-trans-scaffold-hint {
    color: #94a3b8;
    font-size: 12px;
}

.hnc-trans-scaffold-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.hnc-scaffold-mini-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #dce3ed;
    background: #ffffff;
    color: #1f2937;
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.hnc-scaffold-mini-btn.ghost {
    background: #ffffff;
    color: #94a3b8;
    border-color: #dce3ed;
}

.hnc-scaffold-mini-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.hnc-trans-scaffold-list {
    list-style: none;
    padding: 0;
    /* Remove padding to align left */
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hnc-scaffold-step {
    background: #ffffff;
    border: 1px solid #f2f4f7;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 12px;
}

.hnc-scaffold-step-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    text-align: left;
    /* FIX: Prevent button default center alignment */
}

.hnc-scaffold-step:hover .hnc-scaffold-step-header {
    background: #f8fafc;
}

.hnc-scaffold-step-header:focus {
    background: #f8fafc;
}

.hnc-scaffold-step-left {
    display: flex;
    align-items: flex-start;
    /* Changed from center to top-align */
    gap: 14px;
    /* Increased gap */
    width: 100%;
    /* Ensure text takes available space */
}

.hnc-scaffold-step-index {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 13px;
    background: #e2e8f0;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
    /* Align with the first line of 26px text */
    flex-shrink: 0;
    /* Prevent shrinking */
}

.hnc-scaffold-step-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Increased gap */
    align-items: flex-start;
    flex: 1;
    /* Take remaining width */
}

.hnc-scaffold-step-cn {
    font-size: 26px;
    /* Matched to Backbone 26px */
    color: #0f172a;
    /* Matched to Backbone dark color */
    font-weight: 700;
    /* Matched to Backbone bold */
    line-height: 1.6;
    margin-top: 0;
    /* Reset top margin since we use alignment */
    word-break: break-word;
    /* Prevent overflow */
    text-align: left;
    /* FORCE LEFT ALIGNMENT */
}

.hnc-scaffold-step-body {
    display: none;
    padding: 12px 14px 14px 52px;
    /* Indent body to align with text */
    border-top: 1px solid #f2f4f7;
}

.hnc-scaffold-step-label {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hnc-scaffold-step-text {
    font-size: 26px;
    /* Matched to Backbone 26px */
    font-weight: 700;
    color: #0f172a;
    line-height: 1.6;
}

.hnc-scaffold-step-hint {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

.hnc-scaffold-step-icon {
    font-size: 12px;
    color: #94a3b8;
    transition: transform 0.2s ease;
    margin-top: 16px;
    /* Align icon better */
}

.hnc-scaffold-step-icon.open {
    transform: rotate(180deg);
}

/* 翻译显示区域内部间距 */
.hnc-trans-content {
    margin-top: 8px;
}

.hnc-trans-content .hnc-trans-version+.hnc-trans-version {
    margin-top: 10px;
}

/* 兼容移动端 */
@media (max-width: 900px) {
    .hnc-trans-container.column-layout {
        flex-direction: column;
    }
}

/* ============================================
   播放器样式修复 - 去掉原生字幕和修复速度按钮
   ============================================ */

/* 1. 隐藏原生字幕显示 */
/* 隐藏音频播放器的原生字幕轨道显示 */
#vocab-audio-player::cue {
    display: none !important;
}

/* 隐藏视频播放器的文本轨道（如果存在） */
audio::-webkit-media-text-track-display {
    display: none !important;
}

audio::-webkit-media-text-track-container {
    display: none !important;
}

/* Firefox兼容 */
audio::cue {
    display: none !important;
}

/* 确保track元素不显示 */
audio track {
    display: none !important;
}

/* 2. 修复播放速度按钮样式 */
.vocab-speed-btn {
    padding: 6px 14px;
    margin-right: 8px;
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.vocab-speed-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.vocab-speed-btn.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white !important;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    font-weight: 600;
}

.vocab-speed-btn.active:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

/* 3. 优化自定义字幕显示区 */
#vocab-current-subtitle {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.6;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 字幕区空白时的样式 */
#vocab-current-subtitle:empty::before {
    content: '等待音频播放...';
    opacity: 0.8;
}

/* ============================================
   词汇例句字体大小调整
   ============================================ */

/* 英文例句 - 增大字体 */
.example-en {
    font-size: 17px !important;
    /* 从默认增大到17px */
    color: #1f2937 !important;
    /* 深灰色，更清晰 */
    font-weight: 500 !important;
    /* 稍微加粗 */
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

/* 中文例句翻译 - 同步增大 */
.example-cn {
    font-size: 16px !important;
    /* 从14px增大到16px */
    color: #4b5563 !important;
    /* 中等灰色 */
    line-height: 1.5 !important;
    padding-left: 15px !important;
    /* 轻微缩进 */
    position: relative !important;
}

/* 移动端适配 - 更大的字体 */
@media (max-width: 768px) {
    .example-en {
        font-size: 18px !important;
    }

    .example-cn {
        font-size: 17px !important;
    }
}

/* ============================================
   词汇例句字体和按钮美化
   ============================================ */

/* 1. 字体大小优化 */

/* 英文例句 - 更大更清晰 */
.example-en {
    font-size: 24px !important;
    /* 大字体 */
    color: #111827 !important;
    /* 深黑色 */
    font-weight: 500 !important;
    /* 中等粗细 */
    line-height: 1.8 !important;
    /* 行高 */
    margin-bottom: 10px !important;
    letter-spacing: 0.3px !important;
    /* 字间距 */
}

/* 中文例句翻译 - 适中大小 */
.example-cn {
    font-size: 16px !important;
    /* 比英文稍小 */
    color: #4b5563 !important;
    /* 中灰色 */
    line-height: 1.7 !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e5e7eb !important;
    letter-spacing: 0.5px !important;
    /* 中文字间距 */
}

/* 2. 按钮美化 - 小巧圆润 */

/* 单个翻译切换按钮 */
.toggle-translation-btn {
    /* 尺寸 */
    padding: 4px 10px !important;
    /* 更小的内边距 */
    font-size: 12px !important;
    /* 小字体 */
    height: 26px !important;
    /* 固定高度 */

    /* 圆角和外观 */
    border-radius: 13px !important;
    /* 圆润的边角 */
    border: 1px solid #d1d5db !important;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    color: #6b7280 !important;

    /* 其他样式 */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    /* 防止文字换行 */
    display: inline-block !important;
}

/* 按钮悬停效果 */
.toggle-translation-btn:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
    color: #374151 !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 按钮激活状态（显示翻译时） */
.toggle-translation-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) !important;
}

.toggle-translation-btn.active:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3) !important;
}

/* 3. 全局控制按钮 - 与播放速度按钮风格统一 */
.vocab-control-btn,
#global-translation-toggle {
    /* 尺寸 - 与速度按钮保持一致 */
    padding: 8px 15px !important;
    font-size: 14px !important;
    height: 32px !important;

    /* 圆角和外观 */
    border-radius: 6px !important;
    /* 适度的圆角 */
    border: 2px solid #e0e0e0 !important;
    background: white !important;
    color: #333333 !important;

    /* 其他样式 */
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

/* 全局按钮悬停 */
#global-translation-toggle:hover {
    background: #f5f5f5 !important;
    border-color: #3b82f6 !important;
    color: #1f2937 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 4. 移动端优化 */
@media (max-width: 768px) {

    /* 移动端字体稍大 */
    .example-en {
        font-size: 19px !important;
    }

    .example-cn {
        font-size: 17px !important;
    }

    /* 移动端按钮稍大 */
    .toggle-translation-btn {
        padding: 5px 12px !important;
        font-size: 13px !important;
        height: 28px !important;
    }
}

/* 5. 例句容器优化 */
.vocab-example-line {
    margin-top: 12px !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%) !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
}

.vocab-example-line:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* 6. 翻译显示动画 */
.example-cn {
    animation: slideDown 0.3s ease-out !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. 按钮组排列（速度按钮区域） */
.vocab-speed-btn {
    border-radius: 6px !important;
    /* 统一圆角风格 */
}


/* ============================================
   2025-09-22 新增：第一课导览模块样式
   ============================================ */

/* 入口卡片样式 */
.hnc-entry-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef1f5 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px 30px;
    margin-top: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.hnc-entry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

.hnc-entry-card h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: #1e293b;
    font-weight: 600;
}

.hnc-entry-card p {
    margin: 0;
    font-size: 15px;
    color: #475569;
}

/* 导览仪表盘总容器 */
#hnc-first-class-dashboard {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

/* 仪表盘头部 */
.hnc-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.hnc-dashboard-header h3 {
    margin: 0;
    font-size: 24px;
    color: #1e293b;
}

/* 仪表盘内容网格布局 */
.hnc-dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* 左边宽一点 */
    gap: 20px;
    margin-bottom: 20px;
}

/* 通用面板样式 */
.hnc-dashboard-panel {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hnc-dashboard-panel h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #334155;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* 班级切换标签 */
.hnc-class-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.hnc-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: #64748b;
    border-bottom: 3px solid transparent;
    transform: translateY(2px);
    /* 巧妙地对齐边框 */
    transition: all 0.2s ease;
}

.hnc-tab-btn:hover {
    color: #3b82f6;
}

.hnc-tab-btn.active {
    color: #3b82f6;
    font-weight: 600;
    border-bottom-color: #3b82f6;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .hnc-dashboard-grid {
        grid-template-columns: 1fr;
        /* 手机上变为单列 */
    }

    .hnc-dashboard-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

/* 新增：自定义密码模态框样式 */
.hnc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.hnc-modal-content {
    background: white;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.hnc-modal-content h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.hnc-modal-content p {
    margin: 0 0 20px 0;
    color: #64748b;
}

#hnc-password-input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 10px;
}

#hnc-password-input:focus {
    outline: none;
    border-color: #3b82f6;
}

.hnc-error-message {
    color: #ef4444;
    font-size: 14px;
    height: 20px;
    margin-bottom: 10px;
}

.hnc-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.hnc-modal-actions button {
    flex: 1;
}

.hnc-panel-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.hnc-panel-header-flex h4 {
    margin: 0;
    border: none;
    padding: 0;
}

.hnc-week-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hnc-week-selector-wrapper label {
    font-size: 14px;
    color: #475569;
}

#hnc-week-selector {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background-color: #f8f9fa;
    font-size: 14px;
}

/* ============================================
   教学理念视频区域样式 - 双独立播放器版
   ============================================ */

.hnc-teaching-videos-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.hnc-teaching-videos-section h5 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    text-align: center;
}

.hnc-single-video-block {
    margin-bottom: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e2e8f0;
}

.hnc-single-video-block h6 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hnc-video-container {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

#hnc-video-no-subtitle,
#hnc-video-with-subtitle {
    width: 100%;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hnc-video-description {
    font-size: 13px;
    color: #64748b;
    margin: 15px 0 0 0;
    text-align: center;
    font-style: italic;
    background: #f0f9ff;
    padding: 10px;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
}

/* 视频播放器焦点状态 */
.hnc-single-video-block:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transition: all 0.2s ease;
}

/* 移动端适配 */
@media (max-width: 768px) {

    #hnc-video-no-subtitle,
    #hnc-video-with-subtitle {
        max-height: 180px;
    }

    .hnc-single-video-block {
        padding: 12px;
        margin-bottom: 15px;
    }

    .hnc-single-video-block h6 {
        font-size: 13px;
    }
}

/* === 15选10：强制左栏内部滚动 · 兜底补丁（放在文件最后） === */

/* 1) 主容器“窗框”固定：防止被更下方规则或响应式改回 auto */
#hnc-teaching-resources .hnc-exercise-main {
    height: 700px !important;
    /* 固定窗框 */
    max-height: 80vh !important;
    /* 大屏兼容 */
    min-height: 0 !important;
    /* 打断 min-height:auto 链 */
    overflow: hidden !important;
}

/* 2) 左栏改为两行 Grid：标题 auto + 正文 1fr，且允许收缩 */
#hnc-teaching-resources .hnc-exercise-left {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    height: 100% !important;
    /* 填满 700px 窗框 */
    max-height: none !important;
    /* 去掉旧的 max-height 限制 */
    min-height: 0 !important;
    /* 关键：允许子项变小 */
    overflow: hidden !important;
}

/* 3) 正文区成为真正的“内部滚动容器” */
#hnc-teaching-resources .hnc-reading-passage {
    min-height: 0 !important;
    height: 100% !important;
    /* 在 Grid 第二行中占满剩余空间 */
    overflow-y: auto !important;
    overscroll-behavior: contain;
    /* 防止滚到底串到 body */
    -webkit-overflow-scrolling: touch;
    /* iOS/触控更顺滑 */
}

/* 4) 非横排（vertical）时的兜底：保持左栏也能滚 */
#hnc-teaching-resources .hnc-exercise-main.vertical-layout {
    min-height: 0 !important;
}

#hnc-teaching-resources .hnc-exercise-main.vertical-layout .hnc-exercise-left {
    min-height: 0 !important;
    max-height: none !important;
}

/* 阅读匹配：进入时放大视区，尽量展示更多段落 */
#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main {
    height: calc(100vh - 140px) !important;
    /* 全屏化：扣掉顶部导航/间距 */
    min-height: calc(100vh - 140px) !important;
    max-height: none !important;
    grid-template-columns: 1fr 1fr;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-left,
#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-right {
    max-height: none !important;
    height: 100% !important;
    min-height: 0 !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-reading-passage,
#hnc-reading-exercise.hnc-reading-expanded .hnc-questions-area {
    max-height: none !important;
    height: calc(100vh - 240px) !important;
    /* 进一步提高可视区域 */
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main.vertical-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 2.5fr 1fr !important;
    /* 顶部文章区占比放大 */
    height: calc(140vh - 160px) !important;
    /* 垂直布局整体高度再放大 */
    min-height: 1100px !important;
    max-height: none !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main.vertical-layout .hnc-exercise-left {
    min-height: 800px !important;
    /* 文章区最小高度 */
    max-height: none !important;
    height: auto !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main.vertical-layout .hnc-reading-passage {
    height: calc(100vh - 200px) !important;
    /* 进一步提升文章可视高度 */
    min-height: 700px !important;
    max-height: none !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main.vertical-layout .hnc-exercise-right {
    min-height: 400px !important;
    max-height: none !important;
    height: auto !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-exercise-main.vertical-layout .hnc-questions-area {
    max-height: none !important;
    height: auto !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-questions-area {
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
    /* 独立滚动，防止拖动整页 */
    min-height: 400px !important;
}

#hnc-reading-exercise.hnc-reading-expanded {
    padding: 12px !important;
    /* 缩减内边距以腾出空间 */
    margin-top: 16px !important;
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-panel-header {
    padding: 12px 14px !important;
    /* 压缩头部高度 */
}

#hnc-reading-exercise.hnc-reading-expanded .hnc-reading-passage,
#hnc-reading-exercise.hnc-reading-expanded .hnc-questions-area {
    padding: 14px !important;
    /* 减少内边距，提升有效视区 */
}

.pb-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
    padding: 12px 14px;
    background: #f1f5fb;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06)
}

.pb-toolbar input[type="search"],
.pb-toolbar select {
    padding: 10px 12px;
    border: 1px solid #d7dfe9;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: #0f172a;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .05)
}

.pb-toolbar input[type="search"]::placeholder {
    color: #94a3b8
}

.pb-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
}

.pb-card {
    border: 1px solid #e0e7ff;
    border-radius: 16px;
    padding: 16px 16px 76px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}

.pb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #0ea5e9);
    opacity: .9
}

.pb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
    border-color: #cbd5ff
}

.pb-title {
    margin: 8px 0 10px
}

.pb-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    border: 0;
    font-weight: 600
}

.pb-badge+.pb-badge {
    background: #e2f6ff;
    color: #0f172a
}

.pb-cn,
.pb-orig,
.pb-b12 {
    margin: 8px 0;
    line-height: 1.55;
    font-size: 20px;
    font-weight: 650;
    color: #0f172a
}

.pb-title strong {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em
}

.pb-hit {
    background: linear-gradient(120deg, #fff3bf, #ffe9a3);
    padding: 0 2px;
    border-radius: 4px
}

.pb-blank {
    display: inline-block;
    border-bottom: 1px solid #cbd5e1;
    min-width: 32px;
    height: 1em;
    vertical-align: baseline
}

.pb-tools {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    position: absolute;
    left: 16px;
    bottom: 18px
}

.pb-tools button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #0ea5e9;
    background: linear-gradient(135deg, #0ea5e9, #22c55e);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(14, 165, 233, .16);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12)
}

.pb-tools button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(14, 165, 233, .22);
    filter: brightness(1.02)
}

.pb-tools button:active {
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(14, 165, 233, .18);
    filter: brightness(.98)
}

.pb-tools button svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}

/* 汉译英 - 步骤高亮 */
.hnc-step-diff {
    color: #7c3aed;
    /* 偏深一点的紫色 */
    font-weight: 700;
    text-decoration: none;
    /* Removed underline as requested */
}

/* 汉译英 - 已过步骤的淡化高亮 */
.hnc-step-diff-faded {
    color: #a78bfa;
    /* Violet-400: 比当前步骤 (#7c3aed, Violet-600) 淡2个色号 */
    font-weight: 700;
    text-decoration: none;
    /* 去掉下划线，进一步弱化 */
}

/* ============================================================
   期末复习提示横幅样式
   临时使用，2025年1月底前移除
   ============================================================ */

.hnc-exam-tip-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    width: min(100%, 1100px);
    max-width: 1100px;
    box-sizing: border-box;
}

.hnc-exam-tip-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.hnc-exam-tip-content {
    flex: 1 1 600px;
    min-width: 0;
}

.hnc-exam-tip-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 10px;
}

.hnc-exam-tip-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hnc-exam-tip-actions {
    margin-left: auto;
    align-self: center;
}

.hnc-exam-tip-image {
    margin-top: 12px;
}

.hnc-exam-tip-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.hnc-exam-keyword {
    display: inline-block;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hnc-exam-keyword:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* 响应式：小屏幕 */
@media (max-width: 600px) {
    .hnc-exam-tip-banner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .hnc-exam-tip-content {
        flex: 0 1 auto;
    }

    .hnc-exam-tip-actions {
        width: 100%;
        margin-left: 0;
    }

    .hnc-exam-tip-actions .hnc-grade-composition-btn {
        width: 100%;
        text-align: center;
    }
    
    .hnc-exam-tip-icon {
        font-size: 24px;
    }
    
    .hnc-exam-tip-title {
        font-size: 14px;
    }
    
    .hnc-exam-keyword {
        font-size: 13px;
        padding: 5px 10px;
    }
}