@supports not selector(::-webkit-scrollbar) {
    .scroll {
        scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0);
        scrollbar-width: thin;
    }
}

/* ===== 英语学习 - 卡片样式（MarkupString 内容需要全局 CSS） ===== */
.word-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 2rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.word-display {
    font-size: 3.2rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}
.phonetic {
    font-size: 1.15rem;
    color: #6366f1;
    min-height: 1.5rem;
    font-weight: 500;
    text-align: center;
}
.speak-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.15s;
    padding: 0;
    line-height: 1;
}
.speak-btn:hover { opacity: 1; transform: scale(1.15); }
.meaning-hint {
    font-size: 1.3rem;
    color: #475569;
    background: #eef2ff;
    border-radius: 2rem;
    padding: 0.4rem 1.8rem;
    text-align: center;
    visibility: hidden;
}
.meta-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    color: #64748b;
    font-weight: 600;
}
.wrong-badge {
    background: #fee2e2;
    color: #dc2626;
    border-radius: 20px;
    padding: 0.25rem 1rem;
    font-weight: 700;
}
.input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: #f8fafc;
    padding: 1.8rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
}
.input-area {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.input-area input {
    padding: 1rem 1.4rem;
    border-radius: 2.5rem;
    border: 2px solid #cbd5e1;
    font-size: 1.2rem;
    width: 380px;
    max-width: 80vw;
    text-align: center;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    font-family: inherit;
    color: #1e293b;
}
.input-area input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.input-area input::placeholder {
    color: #94a3b8;
}
.feedback-message {
    font-size: 1.1rem;
    font-weight: 600;
    min-height: 1.5rem;
    text-align: center;
    padding: 0 0.5rem;
}
.actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.action-btn {
    padding: 0.7rem 1.5rem;
    border-radius: 2.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
    background: #e2e8f0;
    color: #334155;
    font-family: inherit;
}
.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.action-btn.correct { background: #10b981; color: #fff; }
.action-btn.correct:hover { background: #059669; }
.action-btn.continue { background: #6366f1; color: #fff; font-size: 1.1rem; padding: 0.8rem 2.5rem; }
.action-btn.continue:hover { background: #4f46e5; }
.action-btn.wrong { background: #ef4444; color: #fff; }
.action-btn.wrong:hover { background: #dc2626; }
.action-btn.master { background: #f59e0b; color: #fff; }
.action-btn.master:hover { background: #d97706; }
.action-btn.speak { background: #3b82f6; color: #fff; }
.action-btn.speak:hover { background: #2563eb; }
.empty-message {
    text-align: center;
    color: #94a3b8;
    font-size: 1.15rem;
    padding: 2.5rem;
    background: #f8fafc;
    border-radius: 1.25rem;
    border: 1.5px dashed #e2e8f0;
}
.review-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

/* ===== 消消乐样式 ===== */
.match-game-container { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.match-stats { display: flex; gap: 2rem; font-weight: 700; color: #1e293b; font-size: 1.1rem; background: #f1f5f9; padding: 0.5rem 1.5rem; border-radius: 2rem; border: 1px solid #e2e8f0; }
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; width: 100%; max-width: 700px; }
.match-card { aspect-ratio: 3/2; border-radius: 1rem; border: 2px solid #e2e8f0; background: #fff; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; padding: 0.8rem; text-align: center; word-break: break-word; user-select: none; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.match-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-color: #94a3b8; }
.match-card.en-card { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #312e81; border-color: #a5b4fc; }
.match-card.zh-card { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #7c2d12; border-color: #fdba74; }
.match-card.selected { transform: scale(1.05); border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.25), 0 8px 25px rgba(0,0,0,0.12); }
.match-card.matched { opacity: 0; transform: scale(0.75); pointer-events: none; transition: all 0.4s ease; }
.match-card.wrong-flash { animation: shake 0.5s ease; border-color: #ef4444; background: #fef2f2; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.match-complete { text-align: center; padding: 3rem; background: linear-gradient(135deg, #eef2ff, #f0fdf4); border-radius: 1.25rem; font-size: 1.5rem; color: #1e293b; border: 2px solid #a5b4fc; }
.match-complete .big-emoji { font-size: 4rem; display: block; margin-bottom: 1rem; }
@media (max-width: 600px) { .match-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .match-card { font-size: 0.85rem; padding: 0.5rem; border-radius: 0.8rem; } }

/* ===== 快速记忆卡片 ===== */
.quick-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.quick-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 0.9rem; padding: 0.7rem 1rem; transition: all 0.2s; }
.quick-card:hover { border-color: #818cf8; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.quick-card-word { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.quick-word-text { font-weight: 600; font-size: 1.1rem; color: #1e293b; }
.quick-phonetic { font-size: 0.8rem; color: #6366f1; }
.quick-card-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.quick-btn { border: 1px solid #e2e8f0; background: #fff; border-radius: 0.5rem; padding: 0.3rem 0.55rem; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.2rem; color: #475569; line-height: 1; }
.quick-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.quick-btn.quick-speak-btn:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.quick-btn.quick-correct-btn:hover { background: #10b981; color: #fff; border-color: #10b981; }
.quick-btn.quick-wrong-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.quick-btn.quick-master-btn:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }

/* ===== 单词列表 ===== */
.word-list-container { display: flex; flex-direction: column; gap: 1rem; }
.word-list-container .list-type-tabs { display: flex; gap: 0.25rem; background: #f1f5f9; padding: 0.35rem; border-radius: 2rem; border: 1px solid #e2e8f0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.word-list-container .list-type-tabs::-webkit-scrollbar { display: none; }
.word-list-container .list-type-tab { padding: 0.35rem 0.85rem; border-radius: 2rem; border: none; background: transparent; font-weight: 600; color: #64748b; cursor: pointer; font-size: 0.8rem; transition: 0.2s; white-space: nowrap; flex-shrink: 0; }
.word-list-container .list-type-tab:hover { color: #4f46e5; }
.word-list-container .list-type-tab.active { background: #4f46e5; color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.word-list-container .list-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.word-list-container .list-item { background: #fff; padding: 0.7rem 1rem; border-radius: 1rem; cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; border: 1.5px solid #e2e8f0; }
.word-list-container .list-item:hover { background: #eef2ff; border-color: #818cf8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.word-list-container .list-item .word-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.word-list-container .list-item .word-info .speak-btn { font-size: 1.2rem; background: none; border: none; cursor: pointer; opacity: 0.6; transition: 0.15s; }
.word-list-container .list-item .word-info .speak-btn:hover { opacity: 1; transform: scale(1.15); }
.word-list-container .list-item .btn { background: #fff; border: 1.5px solid #cbd5e1; padding: 0.3rem 0.8rem; border-radius: 2rem; font-weight: 600; color: #334155; cursor: pointer; transition: all 0.2s; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.word-list-container .list-item .btn:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.word-list-container .list-item .mark-mastered-btn { border-color: #fcd34d; color: #92400e; }
.word-list-container .list-item .mark-mastered-btn:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.word-list-container .empty-message { text-align: center; color: #94a3b8; font-size: 1.15rem; padding: 2.5rem; background: #f8fafc; border-radius: 1.25rem; border: 1.5px dashed #e2e8f0; }

/* ===== 查词 ===== */
.lookup-container { display: flex; flex-direction: column; gap: 1.5rem; }
.lookup-search-row { display: flex; gap: 0.8rem; justify-content: center; align-items: center; background: #f8fafc; padding: 1.2rem; border-radius: 1.25rem; border: 1px solid #e2e8f0; }
.lookup-search-row input { padding: 1rem 1.5rem; border-radius: 2.5rem; border: 2px solid #cbd5e1; font-size: 1.2rem; width: 350px; max-width: 60vw; text-align: center; outline: none; transition: border-color 0.2s; background: #fff; }
.lookup-search-row input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.lookup-search-btn { padding: 1rem 2rem; border-radius: 2.5rem; border: none; background: #6366f1; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s; }
.lookup-search-btn:hover { background: #4f46e5; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.lookup-result { background: #fff; border-radius: 1.25rem; border: 1.5px solid #e2e8f0; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
.lookup-word-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.lookup-word-text { font-size: 2.5rem; font-weight: 700; color: #1e293b; }
.lookup-phonetic { font-size: 1.3rem; color: #6366f1; font-weight: 500; }
.lookup-speaker-btn { background: none; border: none; font-size: 2rem; cursor: pointer; opacity: 0.7; transition: all 0.2s; padding: 0.3rem; }
.lookup-speaker-btn:hover { opacity: 1; transform: scale(1.2); }
.lookup-section { background: #f8fafc; border-radius: 1rem; padding: 1.2rem 1.5rem; border: 1px solid #e2e8f0; }
.lookup-section h4 { color: #6366f1; font-size: 0.95rem; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
.lookup-meaning-item { padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; line-height: 1.7; }
.lookup-meaning-item:last-child { border-bottom: none; }
.lookup-cn-meaning { font-size: 1.15rem; color: #334155; line-height: 1.9; padding: 0.5rem 0; }
.lookup-example { padding: 0.5rem 0; color: #475569; font-style: italic; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; line-height: 1.6; }
.lookup-loading { text-align: center; padding: 3rem; color: #94a3b8; font-size: 1.1rem; }
.lookup-loading .spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid #e2e8f0; border-top-color: #6366f1; border-radius: 50%; animation: lookupSpin 0.8s linear infinite; margin-bottom: 0.5rem; }
@keyframes lookupSpin { to { transform: rotate(360deg); } }

/* ===== AI 解析结果 ===== */
.qc-ai-analysis h1 { font-size: 1.2rem; font-weight: 700; margin: 0.5rem 0 0.3rem; }
.qc-ai-analysis h2 { font-size: 1.1rem; font-weight: 700; margin: 0.5rem 0 0.3rem; }
.qc-ai-analysis h3 { font-size: 1.05rem; font-weight: 600; margin: 0.4rem 0 0.2rem; }
.qc-ai-analysis h4, .qc-ai-analysis h5, .qc-ai-analysis h6 { font-size: 1rem; font-weight: 600; margin: 0.3rem 0 0.2rem; }
.qc-ai-analysis p { margin: 0.3rem 0; line-height: 1.6; }
.qc-ai-analysis ul, .qc-ai-analysis ol { margin: 0.3rem 0; padding-left: 1.5rem; }
.qc-ai-analysis li { margin: 0.15rem 0; }
.qc-ai-analysis strong { font-weight: 600; }
.qc-ai-analysis code { background: #f1f5f9; padding: 0.1rem 0.3rem; border-radius: 0.25rem; font-size: 0.9em; }

/* ===== 在线答题弹窗宽度：整卷答题用默认宽度；分栏答题（组件根含 oqa-player-split）时适当加宽 ===== */
.modal-dialog:has(.oqa-player-split) {
    max-width: 85vw !important;
    width: 85vw;
}

/* ===== 通用选择器：年份 / 年级（YearSelect、GradeSelect 组件） =====
   ⚠️ 这类样式必须放全局（app.css），不能放调用方的 .razor.css：
      Razor CSS isolation 的作用域属性只加在"组件自己模板渲染的元素"上，
      选择器被封装进子组件后，调用方 .razor.css 里的普通类名规则再也命中不了它的内部 DOM。
   筛选面板的紧凑外观通过 .select-dense 启用（组件 Dense="true" 时自动附加）。
   宽度类 year-select / grade-select 也在此定义，供各筛选页复用。 */
.select-dense .form-control {
    padding: 1px 6px !important;
    height: 26px !important;
    line-height: 24px !important;
    font-size: 0.8rem !important;
}
.select-dense .select {
    height: 26px !important;
}
/* 紧凑行里的地区选择器宽度见下方「地区选择器」区块的 .select-dense .region-picker-btn
   （只收窄宽度；尺寸口径与同行一致，勿在此另设高度/字号）。 */
.year-select {
    max-width: 100px;
    min-width: 25px;
}
/* 年级：最长"六年级下学期"（6 字），留足宽度避免文字截断 */
.grade-select {
    max-width: 135px;
    min-width: 100px;
}

/* ===== 地区选择器 RegionPicker / RegionPathPicker（两列联动：省+市） =====
   与同行的 BootstrapBlazor 控件（Select 的 .form-select / BootstrapInput 的 .form-control）
   逐像素对齐，尺寸全部取自 BootstrapBlazor 自身的口径，避免再出现"地区框比同行矮/窄"：
   · 字号   var(--bb-font-size)          = 0.875rem ← BootstrapBlazor 对 body/.form-control/.form-select 的统一字号
   · 高度   min-height: var(--bb-height) = 35px     ← 同 .form-control.is-display 的口径
   · 内边距 var(--bb-select-padding)     = 6px 0.75rem ← 同 .select .form-select
   · 边框/圆角/底色/文字色 同 .select 里的 .form-select（白底 + motronic 主题的浅灰边框色 #E4E6EF）
   —— 不直接复用 form-control / is-display 类：is-display 语义是"只读显示态"，本控件是可点击按钮；
      显式对齐变量后，BootstrapBlazor 升级也不会悄悄改掉这里的尺寸。
   —— 紧凑筛选行不另设一套尺寸：.select-dense 只覆盖 .form-control，而 Select 内部是 .form-select
      （BootstrapBlazor 结构），所以同行的年级/年份在紧凑行里仍是 35px/0.875rem；地区同理，
      只收窄宽度。若给地区写死 26px/0.8rem，反而比同行矮一截。 */
.region-picker {
    position: relative;
    display: inline-block;
}
.region-picker-btn {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    height: auto;
    min-height: var(--bb-height, 35px);
    padding: var(--bb-select-padding, 0.375rem 0.75rem);
    font-size: var(--bb-font-size, 0.875rem);
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ===== RegionPathPicker（全路径版地区选择器）：表单字段模式 =====
   控件占满栅格列宽、label 在控件上方（与被替换的 BootstrapBlazor Cascader 行为一致）。
   ⚠️ 宽度必须显式 max-width: none——基础样式里的 220px 上限会让地区框比同行窄一大截。 */
.region-path-picker {
    width: 100%;
}
.region-path-picker .form-label {
    display: block;
    margin-bottom: 0.5rem;
}
.region-path-picker .region-picker {
    display: block;
    width: 100%;
}
.region-path-picker .region-picker-btn {
    width: 100%;
    max-width: none;
}
/* 紧凑筛选行（QuestionFilter 第四行）：只收窄宽度（内容自适应），尺寸口径与上面完全一致 */
.select-dense .region-picker-btn {
    max-width: 110px;
    min-width: 60px;
}
/* 文本省略号：按钮内标签撑满可分配宽度（箭头固定右侧） */
.region-picker-btn .region-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 箭头与 BootstrapBlazor Select 的追加图标同色（--bb-select-append-color），尺寸近似其 16x12 图标 */
.region-picker-caret {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--bb-select-append-color, #c0c4cc);
    transition: transform .15s;
}
/* hover/展开态：只变边框色（与同行 Select 的 hover 口径一致），不把文字染蓝 */
.region-picker-btn:hover,
.region-picker-btn.active {
    border-color: var(--bb-border-hover-color, #86b7fe);
}
.region-picker-btn.active .region-picker-caret {
    transform: rotate(180deg);
}
.region-picker-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1060;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    padding: 0;
    line-height: 1.5;
    /* 宽度自适应：左右列实际内容撑开，约 560px；窄屏自适应 */
    width: max-content;
    max-width: 96vw;
}
.region-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px dashed #f0f0f0;
    background: #fafafa;
    border-radius: 6px 6px 0 0;
}
.region-picker-header .region-all {
    color: #40a9ff;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 6px;
    border-radius: 3px;
}
.region-picker-header .region-all.active {
    color: #fff;
    background: #40a9ff;
}
.region-picker-header .region-clear {
    color: #999;
    cursor: pointer;
    text-decoration: none;
    margin-left: auto;
    font-size: 12px;
}
.region-picker-header .region-clear:hover {
    color: #ff4d4f;
}
/* tab 头（复刻 SelectRegion 风格） */
.region-picker-header + .bb-region-header { border-top: 1px solid #f0f0f0; }
.bb-region-header ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 10px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.bb-region-header li {
    padding: 8px 12px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.bb-region-header li:hover { color: #40a9ff; }
.bb-region-header li.active {
    color: #40a9ff;
    border-bottom-color: #40a9ff;
    font-weight: 600;
}

/* body：单块列表 */
.bb-region-body {
    padding: 6px 0 8px;
    min-width: 220px;
}
.region-picker-list {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    max-height: 280px;
    overflow-y: auto;
}
.region-picker-list li {
    padding: 5px 10px;
    border-radius: 3px;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.6;
    transition: background .12s, color .12s;
}
.region-picker-list li:hover {
    color: #40a9ff;
    background: #f0f8ff;
}
.region-picker-list li.active {
    color: #fff;
    background: #40a9ff;
}
.region-picker-list li.region-picker-empty {
    color: #bbb;
    cursor: default;
}
.region-picker-list li.region-picker-empty:hover {
    color: #bbb;
    background: transparent;
}
/* 市级 tab 顶部的"仅选此省"入口 */
.region-picker-province-entry {
    margin: 4px 8px 6px;
    padding: 6px 10px;
    border: 1px dashed #91d5ff;
    border-radius: 4px;
    color: #40a9ff;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.region-picker-province-entry:hover {
    background: #f0f8ff;
}
/* 遮罩：点击关闭（不挡住 popup 内容） */
.region-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: transparent;
}

/* ==========================================================================
   弹窗宽度（统一入口）
   —— BootstrapBlazor 的 Size 枚举只有 sm/md/lg/xl/xxl 固定档位，没有百分比，
      所以所有「按视口百分比 + 最大宽度」的弹窗都走自定义 class + 这里的全局 CSS。
   —— class 名常量见 Helpers/DialogClasses.cs，改宽度只改本文件这一处。
   —— 注意事项（踩过的坑）：
      1) 弹窗渲染在 body 层，组件的 scoped CSS（.razor.css）命中不到，必须写全局；
      2) BootstrapBlazor 不同版本可能把 class 挂在 .modal 或 .modal-dialog 上，
         两种层级的选择器都要写；
      3) 必须加 !important，否则压不过 .modal-lg / .modal-xl / .modal-xxl 的固定宽度。
   ========================================================================== */

/* 通用宽弹窗：占视口 60%，最大 1440px（在线答题、作业答题、布置预览等） */
.msq-dialog-wide .modal-dialog,
.msq-dialog-wide.modal-dialog {
    width: 60vw !important;
    max-width: 1440px !important;
}

/* 试卷 PDF 预览弹窗：占视口 50%（PDF 是 A4 版式，过宽显得空） */
.paper-preview-dialog .modal-dialog,
.paper-preview-dialog.modal-dialog {
    width: 50vw !important;
    max-width: 50vw !important;
}

/* 窄屏下百分比宽度偏窄，两类弹窗都放宽到接近满屏 */
@media (max-width: 992px) {
    .msq-dialog-wide .modal-dialog,
    .msq-dialog-wide.modal-dialog,
    .paper-preview-dialog .modal-dialog,
    .paper-preview-dialog.modal-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
    }
}

/* ==========================================================================
   试卷题目弹窗：题目卡片 header/footer 悬停显隐（仿组卷网样式）
   —— 作用域：PaperQuestionsByType 根容器 pqt-list（试卷卡片标题弹出的题目列表），
      只影响该弹窗，题库检索等页面的题目卡片保持常显。
   —— 用 visibility+opacity 而非 display:none：保留占位不塌缩，悬停淡入淡出无布局跳动。
   —— 弹窗渲染在 body 层，必须写全局 CSS。
   ========================================================================== */
.pqt-list .card > .card-header,
.pqt-list .card > .card-footer {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0.15s;
}

.pqt-list .card:hover > .card-header,
.pqt-list .card:hover > .card-footer {
    visibility: visible;
    opacity: 1;
}

/* 卡片外框默认透明（保留占位），悬停才显示蓝色高亮框。
   ⚠️ QuestionCard.razor.css 的 scoped .card 带 !important 蓝框（特异性同级、加载在后），
   这里必须 .card.card 提特异性 + !important 才能压住。 */
.pqt-list .card.card {
    border-color: transparent !important;
    box-shadow: none !important;
}

.pqt-list .card.card:hover {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
}

/* 触屏设备无 hover：退化为常显，保证按钮可用 */
@media (hover: none) {
    .pqt-list .card > .card-header,
    .pqt-list .card > .card-footer {
        visibility: visible;
        opacity: 1;
        transition: none;
    }
    .pqt-list .card.card {
        border-color: #dee2e6 !important;
        transition: none;
    }
    .pqt-list .card.card:hover {
        box-shadow: none !important;
    }
}



/* ==========================================================================
   卡片操作按钮统一风格（试卷卡片 PaperCard / 题目卡片 QuestionCard 的 footer）
   --------------------------------------------------------------------------
   设计原则：功能键多且杂时，去掉红黄绿蓝紫花色，统一为淡蓝幽灵样式
   （白底 + 浅蓝边 + 蓝字，保证可注意到）；危险类（删除/移出试题篮）默认红色；
   悬停加深。弹窗渲染在 body 层，这里必须写全局样式。
   ========================================================================== */
.card-actions .btn {
    color: #3b82f6;
    background-color: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-weight: 400;
    box-shadow: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.card-actions .btn:hover {
    color: #1d4ed8;
    border-color: #60a5fa;
    background-color: #eff6ff;
}

.card-actions .btn:focus-visible {
    color: #1d4ed8;
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.12);
}

/* 删除/移出试题篮等危险操作（Color.Danger 渲染为 btn-danger/btn-outline-danger）：
   默认即红色，比蓝系普通操作更醒目；悬停加深红底 */
.card-actions .btn-danger,
.card-actions .btn-outline-danger {
    color: #dc2626;
    border-color: #fecaca;
}

.card-actions .btn-danger:hover,
.card-actions .btn-outline-danger:hover {
    color: #b91c1c;
    border-color: #f87171;
    background-color: #fef2f2;
}

/* 禁用态（如暂未开放的"纠错"）：保持中性弱化 */
.card-actions .btn:disabled {
    color: #cbd5e1;
    background-color: #fff;
    border-color: #e2e8f0;
    opacity: 1;
}

/* 试卷讲解/在线讲题（a 标签按钮）与统一风格对齐：
   scoped 样式为 .pc-teach-btn[b-xxx]（0,2,0），这里用 a 元素选择器提到 (0,2,1) 压过 */
.card-actions a.pc-teach-btn,
.card-actions a.qc-teach-btn {
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #3b82f6;
    font-weight: 400;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.card-actions a.pc-teach-btn:hover,
.card-actions a.qc-teach-btn:hover {
    color: #1d4ed8;
    border-color: #60a5fa;
    background-color: #eff6ff;
}

/* 加入试题篮单独强调（浅蓝填充 + 深蓝字）：用 :has(图标) 精确命中试题篮按钮，
   避免 btn-success/btn-outline-success 把在线答题/打印一起涂色 */
.card-actions .btn:has(.fa-basket-shopping) {
    color: #1d4ed8;
    background-color: #dbeafe;
    border-color: #93c5fd;
}

.card-actions .btn:has(.fa-basket-shopping):hover {
    color: #1e40af;
    background-color: #bfdbfe;
    border-color: #60a5fa;
}

/* ════ AI 试卷解析导入（BatchImport 审核列表） ════ */
.ai-review-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fafbfe;
}
.ai-review-card-off {
    opacity: 0.45;
    background: #f3f4f6;
}
.ai-review-stem {
    padding: 6px 4px;
    line-height: 1.7;
    overflow-x: auto;
}
.ai-review-stem img {
    max-width: 320px;
    max-height: 240px;
}
.ai-review-figs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}
.ai-review-fig {
    max-width: 280px;
    max-height: 220px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}
/* ── AI 审核列表：教师版答案/解析展示 ── */
.ai-review-answer {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 4px 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f0f9eb;
    border: 1px solid #d1edc4;
    line-height: 1.7;
}
.ai-review-analysis {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 4px 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f4f7fb;
    border: 1px solid #dbe6f3;
    line-height: 1.7;
}
.ai-review-tag {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #67c23a;
    border-radius: 4px;
    padding: 1px 8px;
    margin-top: 2px;
}
.ai-review-analysis .ai-review-tag {
    background: #4a89dc;
}
.ai-review-answer .qc-html-content,
.ai-review-analysis .qc-html-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* ── AI 审核列表：行内编辑 / 补图选择（人工兜底） ── */
.ai-edit-box {
    border: 1px solid #f0c36d;
    background: #fffdf5;
    border-radius: 6px;
    padding: 8px;
}
/* AI 解析落库后的题干内嵌元素（与 StemHtml 一起保存） */
.ai-import-options {
    margin-top: 4px;
}
.ai-import-opt {
    display: inline-block;
    margin-right: 18px;
    padding: 0 4px;
}
.ai-import-fig {
    max-width: 320px;
    max-height: 260px;
    display: block;
    margin: 6px 0;
}