/* 仅禁止整页滚动；不要给 body 设 overflow: hidden——
   主编辑器为 position: fixed、脱离文档流，body 高度会塌缩到只剩顶部导航，
   此时 body 的 overflow: hidden 会裁剪超出该高度的内容（顶部导航的下拉菜单、box-shadow） */
    html {
        overflow: hidden;
    }
    .question-edit-container {
        display: flex;
        position: fixed;
        top: var(--base-top-nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: #1e1e1e;
        color: #d4d4d4;
        overflow: hidden;
    }

    /* ===== 左侧题目面板：商业化 / 科技简约风 ===== */
    .question-panel {
        --qp-accent: #4ea1ff;
        --qp-accent-2: #22d3ee;
        position: relative;
        width: var(--qp-w, 40%);
        min-width: 240px;
        max-width: 72%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(180deg, #191c22 0%, #14161b 100%);
        border-right: 1px solid #262b35;
        color: #d7dde7;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    }

    /* 顶部渐变光带：科技感点缀 */
    .question-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--qp-accent), var(--qp-accent-2), transparent);
        opacity: .85;
        pointer-events: none;
        z-index: 2;
    }

    .qp-head {
        flex: none;
        padding: 14px 18px 12px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
        border-bottom: 1px solid #262b35;
    }

    .qp-head-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

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

    /* 最小化按钮：仅悬浮态出现 */
    .qp-min-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 8px;
        background: rgba(255, 255, 255, .05);
        color: #9aa6b8;
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
        transition: color .18s ease, background .18s ease;
    }

    .qp-min-btn:hover {
        color: #e3eaf4;
        background: rgba(255, 255, 255, .1);
    }

    .question-edit-container[data-qp-mode="float"] .qp-min-btn {
        display: inline-flex;
    }

    .qp-kicker {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(78, 161, 255, .9);
    }

    .qp-title {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.5;
        letter-spacing: .2px;
        color: #f2f6fb;
    }

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

    .qp-chip {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 10px;
        font-size: 12px;
        border-radius: 999px;
        color: #bcd7ff;
        background: rgba(78, 161, 255, .12);
        border: 1px solid rgba(78, 161, 255, .32);
        white-space: nowrap;
    }

    /* 分段控件：布局方式 / 宽度 */
    .qp-seg {
        display: inline-flex;
        gap: 2px;
        padding: 2px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 10px;
    }

    .qp-seg-btn {
        appearance: none;
        border: 0;
        background: transparent;
        color: #9aa6b8;
        font-size: 12px;
        line-height: 1;
        padding: 6px 11px;
        border-radius: 8px;
        cursor: pointer;
        transition: color .18s ease, background .18s ease, box-shadow .18s ease;
        font-family: inherit;
    }

    .qp-seg-btn:hover {
        color: #e3eaf4;
        background: rgba(255, 255, 255, .06);
    }

    .qp-seg-btn.is-active {
        color: #0b0e13;
        font-weight: 600;
        background: linear-gradient(135deg, var(--qp-accent), var(--qp-accent-2));
        box-shadow: 0 2px 10px rgba(78, 161, 255, .35);
    }

    .qp-body {
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding: 16px 18px 22px;
    }

    /* 深色细滚动条 */
    .qp-body::-webkit-scrollbar {
        width: 8px;
    }

    .qp-body::-webkit-scrollbar-thumb {
        background: rgba(122, 142, 172, .38);
        border-radius: 8px;
    }

    .qp-body::-webkit-scrollbar-thumb:hover {
        background: rgba(78, 161, 255, .65);
    }

    .qp-body::-webkit-scrollbar-track {
        background: transparent;
    }

    /* 宽度拖拽条（仅分栏态显示） */
    .qp-resizer {
        position: absolute;
        top: 0;
        right: -3px;
        width: 6px;
        height: 100%;
        cursor: col-resize;
        z-index: 3;
    }

    .qp-resizer::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: transparent;
        transition: background .18s ease;
    }

    .qp-resizer:hover::after,
    .qp-resizer.is-active::after {
        background: linear-gradient(180deg, var(--qp-accent), var(--qp-accent-2));
    }

    /* ===== 悬浮态：题目面板浮于编辑器之上（拖动头部移动，双击复位） ===== */
    .question-edit-container[data-qp-mode="float"] .question-panel {
        position: fixed;
        left: 24px;
        top: calc(var(--base-top-nav-height) + 20px);
        /* 随窗口缩放（不超过 420px、不溢出视口），并保留最小尺寸 */
        width: min(420px, calc(100vw - 48px));
        min-width: 280px;
        max-width: none;
        min-height: 200px;
        max-height: calc(100vh - var(--base-top-nav-height) - 170px);
        z-index: 2600;
        border: 1px solid #2c323d;
        border-radius: 14px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
        overflow: hidden;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .question-edit-container[data-qp-mode="float"] .qp-head {
        cursor: move;
        touch-action: none;
    }

    /* 悬浮态不再展示宽度切换 */
    .question-edit-container[data-qp-mode="float"] .qp-seg--width {
        display: none;
    }

    .question-edit-container[data-qp-mode="float"] .qp-resizer {
        display: none;
    }

    /* 悬浮态最小化：收起为窄条，仅保留标签与展开按钮 */
    .question-edit-container[data-qp-mode="float"][data-qp-min="1"] .question-panel {
        width: auto;
        min-width: 0;
        min-height: 0;
        max-height: none;
        height: auto;
    }

    .question-edit-container[data-qp-min="1"] .qp-seg,
    .question-edit-container[data-qp-min="1"] .qp-title,
    .question-edit-container[data-qp-min="1"] .qp-head-bottom,
    .question-edit-container[data-qp-min="1"] .qp-body {
        display: none;
    }

    .question-edit-container[data-qp-min="1"] .qp-head {
        padding: 8px 12px;
    }

    .question-content {
        line-height: 1.6;
        white-space: pre-wrap;
    }

    .question-content img {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        display: block;
    }
    .editor-panel {
        flex: 1 1 auto;
        min-width: 0;
    }

    #scratch-gui-container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    /* Scratch GUI 的积木区默认 flex-basis 固定且 flex-shrink: 0，容器变窄时不会收缩，
       导致 .blocklyMainBackground 宽度被卡死、不随题目面板宽度变化；这里放开收缩以自适应 */
    #scratch-gui-container [class*="gui_editor-wrapper"] {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem;
        color: #fff;
    }

    /* ===== Scratch 作答题：保存/提交工具栏与判题结果面板（浮层，不影响既有布局） =====
       布局约定：各浮层一律使用 position: fixed 自行定位，并统一纳入 ScratchFloatPanels 拖拽体系；
       默认位置收敛在右上角，不再覆盖舞台/积木区。位置记忆与复位规则见文件底部的拖拽工具注释。 */
    .scratch-answer-bar {
        /* 仅作为 Vue 挂载容器，本身不参与定位（子元素各自 fixed） */
        font-family: 'Microsoft YaHei', Arial, sans-serif;
    }

    .scratch-answer-actions {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 2600;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(30, 30, 30, .92);
        border: 1px solid #3c3c3c;
        border-radius: 22px;
        padding: 6px 10px;
    }

    .sab-hint {
        font-size: 12px;
        color: #9aa0a6;
        padding: 0 4px;
    }

    .sab-btn {
        padding: 8px 18px;
        border: none;
        border-radius: 16px;
        font-size: 14px;
        cursor: pointer;
        color: #1e1e1e;
    }

    .sab-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .sab-btn--save {
        background: #6a6a6a;
        color: #fff;
    }

    .sab-btn--submit {
        background: #61afef;
    }

    .sab-result {
        position: fixed;
        top: 128px;
        right: 24px;
        z-index: 2600;
        width: 380px;
        max-width: 84vw;
        max-height: 62vh;
        /* 对齐做试卷页的测试结果面板：面板整体不滚动，头部常驻、仅内容区滚动 */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        color: #333;
        border-radius: 10px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
    }

    .sab-result-head {
        flex: none;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 2px solid #61afef;
        font-weight: 600;
        font-size: 14px;
        /* 面板把手：按住可拖动，双击复位 */
        cursor: move;
        touch-action: none;
    }

    /* 头部右侧工具区（复位 / 关闭）：靠右对齐并固定，不随内容滚动 */
    .sab-result-tools {
        flex: none;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    /* 内容区：唯一滚动容器（头部与底部状态栏因此始终可见） */
    .sab-result-body {
        flex: 1;
        min-height: 0;
        padding: 10px 12px;
        overflow: auto;
    }

    /* 底部状态栏：常驻面板底部，不随内容区滚动（仅在判题进行中渲染） */
    .sab-result-foot {
        flex: none;
        padding: 6px 12px;
        border-top: 1px solid #ebeef5;
    }

    /* 内容区空态：居中提示，属内容区而非底部状态栏 */
    .sab-empty {
        text-align: center;
        font-size: 12px;
        color: #95a5a6;
        padding: 18px 0;
    }

    /* 关闭按钮：样式对齐做试卷页的 .scratch-test-close */
    .sab-result-close {
        flex: none;
        width: 20px;
        height: 20px;
        padding: 0;
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #909399;
        font-size: 16px;
        cursor: pointer;
    }

    .sab-result-close:hover {
        color: #61afef;
        border-color: #dcdfe6;
        background: #f5f7fa;
    }

    .sab-status {
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 10px;
        color: #fff;
        background: #909399;
    }

    .sab-status--pending, .sab-status--running {
        background: #e6a23c;
    }

    .sab-status--accepted {
        background: #27ae60;
    }

    .sab-status--partial {
        background: #e67e22;
    }

    .sab-status--failed {
        background: #e74c3c;
    }

    .sab-case {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 13px;
        padding: 7px 9px;
        border-radius: 6px;
        margin-bottom: 6px;
        background: #f7f8fa;
        border: 1px solid #ebeef5;
    }

    .sab-case.accepted {
        background: #eaf7ef;
        border-color: #c3e6cb;
    }

    .sab-case.wrong_answer, .sab-case.timeout, .sab-case.error {
        background: #fdeeee;
        border-color: #f5c6cb;
    }

    .sab-case-title {
        flex: 1;
        min-width: 100px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sab-case-status {
        font-size: 12px;
        color: #666;
    }

    .sab-case-score {
        font-size: 12px;
        color: #409eff;
    }

    .sab-case-msg {
        width: 100%;
        font-size: 12px;
        color: #c0392b;
        white-space: pre-wrap;
        word-break: break-all;
    }

    /* 判题进行中的等待文案：现在只用于底部状态栏 */
    .sab-polling {
        text-align: center;
        font-size: 12px;
        color: #95a5a6;
    }

    /* ===== 浮层通用：拖拽把手 / 复位按钮 ===== */
    .drag-grip {
        flex: none;
        width: 12px;
        height: 14px;
        cursor: move;
        touch-action: none;
        background-image: radial-gradient(#9aa0a6 1.4px, transparent 1.5px);
        background-size: 6px 6px;
        background-position: 1px 1px;
    }

    .float-reset {
        flex: none;
        width: 20px;
        height: 20px;
        padding: 0;
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #909399;
        font-size: 14px;
        cursor: pointer;
    }

    .float-reset:hover {
        color: #409eff;
        border-color: #dcdfe6;
        background: #f5f7fa;
    }

    .is-dragging {
        cursor: move !important;
        user-select: none;
    }

    /* ===== 题目素材面板 ===== */
    .qrm-panel {
        position: fixed;
        top: 128px;
        /* 与判题结果面板同层，默认并排避免相互遮挡 */
        right: 268px;
        z-index: 2600;
        width: 240px;
        max-height: 52vh;
        display: flex;
        flex-direction: column;
        background: rgba(30, 30, 30, .95);
        color: #d4d4d4;
        border: 1px solid #3c3c3c;
        border-radius: 10px;
        box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
        font-size: 13px;
        overflow: hidden;
    }

    .qrm-head {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, .04);
        border-bottom: 1px solid #3c3c3c;
        /* 面板把手：按住可拖动，双击复位 */
        cursor: move;
        touch-action: none;
    }

    .qrm-title {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qrm-body {
        padding: 6px 10px 10px;
        overflow: auto;
    }

    .qrm-group-title {
        font-size: 12px;
        color: #9aa0a6;
        margin: 8px 0 2px;
    }

    .qrm-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
    }

    .qrm-item-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qrm-import {
        flex: none;
        padding: 3px 10px;
        border: none;
        border-radius: 10px;
        background: #61afef;
        color: #1e1e1e;
        font-size: 12px;
        cursor: pointer;
    }

    .qrm-import:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .qrm-empty {
        color: #9aa0a6;
        font-size: 12px;
        padding: 6px 0;
    }

    .qrm-actions {
        padding: 8px 10px;
        border-top: 1px solid #3c3c3c;
    }

    .qrm-reload {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #61afef;
        border-radius: 12px;
        background: transparent;
        color: #61afef;
        font-size: 12px;
        cursor: pointer;
    }

    .qrm-reload:hover {
        background: rgba(97, 175, 239, .15);
    }

    /* .stc-entry 位于被 include 的测试点模板中，此处仅调整默认位置（top 覆盖 partial 的 bottom 定位），
       并交由页面脚本纳入拖拽体系；选择器提高权重以避免被 partial 内的同名规则覆盖 */
    .scratch-test-case-container .stc-entry {
        top: 76px;
        bottom: auto;
        touch-action: none;
    }