:root {
    --qb-bg: #f3f6fb;
    --qb-bg-grad-a: #f7fafc;
    --qb-bg-grad-b: #edf2ff;
    --qb-surface: #ffffff;
    --qb-surface-soft: #f8fafc;
    --qb-border: #dbe3ef;
    --qb-border-strong: #c6d2e4;
    --qb-text: #1f2a44;
    --qb-text-soft: #475569;
    --qb-focus-ring: rgba(37, 99, 235, 0.42);
    --qb-brand: #2f5dd7;
    --qb-brand-strong: #2246aa;
    --qb-success-bg: #dcfce7;
    --qb-success-text: #166534;
    --qb-error-bg: #fee2e2;
    --qb-error-text: #991b1b;
    --qb-shadow-sm: 0 4px 14px rgba(24, 39, 75, 0.06);
    --qb-shadow-md: 0 14px 40px rgba(24, 39, 75, 0.1);
    --qb-radius-lg: 14px;
    --qb-radius-md: 10px;
    --qb-radius-sm: 8px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--qb-text);
    background: radial-gradient(circle at 8% 0%, var(--qb-bg-grad-b) 0%, var(--qb-bg-grad-a) 28%, var(--qb-bg) 70%);
    font-family: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--qb-brand);
    text-decoration: none;
}

a:hover {
    color: var(--qb-brand-strong);
}

/* ------------------------------------------------------------------
 * 全站内容宽度体系：narrow / standard / wide / workspace
 * ------------------------------------------------------------------
 * - narrow：   阅读型页面，限制行宽，约 720px
 * - standard： 通用内容页，约 1180px（默认 .container）
 * - wide：     管理列表/任务/教学班，约 1400px
 * - workspace：数据密集型/图表工作台，约 1640px
 *
 * 用法：在 base.html 的 {% block main_class %} 中组合使用
 *      "container page-main wide" 等。
 * 大屏均保留 32px 安全边距，不追求真正贴边铺满。
 */
.container {
    width: min(1180px, 100% - 32px);
    margin: 0 auto;
}

.container.narrow,
.narrow .container {
    width: min(720px, 100% - 32px);
}

.container.wide,
.wide .container {
    width: min(1400px, 100% - 32px);
}

.container.workspace,
.workspace .container {
    width: min(1640px, 100% - 32px);
}

/* 宽版工作区布局 */
.container.workspace-wide,
.workspace-wide .container {
    width: min(1440px, 100% - 32px);
}

/* 响应式：中等屏幕统一回落到 standard */
@media (max-width: 1200px) {
    .container.wide,
    .wide .container,
    .container.workspace,
    .workspace .container,
    .container.workspace-wide,
    .workspace-wide .container {
        width: min(1180px, 100% - 24px);
    }
}

@media (max-width: 768px) {
    .container,
    .container.narrow,
    .narrow .container,
    .container.wide,
    .wide .container,
    .container.workspace,
    .workspace .container,
    .container.workspace-wide,
    .workspace-wide .container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.skip-link {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 3000;
    transform: translateY(-140%);
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.skip-link:focus {
    transform: translateY(0);
}

.app-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(120deg, #1f2f57, #2f4f9f 56%, #3f6fbe);
    color: #fff;
    box-shadow: 0 10px 30px rgba(18, 33, 66, 0.22);
}

.app-nav-inner {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    min-width: 0;
}

.brand {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.brand:hover {
    color: #fff;
    opacity: 0.94;
}

.brand-en {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.78;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.nav-user {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    margin-right: 4px;
    white-space: nowrap;
}

.nav-link {
    color: #fff;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 7px 10px;
    backdrop-filter: blur(2px);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.13);
}

.nav-link:focus-visible,
.nav-dropdown > summary:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--qb-focus-ring);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-link-home {
    font-weight: 700;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 7px 26px 7px 10px;
    backdrop-filter: blur(2px);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown > summary::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 255, 255, 0.86);
    border-bottom: 2px solid rgba(255, 255, 255, 0.86);
    transform: translateY(-65%) rotate(45deg);
}

.nav-dropdown[open] > summary,
.nav-dropdown.is-active > summary,
.nav-dropdown > summary:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.13);
}

.nav-dropdown-panel {
    position: absolute;
    z-index: 260;
    right: 0;
    top: calc(100% + 10px);
    min-width: 210px;
    max-width: 260px;
    border: 1px solid rgba(219, 234, 254, 0.96);
    border-radius: 12px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.nav-dropdown-panel a {
    display: grid;
    gap: 2px;
    border-radius: 9px;
    padding: 8px 10px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 650;
    white-space: normal;
}

.nav-dropdown-panel a:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.nav-dropdown-panel a strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.25;
}

.nav-dropdown-panel a small {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
}

.nav-dropdown-panel a:hover small {
    color: #3b82f6;
}

.nav-dropdown-section {
    margin: 8px 0 2px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--qb-text-soft);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-dropdown-section:first-child {
    margin-top: 2px;
}

.nav-user-menu {
    margin-left: 8px;
}

.nav-user-menu > summary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    align-items: center;
    max-width: 210px;
    font-weight: 700;
}

.nav-user-menu > summary::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    vertical-align: -4px;
}

.nav-user-role,
.nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-role {
    flex: 0 0 auto;
}

.nav-user-name {
    min-width: 0;
}

.nav-user-sep {
    flex: 0 0 auto;
    margin: 0 5px;
    color: rgba(255, 255, 255, 0.68);
}

.nav-user-menu .nav-dropdown-panel {
    min-width: 136px;
}

.nav-user-panel a {
    display: block;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 14px;
}

.page-main {
    padding: 22px 0 38px;
    min-width: 0;
}

.app-footer {
    padding: 18px 0 26px;
    color: var(--qb-text-soft);
    font-size: 13px;
}

.app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    text-align: center;
}

.app-footer-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.app-footer-records {
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.app-footer-links a,
.app-footer-records a {
    color: var(--qb-text-soft);
}

.app-footer-links a:hover,
.app-footer-records a:hover {
    color: var(--qb-brand);
}

.app-footer-version {
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.card {
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-lg);
    background: var(--qb-surface);
    box-shadow: var(--qb-shadow-sm);
    padding: 18px 18px 16px;
    min-width: 0;
}

.stack {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.form-full {
    grid-column: 1 / -1;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.code-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    min-height: 280px;
}

.form-row {
    margin-bottom: 12px;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.form-section {
    border: 1px solid #e7edf8;
    border-radius: 10px;
    background: #fbfdff;
    padding: 12px;
    margin-bottom: 12px;
}

.form-section-title {
    margin: 0 0 10px;
    font-size: 15px;
    color: #22314f;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #384966;
    font-size: 14px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    font: inherit;
    padding: 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    color: var(--qb-text);
}

/* 表单控件基线：统一文本输入与下拉高度，避免视觉不齐 */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.tag-input):not(.number-input-compact),
select {
    min-height: 40px;
    height: 40px;
    padding: 8px 10px;
    line-height: 1.35;
}

select[multiple] {
    height: auto;
    min-height: 148px;
    padding: 6px;
}

select[multiple] option {
    padding: 5px 6px;
}

.segmented-control {
    min-height: 40px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #eef2ff;
    padding: 3px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
}

.segmented-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented-option:hover {
    background: #dbeafe;
    color: #1e40af;
}

.segmented-option.is-active {
    background: var(--qb-brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(47, 93, 215, 0.35);
}

.segmented-option.is-active:hover {
    background: var(--qb-brand-strong);
}

.type-dot-indicator {
    display: none;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--qb-brand);
    vertical-align: middle;
}

.session-draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 14px;
}

.session-draft-banner.is-hidden {
    display: none;
}

.session-draft-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.form-row textarea,
.form-grid textarea {
    min-height: 96px;
    line-height: 1.5;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #7fa1ec;
    box-shadow: 0 0 0 3px rgba(64, 108, 214, 0.2);
}

label:has(+ input[required]):not(:has(.required))::after,
label:has(+ select[required]):not(:has(.required))::after,
label:has(+ textarea[required]):not(:has(.required))::after,
label:has(input[required]):not(:has(.required))::after,
label:has(select[required]):not(:has(.required))::after,
label:has(textarea[required]):not(:has(.required))::after,
.required::after {
    content: " *";
    color: var(--qb-error-text);
    font-weight: 700;
}

.required::after {
    content: "";
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 9px;
    padding: 9px 13px;
    cursor: pointer;
    background: var(--qb-brand);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.06s ease, opacity 0.16s ease, background-color 0.16s ease;
}

button:hover,
.btn:hover {
    opacity: 0.95;
}

button:active,
.btn:active {
    transform: translateY(1px);
}

button[disabled],
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.is-loading {
    position: relative;
    pointer-events: none;
}

.is-loading::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-top-color: #fff;
    border-radius: 999px;
    display: inline-block;
    animation: qb-spin 0.8s linear infinite;
}

.flash {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.flash.success {
    background: var(--qb-success-bg);
    color: var(--qb-success-text);
    border-color: #86efac;
}

.flash.error {
    background: var(--qb-error-bg);
    color: var(--qb-error-text);
    border-color: #fca5a5;
}

#qb-toast-stack {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 24px));
    pointer-events: none;
}

.qb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--qb-shadow-md);
    padding: 10px 12px;
    color: var(--qb-text);
}

