/* ============================================================================
 * block3d grid3d 关卡编辑器样式（深色卡片风格，与闯关页保持一致）
 * 作用域：.b3de（编辑器根）内，避免污染全站
 * ========================================================================== */

.b3de {
    --b3de-bg: #0f1420;
    --b3de-panel: #161d2b;
    --b3de-panel2: #1a2130;
    --b3de-line: #263042;
    --b3de-text: #e8ecf4;
    --b3de-sub: #8b94a8;
    --b3de-dim: #5d6779;
    --b3de-accent: #58a6ff;
    --b3de-ok: #3fd08a;
    --b3de-warn: #f0c674;
    --b3de-err: #ff6b6b;
    --b3de-cell: 30px;

    box-sizing: border-box;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 14px;
    background: var(--b3de-bg);
    color: var(--b3de-text);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.b3de * {
    box-sizing: border-box;
}

/* ---------- 顶部 ---------- */
.b3de .b3de-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(160deg, #1a2130 0%, #141b28 100%);
    border: 1px solid var(--b3de-line);
    border-radius: 12px;
    padding: 12px 18px;
}

.b3de .b3de-head h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.b3de .b3de-head h1 small {
    font-size: 12px;
    color: var(--b3de-sub);
    font-weight: 400;
    margin-left: 6px;
}

.b3de .b3de-headtip {
    font-size: 12px;
    color: var(--b3de-sub);
    margin-top: 4px;
}

.b3de .b3de-head-r {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.b3de .b3de-token {
    width: 190px;
}

/* ---------- 通用控件 ---------- */
.b3de .b3de-btn {
    border: 1px solid #2a3450;
    background: var(--b3de-panel2);
    color: #c9d1d9;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}

.b3de .b3de-btn:hover {
    border-color: var(--b3de-accent);
    color: var(--b3de-accent);
}

.b3de .b3de-btn.primary {
    background: linear-gradient(135deg, #2f6fd0, #4a9eff);
    border-color: transparent;
    color: #fff;
}

.b3de .b3de-btn.primary:hover {
    filter: brightness(1.1);
    color: #fff;
}

.b3de .b3de-mini {
    border: 1px solid #2a3450;
    background: transparent;
    color: var(--b3de-sub);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 12px;
    cursor: pointer;
}

.b3de .b3de-mini.danger {
    border-color: #4a2a34;
    color: #ff8a8a;
}

.b3de .b3de-input {
    width: 100%;
    background: #0d1117;
    color: #e6edf3;
    border: 1px solid #222d3f;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    min-width: 0;
}

.b3de .b3de-input:disabled {
    opacity: .6;
}

.b3de .b3de-mono {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
    color: var(--b3de-sub);
}

.b3de .b3de-empty {
    font-size: 12px;
    color: var(--b3de-dim);
    padding: 8px 2px;
    line-height: 1.7;
}

/* ---------- 状态条 ---------- */
.b3de .b3de-status {
    border: 1px solid var(--b3de-line);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    background: var(--b3de-panel);
}

.b3de .b3de-status.ok {
    border-left-color: var(--b3de-ok);
    color: #b8f0d5;
}

.b3de .b3de-status.err {
    border-left-color: var(--b3de-err);
    color: #ffc2c2;
}

.b3de .b3de-status.note {
    border-left-color: var(--b3de-accent);
    color: #c2d6f5;
}

.b3de .b3de-status[hidden] {
    display: none;
}

/* ---------- 三栏布局 ---------- */
.b3de .b3de-main {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(300px, 1fr) minmax(420px, 1.25fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 1280px) {
    .b3de .b3de-main {
        grid-template-columns: 1fr;
    }
}

.b3de .b3de-panel {
    border: 1px solid var(--b3de-line);
    border-radius: 12px;
    background: var(--b3de-panel);
    padding: 10px 12px 12px;
    margin-bottom: 12px;
}

.b3de .b3de-panel-h {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--b3de-sub);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.b3de .b3de-panel-h .b3de-spacer {
    margin-left: auto;
}

.b3de .b3de-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* ---------- 画笔 ---------- */
.b3de .b3de-brushes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 7px;
}

.b3de .b3de-brush {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #2a3450;
    background: var(--b3de-panel2);
    color: #c9d1d9;
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.b3de .b3de-brush::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #445;
    flex: 0 0 auto;
}

.b3de .b3de-brush.on {
    border-color: var(--b3de-accent);
    color: var(--b3de-accent);
    box-shadow: 0 0 0 1px var(--b3de-accent) inset;
}

.b3de .b3de-brush.t-fence::before { background: #8e7f72; }
.b3de .b3de-brush.t-water::before { background: #2b4c8c; }
.b3de .b3de-brush.t-rock::before { background: #6b7280; }
.b3de .b3de-brush.t-step::before { background: #5fe0f5; }
.b3de .b3de-brush.t-bridge::before { background: #b98a5a; }
.b3de .b3de-brush.t-decor::before { background: #9aa6c4; }
.b3de .b3de-brush.is-goal::before { background: #ffc53d; border-radius: 50%; }
.b3de .b3de-brush.is-actor::before { background: #ff8a3d; border-radius: 50%; }
.b3de .b3de-brush.is-eraser::before { background: #6b7280; }

.b3de .b3de-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--b3de-dim);
    line-height: 1.7;
}

/* ---------- 元素调色板 ---------- */
.b3de .b3de-palette {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow: auto;
    padding-right: 2px;
}

.b3de .b3de-pal-group-h {
    font-size: 12px;
    color: var(--b3de-sub);
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.b3de .b3de-pal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
}

.b3de .b3de-pal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: 1px solid #2a3450;
    background: var(--b3de-panel2);
    border-radius: 8px;
    cursor: pointer;
    color: #c9d1d9;
}

.b3de .b3de-pal-item:hover {
    border-color: var(--b3de-accent);
}

.b3de .b3de-pal-item.on {
    border-color: var(--b3de-accent);
    box-shadow: 0 0 0 1px var(--b3de-accent) inset;
    color: var(--b3de-accent);
}

.b3de .b3de-pal-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: block;
}

.b3de .b3de-pal-swatch {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: block;
    border: 1px solid rgba(0, 0, 0, .4);
}

.b3de .b3de-pal-label {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    word-break: break-all;
}

/* ---------- 元素面板（契约 CLASSES / CLASS_FIELDS 自动生成） ---------- */
.b3de .b3de-elem-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.b3de .b3de-elem-classes .b3de-mini.on {
    border-color: var(--b3de-accent);
    color: var(--b3de-accent);
    box-shadow: 0 0 0 1px var(--b3de-accent) inset;
}

.b3de .b3de-elem-fields {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 2px;
}

/* P7（Task 22.4）：伤害/回血/血量快捷开关 */
.b3de .b3de-elem-p7 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px dashed var(--b3de-line);
    border-radius: 8px;
}

.b3de .b3de-elem-p7 .b3de-check {
    font-size: 12px;
    gap: 5px;
}

.b3de .b3de-field-stack {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.b3de .b3de-adv {
    margin-top: 8px;
    border-top: 1px dashed var(--b3de-line);
    padding-top: 6px;
}

.b3de .b3de-adv > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--b3de-sub);
    user-select: none;
}

.b3de .b3de-caps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 8px;
}

.b3de .b3de-caps-grid .b3de-check {
    font-size: 12px;
}

/* ---------- 徽标 ---------- */
.b3de .b3de-badge {
    display: inline-block;
    font-size: 11px;
    color: var(--b3de-accent);
    background: rgba(88, 166, 255, .12);
    border: 1px solid rgba(88, 166, 255, .35);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.b3de .b3de-badge[hidden] {
    display: none;
}

/* ---------- 棋盘 ---------- */
.b3de .b3de-board-wrap {
    overflow: auto;
    max-height: 62vh;
    padding: 4px;
}

.b3de .b3de-board {
    display: grid;
    gap: 2px;
    width: max-content;
}

/* 大网格（>24）：收窄格子，配合 wrap 滚动，保证 36×36 可编辑不溢出 */
.b3de .b3de-board.is-lg {
    --b3de-cell: 22px;
    gap: 1px;
}

.b3de .b3de-cell {
    width: var(--b3de-cell);
    height: var(--b3de-cell);
    padding: 0;
    border: 1px solid #2a3450;
    border-radius: 4px;
    background: #1c2434;
    color: #dbe6f5;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.b3de .b3de-cell:hover {
    border-color: var(--b3de-accent);
}

.b3de .b3de-cell.t-fence { background: #6f6259; }
.b3de .b3de-cell.t-water { background: #24447c; }
.b3de .b3de-cell.t-rock { background: #565f6e; }
.b3de .b3de-cell.t-step { background: #2f8fa0; }
.b3de .b3de-cell.t-bridge { background: #8a6540; }
.b3de .b3de-cell.t-decor { background: #59617a; }

.b3de .b3de-cell.is-goal {
    box-shadow: 0 0 0 2px #ffc53d inset;
}

.b3de .b3de-cell.is-actor {
    background: #b8551a;
    color: #fff;
    font-weight: 700;
}

/* ---------- 3D 预览 ---------- */
.b3de .b3de-preview {
    width: 100%;
    height: 52vh;
    min-height: 360px;
    border-radius: 10px;
    overflow: hidden;
    background: #0e1526;
    position: relative;
}

.b3de .b3de-preview-err {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: var(--b3de-warn);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* ---------- 右侧标签页 ---------- */
.b3de .b3de-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.b3de .b3de-tabs button {
    border: 1px solid var(--b3de-line);
    background: var(--b3de-panel2);
    color: var(--b3de-sub);
    border-radius: 8px 8px 0 0;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}

.b3de .b3de-tabs button.on {
    color: var(--b3de-accent);
    border-color: var(--b3de-accent);
    background: var(--b3de-panel);
}

.b3de .b3de-panes {
    border: 1px solid var(--b3de-line);
    border-radius: 10px;
    background: var(--b3de-panel);
    padding: 12px;
    min-height: 320px;
    max-height: 58vh;
    overflow: auto;
}

.b3de .b3de-pane {
    display: none;
}

.b3de .b3de-pane.on {
    display: block;
}

.b3de .b3de-section {
    font-size: 12px;
    color: var(--b3de-sub);
    letter-spacing: 1px;
    margin: 12px 0 8px;
    border-bottom: 1px dashed var(--b3de-line);
    padding-bottom: 5px;
}

.b3de .b3de-pane > .b3de-section:first-child {
    margin-top: 0;
}

.b3de .b3de-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.b3de .b3de-field > label {
    flex: 0 0 84px;
    font-size: 13px;
    color: var(--b3de-sub);
}

.b3de .b3de-field > .b3de-input,
.b3de .b3de-field > .b3de-mono,
.b3de .b3de-field > select,
.b3de .b3de-field > label.b3de-check {
    flex: 1 1 auto;
}

.b3de .b3de-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #c9d1d9;
}

.b3de textarea.b3de-input {
    resize: vertical;
    min-height: 64px;
    line-height: 1.7;
}

.b3de .b3de-grid3 {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
}

.b3de .b3de-inline {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.b3de .b3de-dim {
    font-size: 11px;
    color: var(--b3de-dim);
}

/* ---------- 角色 / 条件卡片 ---------- */
.b3de .b3de-actor,
.b3de .b3de-cond {
    border: 1px solid var(--b3de-line);
    border-radius: 10px;
    background: var(--b3de-panel2);
    padding: 10px;
    margin-bottom: 10px;
}

.b3de .b3de-actor.on {
    border-color: var(--b3de-accent);
}

.b3de .b3de-actor-head,
.b3de .b3de-cond-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.b3de .b3de-actor-tag {
    font-size: 12px;
    font-weight: 600;
    color: #aeb8cc;
}

.b3de .b3de-cond-head .b3de-input {
    flex: 1 1 auto;
}

.b3de .b3de-cond-head .b3de-mini {
    flex: 0 0 auto;
}

/* ---------- 命令集矩阵 ---------- */
.b3de .b3de-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.b3de .b3de-matrix th,
.b3de .b3de-matrix td {
    border: 1px solid var(--b3de-line);
    padding: 5px 6px;
    text-align: center;
}

.b3de .b3de-matrix th {
    color: var(--b3de-sub);
    font-weight: 600;
    background: var(--b3de-panel2);
}

.b3de .b3de-matrix-label {
    text-align: left !important;
    color: #c9d1d9;
    white-space: nowrap;
}

.b3de .b3de-matrix-group td {
    text-align: left;
    color: var(--b3de-accent);
    background: rgba(88, 166, 255, .08);
    font-weight: 600;
}

/* ---------- 校验报告 ---------- */
.b3de .b3de-report-box {
    border: 1px solid var(--b3de-line);
    border-radius: 12px;
    background: var(--b3de-panel);
    padding: 12px;
}

.b3de .b3de-report-title {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0 6px;
}

.b3de .b3de-report-title.err { color: var(--b3de-err); }
.b3de .b3de-report-title.warn { color: var(--b3de-warn); }
.b3de .b3de-report-title.note { color: var(--b3de-accent); }

.b3de .b3de-report-list {
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.8;
}

.b3de .b3de-report-list.err { color: #ffc2c2; }
.b3de .b3de-report-list.warn { color: #f2dca6; }
.b3de .b3de-report-list.note { color: #c2d6f5; }

.b3de .b3de-report-ok {
    color: var(--b3de-ok);
    font-size: 13px;
    padding: 6px 0;
}

.b3de .b3de-json {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    background: #0d1117;
    color: #c9d1d9;
    border: 1px solid #222d3f;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
}