.qb-toast.success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.qb-toast.error {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.qb-toast.info {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.qb-toast-close {
    border: 0;
    background: transparent;
    color: currentColor;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

@keyframes qb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.muted {
    color: var(--qb-text-soft);
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.section-head h2,
.section-head h3 {
    margin: 0;
}

.section-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-header-main h2,
.page-header-main h3 {
    margin: 0;
}

.page-header-main .head-note {
    margin-top: 6px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    justify-content: flex-end;
}

.page-header--flat {
    padding: 0;
    border: none;
    margin-bottom: 12px;
}

.ui-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--qb-border);
}

.ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.ui-tab:hover {
    background: #e0edff;
    color: #1d4ed8;
}

.ui-tab.is-active {
    background: var(--qb-brand);
    color: #fff;
}

.ui-tab-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ui-tab-group-label {
    margin-right: 2px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.ui-list-card {
    display: block;
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-list-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.ui-list-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ui-list-card-title {
    margin: 0;
    color: var(--qb-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.ui-meta-line {
    color: var(--qb-text-soft);
    font-size: 12px;
}

.ui-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.ui-relation-tag,
.ui-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ui-relation-tag.is-class {
    background: #eff6ff;
    color: #1d4ed8;
}

.ui-relation-tag.is-mentorship {
    background: #f0fdf4;
    color: #15803d;
}

.ui-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ui-toolbar-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.pagination-page:hover {
    border-color: #bfdbfe;
    color: #334155;
}

.pagination-page.is-active {
    border-color: var(--qb-brand);
    background: var(--qb-brand);
    color: #fff;
}

.pagination-page[aria-current="page"] {
    border-color: var(--qb-brand);
    background: var(--qb-brand);
    color: #fff;
}

.pagination-page[aria-current="page"]::after {
    content: "（当前页）";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pagination-page.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.block-head-main h3,
.block-head-main h4 {
    margin: 0;
}

.block-head-main .head-note {
    margin-top: 6px;
}

.block-head-actions {
    margin-top: 2px;
    justify-content: flex-end;
}

.head-note {
    margin: 6px 0 0;
    color: var(--qb-text-soft);
    font-size: 13px;
}

.chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid #cdd8ea;
    background: #f8fbff;
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 120px;
}

.chip .k {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.chip .v {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #22314f;
}

.table-wrap {
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.table-ui {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px;
}

.insight-trend-table {
    min-width: 680px;
}

.insight-side-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.insight-side-table th,
.insight-side-table td {
    white-space: normal;
    word-break: break-word;
}

.insight-side-table th:nth-child(1),
.insight-side-table td:nth-child(1) {
    width: 72px;
}

.insight-side-table th:nth-child(2),
.insight-side-table td:nth-child(2) {
    width: 88px;
}

.insight-side-table th:nth-child(3),
.insight-side-table td:nth-child(3) {
    width: 84px;
}

.table-ui th {
    text-align: left;
    background: #f3f6fc;
    color: #334155;
    border-bottom: 1px solid var(--qb-border);
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.table-ui td {
    border-bottom: 1px solid #edf1f7;
    padding: 10px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
}

.table-ui tbody tr:nth-child(even) td {
    background: #fcfdff;
}

.table-ui td .muted {
    font-size: 12px;
    line-height: 1.5;
}

.table-ui tr:hover td {
    background: #f9fbff;
}

.table-ui tr:last-child td {
    border-bottom: 0;
}

.table-empty {
    margin-top: 10px;
}

.w-checkbox {
    width: 46px;
}

.metric-key {
    width: 220px;
}

.trend-line {
    margin-top: 6px;
}

.tag-pill {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 4px;
    padding: 2px 8px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
}

.dimension-chip-knowledge {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.dimension-chip-ability {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.dimension-chip-application {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.dimension-chip-ideology {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.tag-free {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
}

.inline-form {
    display: inline-block;
    margin-left: 0;
}

.inline-form-flex {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.action-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.action-row-compact {
    gap: 6px;
}

.database-action-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.database-ai-copy-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-copy-secret-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #b45309;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.ai-copy-secret-hint:focus {
    outline: 2px solid rgba(245, 158, 11, 0.32);
    outline-offset: 2px;
}

.fixed-help-tooltip {
    position: fixed;
    z-index: 10000;
    display: none;
    max-width: min(300px, calc(100vw - 20px));
    padding: 8px 10px;
    border-radius: 8px;
    background: #111827;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.fixed-help-tooltip.is-visible {
    display: block;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-muted {
    background: #f1f5f9;
    color: #64748b;
}

.badge-info {
    background: #eff6ff;
    color: #1d4ed8;
}

.teacher-admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.teacher-admin-metric {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px;
}

.teacher-admin-metric span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.teacher-admin-metric strong {
    display: block;
    margin-top: 4px;
    color: #16233d;
    font-size: 26px;
    line-height: 1.1;
}

.teacher-admin-table td {
    vertical-align: top;
}

.teacher-table-wrap {
    overflow: visible;
}

.teacher-table-wrap .table-ui {
    min-width: 0;
}

.teacher-table-wrap td:last-child,
.teacher-table-wrap th:last-child {
    width: 72px;
    text-align: right;
}

.teacher-class-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.teacher-class-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid #cde7df;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
}

.teacher-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.math-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.7;
    -webkit-overflow-scrolling: touch;
}

.qb-math-display-wrap {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.math-content p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.math-content .katex-display {
    display: block;
    width: max-content;
    min-width: 100%;
    margin: 0.75em 0;
    padding-bottom: 4px;
    overflow: visible;
}

.math-content .katex-display > .katex {
    display: inline-block;
    min-width: max-content;
    text-align: left;
}

.math-content .katex {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
    -webkit-overflow-scrolling: touch;
}

.math-content .katex .katex-html {
    display: inline-block;
    width: auto;
    max-width: none;
    min-width: max-content;
    overflow: visible;
}

.math-content .katex-display > .katex .katex-html {
    overflow: visible;
}

.math-content .katex .katex-mathml {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
}

.math-content .katex semantics,
.math-content .katex math {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.math-content .katex .katex-mathml * {
    display: none;
}

.question-stem-list-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    min-width: 0;
    max-width: 34rem;
    overflow: hidden;
}

.question-stem-list-preview p {
    margin: 0;
}

.questions-page {
    display: grid;
    gap: 14px;
}

.questions-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.9);
}

.questions-toolbar-main {
    min-width: 0;
}

.questions-toolbar-main h2 {
    margin: 0;
}

.questions-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.questions-toolbar-more {
    position: relative;
}

.questions-toolbar-more > summary {
    list-style: none;
    cursor: pointer;
}

.questions-toolbar-more > summary::-webkit-details-marker {
    display: none;
}

.questions-toolbar-more-panel {
    position: absolute;
    z-index: 40;
    right: 0;
    top: calc(100% + 6px);
    min-width: 148px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.questions-toolbar-more-panel a {
    display: block;
    border-radius: 7px;
    padding: 8px 10px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.questions-toolbar-more-panel a:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.questions-workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.questions-filter-sidebar {
    position: sticky;
    top: 76px;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    min-width: 0;
}

.questions-filter-form {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.questions-filter-title h3 {
    margin: 0;
    font-size: 16px;
}

.questions-filter-primary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.questions-filter-primary .form-row {
    margin-bottom: 0;
}

.questions-more-filter {
    margin-top: 0;
    border-top: 1px solid #e8eef8;
}

.questions-more-filter > summary {
    list-style: none;
    min-height: 38px;
    padding-top: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
}

.questions-more-filter > summary::-webkit-details-marker {
    display: none;
}

.questions-more-filter > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.questions-more-filter[open] > summary::before {
    transform: rotate(45deg);
}

.questions-more-filter-count {
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 1px 7px;
    font-size: 12px;
}

.questions-tag-filter-row {
    grid-column: auto;
}

.questions-filter-inline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.questions-filter-inline-tags .tag-chip {
    margin: 0;
    max-width: 100%;
}

.questions-filter-inline-tags .tag-chip span:last-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questions-tag-match-control {
    min-width: 0;
}

.questions-filter-annotation {
    display: grid;
    gap: 8px;
}

.annotation-filter-row {
    gap: 2px;
}

.annotation-filter-row > label {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

.annotation-filter-row .tag-editor-wrap {
    padding: 4px 6px;
    min-height: 34px;
    gap: 4px;
}

.annotation-filter-row .tag-input {
    min-width: 100px;
    flex: 1 0 100px;
    padding: 2px 4px;
    font-size: 13px;
}

.annotation-filter-row .tag-chip {
    padding: 1px 7px;
    font-size: 12px;
}

.questions-filter-annotation + .questions-tag-match-control {
    margin-top: 8px;
}

.questions-filter-grid {
    grid-template-columns: 1fr;
    align-items: start;
    margin-top: 8px;
    gap: 10px;
}

.questions-filter-form .form-row {
    margin-bottom: 0;
}

.questions-filter-submit {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e8eef8;
    background: #fff;
}

.questions-list-panel {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.questions-overview-card .stat-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.questions-overview-card .stat-card {
    padding: 10px 12px;
}

.questions-overview-card .stat-value {
    font-size: 20px;
}

.questions-overview-card .chip {
    min-width: 92px;
    padding: 6px 9px;
    border-radius: 999px;
}

.questions-overview-card .chip .k,
.questions-overview-card .chip .v {
    display: inline;
    margin: 0;
    font-size: 12px;
}

.questions-overview-card .chip .v {
    margin-left: 6px;
    font-size: 13px;
}

.questions-overview-card,
.questions-bulk-card,
.questions-list-card {
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
}

.questions-overview-card {
    padding: 12px 14px;
}

.questions-overview-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.questions-overview-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.questions-overview-total strong {
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
}

.questions-overview-groups {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
}

.questions-overview-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.questions-overview-group-stat {
    color: #64748b;
}

.questions-overview-group-label {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.questions-overview-items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.questions-overview-items a,
.questions-overview-items span {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    padding: 2px 8px;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.questions-overview-items a:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.questions-overview-items a.is-active {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #3730a3;
    font-weight: 500;
}

.questions-bulk-card {
    padding: 0;
    overflow: visible;
}

.questions-list-card {
    padding: 0;
    min-width: 0;
    overflow: visible;
}

.questions-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #edf2f7;
}

.questions-list-title {
    min-width: 0;
}

.questions-list-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.questions-list-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

.questions-list-meta-line strong {
    color: #0f172a;
    font-size: 14px;
}

.questions-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 16px;
    border-bottom: 1px solid #edf2f7;
    background: #fbfdff;
}

.questions-overview-details {
    position: relative;
    min-width: 0;
    margin: 0;
}

.questions-overview-details > summary {
    list-style: none;
    cursor: pointer;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    line-height: 30px;
    white-space: nowrap;
}

.questions-overview-details > summary::-webkit-details-marker {
    display: none;
}

.questions-overview-details > summary::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}

.questions-overview-details[open] > summary::after {
    transform: translateY(2px) rotate(225deg);
}

.questions-insights-details {
    border-bottom: 1px solid #edf2f7;
}

.questions-insights-details:not([open]) {
    display: none;
}

.questions-insights-details > summary {
    display: none;
}

.questions-distribution-panel {
    display: grid;
    gap: 8px;
    padding: 10px 16px 12px;
    background: #f8fbff;
    animation: questionsInsightsIn 0.16s ease-out;
}

@keyframes questionsInsightsIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.questions-insight-block {
    min-width: 0;
}

.questions-insight-block h4 {
    margin: 0 0 5px;
    color: #334155;
    font-size: 13px;
    line-height: 1.25;
}

.questions-insight-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
}

.questions-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 36px;
}

.questions-insight-row {
    min-height: 22px;
    display: grid;
    grid-template-columns: max-content 40px minmax(84px, 160px);
    align-items: center;
    gap: 5px;
    color: #475569;
    font-size: 12px;
}

.questions-insight-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questions-insight-row strong {
    color: #0f172a;
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.questions-insight-bar {
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.questions-insight-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #93c5fd;
}

.questions-compact-list,
.questions-quality-badges {
    display: grid;
    gap: 4px;
}

.questions-quality-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #e8eef8;
}

.questions-quality-strip h4 {
    margin: 0;
    color: #334155;
    font-size: 13px;
    white-space: nowrap;
}

.questions-quality-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.questions-quality-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1;
}

.questions-quality-badge i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
    flex: 0 0 auto;
}

.questions-quality-badge.is-warning i {
    background: #f59e0b;
}

.questions-quality-badge.is-danger i {
    background: #ef4444;
}

.questions-quality-badge.is-muted i {
    background: #64748b;
}

.questions-quality-badge b {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.questions-quality-badge strong {
    color: #0f172a;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.questions-quality-empty {
    color: #64748b;
    font-size: 12px;
}

.questions-bulk-toolbar {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.questions-bulk-toolbar.is-visible {
    display: flex;
}

.questions-bulk-panel {
    padding: 12px 16px;
    border-bottom: 1px solid #edf2f7;
    background: #f8fbff;
}

.questions-bulk-card > summary {
    list-style: none;
    min-height: 52px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.questions-bulk-card > summary::-webkit-details-marker {
    display: none;
}

.questions-bulk-card > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.questions-bulk-card[open] > summary {
    border-bottom: 1px solid #e2e8f0;
}

.questions-bulk-card[open] > summary::after {
    transform: rotate(225deg);
}

.questions-bulk-card form {
    padding: 14px 16px 16px;
}

.questions-bulk-grid {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) minmax(140px, 0.8fr) minmax(140px, 0.8fr) minmax(220px, 1.25fr) auto auto;
    gap: 8px;
    align-items: end;
}

.questions-bulk-grid .form-row {
    margin-bottom: 0;
}

.questions-bulk-grid .form-row label {
    margin-bottom: 4px;
    font-size: 12px;
}

.questions-bulk-grid select,
.questions-bulk-grid input {
    min-height: 38px;
}

.questions-bulk-grid .tag-editor-wrap {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    padding: 3px 8px;
}

.questions-bulk-grid .tag-chip {
    flex: 0 0 auto;
    max-width: 150px;
}

.questions-bulk-grid .tag-input {
    min-width: 150px;
    flex: 1 0 150px;
    min-height: 30px;
    height: 30px;
    padding: 0 4px;
}

.questions-bulk-grid .source-input-wrap {
    position: relative;
}

.questions-bulk-grid .source-suggestions,
.questions-bulk-grid .tag-suggestions {
    z-index: 60;
}

.questions-bulk-check {
    min-height: 40px;
    margin: 0;
    white-space: nowrap;
    align-self: end;
    display: inline-flex;
    align-items: center;
}

.questions-bulk-apply {
    margin: 0;
    align-self: end;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.questions-bulk-apply button {
    min-height: 40px;
}

.questions-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.questions-table-wrap .table-ui {
    min-width: 940px;
    table-layout: fixed;
}

.questions-table-wrap th:nth-child(1),
.questions-table-wrap td:nth-child(1) {
    width: 44px;
}

.questions-table-wrap th:nth-child(2),
.questions-table-wrap td:nth-child(2) {
    width: auto;
}

.questions-table-wrap th:nth-child(3),
.questions-table-wrap td:nth-child(3) {
    width: 112px;
}

.questions-table-wrap th:nth-child(4),
.questions-table-wrap td:nth-child(4) {
    width: 168px;
}

.question-list-main-cell {
    min-width: 0;
}

.question-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    color: #475569;
    font-size: 12px;
}

.question-list-meta span {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    padding: 1px 7px;
}

.question-list-stem {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: var(--qb-text);
    cursor: pointer;
    display: block;
}

.question-list-stem:hover .question-stem-list-preview {
    color: var(--qb-brand);
}

.question-list-stem:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 3px;
    border-radius: 6px;
}

.question-list-difficulty {
    margin-top: 5px;
}

.question-list-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 4px;
}

.question-list-source-line {
    color: #64748b;
    font-size: 12px;
}

.question-list-source-line span {
    white-space: nowrap;
}

.question-list-annotation-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.question-list-annotation-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.question-list-annotation-label {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.question-list-annotation-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.question-list-annotation-chips .tag-chip {
    flex: 0 0 auto;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-list-annotation-more {
    cursor: help;
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.question-list-status-cell {
    white-space: nowrap;
}

.qb-rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.qb-rich-text a {
    color: #1d4ed8;
    word-break: break-all;
}

.qb-rich-text .qb-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 8px 0;
}

.qb-rich-text table {
    border-collapse: collapse;
    min-width: 480px;
    width: max-content;
    max-width: 100%;
    background: #fff;
}

.qb-rich-text table th,
.qb-rich-text table td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.qb-rich-text table th {
    background: #f8fafc;
}

.insight-chart {
    margin-bottom: 10px;
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    padding: 10px;
    background: linear-gradient(180deg, #ffffff 0%, var(--qb-surface-soft) 100%);
}

.insight-chart-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.insight-chart-toolbar-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.insight-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.insight-chart-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #334155;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.insight-chart-btn:hover {
    background: #f8fafc;
}

.insight-chart-btn.is-active {
    background: #e7efff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.insight-chart .chart-canvas {
    width: 100%;
    min-height: 200px;
}

.insight-empty {
    position: relative;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    padding: 14px 16px 14px 46px;
    font-size: 13px;
    line-height: 1.6;
}

.insight-empty::before {
    content: "i";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    background: #fff;
}

.insight-empty-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insight-empty-actions a {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    color: #334155;
    background: #fff;
}

.insight-empty-actions a:hover {
    background: #f1f5f9;
}

.link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.link-row .sep {
    color: #94a3b8;
}

.table-title {
    margin: 4px 0 8px;
}

.preview-box {
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.panel-soft {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    padding: 10px;
}

.quick-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-answer-block {
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.review-image {
    max-width: 320px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.number-input-compact {
    width: 100%;
    max-width: 150px;
}

.tag-editor-wrap {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tag-suggest-wrap {
    position: relative;
}

.tag-chip-list {
    display: contents;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 13px;
}

.tag-chip button {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

/* AI 回填的未知名称（不在当次候选中）的轻量“新”标识 */
.tag-chip-new-badge {
    flex: none;
    font-size: 11px;
    line-height: 1;
    color: #b45309;
    background: #fef3c7;
    border-radius: 999px;
    padding: 2px 6px;
}

.tag-input {
    width: auto;
    min-width: 180px;
    flex: 1 0 180px;
    border: 0;
    outline: none;
    padding: 4px 6px;
    font-size: 14px;
}

.question-filter-tag-toggle {
    width: 100%;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: var(--qb-text);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.question-filter-tag-toggle:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.question-filter-tag-arrow {
    width: 7px;
    height: 7px;
    border-right: 2px solid #475569;
    border-bottom: 2px solid #475569;
    transform: rotate(45deg);
    flex: 0 0 auto;
    margin-top: -3px;
}

.question-filter-panel {
    padding: 10px;
    max-height: 280px;
}

.question-filter-panel-section + .question-filter-panel-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #edf2f7;
}

.question-filter-selected-panel-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.question-filter-selected-panel-inner .tag-chip {
    margin: 0;
    max-width: 100%;
}

.question-filter-panel-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 10px;
}

.question-filter-suggestions {
    margin-top: 8px;
    display: grid;
    gap: 2px;
    max-height: 160px;
    overflow: auto;
}

.question-filter-suggestions .tag-suggestion-item {
    border-radius: 8px;
}

.tag-suggestions {
    margin-top: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    max-height: 180px;
    overflow: auto;
    display: none;
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.source-form-row {
    position: relative;
}

.source-input-wrap {
    position: relative;
}

.source-suggestions {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin-top: 0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.tag-suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-suggestion-category {
    flex: 0 0 auto;
    min-width: 36px;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.78;
}

.tag-suggestion-category::after {
    content: " ·";
}

.tag-suggestion-item:hover,
.tag-suggestion-item.active {
    background: #eef2ff;
}

.tag-suggestion-item.is-current {
    color: #4338ca;
    font-weight: 600;
}

.tag-suggestion-item mark {
    background: #fde68a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.tag-quick {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-quick button {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
}

.tag-quick button.dimension-chip-knowledge { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.tag-quick button.dimension-chip-ability { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.tag-quick button.dimension-chip-application { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.tag-quick button.dimension-chip-ideology { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.tag-quick button.tag-free { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }

.hotkey-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

.hotkey-hint code {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 12px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-row input[type="checkbox"] {
    width: auto;
}

.checkbox-list {
    display: grid;
    gap: 8px;
}

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

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d9e2f2;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
}

.checkbox-line input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}

.checkbox-line span {
    min-width: 0;
    color: #1e293b;
    font-weight: 650;
}

.checkbox-line:hover {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.checkbox-list.is-disabled .checkbox-line {
    opacity: 0.72;
    cursor: not-allowed;
}

.inline-help {
    margin-top: 4px;
    font-size: 12px;
}

.choice-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #eef2f7;
    border-left: 2px solid transparent;
}

.choice-option-item:last-child {
    border-bottom: none;
}

/* 正确答案选中行：极浅中性底提示，不用左侧强调线或强烈背景色 */
.choice-option-item:has(.choice-option-toggle input:checked) {
    background: #f8fafc;
}

/* mirror wrapper 取代原 input 成为 flex 项，需撑满剩余宽度 */
.choice-option-item .qb-mathwrap {
    flex: 1;
}

/* 填空答案行同理：wrapper 是 flex 项，撑满标签与 x² 之间的剩余宽度 */
.fill-slot-row .qb-mathwrap {
    flex: 1;
    min-width: 0;
}

.fill-slot-row .qb-mathwrap > input {
    width: 100%;
    box-sizing: border-box;
}

.choice-option-label {
    font-weight: 700;
    color: #475569;
    min-width: 20px;
    text-align: center;
}

.choice-option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 24px;
    /* 全局 label 带 6px 下边距，会把字母块在 align-items:center 的 flex 行内
       向上顶（分布盒 40px 恰等于输入框高度，tile 顶到输入框顶边）；选项行内归零 */
    margin: 0;
}

/* 单选/多选：原生 radio/checkbox 视觉隐藏但保留键盘可达，字母块本身即答案按钮 */
.choice-option-toggle input {
    width: auto;
}

.choice-option-toggle input[type="radio"],
.choice-option-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-letter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* 多选：圆角矩形字母 tile（toggle），与单选正圆按钮同体系 */
.choice-letter-btn--multi {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.choice-option-toggle:hover input:not(:checked) + .choice-letter-btn {
    background: #eff6ff;
    border-color: #93c5fd;
}

.choice-option-toggle input:checked + .choice-letter-btn {
    background: var(--qb-brand, #2563eb);
    border-color: var(--qb-brand, #2563eb);
    color: #fff;
}

.choice-option-toggle input:focus-visible + .choice-letter-btn {
    outline: 2px solid var(--qb-brand, #2563eb);
    outline-offset: 2px;
}

/* 选项行：字母块本身就是选项标识（单选/多选皆然），隐藏左侧独立字母 */
.choice-option-item:has(> .choice-option-toggle:not(.is-hidden)) .choice-option-label {
    display: none;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.btn-icon:hover {
    background: #fee2e2;
    color: #991b1b;
}

.analysis-editor {
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    line-height: 1.6;
    font: inherit;
    color: var(--qb-text);
    white-space: pre-wrap;
}

.analysis-editor:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

.analysis-editor:focus {
    outline: none;
    border-color: var(--qb-brand);
}

.option-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: middle;
    margin: 0 2px;
    user-select: none;
    cursor: default;
}

.qb-option-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    margin: 0 1px;
}

.formula-toolbar-sep {
    width: 1px;
    height: 20px;
    background: #cbd5e1;
    margin: 0 4px;
}

.solution-editor-block {
    margin-bottom: 16px;
}

.solution-editor-block.is-regular {
    background: transparent;
}

.solution-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.solution-editor-title {
    font-size: 14px;
    font-weight: 700;
    color: #16233d;
}

.solution-editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.solution-editor-actions .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

.solution-editor-content {
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    line-height: 1.6;
    font: inherit;
    color: var(--qb-text);
    white-space: pre-wrap;
}

/* 题干 contenteditable 编辑器：与 solution 编辑器同视觉（壳内无框版由下方 shell 规则提供） */
.stem-editor-content {
    min-height: 96px;
    padding: 10px;
    line-height: 1.6;
    font: inherit;
    color: var(--qb-text);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.stem-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

.stem-editor-content:focus {
    outline: none;
}

.solution-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

.solution-editor-content:focus {
    outline: none;
    border-color: var(--qb-brand);
}

.solution-editor-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    line-height: 1.6;
    font: inherit;
    color: var(--qb-text);
    resize: vertical;
}

.solution-editor-textarea:focus {
    outline: none;
    border-color: var(--qb-brand);
}

.solution-editor-textarea.is-hidden,
.solution-editor-content.is-hidden {
    display: none;
}

/* ---------------- Editor Shell：字段标题 → 壳[工具栏 + 分隔线 + 编辑框] ----------------
   题干 / 解析 / 提示统一视觉：壳画唯一一圈边框，编辑框不再自带边框，
   focus 由壳 :focus-within 提供单层 ring；公式面板展开在壳之外（qb_formula_editor.js 锚定）。 */

.qb-editor-shell {
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.qb-editor-shell:focus-within {
    border-color: var(--qb-brand);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

.qb-editor-shell .formula-toolbar {
    margin-top: 0;
    padding: 4px 6px;
    gap: 2px;
    background: #f8fafc;
    border-radius: var(--qb-radius-sm) var(--qb-radius-sm) 0 0;
}

.qb-editor-divider {
    height: 1px;
    background: #eef2f7;
}

.qb-editor-shell textarea,
.qb-editor-shell .solution-editor-content,
.qb-editor-shell .solution-editor-textarea,
.qb-editor-shell .analysis-editor,
.qb-editor-shell .stem-editor-content {
    border: 0;
    border-radius: 0;
    background: #fff;
}

/* 只能纵向 resize：壳宽不变；contenteditable 用纯 CSS resize（需 overflow 非 visible） */
.qb-editor-shell textarea {
    resize: vertical;
}

.qb-editor-shell .solution-editor-content {
    resize: vertical;
    overflow: auto;
}

.qb-editor-shell .stem-editor-content {
    resize: vertical;
    overflow: auto;
}

.qb-editor-shell textarea:focus,
.qb-editor-shell .solution-editor-content:focus,
.qb-editor-shell .solution-editor-textarea:focus,
.qb-editor-shell .analysis-editor:focus,
.qb-editor-shell .stem-editor-content:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

/* 选项行末的公式按钮（icon-only ghost，与工具栏同高；图标为共享 .qb-math-icon） */
.qb-option-formula-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.qb-option-formula-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.qb-option-formula-btn.is-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.qb-option-formula-btn:focus-visible {
    outline: 2px solid var(--qb-brand, #2563eb);
    outline-offset: 1px;
}

/* 公式入口图标（KaTeX 渲染 x^2；外层只控制尺寸/对齐，不碰 KaTeX 内部结构） */
.qb-math-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
}

.qb-math-icon .katex {
    font-size: 1.1em;
}

.formula-toolbar .qb-tb-btn .qb-math-icon {
    color: #64748b;
}

.formula-toolbar .qb-tb-btn:hover .qb-math-icon,
.formula-toolbar .qb-tb-btn.is-active .qb-math-icon {
    color: inherit;
}

/* 公式面板打开时的临时插入锚点：仅存在于 mirror/highlight 层或 contenteditable
   临时节点，绝不写入真实 value。与 is-active/panel 同色系轻强调。 */
.qb-insert-anchor {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 2px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    font-size: 11px;
    line-height: 1.6;
    font-style: normal;
    font-family: inherit;
    white-space: nowrap;
    vertical-align: baseline;
}

.qb-insert-anchor-label {
    font-style: normal;
}

.qb-insert-anchor-dots {
    display: inline-flex;
    letter-spacing: 1px;
}

.qb-insert-anchor-dots i {
    font-style: normal;
    animation: qbAnchorDot 1.4s ease-in-out infinite;
}

.qb-insert-anchor-dots i:nth-child(2) {
    animation-delay: 0.22s;
}

.qb-insert-anchor-dots i:nth-child(3) {
    animation-delay: 0.44s;
}

@keyframes qbAnchorDot {
    0%, 55%, 100% { opacity: 0.2; }
    25% { opacity: 1; }
}

/* ---------------- 编辑器 token 共享骨架 ----------------
   三类统一：结构占位（mirror 内 {{blank}}/{{choice}} ghost chip，最安静）、
   语义引用（.option-token，略偏主题色）、临时锚点（.qb-insert-anchor，最偏主题色
   并保留三点动画）。共性：inline 流内、小圆角、一致 padding、无阴影。
   mirror 内 token 高度受所在行盒约束（行高对齐 caret 的前提），以 inset 收边。 */
.qb-editor-token {
    position: relative;
    display: inline;
    white-space: nowrap;
}

.qb-editor-token-ghost {
    visibility: hidden;
}

.qb-editor-token-label {
    position: absolute;
    inset: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 3px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* contenteditable 内的实体 token chip（题干/解析共用）：属性限定，mirror 内
   ghost 包装（无 contenteditable 属性）不受影响；单击选中态由 .is-active 表达 */
.qb-editor-token[contenteditable="false"] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    cursor: default;
}

/* 题干 choice chip：内部显示与 preview 同口径（qb_rich_text.js 的
   qb-placeholder-choice / QBQuestionPlaceholderDisplay）——（　　）空位。
   默认尽量像正文括号空位：透明底/透明边框、继承正文字号、字重稍重、
   min-width 撑出空位宽度；hover 给很浅 token 背景；选中反馈仍由
   下方 .is-active outline 表达。属性限定避免影响 mirror 内 ghost chip。 */
.qb-editor-token--choice[contenteditable="false"] {
    background: transparent;
    border-color: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    min-width: 3.5em;
    padding: 0 2px;
    justify-content: center;
}

.qb-editor-token--choice[contenteditable="false"]:hover {
    background: #f1f5f9;
}

/* 题干 blank chip：内部为空，外观与 preview 的 qb-placeholder-blank 同口径
   ——透明底、仅底部 2px 深色下划线、5.5em 空位宽度（inherit 字号使 em
   宽度随正文缩放，与 preview 一致） */
.qb-editor-token--blank[contenteditable="false"] {
    background: transparent;
    border: none;
    border-bottom: 2px solid #475569;
    border-radius: 0;
    min-width: 5.5em;
    height: 1.3em;
    padding: 0;
    font-size: inherit;
}

.qb-editor-token.is-active,
.option-token.is-active {
    outline: 2px solid var(--qb-brand, #2563eb);
    outline-offset: 1px;
}

/* ⓘ 轻量 tooltip：视觉复用 fixed-help-tooltip（深色底、12px、圆角 8），纯 CSS */
.qb-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
    cursor: help;
    user-select: none;
}

.qb-tip:hover,
.qb-tip:focus-visible {
    color: #64748b;
}

.qb-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    border-radius: 8px;
    background: #111827;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    z-index: 80;
}

.qb-tip:hover::after,
.qb-tip:focus-visible::after {
    display: block;
}

/* 嵌在工具栏按钮内的 ⓘ：hover/focus 按钮即出提示，ⓘ 自身不可聚焦 */
.formula-toolbar .qb-tb-btn:hover .qb-tip::after,
.formula-toolbar .qb-tb-btn:focus-visible .qb-tip::after {
    display: block;
}

/* 编辑已有公式：原公式范围轻高亮（contenteditable 临时包裹，关闭/插入时移除） */
.qb-anchor-edit {
    background: rgba(37, 99, 235, 0.13);
    border-radius: 2px;
}

/* 选择题选项标题行：label + 右侧整组 AI 入口（窄屏允许换行） */
.choice-options-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.choice-options-label-row .choice-options-ai-row {
    margin-top: 0;
}

/* 右侧预览空题干态 */
#preview_stem.is-empty {
    color: #94a3b8;
}

/* ---------------- 轻量 ghost 工具栏（题目编辑页 opt-in） ---------------- */

.qb-toolbar-ghost {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 6px;
}

.formula-toolbar .qb-tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.formula-toolbar .qb-tb-btn svg {
    flex: none;
    color: #64748b;
}

.formula-toolbar .qb-tb-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.formula-toolbar .qb-tb-btn:hover svg {
    color: #334155;
}

.formula-toolbar .qb-tb-btn.is-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.formula-toolbar .qb-tb-btn.is-active svg {
    color: #2563eb;
}

.formula-toolbar .qb-tb-btn:focus-visible {
    outline: 2px solid var(--qb-brand, #2563eb);
    outline-offset: 1px;
}

.formula-toolbar .qb-tb-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

.formula-toolbar .qb-tb-btn .qb-tb-label {
    white-space: nowrap;
}

/* 解析工具栏中的"选项引用"下拉 */
.qb-option-ref {
    position: relative;
    display: inline-flex;
}

.qb-option-ref > .qb-tb-btn::after {
    content: "▾";
    font-size: 10px;
    margin-left: 1px;
    color: #94a3b8;
}

.qb-option-ref-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 96px;
    max-width: min(320px, 80vw);
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
}

.qb-option-ref-menu.is-open {
    display: block;
}

.qb-option-ref-menu .qb-option-ref-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12.5px;
    color: #334155;
    cursor: pointer;
    text-align: left;
}

.qb-option-ref-menu .qb-option-ref-item:hover {
    background: #f1f5f9;
}

.qb-option-ref-menu .qb-option-ref-item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qb-option-ref-key {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 18px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.qb-option-ref-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
}

.qb-option-ref-empty {
    padding: 6px 8px;
    font-size: 12px;
    color: #94a3b8;
}

/* 字段级 AI 菜单（✨ AI ▾）：ghost 风格、工具栏右侧、轻量下拉 */
.qb-ai-field {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    margin-left: auto;
}

.formula-toolbar .qb-ai-menu-btn {
    color: #7c3aed;
    border: 0;
    background: transparent;
}

.formula-toolbar .qb-ai-menu-btn:hover {
    background: #f5f3ff;
}

.qb-ai-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 60;
    min-width: 120px;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
}

.qb-ai-menu .qb-ai-menu-item {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12.5px;
    color: #334155;
    cursor: pointer;
    text-align: left;
}

.qb-ai-menu .qb-ai-menu-item:hover {
    background: #f5f3ff;
}

.qb-ai-menu .qb-ai-menu-item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qb-ai-field-status {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    max-width: min(360px, 80vw);
    text-align: right;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 2px 6px;
    z-index: 55;
}

.qb-ai-field-status:empty {
    display: none;
}

@media (max-width: 640px) {
    .qb-toolbar-ghost .qb-tb-label {
        display: none;
    }

    .qb-tb-btn {
        padding: 0 7px;
    }

    .qb-option-ref-menu {
        max-width: calc(100vw - 32px);
    }

    .qb-ai-menu {
        right: auto;
        left: 0;
    }
}

.solutions-actions {
    margin-top: 8px;
}

.analysis-bare-ref-warning {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #fed7aa;
    border-radius: var(--qb-radius-sm);
    background: #fff7ed;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.5;
}

.analysis-bare-ref-warning .warning-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.question-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.question-form-layout {
    display: block;
    gap: 16px;
}

.question-form-main-card {
    min-width: 0;
}

.question-form-section {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eef8;
}

.question-form-section:last-of-type {
    border-bottom: none;
}

.question-form-section-head {
    margin-bottom: 14px;
}

.question-form-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #16233d;
    margin: 0;
}

.question-form-section-note {
    font-size: 13px;
    color: #64748b;
    margin: 4px 0 0;
}

/* 教学标注 section 头：标题 + 右侧整体 AI 标注入口（轻量 ghost，与字段 AI 菜单同风格） */
.question-form-section-head--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.question-form-section-head--split .question-form-section-title {
    flex: none;
}

.question-form-section-head--split .qb-ai-field {
    margin-left: 0;
}

.question-form-section-head--split .qb-ai-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #7c3aed;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.question-form-section-head--split .qb-ai-menu-btn:hover {
    background: #f5f3ff;
}

.question-form-section-head--split .qb-ai-menu-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.question-form-section-body .form-row {
    margin-bottom: 10px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.form-grid-2 .form-row {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.ai-draft-compact {
    border: 1px solid #e2e8f0;
    background: #fbfdff;
    margin-top: 14px;
    border-radius: 10px;
}

.ai-draft-compact summary {
    cursor: pointer;
    padding: 10px 12px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ai-draft-compact summary::-webkit-details-marker {
    display: none;
}

.ai-draft-compact-title {
    font-weight: 700;
    color: #334155;
}

.ai-draft-compact-hint {
    font-size: 12px;
    color: #64748b;
}

.ai-draft-compact summary::after {
    content: "▸";
    color: #94a3b8;
    margin-left: auto;
    font-size: 12px;
}

.ai-draft-compact[open] summary::after {
    content: "▾";
}

.ai-draft-compact-body {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
}

.ai-draft-compact .ai-draft-grid {
    grid-template-columns: 1fr;
}

.answer-field-hint {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

.preview-info-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #4b5563;
}

.preview-info-summary span {
    white-space: nowrap;
}

.preview-annotation-summary {
    font-size: 13px;
}

.preview-annotation-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 8px;
}

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

.preview-annotation-label {
    color: #64748b;
    font-size: 12px;
    min-width: 60px;
}

.preview-annotation-values {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.preview-annotation-empty {
    color: #94a3b8;
    font-size: 12px;
}

.question-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eef8;
}

.question-editor-head h2 {
    margin: 0;
}

.question-editor-links,
.question-editor-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.question-editor-links {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
}


.question-form-submitbar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    margin: 18px -18px -18px;
    padding: 12px 18px;
    border-top: 1px solid #e5eaf3;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    justify-content: flex-end;
    box-shadow: 0 -4px 14px rgba(24, 39, 75, 0.06);
}

.question-form-preview-card {
    min-width: 0;
}

/* A3 题目新建/编辑工作台紧凑元数据与题型选择 */
.question-type-section .question-form-section-head {
    margin-bottom: 8px;
}

.question-meta-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
    margin-bottom: 10px;
}

.question-meta-row:last-child {
    margin-bottom: 0;
}

.question-meta-row-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.question-meta-row .form-row {
    margin-bottom: 0;
}

.switch-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.switch-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.true-false-toggle {
    display: inline-flex;
    gap: 8px;
}

.btn-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--qb-border-strong);
    border-radius: 9px;
    padding: 9px 18px;
    cursor: pointer;
    background: #fff;
    color: var(--qb-text);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-toggle:hover {
    background: #f8fafc;
    border-color: #93c5fa;
}

.btn-toggle.is-active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.annotation-summary {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fbfdff;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.annotation-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.annotation-summary-row:last-child {
    margin-bottom: 0;
}

.annotation-summary-label {
    min-width: 64px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.annotation-summary-value {
    font-size: 13px;
    color: #334155;
}

.annotation-edit-toggle {
    margin-bottom: 10px;
}

.annotation-editors {
    display: none;
}

.annotation-editors.is-open {
    display: block;
}

.preview-section {
    margin-bottom: 14px;
}

.preview-section:last-child {
    margin-bottom: 0;
}

.preview-section-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.question-form-preview-card .preview-box {
    min-height: 0;
}

@media (max-width: 768px) {
    .question-meta-row {
        grid-template-columns: 1fr;
    }
}

.question-preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.question-preview-head h3 {
    margin: 0;
}

.review-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-summary-row .chip {
    min-width: 150px;
}

.question-preview-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
}

.question-preview-modal-mask.is-open {
    display: flex;
}

.question-preview-modal {
    width: min(880px, 96vw);
    max-height: 86vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
    padding: 16px;
}

.question-preview-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    white-space: pre-wrap;
}

.question-preview-options li {
    margin-bottom: 6px;
}

.question-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #4b5563;
}

.question-preview-meta span {
    white-space: nowrap;
}

.question-preview-annotation-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.question-preview-annotation-group:last-child {
    margin-bottom: 0;
}

.question-preview-annotation-label {
    flex: 0 0 auto;
    min-width: 64px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.question-preview-annotation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.question-preview-wrong-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 8px;
    font-size: 13px;
}

.question-preview-wrong-stats strong {
    color: #1f2937;
}

.question-preview-wrong-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modal-head h3 {
    margin: 0;
}

/* 通用 Modal（复用于指导学生邀请等） */
.modal {
    width: min(520px, 96vw);
    max-height: 86vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
    padding: 20px;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.mobile-cards {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 10px;
}

.mobile-cards.mobile-only {
    display: none;
}

.mobile-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.mobile-card-title {
    min-width: 0;
    max-width: 100%;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1f2a44;
    overflow-wrap: anywhere;
}

.mobile-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    max-width: 100%;
    gap: 6px;
}

.mobile-card-item {
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    color: #334155;
    overflow-wrap: anywhere;
}

.mobile-card-item .k {
    color: #64748b;
    margin-right: 6px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.insight-top-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 12px;
}

.insight-top-grid--student {
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.72fr);
    align-items: stretch;
}

.insight-top-grid--student > .card {
    height: 100%;
}

.stat-grid--student-hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-filter-form .form-row {
    margin-bottom: 8px;
}

.insight-filter-primary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.insight-filter-secondary {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.insight-filter-secondary .form-row {
    min-width: 170px;
    margin-bottom: 0;
}

.insight-filter-actions {
    margin-left: auto;
}

.insight-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.insight-content-main {
    grid-column: 1;
    min-width: 0;
}

.insight-content-side {
    grid-column: 2;
    min-width: 0;
}

.insight-side-stack {
    grid-column: 2;
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.insight-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.insight-analysis-trend {
    grid-column: 1 / -1;
}

.insight-analysis-weak,
.insight-analysis-highwrong {
    min-width: 0;
}


.stat-card {
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.insight-performance-card {
    background: linear-gradient(130deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
    color: #eff6ff;
    border-color: #3b82f6;
}

.insight-performance-card h3 {
    color: #ffffff;
}

.insight-performance-card .muted {
    color: rgba(239, 246, 255, 0.88);
}

.stat-card-glass {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(191, 219, 254, 0.55);
    backdrop-filter: blur(1px);
}

.stat-card-glass .stat-value {
    color: #ffffff;
}

.stat-label {
    font-size: 12px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
}

.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.break-anywhere { overflow-wrap: anywhere; }
.text-danger { color: #991b1b; }
.text-success { color: #166534; }
.text-warning { color: #b45309; }

.ai-settings-card {
    overflow: hidden;
}

.ai-provider-table-wrap {
    overflow-x: auto;
}

.ai-provider-table {
    table-layout: fixed;
    min-width: 920px;
}

.ai-provider-table th,
.ai-provider-table td {
    vertical-align: middle;
}

.ai-provider-key-col {
    width: 150px;
}

.ai-provider-key-cell {
    min-width: 0;
}

.ai-capability-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.ai-provider-capability-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ai-capability-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.ai-capability-check-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.ai-capability-readonly {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.ai-provider-table tr.disabled-row td {
    opacity: 0.6;
    background: #f8fafc;
}

.ai-provider-table tr.disabled-row td.ai-provider-actions-cell {
    opacity: 1;
    background: transparent;
}

.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-0 { margin-top: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.my-6 { margin: 6px 0; }

.hidden-textarea {
    display: none;
}

.is-hidden {
    display: none;
}

.form-inline-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.w-90 { width: 90px; }
.w-110 { width: 110px; }
.w-180 { width: 180px; }
.w-auto { width: auto; }

.section-split-top {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
}

.scroll-soft {
    max-height: 140px;
    overflow: auto;
}

.chart-block {
    margin-bottom: 10px;
}

.chart-h-230 {
    height: 230px;
}

.chart-h-220 {
    height: 220px;
}

.chart-h-270 {
    height: 270px;
}

.chart-h-340 {
    height: 340px;
}

.status-note {
    margin-top: 8px;
    font-size: 12px;
}

.card-error-soft {
    border: 1px solid #fecaca;
    background: #fff1f2;
}

.list-compact {
    margin: 0;
    padding-left: 20px;
}

.course-tree-page {
    max-width: 100%;
}

.course-tree-header {
    margin-bottom: 12px;
}

.course-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.course-tree-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(520px, 100%);
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.course-tree-search input {
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 24px;
}

.course-tree-search input:focus {
    box-shadow: none;
}

.course-tree-card {
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    overflow: visible;
}

.course-tree-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f7;
}

.course-tree-card-head h3 {
    margin: 0;
    font-size: 16px;
}

.course-tree-card-head .btn {
    flex: 0 0 auto;
}

.course-tree {
    padding: 12px;
}

.course-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.course-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 76px;
    padding: 10px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.course-card:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.course-card.is-selected {
    border-color: #7fa1ec;
    background: #f5f9ff;
    box-shadow: 0 0 0 2px rgba(47, 93, 215, 0.08);
}

.course-card-main {
    min-width: 0;
}

.course-card-main strong,
.course-card-main span,
.course-card-main small {
    display: block;
}

.course-card-main strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.course-card-main span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.course-card-main small {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 12px;
}

.course-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.course-card:hover .course-card-actions,
.course-card.is-selected .course-card-actions,
.course-card-actions:focus-within {
    opacity: 1;
}

.course-detail-panels {
    border-top: 1px solid #edf1f7;
    padding-top: 12px;
}

.course-panel {
    display: none;
}

.course-panel.is-active {
    display: block;
}

.course-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 2px;
}

.course-panel-head h4 {
    margin: 0;
    color: #1e293b;
    font-size: 15px;
}

.course-panel-head p {
    margin: 2px 0 0;
    color: #94a3b8;
    font-size: 12px;
}

.course-panel-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.course-panel-view-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.course-structure-status {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}

.course-panel.is-dirty .course-structure-status {
    color: #b45309;
    font-weight: 700;
}

.chapter-list,
.section-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 2px 0 2px 18px;
}

.chapter-list::before,
.section-list::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 8px;
    width: 1px;
    background: #e5eaf3;
}

.chapter-node,
.section-node {
    position: relative;
}

.chapter-node::before,
.section-node::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 17px;
    width: 10px;
    height: 1px;
    background: #e5eaf3;
}

.chapter-node:last-child::after,
.section-node:last-child::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: #fff;
}

.section-list {
    display: none;
    margin-left: 22px;
}

.chapter-node.is-open > .section-list {
    display: block;
}

.course-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 8px;
    color: #22314f;
    cursor: pointer;
}

.course-tree-row:hover,
.course-tree-row.is-selected {
    background: #f5f9ff;
}

.tree-toggle,
.tree-icon-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    border: 0;
    flex: 0 0 auto;
}

.tree-toggle:hover,
.tree-icon-btn:hover {
    background: #eaf1ff;
}

.tree-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    color: #94a3b8;
    opacity: 0;
    cursor: grab;
    user-select: none;
}

.course-tree-row:hover .tree-drag-handle {
    opacity: 1;
}

.tree-node-main {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.tree-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.section-row .tree-title {
    font-weight: 500;
}

.tree-number {
    color: #475569;
    font-weight: 650;
    white-space: nowrap;
}

.tree-secondary {
    color: #94a3b8;
    font-size: 12px;
    white-space: nowrap;
}

.tree-node-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    flex: 0 0 auto;
}

.course-tree-row:hover .tree-node-actions,
.course-tree-row.is-selected .tree-node-actions,
.tree-node-actions:focus-within {
    opacity: 1;
    transform: translateX(0);
}

.tree-icon-btn {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.tree-icon-btn.danger {
    color: #dc2626;
}

.tree-icon-btn.is-framed {
    border: 1px solid #cdd8ea;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tree-icon-btn.is-framed:hover {
    border-color: #bfdbfe;
}

.tree-icon-btn.danger:hover {
    background: #fef2f2;
}

.tree-action-form {
    display: inline-flex;
    margin: 0;
}

.tree-empty-inline {
    position: relative;
    padding: 6px 0 6px 6px;
}

.tree-popconfirm {
    position: fixed;
    z-index: 10000;
    width: min(280px, calc(100vw - 20px));
    padding: 10px;
    border: 1px solid #dbe3ef;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.tree-popconfirm-title {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.tree-popconfirm-text {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.tree-popconfirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.tree-popconfirm-danger {
    background: #dc2626;
}

.tree-inline-form,
.tree-rename-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: min(420px, 100%);
}

.tree-inline-form {
    margin: 4px 0 4px 6px;
    padding: 5px 7px;
    border-radius: 8px;
    background: #f8fbff;
}

.tree-inline-placeholder {
    color: #94a3b8;
    font-size: 13px;
}

.tree-inline-form input[name="title"],
.tree-rename-form input[name="title"] {
    height: 30px;
    min-width: 220px;
    padding: 5px 8px;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .course-card-actions,
    .tree-drag-handle,
    .tree-node-actions {
        opacity: 1;
    }

    .tree-node-actions {
        transform: none;
    }

    .course-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-panel-actions {
        justify-content: flex-start;
    }

    .course-tree-row {
        align-items: flex-start;
    }
}

.course-tree .is-hidden-by-search {
    display: none;
}

.course-tree .is-search-match > .course-tree-row {
    background: #eef6ff;
}

.chapter-node.is-dragging,
.section-node.is-dragging {
    opacity: 0.45;
}

.course-modal {
    max-width: 560px;
}

.chapter-import-modal {
    max-width: 640px;
}

.chapter-import-modal .form-help-text {
    margin-top: 6px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.chapter-import-preview {
    margin-top: 14px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.chapter-import-preview.hidden {
    display: none;
}

.chapter-import-preview-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: #111827;
}

.chapter-import-preview-subtitle {
    font-weight: 600;
    margin: 14px 0 8px;
    color: #374151;
    font-size: 14px;
}

.chapter-import-preview-subtitle.unmatched-title {
    color: #b45309;
}

.chapter-import-list.unmatched-list,
.chapter-import-list.unmatched-list ul {
    color: #6b7280;
}

.chapter-import-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #374151;
}

.chapter-import-stats strong {
    color: #111827;
}

.chapter-import-list,
.chapter-import-list ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color: #374151;
}

.chapter-import-list li {
    margin: 6px 0;
}

.chapter-import-desc {
    margin-top: 2px;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 13px;
}

.chapter-import-error {
    color: #b91c1c;
    font-size: 14px;
}

.chapter-import-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.chapter-import-file-row input[type="file"].hidden {
    display: none;
}

.chapter-import-file-row label {
    cursor: pointer;
}

.chapter-import-file-name {
    font-size: 13px;
    color: #6b7280;
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.stat-label-strong {
    color: #374151;
    font-weight: 600;
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-warning { background: #b45309; }
.btn-muted { background: #64748b; }
.btn-teal { background: #0f766e; }
.btn-success { background: #16a34a; }

.btn-link {
    border: 0;
    background: none;
    color: var(--qb-brand);
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.4;
    display: inline;
}

.btn-link:hover {
    text-decoration: underline;
    opacity: 1;
}

.btn-link-danger { color: #dc2626; }
.btn-link-warning { color: #b45309; }
.btn-link-success { color: #15803d; }

.btn-sm {
    padding: 8px 11px;
    font-size: 13px;
}

.ai-review-card {
    border: 1px solid #bae6fd;
    border-radius: 10px;
    background: #f0f9ff;
    padding: 12px;
    margin-top: 8px;
}

.ai-review-card.is-hidden {
    display: none;
}

.ai-review-card-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.ai-review-card-title {
    font-weight: 800;
    color: #0f172a;
}

.ai-review-card-meta {
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
}

.ai-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.ai-review-metric {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

.ai-review-metric span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.ai-review-metric strong {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 18px;
}

.ai-review-section {
    margin-top: 8px;
}

.ai-review-section-label {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 3px;
}

.ai-review-section-text {
    white-space: pre-wrap;
    color: #1e293b;
}

.practice-suggestion-box {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
}

.practice-suggestion-label {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}

.practice-suggestion-tags,
.practice-suggestion-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.practice-suggestion-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
}

.practice-suggestion-tag strong {
    color: #0f172a;
    font-size: 15px;
}

.practice-suggestion-steps {
    margin-top: 10px;
}

.practice-suggestion-steps span {
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.ai-review-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.compact-list {
    margin: 0;
    padding-left: 18px;
    color: #1e293b;
}

.compact-list li + li {
    margin-top: 5px;
}

.insight-diagnosis-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 860px) {
    .ai-review-grid,
    .insight-diagnosis-columns {
        grid-template-columns: 1fr;
    }
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5deeb;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.1;
}

.action-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}

.action-btn-success {
    border-color: #86efac;
    color: #166534;
    background: #f0fdf4;
}

.action-btn-warning {
    border-color: #fcd34d;
    color: #92400e;
    background: #fffbeb;
}

.action-btn-danger {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
}

.inline-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.hint-row {
    margin-top: 6px;
    font-size: 12px;
}

.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.max-h-260 { max-height: 260px; }

.question-block {
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.question-block:last-of-type {
    border-bottom: 0;
}

.question-head {
    margin-bottom: 8px;
}

.question-stem {
    margin-bottom: 8px;
}

.qb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.qb-placeholder-blank {
    width: 5.5em;
    min-width: 72px;
    height: 1.1em;
    border-bottom: 2px solid #475569;
    transform: translateY(0.12em);
}

.qb-placeholder-choice {
    min-width: 3.5em;
    color: #0f172a;
    font-weight: 600;
    letter-spacing: 0;
}

.option-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 14px;
}

.option-line .math-content,
.option-line .math-content > p {
    display: inline;
    margin: 0;
}

/* 填空答案行：标签 | 输入框(flex:1) | x² 公式按钮，三者垂直居中；
   标签固定宽度保证各行输入框起点对齐；行间距紧凑成组 */
.fill-slot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fill-slot-label {
    flex: none;
    width: 56px;
    margin-bottom: 0;
}

.fill-answer-input {
    flex: 1;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

.answer-textarea {
    width: 100%;
    box-sizing: border-box;
}

.answer-preview-box {
    margin-top: 4px;
    min-height: calc(1.7em + 14px);
    padding: 6px 8px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #f8fafc;
    box-sizing: border-box;
    white-space: normal;
}

.answer-preview-box.is-empty::before,
.answer-preview-box:empty::before {
    content: "\00a0";
    display: block;
    min-height: 1.7em;
}

.answer-preview-box > :first-child {
    margin-top: 0;
}

.answer-preview-box > :last-child {
    margin-bottom: 0;
}

.answer-preview-box p,
.answer-preview-box ul,
.answer-preview-box ol,
.answer-preview-box blockquote,
.answer-preview-box pre {
    margin-bottom: 0;
}

.ocr-row {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ocr-submit-wrap {
    display: none;
    margin-top: 6px;
}

.ocr-submit-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.ai-ocr-progress {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
}

.ai-ocr-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #1e3a8a;
    font-size: 13px;
}

.qbw-progress-busy::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: qb-spin 0.8s linear infinite;
}

.markdown-import-preview-panel {
    margin: 12px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.markdown-import-page {
    display: grid;
    gap: 14px;
}

.markdown-import-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.9);
}

.markdown-import-head h2 {
    margin: 0;
}

.markdown-import-head p {
    margin: 4px 0 0;
}

.markdown-import-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 14px;
    align-items: start;
}

.markdown-import-input-card,
.markdown-import-preview-card {
    min-width: 0;
}

.qbw-input-tabs {
    display: inline-grid;
    min-height: 34px;
    margin-bottom: 2px;
    padding: 2px;
    border-color: var(--qb-border);
    background: #f1f5fb;
}

.qbw-input-tabs .segmented-option {
    min-height: 26px;
    padding: 3px 14px;
    font-size: 12.5px;
    font-weight: 600;
}

.qbw-input-tabs .segmented-option.is-active {
    box-shadow: 0 1px 3px rgba(47, 93, 215, 0.22);
}

.qbw-input-panel {
    padding-top: 10px;
}

.qbw-input-panel[hidden] {
    display: none;
}

.qbw-input-panel input[type="file"] {
    padding: 6px 8px;
    border-style: dashed;
    background: #fbfdff;
    color: var(--qb-text-soft);
    font-size: 13px;
}

.qbw-input-panel input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 4px 10px;
    border: 1px solid var(--qb-border);
    border-radius: 6px;
    background: #fff;
    color: #384966;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.qbw-template-hint {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pdf-quota-facts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pdf-quota-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #edf1f7;
    border-radius: 7px;
    background: #fbfcfe;
}

.pdf-quota-label {
    color: #94a3b8;
    font-size: 12px;
}

.pdf-quota-value {
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
}

.qbw-input-section h3 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 16px;
}

.qbw-course-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 10px 0 0;
}

.qbw-course-row label {
    margin: 0;
    color: var(--qb-text-soft);
    font-size: 13px;
}

.qbw-course-optional {
    color: #94a3b8;
    font-weight: 500;
}

.qbw-course-row select {
    width: auto;
    min-width: 168px;
    max-width: 240px;
    min-height: 34px;
    height: 34px;
    padding: 5px 10px;
    font-size: 13px;
}

.qbw-course-hint {
    color: #94a3b8;
    font-size: 12px;
}

.qbw-ocr-attachments {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.qbw-ocr-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qbw-ocr-file-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    padding: 3px 6px 3px 3px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: #fbfdff;
}

.qbw-ocr-file-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #eef2f7;
    object-fit: cover;
}

.qbw-ocr-file-order {
    flex: 0 0 auto;
    color: #b6bfcc;
    font-size: 11px;
}

.qbw-ocr-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--qb-text-soft);
    font-size: 12px;
}

.qbw-ocr-file-remove {
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
}

.qbw-ocr-file-remove:hover {
    color: var(--qb-error-text);
    opacity: 1;
}

.qbw-ocr-add {
    flex: 0 0 auto;
}

.qbw-ocr-add[hidden] {
    display: none;
}

.markdown-import-submitbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 -18px -18px;
    padding: 12px 18px;
    border-top: 1px solid #e5eaf3;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    justify-content: flex-end;
}

.markdown-import-preview-card {
    position: sticky;
    top: 84px;
}

.markdown-import-preview-card .markdown-import-preview-panel {
    margin: 0;
    border-color: #dbe4f0;
    background: #fff;
}

.markdown-import-preview-panel > summary {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    color: #0f172a;
    list-style: none;
}

.markdown-import-preview-panel > summary::-webkit-details-marker {
    display: none;
}

.markdown-import-preview-list {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.markdown-import-preview-card {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.markdown-import-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.markdown-import-preview-title {
    font-weight: 700;
    color: #0f172a;
}

.markdown-import-preview-meta {
    color: #64748b;
    font-size: 12px;
}

.markdown-import-preview-section {
    margin-top: 8px;
}

.markdown-import-preview-label {
    margin-bottom: 3px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.markdown-import-preview-tags {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
}

.markdown-import-preview-warn {
    color: #b45309;
    font-size: 12px;
}

.markdown-import-item-preview summary {
    cursor: pointer;
    color: #2563eb;
    font-size: 13px;
}

.practice-filter-grid {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.grid-span-full {
    grid-column: 1 / -1;
}

.picker-shell {
    padding: 14px;
    border: 1px solid #d9e2f2;
    box-shadow: none;
}

.picker-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.picker-filter-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.picker-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.picker-main-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    align-items: start;
}

.picker-panel-head {
    min-height: 42px;
    margin-bottom: 8px;
}

.picker-result-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.picker-label-xs {
    font-size: 12px;
}

.picker-tag-filter {
    min-width: 0;
}

.picker-tag-filter-box {
    min-height: 40px;
    padding: 5px 8px;
    gap: 5px;
}

.picker-tag-filter-selected {
    display: contents;
}

.picker-tag-filter-input {
    min-width: 84px;
    flex: 1 1 84px;
    padding: 2px 4px;
}

.picker-tag-clear {
    border: 0;
    background: transparent;
    color: #1d4ed8;
    padding: 0 2px;
    font-size: 12px;
    cursor: pointer;
    align-items: center;
}

.picker-tag-clear:hover {
    text-decoration: underline;
}

.picker-title-xs {
    color: #16233d;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

.picker-scroll-box {
    max-height: 580px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
}

.picker-selected-box {
    min-height: 220px;
}

.picker-selected-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.picker-selected-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid #d9e2f2;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.picker-pager {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-lite {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
}

.btn-lite-xs {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 2px 8px;
}

.btn-secondary-xs {
    background: #eef2ff;
    color: #334155;
    border: 1px solid #cfd9ea;
    border-radius: 6px;
    padding: 2px 8px;
}

.btn-lite-green {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 4px 10px;
    font-weight: 800;
}

.btn-lite-green:disabled {
    opacity: 1;
    cursor: default;
}

.btn-lite-blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 4px 10px;
}

.picker-item-row {
    padding: 8px;
    border-bottom: 1px solid #f3f4f6;
}

.picker-selected-item {
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.picker-selected-item.is-drag-over {
    background: #f8fafc;
}

.picker-line-main {
    font-size: 13px;
}

.picker-line-sub {
    font-size: 12px;
}

.transfer-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
}

.transfer-title {
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.transfer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-filter-row {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.insight-filter-field {
    margin: 0;
    min-width: 170px;
}

.insight-filter-compact .insight-filter-row {
    align-items: flex-end;
}

.insight-filter-compact .insight-filter-field {
    min-width: 0;
    width: 100%;
}

.insight-filter-compact .insight-filter-row button {
    width: 100%;
}

.insight-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.insight-overview-label {
    font-size: 12px;
}

.insight-overview-value {
    font-size: 20px;
    font-weight: 600;
}

.progress-track {
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 10px;
    background: #2563eb;
}

.title-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
}

.title-pill-award {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.insight-head-with-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.title-rules-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.title-rules-hero-main {
    min-width: 0;
}

.title-rules-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.title-rule-note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.title-rule-note {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
}

.title-rule-note-title {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.title-rule-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

/* 公开规则页成就区：四态图例 + 成就组卡片（Apple 统一 renderer） */
.title-apple-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}

.title-apple-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--qb-text-soft);
}

.title-ach-item {
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
    padding: 12px 14px;
}

.title-ach-item__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.title-ach-item__name {
    font-weight: 600;
}

.title-ach-item__levels {
    margin-top: 8px;
    border-top: 1px dashed var(--qb-border);
    padding-top: 8px;
}

.title-ach-item__levels summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-text);
    list-style-position: inside;
}

.title-ach-item__levels ul {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.title-ach-item__levels li {
    font-size: 12px;
    color: var(--qb-text-soft);
    line-height: 1.55;
}

/* 管理端规则说明页：全局成就等级图例（整页仅出现一次） */
.ag-legend-levels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 4px 0 20px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fbfdff;
}

.ag-legend-levels__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--qb-text-secondary, #64748b);
}

.ag-legend-levels__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--qb-text, #1e293b);
}

.ag-legend-levels__note {
    font-size: 12px;
    color: var(--qb-text-soft, #94a3b8);
    margin-left: auto;
}

.insight-student-hero {
    border-color: #dbe7ff;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.insight-student-hero-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.insight-student-hero-main {
    flex: 1;
    min-width: 0;
}

.insight-student-hero-main h2 {
    margin: 0;
}

.insight-student-hero-main .muted {
    margin-top: 4px;
}

.insight-student-hero-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
}

.insight-student-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(145deg, #4f8cff, #6952ff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(79, 140, 255, 0.28);
    flex-shrink: 0;
}

.insight-section-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.insight-section-tab {
    border-radius: 999px;
}

.insight-section-tab.is-active {
    background: var(--qb-brand);
    color: #fff;
    border-color: transparent;
}

.insight-panel-hidden {
    display: none;
}

@media (max-width: 960px) {
    .container {
        width: min(1180px, 100% - 20px);
    }

    .container.workspace-wide {
        width: min(1180px, 100% - 20px);
    }

    .app-nav-inner {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .nav-links {
        width: 100%;
        justify-content: flex-start;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.22s ease, opacity 0.18s ease;
    }

    .nav-links.is-open {
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 1;
        margin-top: 8px;
        padding-bottom: 8px;
    }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown > summary {
        display: inline-block;
    }

    .nav-user-menu > summary {
        display: inline-flex;
    }

    .nav-dropdown-panel {
        position: static;
        min-width: 0;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
    }

    .card {
        padding: 14px;
    }

    .title-rules-hero {
        flex-direction: column;
    }

    .title-rules-hero-actions {
        justify-content: flex-start;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        justify-content: flex-start;
    }

    .questions-toolbar {
        flex-direction: column;
    }

    .questions-toolbar-actions {
        justify-content: flex-start;
    }

    .questions-workspace {
        grid-template-columns: 1fr;
    }

    .questions-filter-sidebar {
        position: static;
    }

    .questions-filter-form {
        grid-template-columns: 1fr;
    }

    .questions-filter-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .questions-bulk-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .questions-list-header,
    .questions-list-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .questions-distribution-panel {
        width: 100%;
    }

    .questions-insight-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .questions-filter-primary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .questions-overview-groups,
    .questions-overview-group {
        align-items: flex-start;
    }

    .questions-overview-items {
        justify-content: flex-start;
    }

    .questions-tag-filter-row,
    .questions-bulk-grid .form-row:nth-child(5),
    .questions-bulk-apply {
        grid-column: 1 / -1;
    }

    .questions-overview-card .stat-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .questions-bulk-toolbar {
        justify-content: flex-start;
    }

    .block-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .block-head-actions {
        justify-content: flex-start;
    }

    .question-form-layout {
        display: block;
    }

    .insight-top-grid,
    .insight-content-grid,
    .insight-analysis-grid {
        grid-template-columns: 1fr;
    }

    .insight-top-grid--student {
        grid-template-columns: 1fr;
    }

    .stat-grid--student-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insight-filter-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insight-content-main,
    .insight-content-side,
    .insight-side-stack {
        grid-column: auto;
    }

    .insight-analysis-trend {
        grid-column: auto;
    }

    .insight-student-hero-head {
        flex-wrap: wrap;
    }

    .insight-student-hero-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .insight-section-tab {
        flex: 1 1 calc(50% - 8px);
    }

    .transfer-wrap {
        grid-template-columns: 1fr;
    }

    .transfer-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .question-form-preview-card {
        position: static;
    }

    .question-editor-head,
    .markdown-import-head {
        flex-direction: column;
    }

    .question-form-submitbar,
    .markdown-import-submitbar {
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: -14px;
        justify-content: stretch;
    }

    .question-form-submitbar button,
    .markdown-import-submitbar button {
        flex: 1 1 auto;
    }

    .markdown-import-workspace {
        grid-template-columns: 1fr;
    }

    .markdown-import-preview-card {
        position: static;
    }
}

@media (min-width: 1100px) {
    .question-form-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
        gap: 16px;
        align-items: start;
    }

    .question-form-layout > .card {
        margin-top: 0;
    }

    .question-form-preview-card {
        position: sticky;
        top: 84px;
    }
}

@media (max-width: 768px) {
    .page-main {
        padding: 14px 0 28px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .questions-filter-grid,
    .questions-filter-primary,
    .questions-bulk-grid,
    .questions-overview-card .stat-grid {
        grid-template-columns: 1fr;
    }

    .questions-bulk-grid .form-row:nth-child(5),
    .questions-bulk-apply {
        grid-column: auto;
    }

    .questions-type-grid {
        grid-template-columns: 1fr;
    }

    .questions-quality-strip {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .questions-overview-card .chip {
        min-width: auto;
    }

    .picker-filter-grid,
    .picker-main-grid {
        grid-template-columns: 1fr;
    }

    .picker-filter-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .picker-result-head {
        flex-direction: column;
    }

    .picker-bulk-actions {
        justify-content: flex-start;
    }

    .chip {
        min-width: calc(50% - 8px);
    }

    .table-ui {
        min-width: 640px;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .mobile-cards.mobile-only {
        display: grid;
    }

    .insight-filter-primary {
        grid-template-columns: 1fr;
    }

    .stat-grid--student-hero {
        grid-template-columns: 1fr;
    }

    .insight-filter-secondary {
        align-items: stretch;
    }

    .insight-filter-secondary .form-row {
        min-width: 0;
        width: 100%;
    }

    .insight-filter-actions {
        margin-left: 0;
    }

    .insight-section-tab {
        flex: 1 1 100%;
    }

    .insight-me-page .insight-student-hero-main .muted {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .insight-me-page .chip-row {
        gap: 6px;
    }

    .insight-me-page .table-wrap {
        overflow-x: hidden;
        max-width: 100%;
    }

    .insight-me-page .table-ui {
        min-width: 0;
        table-layout: fixed;
        width: 100%;
    }

    .insight-me-page .table-ui th,
    .insight-me-page .table-ui td {
        white-space: normal;
        word-break: break-word;
    }

    .insight-me-page .card,
    .insight-me-page .insight-chart,
    .insight-me-page .insight-section-tabs {
        min-width: 0;
        max-width: 100%;
    }

    .insight-me-page .insight-chart-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .insight-me-page .insight-chart-toolbar-main {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .insight-me-page .insight-toggle-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .insight-me-page .chart-canvas {
        width: 100% !important;
        max-width: 100%;
    }

    .insight-teacher-page .card {
        padding: 12px;
    }

    .insight-teacher-page .chart-h-230,
    .insight-teacher-page .chart-h-270 {
        height: 220px;
    }

    .insight-teacher-page .table-ui th,
    .insight-teacher-page .table-ui td {
        padding: 8px;
        font-size: 13px;
    }

    .insight-teacher-page .insight-trend-table th:nth-child(2),
    .insight-teacher-page .insight-trend-table td:nth-child(2),
    .insight-teacher-page .insight-trend-table th:nth-child(4),
    .insight-teacher-page .insight-trend-table td:nth-child(4),
    .insight-teacher-page .insight-trend-table th:nth-child(6),
    .insight-teacher-page .insight-trend-table td:nth-child(6) {
        display: none;
    }

    .insight-teacher-page .insight-trend-table {
        min-width: 0;
    }

    .insight-teacher-page .insight-side-table th:nth-child(2),
    .insight-teacher-page .insight-side-table td:nth-child(2) {
        width: 70px;
    }

    .insight-teacher-page .insight-side-table th:nth-child(3),
    .insight-teacher-page .insight-side-table td:nth-child(3) {
        width: 74px;
    }

    .insight-teacher-page .insight-analysis-highwrong .insight-side-table th:nth-child(2),
    .insight-teacher-page .insight-analysis-highwrong .insight-side-table td:nth-child(2) {
        display: none;
    }

    .insight-teacher-page .insight-analysis-highwrong .insight-side-table th:nth-child(1),
    .insight-teacher-page .insight-analysis-highwrong .insight-side-table td:nth-child(1) {
        width: 56px;
    }

    .insight-teacher-page .insight-analysis-highwrong .insight-side-table th:nth-child(3),
    .insight-teacher-page .insight-analysis-highwrong .insight-side-table td:nth-child(3) {
        width: 82px;
    }

    .insight-teacher-page .insight-analysis-highwrong .action-btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    #qb-toast-stack {
        right: 10px;
        top: 10px;
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .chip {
        min-width: 100%;
    }

    .nav-link {
        font-size: 12px;
        padding: 5px 9px;
    }

    .brand {
        font-size: 17px;
    }

    .table-ui {
        min-width: 560px;
    }
}

.nav-link-feature {
    background: rgba(20, 184, 166, 0.26);
    border-color: rgba(153, 246, 228, 0.64);
}

.home-hero,
.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
    gap: 18px;
    align-items: stretch;
    border: 1px solid #d9e2f2;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(241, 247, 255, 0.94)),
        #fff;
    box-shadow: var(--qb-shadow-md);
    padding: 24px;
}

.home-hero h1,
.demo-hero h1,
.demo-page-head h1 {
    margin: 6px 0 10px;
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: 0;
    color: #16233d;
}

.home-hero p,
.demo-hero p {
    max-width: 720px;
    color: #4b5b75;
    font-size: 16px;
}

.demo-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid #9fd7cb;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: 13px;
    font-weight: 700;
}

.demo-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.home-public-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.home-public-note span,
.home-public-note strong {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
}

.home-public-note span {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-weight: 800;
}

.home-public-note strong {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
    font-weight: 800;
}

.home-hero-aside,
.demo-hero-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
    box-shadow: var(--qb-shadow-sm);
}

.home-loop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf2f7;
    color: #27364f;
    font-weight: 650;
}

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

.home-loop-item span,
.demo-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff7ed;
    color: #c2410c;
    font-weight: 800;
    flex: 0 0 auto;
}

.home-hero-dashboard {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

.home-today-panel {
    display: grid;
    gap: 8px;
}

.home-action-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b;
    text-decoration: none;
}

.home-action-row:hover {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.home-action-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #0f766e;
    font-weight: 800;
}

.home-action-row strong {
    display: block;
    color: #16233d;
}

.home-action-row small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
}

.home-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.home-metric-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    box-shadow: var(--qb-shadow-sm);
    min-width: 0;
}

.home-metric-card span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.home-metric-card strong {
    display: block;
    margin-top: 5px;
    color: #16233d;
    font-size: 28px;
    line-height: 1.1;
}

.home-metric-card small {
    display: block;
    margin-top: 5px;
    color: #64748b;
}

.home-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 16px;
    margin-top: 16px;
}

.home-workbench-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    box-shadow: var(--qb-shadow-sm);
}

.home-action-grid,
.home-recent-list {
    display: grid;
    gap: 10px;
}

.home-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-panel-title {
    margin-bottom: 10px;
    color: #1e293b;
    font-weight: 800;
}

.demo-timeline {
    margin: 0;
    padding-left: 20px;
}

.demo-timeline li {
    margin: 8px 0;
    color: #334155;
}

.demo-timeline span {
    display: inline-block;
    min-width: 48px;
    color: #0f766e;
    font-weight: 800;
}

.demo-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.demo-stat {
    border: 1px solid #e0e7ef;
    border-radius: 12px;
    background: #fff;
    padding: 13px;
    box-shadow: var(--qb-shadow-sm);
}

.demo-stat span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.demo-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 26px;
    color: #172033;
}

.demo-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.demo-flow-card {
    border: 1px solid #dfe7f2;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    box-shadow: var(--qb-shadow-sm);
    min-width: 0;
}

.demo-flow-card h2 {
    margin: 12px 0 8px;
    font-size: 18px;
    color: #172033;
}

.demo-flow-card p,
.demo-card-meta {
    color: #53657f;
    font-size: 14px;
}

.demo-card-meta {
    margin: 10px 0;
    font-weight: 700;
}

.demo-script-grid,
.demo-authoring-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.demo-authoring-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
}

.demo-page-head,
.demo-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.demo-ai-note {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.demo-note-list p {
    border-left: 3px solid #14b8a6;
    margin: 0 0 12px;
    padding-left: 10px;
    color: #475569;
}

.preview-group {
    margin-bottom: 12px;
}

.ai-confidence-list {
    display: grid;
    gap: 8px;
}

.ai-confidence-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.ai-confidence-item strong {
    color: #172033;
}

.ai-confidence-item span {
    float: right;
    color: #0f766e;
    font-weight: 800;
}

.ai-confidence-item p {
    clear: both;
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.ai-draft-panel {
    border: 1px solid #b7e4dc;
    border-radius: 12px;
    background: linear-gradient(180deg, #f0fdfa, #ffffff);
    padding: 16px;
    margin-bottom: 16px;
}

.ai-draft-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.ai-draft-head h3 {
    margin: 5px 0 5px;
    color: #16233d;
    font-size: 20px;
}

.ai-draft-head p {
    margin: 0;
    color: #52627a;
    font-size: 14px;
}

.ai-draft-eyebrow,
.ai-draft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.ai-draft-eyebrow {
    background: #ccfbf1;
    color: #0f766e;
}

.ai-draft-badge {
    flex: 0 0 auto;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.ai-source-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(14, 116, 144, 0.24);
    background: rgba(236, 254, 255, 0.9);
    color: #155e75;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
}

.ai-source-badge.is-rule {
    border-color: rgba(100, 116, 139, 0.24);
    background: #f8fafc;
    color: #475569;
}

.ai-source-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ai-draft-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
    gap: 14px;
    align-items: end;
}

.ai-context-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-context-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: #ffffff;
    color: #134e4a;
    font-size: 12px;
    font-weight: 700;
}

.ai-context-chip.is-empty {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.ai-draft-objective textarea {
    min-height: 108px;
}

.ai-draft-controls {
    display: grid;
    gap: 10px;
}

.ai-draft-review {
    border-top: 1px solid #d6f4ef;
    margin-top: 14px;
    padding-top: 12px;
}

.ai-confidence-list.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
}

.ai-confidence-list.compact .ai-confidence-item {
    display: grid;
    gap: 4px;
}

.ai-confidence-list.compact .ai-confidence-item span {
    float: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.text-danger {
    color: #b42318;
}

.toolbar-select {
    width: auto;
    min-width: 130px;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 13px;
}

.toolbar-select-label {
    font-size: 13px;
    color: #64748b;
    margin-right: -4px;
    white-space: nowrap;
}

.landing-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh;
}

.landing-minimal h1 {
    margin: 0 0 6px;
    font-size: 38px;
    font-weight: 800;
    color: #16233d;
    letter-spacing: 2px;
}

.landing-minimal p {
    margin: 0 0 18px;
    font-size: 15px;
    color: #4b5b75;
    letter-spacing: 1px;
}

.landing-divider {
    margin: 0 0 18px;
    font-size: 14px;
    color: #c6d2e4;
    letter-spacing: 0;
    user-select: none;
}

.landing-minimal .btn {
    min-width: 120px;
}

.landing-minimal .btn + .btn {
    margin-top: 10px;
}

.landing-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 260px;
    max-width: 100%;
    align-items: stretch;
}

.landing-form .btn {
    width: 100%;
}

@media (max-width: 980px) {
    .home-hero,
    .demo-hero,
    .home-workbench-grid,
    .demo-authoring-grid,
    .demo-script-grid,
    .ai-draft-grid,
    .ai-confidence-list.compact {
        grid-template-columns: 1fr;
    }

    .demo-stat-grid,
    .demo-flow-grid,
    .home-dashboard-grid,
    .home-action-grid,
    .teacher-admin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 620px) {
    .home-hero,
    .demo-hero {
        padding: 18px;
    }

    .home-hero h1,
    .demo-hero h1,
    .demo-page-head h1 {
        font-size: 28px;
    }

    .demo-stat-grid,
    .demo-flow-grid,
    .home-dashboard-grid,
    .home-action-grid,
    .teacher-admin-metrics {
        grid-template-columns: 1fr;
    }

    .demo-page-head,
    .demo-section-title {
        display: block;
    }
}



/* ── Teacher Dashboard ── */

.teacher-dashboard {
    padding: 8px 0 24px;
}

.teacher-greeting {
    margin: 0 0 20px;
    font-size: 14px;
    color: #64748b;
}

.teacher-action-panel,
.student-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.teacher-action-panel--danger,
.student-action-panel--danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.teacher-action-panel--warning,
.student-action-panel--warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.teacher-action-panel__copy,
.student-action-panel__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.teacher-action-panel__eyebrow,
.student-action-panel__eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: var(--qb-brand);
}

.teacher-action-panel__copy strong,
.student-action-panel__copy strong {
    font-size: 17px;
    color: #0f172a;
    line-height: 1.3;
}

.teacher-action-panel__copy small,
.student-action-panel__copy small {
    font-size: 12px;
    color: #475569;
    line-height: 1.45;
}

.teacher-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
}

.teacher-card h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.teacher-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
    align-items: start;
}

.teacher-grid .teacher-card {
    margin-bottom: 0;
}

/* wide 布局下：待办占主要横向空间，关键数据紧凑列 */
.wide .teacher-grid--top {
    grid-template-columns: 2fr 1fr;
}

/* 学情提醒 + 最近教学动态并排，约 4:6 */
.wide .teacher-grid--mid {
    grid-template-columns: 2fr 3fr;
}

.teacher-card--compact {
    padding: 14px 16px;
}

.teacher-card--compact h2 {
    margin-bottom: 10px;
    font-size: 13px;
}

.teacher-todos {
    display: flex;
    flex-direction: column;
}

.teacher-todo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: color 0.1s ease;
}

.teacher-todo:last-child {
    border-bottom: 0;
}

.teacher-todo:hover .teacher-todo-text {
    color: var(--qb-brand);
}

.teacher-todo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.teacher-todo-dot--danger,
.student-todo-dot--danger {
    background: #dc2626;
}

.teacher-todo-dot--warning,
.student-todo-dot--warning {
    background: #ea580c;
}

.teacher-todo-dot--normal,
.student-todo-dot--normal {
    background: #2563eb;
}

.teacher-todo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.teacher-todo-text small {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
}

.teacher-todo-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.teacher-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.teacher-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}

.teacher-stat strong {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.teacher-stat span {
    font-size: 11px;
    color: #64748b;
}

.teacher-quick-actions,
.student-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.teacher-alerts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.teacher-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

.teacher-alert:last-child {
    border-bottom: 0;
}

.teacher-alert-body,
.student-alert-body {
    flex: 1;
    min-width: 0;
}

.teacher-alert-action,
.student-alert-action {
    margin-top: 6px;
}

.teacher-alert-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.teacher-alert-dot--danger {
    background: #ef4444;
}

.teacher-alert-dot--warning {
    background: #f97316;
}

.teacher-alert-dot--info {
    background: #3b82f6;
}

.teacher-insight-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 4px;
    text-align: left;
}

.teacher-insight-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.teacher-insight-empty-desc {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.teacher-insight-empty-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
}

.teacher-insight-empty-list li {
    font-size: 12px;
    color: #cbd5e1;
    position: relative;
    padding-left: 10px;
}

.teacher-insight-empty-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #cbd5e1;
}

.teacher-recents {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.teacher-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.teacher-recent-row:last-child {
    border-bottom: 0;
}

.teacher-recent-action {
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.teacher-recent-action:hover {
    color: var(--qb-brand);
}

.teacher-recent-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.teacher-recent-row--task .btn {
    flex-shrink: 0;
}

.teacher-recent-row small {
    color: #94a3b8;
    font-size: 11px;
    white-space: nowrap;
}

.teacher-recents-more {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.teacher-recents-more a {
    font-size: 13px;
    color: var(--qb-brand);
}

@media (max-width: 980px) {
    .wide .teacher-grid--top,
    .wide .teacher-grid--mid {
        grid-template-columns: 1fr;
    }

    .teacher-grid {
        grid-template-columns: 1fr;
    }

    .teacher-grid .teacher-card {
        margin-bottom: 14px;
    }

    .teacher-grid--top .teacher-card:last-child,
    .teacher-grid--mid .teacher-card:last-child {
        margin-bottom: 0;
    }

    .teacher-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 620px) {
    .teacher-action-panel,
    .student-action-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .teacher-action-panel .btn,
    .student-action-panel .btn {
        width: 100%;
    }

    .teacher-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-stat strong {
        font-size: 20px;
    }

    .teacher-recent-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .teacher-recent-row--task .btn {
        width: 100%;
    }

    .teacher-recent-action {
        white-space: normal;
    }
}

/* ── Admin Dashboard ── */

.admin-dashboard {
    padding: 8px 0 24px;
}

.admin-greeting {
    margin: 0 0 20px;
    font-size: 14px;
    color: #64748b;
}

.admin-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
}

.admin-card h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-grid .admin-card {
    margin-bottom: 0;
}

.admin-card--compact {
    padding: 14px 16px;
}

.admin-card--compact h2 {
    margin-bottom: 10px;
    font-size: 13px;
}

.admin-card--todo {
    min-height: 160px;
}

.admin-todo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
}

.admin-todo-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.admin-todo-empty small {
    font-size: 12px;
    color: #cbd5e1;
    max-width: 280px;
}

.admin-todo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 14px;
}

.admin-todo-item a {
    color: #92400e;
    text-decoration: underline;
}

.admin-todo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.admin-todo-dot--warn {
    background: #f59e0b;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.admin-stats--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}

.admin-stat strong {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.admin-stat span {
    font-size: 12px;
    color: #64748b;
}

.admin-status {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.admin-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.admin-status-dot--ok {
    background: #22c55e;
}

.admin-status-dot--warn {
    background: #f59e0b;
}

.admin-status-label {
    color: #94a3b8;
    min-width: 64px;
}

.admin-recents {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.admin-recent-row:last-child {
    border-bottom: 0;
}

.admin-recent-action {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
}

.admin-recent-action strong {
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
}

.admin-recent-action span {
    color: #64748b;
    white-space: nowrap;
}

.admin-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.admin-links a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
}

.admin-links a:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 980px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-grid .admin-card {
        margin-bottom: 14px;
    }

    .admin-grid--top .admin-card:last-child,
    .admin-grid--mid .admin-card:last-child {
        margin-bottom: 0;
    }

    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .admin-stat strong {
        font-size: 20px;
    }

    .admin-recent-action {
        flex-wrap: wrap;
    }

    .admin-recent-action span {
        white-space: normal;
    }

    .admin-recent-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ── Teacher Dashboard ── */

.teacher-dashboard {
    padding: 8px 0 24px;
}

.teacher-greeting {
    margin: 0 0 28px;
    font-size: 14px;
    color: #64748b;
}

.teacher-section {
    margin-bottom: 24px;
}

.teacher-section h2 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}



/* ── Student Dashboard ── */

.student-dashboard {
    padding: 8px 0 24px;
}

.student-greeting {
    margin: 0 0 20px;
    font-size: 14px;
    color: #64748b;
}

.student-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
}

.student-card h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.student-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.student-grid .student-card {
    margin-bottom: 0;
}

.student-card--compact {
    padding: 14px 16px;
}

.student-card--compact h2 {
    margin-bottom: 10px;
    font-size: 13px;
}

.student-todos {
    display: flex;
    flex-direction: column;
}

.student-todo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: color 0.1s ease;
}

.student-todo:last-child {
    border-bottom: 0;
}

.student-todo:hover .student-todo-text {
    color: var(--qb-brand);
}

.student-todo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.student-todo-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.student-todo-text small {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
}

.student-todo-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.student-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.student-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}

.student-stat strong {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.student-stat span {
    font-size: 11px;
    color: #64748b;
}

.student-alerts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.student-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
}

.student-alert:last-child {
    border-bottom: 0;
}

.student-alert-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.student-alert-dot--danger {
    background: #ef4444;
}

.student-alert-dot--warning {
    background: #f97316;
}

.student-alert-dot--info {
    background: #3b82f6;
}

.student-insight-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    text-align: center;
}

.student-insight-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.student-insight-empty-desc {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
}

.student-insight-empty-list {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
}

.student-insight-empty-list li {
    font-size: 12px;
    color: #cbd5e1;
    position: relative;
    padding-left: 10px;
}

.student-insight-empty-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #cbd5e1;
}

.student-recents {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.student-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.student-recent-row:last-child {
    border-bottom: 0;
}

.student-recent-action {
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-recent-row small {
    color: #94a3b8;
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .student-grid {
        grid-template-columns: 1fr;
    }

    .student-grid .student-card {
        margin-bottom: 14px;
    }

    .student-grid--top .student-card:last-child {
        margin-bottom: 0;
    }

    .student-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .student-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .student-stat strong {
        font-size: 20px;
    }

    .student-recent-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .student-recent-action {
        white-space: normal;
    }
}

/* ── Rank Badge 段位徽章 ── */
.rank-badge-wrap {
    display: inline-block;
    line-height: 0;
}

.rank-badge-wrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rank-badge-md {
    width: 80px;
    height: 80px;
}

.rank-badge-sm {
    width: 48px;
    height: 48px;
}

.rank-square {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: rankGrowSquare 0.42s cubic-bezier(.18, .85, .34, 1.2) forwards;
}

@keyframes rankGrowSquare {
    from {
        opacity: 0;
        transform: scale(.42);
    }
    to {
        opacity: 1;
        transform: scale(.94);
    }
}

/* 学生首页 hero 栏 */
.student-hero-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(31, 45, 70, .04);
}

.student-hero-bar .student-greeting {
    margin: 0;
    flex: 1 1 auto;
}

@media (max-width: 560px) {
    .student-hero-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* 学情页 hero 徽章 */
.insight-student-hero-head {
    position: relative;
}

.insight-student-hero-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.insight-student-hero-badge .rank-badge-name {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    text-align: center;
}

@media (max-width: 620px) {
    .insight-student-hero-badge {
        padding-left: 8px;
    }
    .insight-student-hero-badge .rank-badge-md {
        width: 64px;
        height: 64px;
    }
}

/* 段位规则页 */
.title-badge-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 16px 0;
}

.title-badge-showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

.title-badge-showcase-item .rank-badge-name {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.title-badge-showcase-item .rank-badge-rule {
    font-size: 12px;
    color: #94a3b8;
}

.title-design-note {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    padding: 16px 20px;
    color: #475569;
    line-height: 1.75;
    font-size: 14px;
}

.title-design-note strong {
    color: #0f172a;
}

/* AI settings route drag & drop + provider templates */
.ai-route-group {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    background: var(--qb-surface-soft);
}

.ai-route-group-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-route-sortable {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 48px;
    padding: 12px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px dashed var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
}

.ai-route-sortable li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    box-shadow: var(--qb-shadow-sm);
    cursor: grab;
    user-select: none;
}

.ai-route-sortable li.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.ai-route-sortable .drag-handle {
    color: var(--qb-text-soft);
    cursor: grab;
}

.ai-route-item-name {
    font-weight: 600;
    color: var(--qb-text);
}

.ai-route-item-key {
    font-size: 12px;
    color: var(--qb-text-soft);
}

.ai-provider-templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.ai-provider-type-selector {
    display: inline-flex;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    overflow: hidden;
}

.ai-provider-type-option {
    margin: 0;
    cursor: pointer;
}

.ai-provider-type-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-provider-type-option span {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    background: #fff;
    color: var(--qb-text);
    transition: background 0.15s, color 0.15s;
}

.ai-provider-type-option:not(:last-child) span {
    border-right: 1px solid var(--qb-border-strong);
}

.ai-provider-type-option input:checked + span {
    background: var(--qb-brand);
    color: #fff;
}

.ai-provider-type-option:hover input:not(:checked) + span {
    background: var(--qb-surface-soft);
}

.ai-model-page {
    width: 100%;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.ai-model-header {
    margin-bottom: 0;
}

.ai-model-section {
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    padding: 18px;
}

.ai-model-section-primary {
    border-color: #bfdbfe;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.ai-section-head,
.ai-route-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ai-section-head {
    margin-bottom: 16px;
}

.ai-section-head h2,
.ai-route-summary h2 {
    margin: 0 0 5px;
    font-size: 20px;
    letter-spacing: 0;
    color: var(--qb-text);
}

.ai-section-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.ai-section-head .ai-section-actions {
    margin-top: 0;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-chain-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ai-chain-card {
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    background: #f8fafc;
    padding: 14px;
    min-width: 0;
}

.ai-chain-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-chain-card h3,
.ai-provider-card h3 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #0f172a;
}

.ai-chain-list {
    display: grid;
    gap: 9px;
    min-height: 72px;
    padding: 0;
    margin: 0 0 12px;
    list-style: none;
    background: transparent;
    border: 0;
}

.ai-chain-list.is-empty {
    border: 1px dashed var(--qb-border-strong);
    border-radius: 10px;
    background: #fff;
}

.ai-chain-list li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: default;
}

.ai-chain-list li.dragging {
    opacity: 0.55;
}

.ai-chain-list .drag-handle {
    color: var(--qb-text-soft);
    cursor: grab;
    font-weight: 700;
    line-height: 1;
}

.ai-chain-order {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}

.ai-chain-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ai-chain-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.ai-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.ai-chain-list li:first-child .ai-role-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.ai-chain-remove {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    font-size: 16px;
    line-height: 1;
}

.ai-chain-move {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--qb-text-soft);
    font-size: 13px;
    line-height: 1;
}

.ai-chain-move:not(:disabled):hover {
    border-color: #bfdbfe;
    color: var(--qb-brand);
    background: #eff6ff;
}

.ai-chain-move:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ai-chain-add {
    width: 100%;
}

.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ai-provider-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid var(--qb-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--qb-shadow-sm);
    overflow: visible;
}

.ai-provider-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ai-provider-identity {
    min-width: 0;
}

.ai-provider-model {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.ai-provider-card .ai-provider-capability-chips {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    margin-top: 0;
}

.ai-provider-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 2px;
}

/* 无模型服务保留模型信息层的垂直位置，不在能力与操作区之间制造弹性空白。 */
.ai-provider-card:not(:has(.ai-provider-model)) .ai-provider-card-head {
    padding-bottom: 19px;
}

.ai-provider-type {
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.ai-provider-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ai-provider-card .dropdown {
    z-index: 1;
}

.ai-provider-card:has(.dropdown.is-open) {
    position: relative;
    z-index: 2;
}

.ai-empty-callout {
    padding: 14px;
    border: 1px dashed var(--qb-border-strong);
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}

.ai-provider-modal {
    width: min(760px, 96vw);
}

.ai-provider-modal input:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.ai-small-modal {
    width: min(520px, 96vw);
}

.ai-route-modal {
    width: min(720px, 96vw);
}

.ai-secret-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.ai-api-key-field {
    min-width: 0;
}

.ai-chain-picker {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ai-chain-picker-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
    color: var(--qb-text);
    text-align: left;
}

.ai-chain-picker-item:hover {
    background: #eff6ff;
    opacity: 1;
}

.ai-chain-picker-item strong,
.ai-chain-picker-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-chain-picker-item span {
    color: #64748b;
    font-size: 12px;
}

.ai-chain-picker-item em {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-style: normal;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.ai-route-scene-list {
    display: grid;
    gap: 8px;
}

.ai-route-scene-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #f8fafc;
}

.form-grid-full {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .ai-chain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .ai-provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .ai-model-section,
    .ai-chain-card,
    .ai-provider-card {
        padding: 14px;
    }

    .ai-section-head,
    .ai-route-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-chain-grid,
    .ai-provider-grid {
        grid-template-columns: 1fr;
    }

    .ai-route-scene-item {
        flex-direction: column;
    }
}

.ai-template-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ai-template-btn:hover {
    border-color: var(--qb-brand);
}

.ai-template-btn.active {
    border-color: var(--qb-brand);
    box-shadow: 0 0 0 2px rgba(47, 93, 215, 0.15);
}

.ai-template-btn strong {
    font-size: 14px;
}

.ai-template-btn .muted {
    font-size: 12px;
}

.inline-form {
    display: inline;
}

/* ===========================
   班级管理重构样式
   =========================== */

.class-mgmt-page {
    background: #f6f8fb;
    min-height: calc(100vh - 60px);
    padding: 32px 0;
}

.class-mgmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.class-mgmt-header h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

.class-list-search-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.class-list-search-row .class-search-box {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 360px;
    margin-bottom: 0;
}

.class-list-search-row .student-search-wrapper {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 360px;
    position: relative;
}

.class-list-search-row .student-search-box input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.class-list-search-row .student-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.class-search-box {
    width: 100%;
    max-width: 480px;
    margin-bottom: 24px;
}

.class-search-box input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 14px center;
    font-size: 14px;
    color: #334155;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

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

.class-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.class-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.class-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}

.class-card:has(.dropdown.is-open) {
    z-index: 10;
}

.class-card:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    border-color: #bfdbfe;
}

.class-card.archived {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.class-card.archived:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.08);
}

.class-card-main {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.class-card-main:hover {
    color: inherit;
}

.class-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.class-card-meta {
    font-size: 13px;
    color: #64748b;
}

.class-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.class-card-menu-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.class-card-menu-btn:hover,
.class-card-menu-btn.is-active {
    background: #eff6ff;
    color: #1d4ed8;
}

.class-card .class-card-menu-btn {
    width: 40px;
    height: 40px;
}

.class-card .class-card-menu-btn svg {
    width: 20px;
    height: 20px;
}

.class-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin: 24px 0 12px;
}

.class-group > .class-section-title:first-child {
    margin-top: 0;
}

.class-empty-state {
    text-align: center;
    padding: 64px 20px;
    color: #64748b;
}

.class-empty-state h3 {
    font-size: 18px;
    color: #334155;
    margin-bottom: 8px;
}

/* ------------------------------------------------------------------
 * 教学班列表摘要卡（/teaching/classes）
 * ------------------------------------------------------------------ */
.teaching-class-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 340px));
    justify-content: start;
    gap: 14px;
    margin-top: 18px;
}

.teaching-class-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-lg);
    background: var(--qb-surface);
    box-shadow: var(--qb-shadow-sm);
    padding: 14px;
    min-width: 0;
    overflow: visible;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.teaching-class-card:hover {
    box-shadow: var(--qb-shadow-md);
    border-color: var(--qb-border-strong);
}

.teaching-class-card.is-archived {
    background: var(--qb-surface-soft);
}

.teaching-class-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.teaching-class-card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.teaching-class-card-meta {
    display: grid;
    gap: 2px;
    margin-top: 6px;
    color: var(--qb-text-soft);
    font-size: 13px;
    line-height: 1.45;
}

.teaching-class-card-meta span {
    overflow-wrap: anywhere;
}

.teaching-class-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.teaching-class-card-stat {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.teaching-class-card-stat strong {
    font-size: 16px;
    font-weight: 500;
    color: var(--qb-text);
}

.teaching-class-card-stat span {
    font-size: 12px;
    color: var(--qb-text-soft);
}

.teaching-class-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.teaching-class-card-actions .btn-sm {
    font-size: 13px;
    padding: 6px 12px;
}

.teaching-class-card-actions .dropdown-toggle {
    min-width: 32px;
    padding-right: 9px;
    padding-left: 9px;
}

.teaching-class-card:has([data-dropdown].is-open) {
    position: relative;
    z-index: 2;
}

@media (max-width: 580px) {
    .teaching-class-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------
 * 指导学生列表摘要卡（/teaching/mentorships）
 * ------------------------------------------------------------------ */
.teaching-mentorship-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.teaching-mentorship-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-lg);
    background: var(--qb-surface);
    box-shadow: var(--qb-shadow-sm);
    padding: 18px 20px 16px;
    min-width: 0;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.teaching-mentorship-card:hover {
    box-shadow: var(--qb-shadow-md);
    border-color: var(--qb-border-strong);
}

.teaching-mentorship-card.is-ended {
    background: var(--qb-surface-soft);
    opacity: 0.82;
}

.mentorship-card-main {
    flex: 1;
    min-width: 0;
}

.mentorship-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.mentorship-card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.mentorship-card-meta {
    margin: 0 0 14px;
    color: var(--qb-text-soft);
    font-size: 13px;
}

.mentorship-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mentorship-card-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--qb-radius-md);
    background: var(--qb-surface-soft);
    border: 1px solid var(--qb-border);
    min-width: 84px;
}

.mentorship-card-stat strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--qb-text);
}

.mentorship-card-stat span {
    font-size: 13px;
    color: var(--qb-text-soft);
}

.mentorship-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    max-width: 320px;
}

.mentorship-card-actions .btn-sm,
.mentorship-card-actions .dropdown-toggle {
    font-size: 13px;
    padding: 6px 12px;
}

.teaching-mentorship-card.is-ended .mentorship-card-stat {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

@media (max-width: 720px) {
    .teaching-mentorship-card {
        flex-direction: column;
        gap: 14px;
    }

    .mentorship-card-actions {
        justify-content: flex-start;
        max-width: none;
    }
}

/* ------------------------------------------------------------------
 * 待批阅工作队列（/teaching/pending）
 * ------------------------------------------------------------------ */
.pending-filter-card {
    padding: 14px 16px;
    margin-bottom: 16px;
}

.pending-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.pending-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    flex-shrink: 0;
}

.pending-filter-field select,
.pending-filter-field input {
    width: 100%;
    margin: 0;
}

.pending-filter-class {
    width: 200px;
}

.pending-filter-task {
    width: 200px;
}

.pending-filter-student {
    width: 240px;
}

.pending-filter-scope {
    width: 160px;
}

.pending-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 2px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .pending-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pending-filter-field,
    .pending-filter-class,
    .pending-filter-task,
    .pending-filter-student,
    .pending-filter-scope {
        width: 100%;
    }

    .pending-filter-actions {
        justify-content: flex-start;
    }
}

.pending-table-card {
    padding: 0;
    overflow-x: auto;
}

.pending-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 720px;
}

.pending-table th,
.pending-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--qb-border);
    vertical-align: middle;
}

.pending-table th {
    background: var(--qb-surface-soft);
    font-weight: 600;
    font-size: 13px;
    color: var(--qb-text-soft);
    white-space: nowrap;
}

.pending-table tbody tr:last-child td {
    border-bottom: none;
}

.pending-table tbody tr:hover {
    background: #f8fafc;
}

.pending-table td strong {
    font-weight: 600;
    color: var(--qb-text);
}

.pending-table .btn-sm {
    font-size: 13px;
    padding: 5px 12px;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 52px 20px;
    color: var(--qb-text-soft);
}

.empty-state-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--qb-text);
    margin: 0 0 6px;
}

.empty-state-desc {
    margin: 0 0 16px;
    font-size: 14px;
}

.empty-state--compact {
    padding: 32px 20px;
    text-align: center;
    color: var(--qb-text-soft);
    font-size: 14px;
}

.empty-state--bordered {
    padding: 24px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: var(--qb-radius-md, 8px);
    color: #64748b;
    font-size: 13px;
}

.empty-state-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 班级详情 */
.class-detail-page {
    background: #f6f8fb;
    min-height: calc(100vh - 60px);
    padding: 24px 0 40px;
}

.class-detail-breadcrumb {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}

.class-detail-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.class-detail-breadcrumb a:hover {
    color: #2563eb;
}

.class-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.class-detail-title h2 {
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px;
}

.class-detail-meta {
    font-size: 14px;
    color: #64748b;
}

.class-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 课程区域 */
.class-courses-section {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.class-courses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.class-courses-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.class-courses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.class-course-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.class-course-empty {
    color: #94a3b8;
    font-size: 13px;
}

/* 学生区域 */
.class-students-section {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
    min-height: 500px;
}

.class-students-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.class-students-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.class-students-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-search-box {
    position: relative;
}

.student-search-box input {
    width: 260px;
    padding: 9px 34px 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

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

.student-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.student-table th,
.student-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.student-table th {
    font-weight: 600;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #f8fafc;
}

.student-table tbody tr:hover {
    background: #f8fafc;
}

.student-table td {
    color: #334155;
}

.student-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.student-status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.student-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.student-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-actions a,
.student-actions button {
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.student-actions a:hover,
.student-actions button:hover {
    text-decoration: underline;
}

.student-actions .class-card-menu-btn:hover {
    text-decoration: none;
    background: #eff6ff;
}

/* 批量操作工具栏 */
.bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease;
}

.bulk-toolbar.is-visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
    margin-bottom: 16px;
    pointer-events: auto;
}

.bulk-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-danger {
    background: #fff;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-danger:hover {
    background: #fef2f2;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: #64748b;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

.btn-ghost:hover {
    background: #f1f5f9;
    color: #334155;
}

/* 下拉菜单 */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 148px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    z-index: 100;
    overflow: hidden;
    padding: 4px;
}

.dropdown.is-open .dropdown-menu {
    display: block;
}

.dropdown-menu.dropdown-menu-fixed {
    position: fixed;
    right: auto;
    box-sizing: border-box;
    min-width: min(148px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    overflow-y: auto;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
    color: #334155;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.dropdown-item.danger {
    color: #dc2626;
}

.dropdown-item.danger:hover {
    background: #fef2f2;
}

.dropdown-item.warning {
    color: #b45309;
}

.dropdown-item.warning:hover {
    background: #ffedd5;
}

.dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px;
}

/* Modal 增强 */
.modal-panel {
    width: min(480px, 94vw);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-panel.modal-wide {
    width: min(640px, 96vw);
}

.modal-body {
    padding: 20px;
}

.modal-body .form-row {
    margin-bottom: 16px;
}

.modal-body .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 6px;
}

.modal-body .form-row input,
.modal-body .form-row select,
.modal-body .form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.modal-body .form-row input:focus,
.modal-body .form-row select:focus,
.modal-body .form-row textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-body .form-row .help-text {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin-top: 4px;
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding: 4px 0;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.checkbox-line:hover {
    background: #f8fafc;
}

.checkbox-line input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

/* Drawer */
.drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    z-index: 200;
}

.drawer-mask.is-open {
    display: block;
}

.drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 100vw);
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 201;
    display: flex;
    flex-direction: column;
}

.drawer-mask.is-open + .drawer-panel,
.drawer-panel.is-open {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.drawer-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.drawer-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.drawer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.close-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

/* 跨班搜索结果 */
.student-search-wrapper {
    position: relative;
}

.cross-class-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    z-index: 100;
    overflow: hidden;
}

.cross-class-results.is-visible {
    display: block;
}

.cross-class-results-title {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cross-class-results-list {
    max-height: 280px;
    overflow: auto;
}

.cross-class-result-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.cross-class-result-item:last-child {
    border-bottom: none;
}

.cross-class-result-item:hover {
    background: #f8fafc;
}

.cross-class-result-name {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

.cross-class-result-meta {
    font-size: 12px;
    color: #64748b;
}

/* 跨班跳转高亮 */
.student-row-highlight {
    background: #fef08a !important;
    transition: background 0.5s ease;
}

/* 归档提示 */
.archived-banner {
    background: #fef9c3;
    color: #854d0e;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* 分组统计 */
.class-group-footer {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 8px;
    padding: 0 4px;
}

/* 响应式 */
@media (max-width: 768px) {
    .class-detail-header {
        flex-direction: column;
        gap: 16px;
    }

    .class-detail-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .student-search-box input {
        width: 160px;
    }

    .student-table th:nth-child(4),
    .student-table td:nth-child(4) {
        display: none;
    }
}

.qpfs-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   Teacher Insights v2
   ========================================================= */

.insight-teacher-page-v2 {
    --insight-gap: 16px;
    --insight-card-padding: 18px;
    --insight-radius: var(--qb-radius-lg);
    padding: 22px 0 38px;
}

.insight-teacher-page-v2 .page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--qb-text);
    margin: 0 0 16px;
}

/* Sticky filter bar */
.insight-sticky-bar {
    position: sticky;
    top: calc(var(--app-nav-height, 64px) + 8px);
    z-index: 40;
    margin-bottom: var(--insight-gap);
}

.insight-sticky-bar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--insight-radius);
    box-shadow: var(--qb-shadow-sm);
}

.insight-sticky-bar__group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-sticky-bar__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--qb-text-soft);
    white-space: nowrap;
}

.insight-sticky-bar__select {
    height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    font-size: 14px;
    color: var(--qb-text);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.insight-sticky-bar__select:focus-visible {
    outline: 2px solid var(--qb-brand);
    outline-offset: 2px;
}

/* Summary section */
.insight-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--insight-gap);
    margin-bottom: var(--insight-gap);
}

@media (min-width: 1100px) {
    .insight-summary {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kpi-card {
    padding: var(--insight-card-padding);
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--insight-radius);
    box-shadow: var(--qb-shadow-sm);
}

.kpi-card__value {
    font-size: 32px;
    font-weight: 800;
    color: var(--qb-text);
    line-height: 1.1;
}

.kpi-card__label {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qb-text-soft);
}

.kpi-card__meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
}

.kpi-card__meta--good { color: #10b981; }
.kpi-card__meta--warn { color: #f59e0b; }
.kpi-card__meta--bad { color: #ef4444; }

/* AI summary */
.insight-ai-summary {
    padding: var(--insight-card-padding);
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--insight-radius);
    box-shadow: var(--qb-shadow-sm);
}

.insight-ai-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.insight-ai-summary__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--qb-text);
}

.insight-ai-summary__summary {
    font-size: 14px;
    color: var(--qb-text);
    line-height: 1.6;
    flex: 1;
}

.insight-ai-summary__body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--qb-border);
}

.insight-ai-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 960px) {
    .insight-ai-summary__grid {
        grid-template-columns: 1fr;
    }
}

.insight-ai-summary__col-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--qb-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.insight-ai-summary__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--qb-text);
}

.insight-ai-summary__list li + li {
    margin-top: 6px;
}

/* Tabs */
.insight-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--qb-border);
    margin-bottom: var(--insight-gap);
}

.insight-tab-btn {
    position: relative;
    padding: 10px 16px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--qb-text-soft);
    cursor: pointer;
    transition: color 0.15s;
}

.insight-tab-btn:hover {
    color: var(--qb-text);
}

.insight-tab-btn.is-active {
    color: var(--qb-brand);
}

.insight-tab-btn.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--qb-brand);
}

.insight-tab-btn:focus-visible {
    outline: 2px solid var(--qb-brand);
    outline-offset: 2px;
}

.insight-tab-panel {
    display: none;
}

.insight-tab-panel.is-active {
    display: block;
}

/* Tab toolbars */
.insight-tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.insight-tab-toolbar__left,
.insight-tab-toolbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.insight-chip {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--qb-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text-soft);
    cursor: pointer;
    transition: all 0.15s;
}

.insight-chip:hover {
    border-color: var(--qb-border-strong);
    color: var(--qb-text);
}

.insight-chip.is-active {
    border-color: var(--qb-brand);
    background: #eff6ff;
    color: var(--qb-brand);
}

.insight-search {
    height: 32px;
    width: 200px;
    padding: 0 10px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    font-size: 13px;
}

.insight-search:focus-visible {
    outline: 2px solid var(--qb-brand);
    outline-offset: 2px;
}

/* Tables */
.insight-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.insight-table th {
    position: sticky;
    top: 0;
    padding: 10px 12px;
    background: #f3f6fc;
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    color: var(--qb-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--qb-border);
    white-space: nowrap;
}

.insight-table td {
    padding: 12px;
    border-bottom: 1px solid var(--qb-border);
    color: var(--qb-text);
    vertical-align: middle;
}

.insight-table tbody tr:hover {
    background: #f9fbff;
}

.insight-table .cell-muted {
    color: var(--qb-text-soft);
    font-size: 13px;
}

.insight-mastery-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.insight-mastery-badge--good { background: #dcfce7; color: #166534; }
.insight-mastery-badge--warn { background: #fef3c7; color: #92400e; }
.insight-mastery-badge--bad { background: #fee2e2; color: #991b1b; }

/* 班级知识点掌握分布（薄弱知识点表） */
.kp-dist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.kp-dist-bar {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

.kp-dist-seg {
    display: block;
    height: 100%;
}

.kp-dist-seg.is-strong { background: #10b981; }
.kp-dist-seg.is-mid { background: #f59e0b; }
.kp-dist-seg.is-weak { background: #ef4444; }

.kp-dist-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--qb-text-soft);
}

.kp-dist-trend {
    font-weight: 800;
}

.kp-dist-trend.is-up { color: #10b981; }
.kp-dist-trend.is-down { color: #ef4444; }

/* Trend tab metric switch */
.insight-metric-switch {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: #f1f5f9;
    border-radius: var(--qb-radius-sm);
}

.insight-metric-switch__btn {
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text-soft);
    cursor: pointer;
}

.insight-metric-switch__btn.is-active {
    background: #fff;
    color: var(--qb-text);
    box-shadow: 0 1px 3px rgba(24,39,75,0.08);
}

/* Chart containers */
.insight-chart-box {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    padding: 14px;
}

.insight-chart-canvas {
    width: 100%;
    height: 260px;
}

/* Drawer */
.insight-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.insight-drawer-mask.is-open {
    opacity: 1;
    visibility: visible;
}

.insight-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100%;
    background: var(--qb-surface);
    box-shadow: var(--qb-shadow-md);
    z-index: 101;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.insight-drawer.is-open {
    transform: translateX(0);
}

.insight-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--qb-border);
}

.insight-drawer__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--qb-text);
    margin: 0;
}

.insight-drawer__meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--qb-text-soft);
}

.insight-drawer__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    font-size: 18px;
    color: var(--qb-text-soft);
    cursor: pointer;
}

.insight-drawer__close:hover {
    color: var(--qb-text);
}

.insight-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.insight-drawer__section {
    margin-bottom: 24px;
}

.insight-drawer__section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--qb-text);
    margin: 0 0 12px;
}

/* Ability bars */
.insight-ability-list {
    display: grid;
    gap: 12px;
}

.insight-ability-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 12px;
}

.insight-ability-item__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--qb-text-soft);
}

.insight-ability-item__bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.insight-ability-item__fill {
    height: 100%;
    background: var(--qb-brand);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.insight-ability-item__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text);
    min-width: 36px;
    text-align: right;
}

/* Rank / achievement */
.insight-rank-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--qb-brand-strong);
    font-size: 12px;
    font-weight: 800;
}

.insight-achievement-group {
    margin-bottom: 16px;
}

.insight-achievement-group__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin-bottom: 8px;
}

.insight-achievement-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.insight-achievement-item {
    padding: 6px 10px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: #fff;
    font-size: 13px;
    color: var(--qb-text);
}

.insight-achievement-item.is-awarded {
    border-color: #10b981;
    background: #ecfdf5;
    color: #166534;
}

/* Pagination */
.insight-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--qb-text-soft);
}

.insight-pagination select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--qb-border-strong);
    border-radius: var(--qb-radius-sm);
    background: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .insight-sticky-bar__inner {
        gap: 10px;
    }
    .insight-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .insight-tab-btn {
        white-space: nowrap;
    }
    .insight-ai-summary__head {
        flex-direction: column;
        align-items: flex-start;
    }
    .insight-tab-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
    .insight-table th,
    .insight-table td {
        padding: 10px;
        font-size: 13px;
    }
}

/* Student insights v2 */
.insight-student-page-v2 {
    --insight-gap: 16px;
    --insight-card-padding: 18px;
    --insight-radius: var(--qb-radius-lg);
    padding: 22px 0 38px;
}

.insight-student-page-v2 .page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--qb-text);
    margin: 0 0 16px;
}

.insight-student-page-v2 .card {
    padding: var(--insight-card-padding);
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--insight-radius);
    box-shadow: var(--qb-shadow-sm);
}

.insight-student-page-v2 .card > h3,
.insight-student-page-v2 .card > .insight-head-with-help h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--qb-text);
    margin: 0 0 14px;
}

.insight-student-page-v2 .insight-head-with-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.insight-student-page-v2 .insight-head-with-help h3 {
    margin: 0;
}

.insight-student-page-v2 .table-wrap {
    overflow-x: auto;
}

.insight-student-page-v2 .table-wrap table {
    min-width: 100%;
}

@media (max-width: 768px) {
    .insight-student-page-v2 {
        padding: 16px 0 28px;
    }

    .insight-student-page-v2 .insight-head-with-help {
        flex-wrap: wrap;
    }

    .insight-student-page-v2 .insight-chart-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =========================================================
   Student insights v3 — friendly growth-oriented redesign
   ========================================================= */

.student-insight-page {
    --student-gap: 20px;
    --student-radius: 14px;
    padding: 18px 0 40px;
}

.student-insight-page .card {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--student-radius);
    box-shadow: var(--qb-shadow-sm);
    padding: 20px;
}

.student-insight-page .student-section {
    margin-top: 32px;
}

.student-insight-page .student-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--qb-text);
    margin: 0 0 14px;
}

.student-teacher-advice-card {
    background: #f8fafc;
    border-left: 4px solid var(--qb-brand);
}

.student-teacher-advice-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}

.student-teacher-advice-item {
    padding: 12px 14px;
    background: #fff;
    border-radius: var(--qb-radius-md);
    border: 1px solid var(--qb-border);
}

.student-teacher-advice__content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--qb-text);
}

.student-teacher-advice__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--qb-text-soft);
}

.student-insight-page .student-card-hover {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.student-insight-page .student-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(24, 39, 75, 0.08);
}

.student-insight-page .student-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.student-insight-page .student-card-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--qb-text);
    margin: 0;
}

/* Hero */
.student-hero-card {
    background: var(--qb-surface);
    border: 1px solid var(--qb-border);
    border-radius: var(--student-radius);
    box-shadow: var(--qb-shadow-sm);
    padding: 24px;
}

.student-hero-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.student-hero-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--qb-text);
}

.student-segmented-form {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
}

.student-segmented-btn {
    height: 30px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}

.student-segmented-btn:hover {
    color: var(--qb-text);
}

.student-segmented-btn.is-active {
    background: #fff;
    color: var(--qb-text);
    box-shadow: 0 1px 3px rgba(24, 39, 75, 0.08);
}

.student-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 0.9fr;
    gap: 24px;
    align-items: center;
}

.student-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--qb-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    flex-shrink: 0;
}

.student-hero-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--qb-text);
    margin: 0 0 4px;
}

.student-hero-class {
    font-size: 13px;
    color: var(--qb-text-soft);
    margin: 0 0 10px;
}

.student-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 13px;
    font-weight: 700;
}

.student-streak-pill .streak-icon {
    font-size: 14px;
}

.student-rank-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-rank-info {
    flex: 1;
    min-width: 0;
}

.student-rank-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--qb-text);
    margin-bottom: 4px;
}

.student-rank-next {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin-bottom: 8px;
}

.student-rank-progress {
    height: 8px;
    border-radius: 999px;
}

.student-recent-awards {
    margin-top: 14px;
}

.student-award-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.hero-stat {
    text-align: center;
    padding: 10px 8px;
    background: #f8fafc;
    border-radius: var(--qb-radius-md);
}

.hero-stat__value {
    font-size: 18px;
    font-weight: 800;
    color: var(--qb-text);
    line-height: 1.1;
}

.hero-stat__label {
    margin-top: 4px;
    font-size: 11px;
    color: var(--qb-text-soft);
    font-weight: 600;
}

.student-hero-ai {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--qb-border);
    flex-wrap: wrap;
}

.student-hero-ai__comment {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--qb-text);
    font-weight: 600;
}

.student-hero-ai__actions {
    display: flex;
    gap: 10px;
}

.student-ai-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: var(--qb-radius-md);
    font-size: 13px;
    color: var(--qb-text-soft);
    line-height: 1.5;
}

.ai-comment-icon,
.ai-robot-icon {
    font-size: 15px;
    flex-shrink: 0;
}

/* Two column layout */
.student-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--student-gap);
}

/* Ability */
.student-ability-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.student-ability-row {
    display: grid;
    grid-template-columns: 80px 1fr 90px;
    align-items: center;
    gap: 12px;
}

.student-ability-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text);
}

.student-ability-bar-wrap {
    min-width: 0;
}

.student-ability-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.student-ability-fill {
    height: 100%;
    background: linear-gradient(90deg, #2f5dd7, #60a5fa);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.student-ability-achievement {
    font-size: 12px;
    color: var(--qb-text-soft);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-ability-radar .chart-canvas {
    height: 280px;
}

/* Knowledge */
.student-knowledge-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.student-knowledge-item {
    display: grid;
    grid-template-columns: 1fr auto 120px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: var(--qb-radius-md);
}

.student-knowledge-spark {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 64px;
    color: #0d9488;
}

.student-knowledge-trend {
    font-size: 13px;
    font-weight: 700;
}

.student-knowledge-trend.is-up {
    color: #10b981;
}

.student-knowledge-trend.is-down {
    color: #ef4444;
}

.student-knowledge-trend.is-flat {
    color: #94a3b8;
}

.student-knowledge-main {
    min-width: 0;
}

.student-knowledge-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--qb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-knowledge-meta {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin-top: 2px;
}

.student-knowledge-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.student-knowledge-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.student-wrong-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-wrong-item {
    padding: 12px;
    background: #fef2f2;
    border-radius: var(--qb-radius-md);
    border-left: 3px solid #ef4444;
}

.student-wrong-stem {
    font-size: 13px;
    color: var(--qb-text);
    line-height: 1.5;
    margin-bottom: 6px;
}

.student-wrong-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.student-wrong-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 800;
}

.student-wrong-status.is-corrected {
    background: #dcfce7;
    color: #166534;
}

.student-card-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* AI assistant */
.student-ai-assistant {
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border: 1px solid #dbeafe;
    border-radius: var(--student-radius);
    padding: 18px 20px;
    box-shadow: var(--qb-shadow-sm);
}

.student-ai-assistant__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.student-ai-assistant__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
}

.student-ai-assistant__summary {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--qb-text);
    line-height: 1.5;
}

.ai-weekly-label {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--qb-radius-sm);
    background: #dbeafe;
    color: #1e40af;
    font-size: 12px;
    font-weight: 800;
    margin-right: 8px;
}

.student-ai-assistant__body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #dbeafe;
}

.student-ai-assistant__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.student-ai-assistant__col-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--qb-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.student-ai-assistant__list {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--qb-text);
}

.student-ai-assistant__tasks {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--qb-border);
}

.student-ai-assistant__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* Achievement wall */
.student-achievement-card {
    padding: 24px;
}

.student-achievement-wall {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.student-achievement-group-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin-bottom: 10px;
    text-align: center;
}

.student-achievement-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-achievement-item {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    opacity: 0.55;
    transition: all 0.15s ease;
}

.student-achievement-item:hover {
    transform: translateY(-1px);
}

.student-achievement-item.is-awarded {
    background: #eff6ff;
    border-color: #bfdbfe;
    opacity: 1;
}

.student-achievement-item-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text);
    margin-bottom: 2px;
}

.student-achievement-item-rule {
    font-size: 11px;
    color: var(--qb-text-soft);
    line-height: 1.4;
}

/* ACH-04 学生成就区（苹果体系） */
.ach-area__summary {
    margin-bottom: 14px;
}

.ach-section {
    margin-top: 18px;
}

.ach-section:first-of-type {
    margin-top: 0;
}

.ach-section__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin: 0 0 10px;
}

/* 课程分节内的段位块（Course-scoped rank，与成就并列） */
.ach-section-rank {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ach-section-rank__info {
    min-width: 0;
    flex: 1;
}

.ach-section-rank__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--qb-text);
    margin-bottom: 2px;
}

/* 学生首页问候区：逐课程段位徽章 */
.student-hero-ranks {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.ach-card {
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    background: #fff;
    padding: 14px;
    min-width: 0;
}

.ach-card--completed {
    border-color: #fecaca;
    background: #fff7f5;
}

.ach-card--inactive {
    opacity: 0.85;
}

.ach-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
}

.ach-card__title {
    min-width: 0;
}

.ach-card__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--qb-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ach-card__status {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin-top: 2px;
}

.ach-tag {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.ach-tag--new {
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.ach-tag--inactive {
    color: var(--qb-text-soft);
    background: #f1f5f9;
    border: 1px solid var(--qb-border);
}

.ach-card__levels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ach-level-chip {
    font-size: 11px;
    color: var(--qb-text-soft);
    background: #f8fafc;
    border: 1px solid var(--qb-border);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.ach-level-chip.is-earned {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.ach-level-chip.is-new {
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}

.ach-card__next {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-text);
    margin-top: 10px;
}

.ach-card__percent {
    font-weight: 800;
    color: var(--qb-text-soft);
    white-space: nowrap;
}

.ach-progress {
    margin-top: 6px;
}

.ach-conditions {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ach-conditions li {
    font-size: 11px;
    color: var(--qb-text-soft);
    line-height: 1.5;
    padding-left: 12px;
    position: relative;
}

.ach-conditions li::before {
    content: "·";
    position: absolute;
    left: 2px;
}

.ach-conditions li.is-satisfied {
    color: #15803d;
}

.ach-card__done {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
}

.ach-card__note {
    margin-top: 10px;
    font-size: 12px;
}

.ach-evidence {
    margin-top: 10px;
    border-top: 1px dashed var(--qb-border);
    padding-top: 8px;
}

.ach-evidence summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-text);
    list-style-position: inside;
}

.ach-evidence__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ach-evidence__list li {
    font-size: 11px;
    color: var(--qb-text-soft);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ================= Achievement Apple 视觉系统 =================
   统一 renderer：components/apple.html（唯一 SVG 来源）+ js/apple-icon.js（KaTeX）。
   状态语义固定：灰=尚未获得、绿=I、黄=II、红=III；管理端 neutral 仅表达成就身份。
   配色 token 集中在 .apple-badge 的 --apple-* 变量：各状态只改 token，不散落硬编码。
   - 灰态是"尚未成熟"的青灰果（保留图标，非 disabled 的锁形/置灰）；
   - 黄态图标用深琥珀色保证对比度；
   - 红态是成熟朱红（非 danger/error 的纯红）。 */
.apple-badge {
    --apple-body: #edf1f5;
    --apple-body-stroke: none;
    --apple-leaf: #b7c9bd;
    --apple-stem: #bfcbd4;
    --apple-icon: #8296a8;
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    flex: none;
    vertical-align: middle;
}

.apple-badge .apple-figure {
    display: block;
    width: 100%;
    height: 100%;
}

.apple-badge .apple-leaf {
    fill: var(--apple-leaf);
}

.apple-badge .apple-stem {
    stroke: var(--apple-stem);
    stroke-width: 2.5;
}

.apple-badge .apple-body {
    fill: var(--apple-body);
    stroke: var(--apple-body-stroke);
    stroke-width: 1.5;
}

/* 中央图标层：graphic（内联 SVG，stroke currentColor）与 math（KaTeX span）共用。
   槽位占容器约 68%×62%（optical balance：果身最宽处约 72%，垂直方向让出果顶凹陷），
   符号是徽章主角；超宽内容仍由 apple-icon.js 的 fitToContainer 等比收缩。 */
.apple-badge .apple-icon {
    position: absolute;
    left: 50%;
    top: 57.5%;
    width: 68%;
    height: 62%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apple-icon);
    pointer-events: none;
}

/* 可选用户微调叠加在图标槽位；不覆盖子元素的 optical / fit transform。
   apple-icon.js 完成自动测宽后才设置变量，旧 presentation 不匹配此规则。 */
.apple-badge[data-apple-adjustment-scale] .apple-icon {
    scale: var(--apple-user-scale, 1);
    translate: var(--apple-user-x, 0%) var(--apple-user-y, 0%);
}

.apple-badge .apple-icon-svg {
    width: 100%;
    height: 100%;
}

.apple-badge .apple-icon-math {
    display: inline-block;
    line-height: 1;
    /* KaTeX 公式不可折行：nowrap 后 fitToContainer 才能测到真实宽度并等比收缩 */
    white-space: nowrap;
    transform-origin: center;
    color: var(--apple-icon);
}

/* math optical sizing（renderer 级轻量机制，不进 presentation 数据）：
   分类是渲染器按结构特征判定（apple.html），不按完整字符串硬编码：
   含 , 的元组式为 wide，0.50 + translateY(-16%) 上移；
   含 = / 空白 / [ 的等式与矩阵式为 xwide，0.60 + translateY(-16%) 上移；
   带括号的函数式为 func，0.60 + translateY(-16%) 上移
   （三类均带上移：方括号/上下标/括号让字形盒重心略偏下，translateY 做
   optical 居中；fitToContainer 触发时内联 scale 会覆盖此 transform，
   属预期——溢出时以收进槽位为先）；
   多字母 operator（\operatorname{...} / \lim / \det 开头）微降至 0.85；
   \mathcal 系略降至 0.95；
   带上下标/prime/\hat/\mathbb/\vec 的复合符号为 medium，降至 0.92；
   单符号不设 data-apple-optical，走通用默认（系数 1）；
   fraction 独立，交给 fitToContainer，不套 word 缩放。 */
.apple-badge .apple-icon-math[data-apple-optical="xwide"] {
    --apple-optical-scale: 0.6;
    transform: translateY(-16%);
}

.apple-badge .apple-icon-math[data-apple-optical="wide"] {
    --apple-optical-scale: 0.5;
    transform: translateY(-16%);
}

.apple-badge .apple-icon-math[data-apple-optical="func"] {
    --apple-optical-scale: 0.6;
    transform: translateY(-16%);
}

.apple-badge .apple-icon-math[data-apple-optical="operator"] {
    --apple-optical-scale: 0.85;
}

.apple-badge .apple-icon-math[data-apple-optical="medium"] {
    --apple-optical-scale: 0.92;
}

.apple-badge .apple-icon-math[data-apple-optical="script"] {
    --apple-optical-scale: 0.95;
}

.apple-badge .apple-icon-math .katex {
    font-size: calc(17px * var(--apple-optical-scale, 1));
    color: var(--apple-icon);
}

.apple-badge--sm .apple-icon-math .katex {
    font-size: calc(15.5px * var(--apple-optical-scale, 1));
}

/* 兜底：图标缺失/渲染失败时的小圆点（不崩页面、不留空白苹果） */
.apple-badge .apple-icon-fallback,
.apple-badge .apple-icon-math--fallback {
    width: 16%;
    height: 16%;
    min-width: 4px;
    min-height: 4px;
    border-radius: 50%;
    background: var(--apple-icon);
    opacity: 0.55;
}

/* ===== 立体感（final 为唯一形态） =====
   柔和渐变 + 明确边缘 + 极轻外部投影，无独立高光斑——
   立体感只来自统一左上光源的渐变、边缘与投影，不做"发亮糖果"感。
   （历史 flat / dim1 / dim2 变体已随 dev visual lab 历史对照区一并删除。）
   所有状态共享同一套光源方向（左上）、渐变逻辑、边缘逻辑与投影逻辑，
   只换色相：渐变端点/边缘色全部走 --apple-* token，定义在各状态类上。 */
.apple-badge--final .apple-body {
    stroke: var(--apple-edge);
    stroke-width: 1.2;
}

.apple-badge--final .apple-figure {
    filter: drop-shadow(0 1.5px 1.6px rgba(15, 23, 42, 0.18));
}

/* 状态配色（只改 token） */
.apple-badge--lv1 {
    --apple-body: #22c55e;
    --apple-leaf: #16a34a;
    --apple-stem: #8a5a3b;
    --apple-icon: #ffffff;
    --apple-body-top: #52d681;
    --apple-body-bottom: #0f9247;
    --apple-edge: #0c7a3c;
    --apple-leaf-top: #28bd60;
    --apple-leaf-bottom: #0f8a41;
}

.apple-badge--lv2 {
    --apple-body: #f4a522;
    --apple-leaf: #16a34a;
    --apple-stem: #8a5a3b;
    --apple-icon: #7c4a03;
    --apple-body-top: #fcc75f;
    --apple-body-bottom: #d17d08;
    --apple-edge: #b26a06;
    --apple-leaf-top: #28bd60;
    --apple-leaf-bottom: #0f8a41;
}

.apple-badge--lv3 {
    --apple-body: #e0523d;
    --apple-leaf: #16a34a;
    --apple-stem: #8a5a3b;
    --apple-icon: #ffffff;
    --apple-body-top: #ef8068;
    --apple-body-bottom: #bb3826;
    --apple-edge: #9d2f1f;
    --apple-leaf-top: #28bd60;
    --apple-leaf-bottom: #0f8a41;
}

/* 管理端中性变体：不承载解锁/等级语义，启停状态由卡片 pill 表达。
   比 locked 更精致清晰：浅蓝灰、边缘更实、icon 更深 */
.apple-badge--neutral {
    --apple-body: #eef2f7;
    --apple-body-stroke: #cbd5e1;
    --apple-icon: #475569;
    --apple-body-top: #f5f8fc;
    --apple-body-bottom: #b9c7d8;
    --apple-edge: #8fa3ba;
    --apple-leaf-top: #b6c7be;
    --apple-leaf-bottom: #8fa796;
}

/* locked（默认 token 在 .apple-badge）：低饱和灰果，"尚未成熟"而非 disabled；
   保留轻微体积感，比 neutral 更淡更柔 */
.apple-badge--locked {
    --apple-body-top: #f4f7fa;
    --apple-body-bottom: #d3dbe3;
    --apple-edge: #b4c0cb;
    --apple-leaf-top: #c2d1c8;
    --apple-leaf-bottom: #9fb4a5;
}

.apple-badge--sm {
    width: 44px;
    height: 44px;
}

/* 数值像素尺寸（dev visual lab 用；生产只用 sm/md 预设）。
   容器宽高由 macro 内联 style 给出，这里只按同一比例推 katex 字号
   （md 48px→17px ≈ 0.35 倍，与预设视觉一致）。 */
.apple-badge--px .apple-icon-math .katex {
    font-size: calc(var(--apple-badge-px, 48px) * 0.35 * var(--apple-optical-scale, 1));
}

/* 四态苹果带（灰/绿/黄/红），规则页图例用 */
.apple-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 「成就图标」选择器（新建/编辑成就组表单） */
.aip-section {
    margin-top: 14px;
}

.aip-section h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.aip-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aip-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: var(--qb-surface);
    color: var(--qb-text);
    cursor: pointer;
}

.aip-preset .katex {
    font-size: 15px;
    color: var(--qb-text);
}

.aip-graphic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aip-graphic {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 72px;
    padding: 8px 4px 6px;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-sm);
    background: var(--qb-surface);
    color: var(--qb-text-soft);
    cursor: pointer;
}

.aip-graphic__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    color: var(--qb-text-soft);
}

.aip-graphic__label {
    font-size: 12px;
    line-height: 1.2;
}

.aip-preset:hover,
.aip-graphic:hover {
    border-color: var(--qb-border-strong);
}

.aip-preset.is-selected,
.aip-graphic.is-selected {
    border-color: var(--qb-brand);
    box-shadow: 0 0 0 1px var(--qb-brand);
}

.aip-preset.is-selected .katex,
.aip-graphic.is-selected,
.aip-graphic.is-selected .aip-graphic__icon {
    color: var(--qb-brand);
}

.aip-custom {
    max-width: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.aip-custom-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border: 1px dashed var(--qb-border);
    border-radius: var(--qb-radius-sm);
    color: var(--qb-text);
}

.aip-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--qb-error-text);
}

.aip-hint {
    margin: 6px 0 0;
}

.aip-preview {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.aip-preview__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.aip-preview__label {
    font-size: 12px;
    color: var(--qb-text-soft);
    line-height: 1.2;
}

/* Growth 管理端「课程成长」工作台 */
.ag-course-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ag-course-bar select {
    max-width: 320px;
}

.ag-pending-hint {
    margin: 10px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: #f8fafc;
    font-size: 13px;
}

.ag-pending-hint a {
    margin-left: 6px;
}

.ag-rank-track {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ag-rank-item {
    width: 96px;
    text-align: center;
}

.ag-rank-item .rank-badge-md {
    margin: 0 auto;
}

.ag-rank-name {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
}

.ag-groups-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ag-groups-head h3 {
    margin: 0;
}

.ag-groups-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ag-preset-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.ag-groups-count {
    font-size: 13px;
    font-weight: 400;
}

.ag-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ag-card {
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
}

.ag-card--inactive {
    opacity: 0.62;
}

.ag-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ag-card__title {
    flex: 1;
    min-width: 0;
}

.ag-card__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ag-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ag-level-chip {
    display: inline-block;
    margin-right: 4px;
    padding: 0 7px;
    font-size: 11px;
    color: var(--qb-text-soft);
    border: 1px solid var(--qb-border);
    border-radius: 999px;
}

.ag-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ag-card__actions form {
    margin: 0;
}

.ag-edit-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ag-edit-head__text {
    flex: 1;
    min-width: 0;
}

.ag-legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
}

/* 七类成就轻量说明卡：轻边框、克制的背景、Apple 作 identity mark、名称第一视觉主体 */
.ag-legend-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #fff;
}

.ag-legend-text {
    flex: 1;
    min-width: 0;
    /* 文字块顶端对齐：同一行卡片的成就名称基线一致；
       Apple 不受影响，仍相对卡片垂直居中（容器 align-items: center）。 */
    align-self: flex-start;
}

.ag-legend-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--qb-text, #1e293b);
    margin-bottom: 2px;
}

.ag-legend-item .muted {
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .ag-legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ag-legend-grid {
        grid-template-columns: 1fr;
    }

    .ag-legend-levels__note {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .ag-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ach-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 480px) {
    .ach-grid {
        grid-template-columns: 1fr;
    }
}

/* Timeline */
.student-timeline {
    position: relative;
}

.student-timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--qb-border);
}

.student-timeline-group {
    position: relative;
    padding-left: 44px;
    padding-bottom: 16px;
}

.student-timeline-group:last-child {
    padding-bottom: 0;
}

.student-timeline-date {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin-bottom: 10px;
}

.student-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.student-timeline-icon {
    position: absolute;
    left: -32px;
    top: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--qb-surface);
    border: 2px solid var(--qb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.student-timeline-text {
    font-size: 14px;
    color: var(--qb-text);
    line-height: 1.5;
}

.student-timeline-meta {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin-top: 2px;
}

.student-timeline-more {
    text-align: center;
    margin-top: 14px;
}

/* Student insights responsive */
@media (max-width: 1100px) {
    .student-hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .student-hero-right {
        grid-column: 1 / -1;
    }

    .student-two-col,
    .student-ai-assistant__grid,
    .student-achievement-wall {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .student-insight-page {
        padding: 12px 0 28px;
    }

    .student-hero-card {
        padding: 18px;
    }

    .student-hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .student-hero-ai {
        flex-direction: column;
        align-items: flex-start;
    }

    .student-two-col,
    .student-ai-assistant__grid,
    .student-achievement-wall {
        grid-template-columns: 1fr;
    }

    .student-ability-row {
        grid-template-columns: 70px 1fr 70px;
        gap: 8px;
    }

    .student-knowledge-item {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .student-knowledge-bar {
        grid-column: 1 / -1;
    }

    .student-timeline::before {
        left: 14px;
    }

    .student-timeline-group {
        padding-left: 36px;
    }

    .student-timeline-icon {
        left: -28px;
    }
}

/* 成长动态 */
.student-heatmap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    max-width: 280px;
    margin: 0 0 18px;
}

.student-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: #e2e8f0;
    transition: transform 0.1s ease;
}

.student-heatmap-cell:hover {
    transform: scale(1.15);
}

.student-heatmap-cell.level-0 { background: #e2e8f0; }
.student-heatmap-cell.level-1 { background: #bfdbfe; }
.student-heatmap-cell.level-2 { background: #93c5fd; }
.student-heatmap-cell.level-3 { background: #60a5fa; }
.student-heatmap-cell.level-4 { background: #2563eb; }

.student-activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--qb-border);
}

.student-activity-stat {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: var(--qb-radius-md);
}

.student-activity-stat__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--qb-text);
    line-height: 1.1;
}

.student-activity-stat__label {
    margin-top: 4px;
    font-size: 12px;
    color: var(--qb-text-soft);
    font-weight: 600;
}

.student-activity-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.student-activity-filter__btn {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--qb-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}

.student-activity-filter__btn:hover {
    border-color: var(--qb-border-strong);
    color: var(--qb-text);
}

.student-activity-filter__btn.is-active {
    border-color: var(--qb-brand);
    background: #eff6ff;
    color: var(--qb-brand);
}

.student-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.student-activity-group {
    padding: 14px 0;
}

.student-activity-group:first-child {
    padding-top: 0;
}

.student-activity-date {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin-bottom: 10px;
}

/* 成长动态 v2 — 左最近成长 / 右成长统计 */
.student-growth-two-col {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 4px;
}

.student-growth-subtitle {
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
    margin: 0 0 12px;
}

.student-growth-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-growth-card {
    background: #f8fafc;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    padding: 14px 16px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.student-growth-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 39, 75, 0.06);
}

.student-growth-more {
    text-align: center;
    margin-top: 12px;
}

.student-growth-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.student-growth-stats-card {
    padding: 18px;
}

.student-growth-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: var(--qb-text);
    border-bottom: 1px solid #f1f5f9;
}

.student-growth-stat-row:last-of-type {
    border-bottom: none;
}

.student-growth-stat-value {
    font-weight: 800;
    color: var(--qb-text);
}

.student-ai-evaluation-card {
    padding: 18px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border: 1px solid #dbeafe;
}

.student-ai-evaluation__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--qb-text);
    margin-bottom: 10px;
}

.student-ai-evaluation-card p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--qb-text);
    margin: 0;
}

@media (max-width: 900px) {
    .student-growth-two-col {
        grid-template-columns: 1fr;
    }

    .student-growth-right {
        order: -1;
    }
}

/* 我的成长 v3 */
.student-growth-header {
    margin-bottom: 12px;
}

.student-growth-section-subtitle {
    font-size: 13px;
    color: var(--qb-text-soft);
    margin: 4px 0 0;
}

.student-growth-card-wrap {
    padding: 20px;
}

.student-heatmap-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-height: 120px;
    overflow: hidden;
    margin-bottom: 12px;
}

.student-heatmap-grid__cell {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 2px;
    background: #e2e8f0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: default;
}

.student-heatmap-grid__cell:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    z-index: 1;
}

.student-heatmap-grid__cell.level-0 { background: #e2e8f0; }
.student-heatmap-grid__cell.level-1 { background: #bfdbfe; }
.student-heatmap-grid__cell.level-2 { background: #93c5fd; }
.student-heatmap-grid__cell.level-3 { background: #60a5fa; }
.student-heatmap-grid__cell.level-4 { background: #2563eb; }

.student-heatmap-tooltip {
    position: fixed;
    z-index: 1000;
    display: none;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.student-heatmap-tooltip.is-visible {
    display: block;
}

.student-heatmap-summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--qb-text-soft);
    text-align: center;
    margin: 0 0 20px;
}

.student-growth-two-col-v2 {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
}

.student-growth-subtitle-v2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
    margin: 0 0 12px;
}

.student-growth-cards-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-growth-card-v2 {
    background: #f8fafc;
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius-md);
    padding: 14px 16px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.student-growth-card-v2:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 39, 75, 0.06);
}

.student-growth-card-v2__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.student-growth-card-v2__date {
    font-size: 12px;
    font-weight: 800;
    color: var(--qb-text-soft);
}

.student-growth-card-v2__practice {
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-brand);
}

.student-growth-card-v2__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-growth-card-v2__event {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--qb-text);
    line-height: 1.5;
}

.student-growth-card-v2__icon {
    font-size: 15px;
    flex-shrink: 0;
}

.student-growth-card-v2__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 23px;
}

.student-growth-card-v2__pills .title-pill {
    font-size: 11px;
    padding: 2px 8px;
}

.student-growth-more-v2 {
    text-align: center;
    margin-top: 12px;
}

.student-growth-left-v2 {
    display: flex;
    flex-direction: column;
}

.student-growth-right-v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.student-growth-stats-card-v2 {
    padding: 18px;
}

.student-growth-stats-section-v2 {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

.student-growth-stats-section-v2:first-child {
    padding-top: 0;
}

.student-growth-stats-section-v2:last-of-type {
    border-bottom: none;
}

.student-growth-stats-label-v2 {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text-soft);
    margin-bottom: 10px;
}

.student-growth-rank-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-growth-rank-info-v2 {
    flex: 1;
    min-width: 0;
}

.student-growth-rank-name-v2 {
    font-size: 15px;
    font-weight: 800;
    color: var(--qb-text);
}

.student-growth-rank-next-v2 {
    font-size: 12px;
    color: var(--qb-text-soft);
    margin: 2px 0 8px;
}

.student-growth-stats-row-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    color: var(--qb-text);
    border-bottom: 1px solid #f1f5f9;
}

.student-growth-stat-value-v2 {
    font-weight: 800;
    color: var(--qb-text);
}

.student-ai-evaluation-v2 {
    margin-top: 14px;
    padding: 14px;
    background: #f8fafc;
    border-radius: var(--qb-radius-md);
}

.student-ai-evaluation-v2__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--qb-text);
    margin-bottom: 8px;
}

.student-ai-evaluation-v2 p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--qb-text);
    margin: 0;
}

@media (max-width: 900px) {
    .student-growth-two-col-v2 {
        grid-template-columns: 1fr;
    }

    .student-growth-right-v2 {
        order: -1;
    }

}

/* ============================================================
   Admin UI shared components (modals, dropdowns, empty states)
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-scrollable {
    max-height: 86vh;
    overflow-y: auto;
}

.action-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.action-menu-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.filter-bar .form-row {
    margin-bottom: 0;
}

.filter-bar input,
.filter-bar select {
    min-width: 140px;
}

/* 学生筛选与批量操作共用同一位置；[hidden] 需覆盖 .filter-bar 的 display。 */
#student-management-controls {
    min-height: 40px;
    margin-bottom: 16px;
}

#student-management-controls > .filter-bar {
    min-height: 40px;
    margin-bottom: 0;
}

#student-management-controls > [hidden] {
    display: none !important;
}

/* 学生管理：保持信息密度，筛选与批量操作在同一垂直节奏中切换。 */
.student-management-page .page-header {
    margin-bottom: 10px;
}

.student-management-page .page-header-main h1 {
    margin-bottom: 2px;
}

.student-admin-groups-link {
    margin: 0;
    font-size: 13px;
}

.student-admin-groups-link a {
    color: var(--qb-text-soft);
}

.student-summary {
    gap: 14px;
    margin-bottom: 10px;
}

.student-summary .admin-metric-item {
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.student-summary .admin-metric-item strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--qb-text);
}

#student-management-controls {
    margin-bottom: 10px;
}

#student-management-controls > .filter-bar {
    align-items: center;
    gap: 10px;
}

.student-management-page #student-filter-form input,
.student-management-page #student-filter-form select,
.student-management-page #student-filter-form .btn {
    box-sizing: border-box;
    height: 36px;
}

.student-management-page #student-filter-form input {
    min-width: 250px;
}

.student-management-page #student-filter-form .btn-link {
    height: auto;
    padding-left: 2px;
    padding-right: 2px;
}

.student-management-page #student-bulk-bar {
    gap: 10px;
}

.student-management-page #student-selected-count {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.student-management-page .student-select-cell {
    width: 32px;
    padding-left: 10px;
    padding-right: 4px;
    text-align: center;
}

/* 课程权限页沿用学生管理的紧凑筛选/选择态节奏。 */
#course-permission-controls, #course-permission-student-controls { min-height: 40px; margin-bottom: 10px; }
#course-permission-controls > .filter-bar, #course-permission-student-controls > .filter-bar { min-height: 40px; margin-bottom: 0; align-items: center; gap: 10px; }
#course-permission-controls > [hidden], #course-permission-student-controls > [hidden] { display: none !important; }
.course-permissions-page .course-permission-filter input,
.course-permissions-page .course-permission-filter select,
.course-permissions-page .course-permission-filter .btn { box-sizing: border-box; height: 36px; }
.course-permissions-page .course-permission-filter input { min-width: 230px; }
.course-permissions-page #course-permission-bulk-bar { gap: 10px; }
.course-permissions-page #course-permission-selected-count { font-size: 16px; font-variant-numeric: tabular-nums; }
.course-permissions-page #course-permission-student-bulk-bar { gap: 10px; }
.course-permissions-page #course-permission-student-selected-count { font-size: 16px; font-variant-numeric: tabular-nums; }
/* 单行摘要保留完整详情入口；横向滚动沿用 table-wrap。 */
.course-permissions-page .table-ui th,
.course-permissions-page .table-ui td { white-space: nowrap; }
.course-permission-detail {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}
.course-permission-detail:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; border-radius: 2px; }
.course-permission-header-tip { text-decoration: none; }
.course-permission-tooltip { pointer-events: auto; max-height: calc(100dvh - 20px); overflow-y: auto; overflow-wrap: anywhere; }
.course-permission-hint { font-size: 13px; margin-bottom: 10px; }
.course-permissions-page .table-ui td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .course-permissions-page .course-permission-filter .form-row { min-width: 0; flex: 1 1 100%; }
    .course-permissions-page .course-permission-filter input,
    .course-permissions-page .course-permission-filter select { width: 100%; min-width: 0; }
}

.course-permission-back { margin-left: 8px; font-size: 13px; }
.course-permissions-page .permission-select-cell { width: 32px; padding-left: 10px; padding-right: 4px; text-align: center; }

.admin-metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-metric-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.admin-metric-item strong {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.admin-tab {
    padding: 8px 14px;
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.admin-tab-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    background: #e2e8f0;
    color: #475569;
    border-radius: 999px;
}

.admin-tab.is-active .admin-tab-count {
    background: #dbeafe;
    color: #2563eb;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.comparison-card {
    border: 1px solid #e2e8f0;
    border-radius: var(--qb-radius-md, 8px);
    padding: 16px;
    background: #fff;
}

.comparison-card h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: #334155;
}

.comparison-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: 12px;
    color: #64748b;
}

.comparison-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 重复题只读对比（QBDuplicateCompare，导入工作台等复用）：布局用上方的
   comparison-grid/card，以下为级别徽标、占位与动作区补充样式 */
.qb-dup-compare-head { margin-bottom: 8px; }

.qb-dup-compare-meta { margin: 0 0 12px; }

.qb-dup-level-badge {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.qb-dup-level-badge.is-strict { background: #fee2e2; color: #b91c1c; }
.qb-dup-level-badge.is-suspect { background: #fef3c7; color: #92400e; }

.qb-dup-compare-placeholder { padding: 24px 0; text-align: center; }

.qb-dup-compare-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* 列表「问题」列与抽屉审核区的重复关系链接（题号/查看对比） */
.qbw-dup-link {
    padding: 0;
    border: none;
    background: none;
    color: #2563eb;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    box-shadow: none;
}

.qbw-dup-link:hover { color: #1d4ed8; }

.qbw-row-duprel { color: #b45309; }

/* 站内通知铃铛与下拉面板 */
.nav-notification-bell { position: relative; }

.nav-notification-bell > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.nav-notification-bell > summary::after {
    display: none;
}

.bell-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    transition: color 0.15s;
}

.bell-icon svg {
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.24));
}

.nav-notification-bell > summary:hover,
.nav-notification-bell[open] > summary {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.nav-notification-bell[open] .bell-icon,
.bell-icon:hover,
.bell-icon:focus-visible {
    color: #fff;
}
.bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--qb-error-text);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.nav-notification-panel {
    width: 320px;
    max-width: 92vw;
    right: 0;
    left: auto;
}
.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--qb-border);
}
.notification-panel-header strong { font-size: 15px; color: var(--qb-text); }
.notification-panel-header .btn-text {
    background: none;
    border: none;
    color: var(--qb-brand);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.notification-panel-header .btn-text:hover { text-decoration: underline; }
#bell_notification_list { max-height: 320px; overflow-y: auto; }
.notification-loading,
.notification-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--qb-text-soft);
    font-size: 13px;
}
.notification-panel-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--qb-border);
    color: var(--qb-text);
    text-decoration: none;
    transition: background 0.12s;
}
.notification-panel-item:hover { background: var(--qb-surface-soft); }
.notification-panel-item.is-unread { background: #f0f5ff; }
.notification-panel-item.is-unread:hover { background: #e8efff; }
.notification-panel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--qb-border-strong);
    margin-top: 5px;
    flex-shrink: 0;
}
.notification-panel-item.is-unread .notification-panel-dot { background: var(--qb-brand); }
.notification-panel-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.notification-panel-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}
.notification-panel-content {
    font-size: 13px;
    color: var(--qb-text-soft);
    line-height: 1.45;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-panel-time {
    font-size: 12px;
    color: var(--qb-text-soft);
}
.notification-panel-footer {
    padding: 10px 14px;
    text-align: center;
    border-top: 1px solid var(--qb-border);
}
.notification-panel-footer a {
    color: var(--qb-brand);
    font-size: 13px;
    text-decoration: none;
}
.notification-panel-footer a:hover { text-decoration: underline; }

/* 通知设置 */
.notification-settings {
    --notification-gap: 14px;
}

.notification-section {
    display: grid;
    gap: var(--notification-gap);
}

.notification-section-head h3,
.notification-method-card h4,
.notification-preference-group h4,
.notification-advanced-push h3 {
    margin: 0;
}

.notification-section-head {
    display: grid;
    gap: 4px;
}

.notification-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--notification-gap);
}

.notification-method-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: var(--qb-surface);
    box-shadow: var(--qb-shadow-sm);
}

.notification-method-card > p {
    margin: 0;
}

.notification-method-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notification-method-card__head h4 {
    color: var(--qb-text);
    font-size: 16px;
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.notification-method-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notification-email-address {
    min-width: 0;
    color: var(--qb-text);
    font-size: 13px;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-help {
    border-top: 1px solid var(--qb-border);
    padding-top: 8px;
}

.notification-help > summary,
.notification-advanced-preferences > summary {
    cursor: pointer;
    color: var(--qb-brand);
    font-size: 13px;
    font-weight: 700;
}

.notification-help ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.notification-preference-card {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.notification-preference-groups {
    display: grid;
    gap: 16px;
}

.notification-preference-group {
    display: grid;
    gap: 10px;
}

.notification-preference-group h4 {
    color: var(--qb-text-soft);
    font-size: 13px;
    font-weight: 800;
}

.notification-event-list {
    display: grid;
    gap: 8px;
}

.notification-event {
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
}

.notification-event > summary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.notification-event > summary::-webkit-details-marker,
.notification-advanced-push > summary::-webkit-details-marker {
    display: none;
}

.notification-event > summary strong {
    display: block;
    color: var(--qb-text);
    font-size: 14px;
}

.notification-event > summary small,
.notification-advanced-push > summary small {
    display: block;
    margin-top: 2px;
    color: var(--qb-text-soft);
    font-size: 12px;
    line-height: 1.4;
}

.notification-event-state {
    flex: 0 0 auto;
    color: var(--qb-brand);
    font-size: 13px;
    font-weight: 700;
}

.notification-channel-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
}

.notification-channel-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--qb-text-soft);
    padding: 6px 10px;
    cursor: pointer;
}

.notification-channel-toggle.is-enabled {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: var(--qb-brand);
}

.notification-channel-toggle strong {
    font-size: 12px;
}

.notification-advanced-preferences {
    border-top: 1px solid var(--qb-border);
    padding-top: 12px;
    min-width: 0;
}

.notification-matrix-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.notification-preference-matrix {
    min-width: 680px;
}

.notification-advanced-push {
    padding: 0;
    overflow: hidden;
}

.notification-advanced-push > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.notification-advanced-push > summary strong {
    display: block;
    color: var(--qb-text);
    font-size: 16px;
}

.notification-advanced-push__body {
    display: grid;
    gap: 18px;
    border-top: 1px solid var(--qb-border);
    padding: 16px;
    min-width: 0;
}

.notification-advanced-push__body > section {
    min-width: 0;
}

.notification-advanced-help {
    border-top: 0;
    padding-top: 0;
}

.webhook-url-cell {
    max-width: 260px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notification-webhook-list {
    display: none;
}

.notification-webhook-card {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--qb-border);
    border-radius: 10px;
    background: #fff;
}

.notification-webhook-card__name {
    color: var(--qb-text);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.notification-webhook-card__time {
    color: var(--qb-text-soft);
}

.notification-webhook-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notification-identity-link {
    border-top: 1px solid var(--qb-border);
    padding-top: 12px;
}

@media (max-width: 900px) {
    .notification-method-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .notification-settings {
        --notification-gap: 12px;
    }

    .notification-settings .page-header,
    .notification-method-card__head,
    .notification-event > summary,
    .notification-advanced-push > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-method-card,
    .notification-preference-card,
    .notification-advanced-push__body {
        padding: 14px;
    }

    .notification-advanced-push {
        padding: 0;
    }

    .notification-settings .btn,
    .notification-channel-toggle {
        min-height: 40px;
    }

    .notification-actions {
        width: 100%;
    }

    .notification-actions .btn,
    .notification-actions button {
        flex: 1 1 100%;
        justify-content: center;
        width: 100%;
    }

    .notification-channel-options {
        display: grid;
        grid-template-columns: 1fr;
    }

    .notification-channel-options .inline-form,
    .notification-channel-toggle {
        width: 100%;
    }

    .notification-channel-toggle {
        justify-content: space-between;
    }

    .notification-matrix-wrap {
        margin-left: -4px;
        margin-right: -4px;
        padding: 0 4px 4px;
    }

    .notification-preference-matrix {
        min-width: 620px;
    }

    .notification-webhook-table-wrap {
        display: none;
    }

    .notification-webhook-list {
        display: grid;
        gap: 10px;
    }

    .notification-webhook-actions .inline-form,
    .notification-webhook-actions .btn {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 74px;
    }

    .notification-webhook-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 通知中心 */
.notification-center {
    min-width: 0;
}

.notification-center-header {
    gap: 12px;
}

.notification-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--qb-border);
}
.notification-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--qb-text-soft);
    font-size: 14px;
    text-decoration: none;
}
.notification-tabs a span {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.notification-tabs a.is-active {
    background: var(--qb-brand);
    color: #fff;
}
.notification-list { list-style: none; margin: 0; padding: 0; }
.notification-item {
    border-bottom: 1px solid var(--qb-border);
}
.notification-item:last-child { border-bottom: none; }
.notification-link {
    display: flex;
    gap: 12px;
    padding: 14px;
    color: var(--qb-text);
    text-decoration: none;
    transition: background 0.12s;
    min-width: 0;
}
.notification-link:hover { background: var(--qb-surface-soft); }
.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--qb-border-strong);
    margin-top: 5px;
    flex-shrink: 0;
}
.notification-item.is-unread .notification-dot { background: var(--qb-brand); }
.notification-item.is-unread .notification-title { font-weight: 750; }
.notification-item.is-read .notification-title,
.notification-item.is-read .notification-content { color: var(--qb-text-soft); }
.notification-body {
    flex: 1;
    min-width: 0;
}
.notification-row-head,
.notification-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.notification-row-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notification-title {
    min-width: 0;
    color: var(--qb-text);
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
}
a.notification-title:hover { color: var(--qb-brand); }
.notification-content {
    margin: 6px 0 8px;
    color: var(--qb-text-soft);
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.notification-time {
    flex: 0 0 auto;
    color: var(--qb-text-soft);
    font-size: 12px;
    white-space: nowrap;
}
.notification-type-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--qb-brand);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.notification-unread-label {
    color: var(--qb-brand);
    font-size: 12px;
    font-weight: 700;
}
.notification-action {
    flex: 0 0 auto;
}
.notification-empty-state p {
    margin: 0 0 6px;
}

@media (max-width: 560px) {
    .notification-center .page-header,
    .notification-row-head,
    .notification-row-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .notification-row-title {
        align-items: flex-start;
    }

    .notification-time {
        white-space: normal;
    }

    .notification-action {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }

    .nav-notification-panel {
        width: min(320px, calc(100vw - 20px));
        right: -8px;
    }
}

/* ── Mentorships / 指导学生 ── */

.mentorship-list-header {
    margin: 16px 0 8px;
}

.mentorship-pending-invites .mentorship-invite-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mentorship-invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

.mentorship-invite-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mentorship-invite-row form {
    margin: 0;
}

/* 成就创建入口使用两栏，不占用通用表单的自动多栏网格。 */
.ag-create-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}
.ag-create-choice > div { min-width: 0; }
.ag-create-choice button { margin-top: 12px; }
#appleIconPicker .aip-graphic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
#appleIconPicker .aip-graphic { width: 100%; }
#appleIconPicker input[type="range"] { padding-inline: 0; }
@media (max-width: 600px) {
    .ag-create-choice { grid-template-columns: minmax(0, 1fr); }
}

/* 成就编辑器：限定宽度，四个区域共用紧凑节奏；Apple renderer 样式不变。 */
.ae-editor { max-width: 1120px; margin: 0 auto; }
.ae-entry { max-width: 860px; }
.ae-page-head { margin-bottom: 20px; }
.ae-page-head h2 { margin: 10px 0 4px; }
.ae-page-head p { margin: 0; }
.ae-sections { display: grid; gap: 16px; }
.ae-section { padding: 20px 24px; }
.ae-section h3 { margin: 0 0 14px; }
.ae-context { margin: -4px 0 12px; font-size: 13px; }
.ae-basic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px 20px; }
.ae-basic-grid textarea { min-height: 64px; }
.ae-icon-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); gap: 24px; }
.ae-icon-options, .ae-icon-preview { min-width: 0; }
.ae-icon-preview { border-left: 1px solid var(--qb-border); padding-left: 24px; }
.ae-icon-layout .aip-section { margin: 0 0 14px; }
.ae-icon-layout .aip-section:last-child { margin-bottom: 0; }
.ae-icon-layout h4 { margin: 0 0 8px; font-size: 13px; }
.ae-icon-layout .aip-preset { min-width: 42px; height: 34px; padding: 0 8px; }
.ae-icon-layout .aip-preset-grid { gap: 6px; }
.ae-icon-layout .aip-graphic-grid { gap: 6px; }
.ae-icon-layout .aip-custom { max-width: none; width: 100%; }
.ae-icon-preview .form-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ae-icon-preview summary { font-size: 13px; cursor: pointer; }
.ae-icon-preview input[type="range"] { margin: 0; }
.ae-icon-preview label { font-size: 12px; }
.ae-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.ae-scope-grid select { width: 100%; min-height: 84px; }
.ae-scope-grid p { margin: 6px 0 0; }
.ae-supplement summary, .ae-secondary summary { cursor: pointer; font-size: 13px; }
.ae-supplement[open] > label { margin-top: 10px; }
.ae-scope-count { font-size: 13px; margin: 12px 0 0; }
.ae-secondary { margin-top: 12px; }
.ae-secondary > .form-inline-wrap { margin-top: 12px; }
.ae-question-list { padding-left: 18px; font-size: 13px; max-height: 220px; overflow-y: auto; }
.ae-shared { max-width: 360px; margin: 0 0 14px; }
.ae-level-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.ae-level-matrix th, .ae-level-matrix td { text-align: left; padding: 10px; border-bottom: 1px solid var(--qb-border); overflow-wrap: anywhere; }
.ae-level-matrix thead th { color: var(--qb-text-soft); font-weight: 500; background: var(--qb-surface-soft, #f8fafc); }
.ae-level-matrix th:first-child { width: 54px; }
.ae-number { display: flex; align-items: center; gap: 6px; }
.ae-number input { width: 100%; min-width: 0; max-width: 140px; padding: 7px 8px; }
.ae-inherited { font-size: 12px; }
.ae-summaries { margin-top: 14px; }
.ae-summaries p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; margin: 6px 0; font-size: 12px; line-height: 1.6; }
.ae-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 0; }
.ae-errors { background: var(--qb-error-bg, #fff1f2); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.ae-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ae-course-context { margin: 18px 0; }
.ae-course-context summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.ae-course-context select { max-width: 360px; margin-top: 10px; }
.ae-entry-cards { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ae-entry-card { display: flex; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--qb-border); border-radius: var(--qb-radius-lg); background: var(--qb-surface); cursor: pointer; }
.ae-entry-card:has(input:checked) { border-color: var(--qb-brand); box-shadow: inset 0 0 0 1px var(--qb-brand); }
.ae-entry-card:focus-within { outline: 2px solid var(--qb-brand); outline-offset: 3px; }
.ae-entry-card input { width: 16px; height: 16px; margin: 4px 0 0; flex-shrink: 0; }
.ae-entry-card > span { display: grid; gap: 8px; }
.ae-entry-card strong { font-size: 17px; }
.ae-entry-card span span { font-size: 13px; font-weight: 400; }
.ae-entry-card small { color: var(--qb-text-soft); font-weight: 400; }
.ae-entry-rule { max-width: 410px; margin-top: 18px; }
.ae-entry .ae-actions { margin-top: 18px; }
.ae-preset-tools { position: relative; font-size: 13px; }
.ae-preset-tools summary { cursor: pointer; color: var(--qb-text-soft); }
.ae-preset-tools .ag-preset-form { position: absolute; right: 0; top: 26px; padding: 12px; background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: 8px; box-shadow: var(--qb-shadow-sm); z-index: 5; width: 260px; }
@media (max-width: 700px) {
    .ae-section { padding: 16px; }
    .ae-basic-grid { grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; }
    .ae-icon-layout, .ae-scope-grid, .ae-entry-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ae-icon-preview { border-left: 0; border-top: 1px solid var(--qb-border); padding: 14px 0 0; }
    .ae-icon-preview .aip-preview { gap: 16px; }
    .ae-level-matrix, .ae-level-matrix tbody { display: block; }
    .ae-level-matrix thead { display: none; }
    .ae-level-matrix tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--qb-border); }
    .ae-level-matrix th, .ae-level-matrix td { display: block; border: 0; padding: 0; width: auto; }
    .ae-level-matrix tbody th { grid-column: 1 / -1; }
    .ae-level-matrix td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--qb-text-soft); margin-bottom: 5px; }
    .ae-level-matrix td:has(> .muted:not(.ae-inherited)) { display: none; }
    .ae-level-matrix .ae-number input { max-width: none; }
    .ae-entry-card { padding: 16px; }
    .ae-preset-tools .ag-preset-form { right: -80px; max-width: calc(100vw - 70px); }
}

/* ------------------------------------------------------------------ */
/* 结构化题目导入工作台（qbw-*）                                        */
/* ------------------------------------------------------------------ */

.qbw-stage { display: grid; gap: 10px; }
.qbw-stage[hidden] { display: none; }

.qbw-example-panel {
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 12px;
}

.qbw-example-panel > summary {
    padding: 8px 12px;
    cursor: pointer;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}

.qbw-example-panel > summary::-webkit-details-marker { display: none; }

.qbw-example-pre {
    margin: 0;
    padding: 10px 12px;
    max-height: 320px;
    overflow: auto;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

.qbw-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.qbw-stat { color: #475569; font-size: 14px; }
.qbw-stat strong { color: #0f172a; font-size: 16px; }
.qbw-stat-ready strong { color: #15803d; }
.qbw-stat-problem strong { color: #b91c1c; }
.qbw-stat-duplicate strong { color: #b45309; }

/* AI 批次数量守恒提示条（图片/PDF 识别链） */
.qbw-ai-diag {
    padding: 8px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}
.qbw-ai-diag-warning { color: #b45309; }
.qbw-ai-diag-detail summary { cursor: pointer; color: #1d4ed8; }
.qbw-ai-diag-detail ul { margin: 4px 0 0; padding-left: 20px; }

.qbw-batch-bar { padding: 8px 12px; }
.qbw-batch-title { margin-bottom: 4px; font-weight: 700; color: #0f172a; }
.qbw-batch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px 10px;
}
.qbw-batch-grid .form-row { margin-bottom: 0; }
.qbw-batch-grid label { font-size: 12.5px; }

.qbw-main {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.qbw-filter-bar {
    display: grid;
    gap: 6px;
    position: sticky;
    top: 84px;
}

.qbw-filter-btn {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.qbw-filter-btn:hover { border-color: #93c5fd; color: #2563eb; }
.qbw-filter-btn.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.qbw-list { display: grid; gap: 2px; align-content: start; padding-bottom: 76px; }

.qbw-rows { display: grid; gap: 2px; align-content: start; }

.qbw-list-empty { padding: 18px; }

/* 表头与数据行共用同一 grid 列结构，严格对齐；
   首列 22px=行选择 checkbox，次列 22px=状态点（第 5 轮：预留位启用），
   题目列后 64px=AI 生命周期列（与红点体系区分，紧凑固定宽） */
.qbw-row,
.qbw-list-head {
    display: grid;
    grid-template-columns: 22px 22px 40px 72px minmax(0, 1fr) 64px 168px 60px minmax(108px, auto);
    gap: 8px;
    align-items: center;
    padding: 0 8px;
}

.qbw-list-head {
    height: 28px;
    margin-bottom: 2px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.qbw-row {
    width: 100%;
    height: 38px;
    min-height: 38px;
    border: 1px solid #edf2f7;
    border-radius: 7px;
    background: #fff;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.qbw-row:hover { border-color: #bfdbfe; background: #f8fbff; }
.qbw-row:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }

.qbw-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.qbw-dot-ready { background: #22c55e; }
.qbw-dot-problem { background: #ef4444; }
.qbw-dot-duplicate { background: #f59e0b; }

.qbw-row-index { color: #64748b; font-variant-numeric: tabular-nums; }

/* 题干：一级注意力，拿绝大多数弹性空间；单行 + 超高裁切保 38px 行高 */
.qbw-row-stem {
    min-width: 0;
    height: 38px;
    line-height: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0f172a;
    font-size: 13.5px;
}
.qbw-row-stem p { display: inline; margin: 0; padding: 0; }
.qbw-row-stem .qb-table-wrap { display: inline; }
.qbw-row-stem .katex-display { display: inline-block; margin: 0; }
.qbw-row-stem .katex { vertical-align: -2px; }
.qbw-row-stem .qb-math-display-wrap { display: inline; }
/* Chrome 下 MathML 辅助副本的尺寸会逃逸 overflow 裁切并撑出横向滚动，列表行直接隐藏（抽屉里有完整无障碍渲染） */
.qbw-row-stem .katex-mathml { display: none; }

/* 右侧元数据：二级视觉层级，列宽稳定，长章节不挤题干 */
.qbw-row-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.qbw-row-difficulty { font-size: 12px; }

/* 「问题」列：没就绪的原因，醒目但不增行高 */
.qbw-row-problem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.qbw-row-problem.is-error { color: #b91c1c; font-weight: 600; }
.qbw-row-problem.is-dup { color: #b45309; font-weight: 600; }
.qbw-row-problem.is-none { color: #cbd5e1; }

/* 多选：行首 checkbox + 选中态（第 5 轮启用第 4 轮预留列） */
.qbw-row-check,
.qbw-h-check {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    justify-self: start;
    accent-color: #2563eb;
    cursor: pointer;
}
.qbw-row.is-selected { border-color: #93c5fd; background: #eff6ff; }

/* 列表右栏容器（selection bar 在列表上方） */
.qbw-list-column { min-width: 0; display: flex; flex-direction: column; }

/* selection toolbar：selected>0 时出现在筛选按钮下方/列表上方 */
.qbw-selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 10px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    font-size: 13px;
}
.qbw-selection-bar[hidden] { display: none; }
.qbw-sel-count { color: #1e40af; }
.qbw-sel-count strong { font-variant-numeric: tabular-nums; }
.qbw-selection-bar button { padding: 4px 12px; font-size: 12.5px; }
.qbw-selection-bar button:last-child { margin-left: auto; }

/* 批量修改 modal */
.qbw-bm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.45);
}
.qbw-bm-overlay[hidden] { display: none; }
.qbw-bm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 61;
    width: 480px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    font-size: 13.5px;
}
.qbw-bm-modal[hidden] { display: none; }
.qbw-bm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #eef2f7;
}
.qbw-bm-head strong { font-size: 15px; }
.qbw-bm-close {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}
.qbw-bm-body { padding: 12px 16px; }
.qbw-bm-row {
    display: grid;
    grid-template-columns: 64px 118px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.qbw-bm-row > label { color: #334155; }
.qbw-bm-row select,
.qbw-bm-row input { width: 100%; min-width: 0; }
.qbw-bm-row .qbw-bm-value.is-disabled { opacity: 0.45; }
.qbw-bm-summary {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
}
.qbw-bm-summary strong { color: #1d4ed8; }
.qbw-bm-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eef2f7;
}

.qbw-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e5eaf3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
}

.qbw-action-bar button:last-child { margin-left: auto; }
.qbw-action-hint { flex: 1; }

/* 编辑抽屉 */
.qbw-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.35);
}

.qbw-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    display: flex;
    flex-direction: column;
    width: min(560px, 96vw);
    background: #fff;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
}

.qbw-drawer[hidden] { display: none; }

.qbw-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.qbw-drawer-status { margin-left: 10px; }
.qbw-drawer-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.qbw-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: grid;
    gap: 14px;
}

.qbw-drawer-section {
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f7;
    display: grid;
    gap: 8px;
}

.qbw-drawer-subtitle { font-weight: 700; color: #0f172a; font-size: 13.5px; }
.qbw-option-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; }
.qbw-option-row label { margin-bottom: 0; }

.qbw-override-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: transparent;
    vertical-align: middle;
}

.qbw-override-dot.is-on { background: #2563eb; }

.qbw-unoverride {
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    vertical-align: middle;
}

.qbw-unoverride:hover { border-color: #93c5fd; color: #2563eb; }

.qbw-dup-section {
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    display: grid;
    gap: 6px;
}

.qbw-dup-title { font-weight: 700; color: #92400e; font-size: 13px; }
.qbw-dup-match { font-size: 13px; color: #0f172a; }
.qbw-dup-actions { display: flex; align-items: center; gap: 8px; }

.qbw-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}

/* 抽屉预览态（第 6 轮）：最终视觉效果，与正式题目同一套 renderer */
.qbw-dpv-head-actions { display: flex; align-items: center; gap: 8px; }
.qbw-dpv-body { gap: 16px; font-size: 14.5px; align-content: start; }
.qbw-dpv-block { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #edf2f7; }
.qbw-dpv-block:last-child { border-bottom: none; padding-bottom: 0; }
.qbw-dpv-label { font-weight: 700; color: #64748b; font-size: 12px; letter-spacing: 0.02em; }
.qbw-dpv-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #334155; font-size: 13px; }
.qbw-dpv-overrides { margin-top: 4px; }
.qbw-dpv-annotations { display: grid; gap: 4px; }
.qbw-dpv-errors {
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
}
.qbw-dpv-error-item { color: #b91c1c; font-size: 13px; font-weight: 600; }
.qbw-dpv-warnings { display: grid; gap: 3px; }
.qbw-dpv-foot { justify-content: space-between; }

.qbw-result-summary { display: flex; gap: 18px; margin: 8px 0 12px; }
.qbw-result-block { margin-top: 12px; }
.qbw-result-block ul { margin-top: 6px; }

/* 1024 档位：优先压缩章节列与间距，不牺牲题干 */
@media (max-width: 1100px) {
    .qbw-row,
    .qbw-list-head { grid-template-columns: 22px 22px 36px 68px minmax(0, 1fr) 126px 56px minmax(100px, auto); gap: 6px; }
}

@media (max-width: 900px) {
    .qbw-main { grid-template-columns: 1fr; }
    .qbw-filter-bar {
        position: static;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* 手机：先藏章节，保留 checkbox/状态/序号/题型/题干/问题 */
    .qbw-row,
    .qbw-list-head { grid-template-columns: 22px 22px 34px 62px minmax(0, 1fr) minmax(96px, auto); }
    .qbw-row-loc, .qbw-h-loc { display: none; }
    .qbw-row-difficulty, .qbw-h-difficulty { display: none; }
    .qbw-drawer { width: 100vw; }
}

/* 小屏底栏：说明文字独占一行，不与按钮竞争 flex 空间；按钮文字不逐字断行 */
@media (max-width: 480px) {
    .qbw-action-bar {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 10px;
    }
    .qbw-action-hint {
        flex: 1 1 100%;
        order: -1;
        font-size: 12px;
        white-space: normal;
    }
    .qbw-action-bar button { white-space: nowrap; }
    .qbw-action-bar button:last-child { margin-left: auto; }
    /* 手机：更大的 checkbox 触控目标；toolbar 与批量 modal 压缩排布 */
    .qbw-row-check { width: 18px; height: 18px; }
    .qbw-selection-bar { gap: 8px; padding: 6px 8px; font-size: 12.5px; }
    .qbw-selection-bar button { padding: 4px 10px; font-size: 12px; }
    .qbw-bm-modal { font-size: 13px; }
    .qbw-bm-row { grid-template-columns: 52px 104px minmax(0, 1fr); gap: 6px; }
}

/* ---------------------------------------------------------------------------
   学生 Excel 导入（全局学生管理 / 教学班管理学生共用 Modal）
--------------------------------------------------------------------------- */
.student-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.student-import-preview-wrap {
    max-height: 46vh;
    overflow-y: auto;
}

.student-import-row--error td {
    background: rgba(220, 38, 38, 0.05);
}

.student-import-error {
    margin: 8px 0 0;
    color: #b91c1c;
    font-size: 13px;
}

.student-import-error-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: #b91c1c;
    font-size: 13px;
}

/* 教学班管理学生页：名单标题行内操作 + 候选人多选列表 */
.class-student-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.class-student-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.class-candidate-list {
    margin-top: 8px;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
}

.class-candidate-list .muted {
    margin: 10px 6px;
}

.class-candidate-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.class-candidate-item:hover {
    background: #f1f5f9;
}

.class-candidate-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
}

.class-candidate-error {
    margin: 8px 0 0;
    color: #b91c1c;
    font-size: 13px;
}

/* .btn 默认 display:inline-flex 会覆盖 UA 的 [hidden] 规则，显式补回 */
.btn[hidden] {
    display: none;
}

/* 题目只读内容：与 Modal、侧栏的尺寸和定位无关。 */
.qb-question-preview { display: grid; gap: 16px; min-width: 0; align-content: start; }
.qb-preview-block { display: grid; gap: 6px; min-width: 0; align-content: start; }
.qb-preview-label { font-weight: 600; }
.qb-preview-text { min-width: 0; overflow-x: auto; overflow-wrap: anywhere; white-space: normal; line-height: 1.8; }
.qb-preview-text > :first-child { margin-top: 0; }
.qb-preview-text > :last-child { margin-bottom: 0; }
.qb-preview-option { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qb-preview-option > .qb-preview-text { flex: 1; }
.qb-preview-other-solutions > summary { cursor: pointer; }
.qb-preview-other-solutions > .qb-preview-text { margin-top: 10px; }
.qb-preview-other-solutions > .qb-preview-text + .qb-preview-text { border-top: 1px solid #edf2f7; padding-top: 10px; }

/* PDF 识别记录：命中卡片与记录管理 modal。
   qb-modal 系列与 components/ask_issue_modal.html 内联样式一致，
   管理页（教师）不加载该组件，故在此补一份核心样式（学生页双份同值无害）。 */
.qb-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; }
.qb-modal[hidden] { display: none; }
.qb-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.qb-modal-panel { position: relative; width: min(520px, 92%); max-height: 86vh; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); display: flex; flex-direction: column; }
.qb-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e2e8f0; }
.qb-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; }
.qb-modal-close { border: 0; background: transparent; font-size: 22px; color: #64748b; cursor: pointer; line-height: 1; }
.qb-modal-body { padding: 18px; overflow: auto; }
.qb-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid #e2e8f0; }

.pdf-recognition-hit {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 14px;
}
.pdf-recognition-hit-title { font-weight: 700; }

.pdf-rec-panel { width: min(640px, 92%); }
.pdf-rec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pdf-rec-table th,
.pdf-rec-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #e7edf8; }
.pdf-rec-table th { color: #475569; font-weight: 700; }
.pdf-rec-table .pdf-rec-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-rec-delete { border: 0; background: transparent; color: #b91c1c; cursor: pointer; padding: 2px 6px; font-size: 13px; }

/* 工作台列表「AI」列：AI 生命周期/可否修改，与红点体系（需人工处理）区分 */
.qbw-row-ai { font-size: 12px; white-space: nowrap; overflow: hidden; }
.qbw-row-ai.is-pending { color: #94a3b8; }
.qbw-row-ai.is-running { color: #1d4ed8; font-weight: 600; }
.qbw-row-ai.is-done { color: #94a3b8; }
.qbw-row-ai.is-failed { color: #b45309; }
.qbw-row-ai.is-none { color: #cbd5e1; }

.qbw-row-ai .qbw-ai-spin {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    border: 2px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: qb-spin 0.8s linear infinite;
}

.qbw-h-ai { white-space: nowrap; }
/* 表头 ⓘ glyph（不挂 .qb-tip：其 ::after 纯 CSS tooltip 会被 .table-wrap 的
   overflow 裁剪且空 data-tip 会渲染空气泡；说明改由挂 body 的 fixed 浮层呈现） */
.qbw-ai-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
    cursor: help;
    user-select: none;
}
.qbw-ai-tip:hover, .qbw-ai-tip:focus-visible { color: #64748b; outline: none; }
/* fixed 定位挂 body（脱离 .table-wrap 的 overflow 裁剪），多行文案 */
.qbw-ai-tip-float { white-space: pre-line; }

/* 汇总栏右侧的 AI 完善总进度（spinner 复用 qbw-progress-busy::before） */
.qbw-stat-ai { color: #1e3a8a; }