/* ============================================================
   主選單編輯模式（#menuEditorPane）— 蓋在畫布區上的表單編輯器
   ============================================================ */
#menuEditorPane {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background: #23233a;
    z-index: 50; /* 高於畫布/SVG，低於右側面板(200)與 modal */
}
.menu-editor {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px 60px;
}
.menu-editor-head h2 { color: #e0e0f0; margin-bottom: 6px; }
.menu-editor-hint { font-size: 12px; color: #99a; line-height: 1.7; margin-bottom: 18px; }

.menu-section { margin-bottom: 26px; }
.menu-section-title {
    display: flex; align-items: center; gap: 12px;
    color: #bcd; font-size: 15px; font-weight: bold;
    border-bottom: 1px solid #3a3a55; padding-bottom: 6px; margin-bottom: 10px;
}
.menu-section-title .btn { padding: 2px 10px; font-size: 12px; }

.menu-item-row {
    background: #1e1e2f;
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.menu-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.menu-row:last-child { margin-bottom: 0; }
.menu-row input, .menu-row select, .menu-row textarea {
    padding: 5px 8px; background: #16162a; border: 1px solid #4a4a5a;
    color: #fff; border-radius: 4px; font-size: 13px;
}
.menu-row input[type="color"] { width: 42px; height: 28px; padding: 2px; cursor: pointer; }
.menu-row input[type="checkbox"] { width: auto; }

.menu-id { font-size: 11px; color: #667; font-family: monospace; min-width: 56px; }
.menu-dim { font-size: 12px; color: #9aa; }
.menu-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #bbc; }
.menu-mini-btn { padding: 2px 8px !important; font-size: 12px !important; }
.menu-thumb {
    max-width: 56px; max-height: 34px; object-fit: contain;
    border: 1px solid #4a4a5a; border-radius: 4px; background: #11131c; vertical-align: middle;
}
.menu-row-ops { margin-left: auto; display: inline-flex; gap: 4px; }
.menu-cond { display: inline-flex; align-items: center; gap: 8px; }
.menu-cond-fields { display: inline-flex; align-items: center; gap: 6px; }

/* 複數條件編輯器（全部成立才生效） */
.menu-cond-list { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.menu-cond-head { display: flex; align-items: center; gap: 8px; }
.menu-cond-row { display: flex; align-items: center; gap: 6px; padding-left: 12px; }

/* 座標/尺寸輸入（與版面畫布拖移同步） */
.menu-coord input[type="number"] { width: 64px; }

/* 版面配置畫布（所見即所得拖移） */
#mmStageWrap { width: 100%; }
#mmStage {
    position: relative;
    width: 100%;
    border: 1px solid #4a4a6a;
    border-radius: 8px;
    overflow: hidden;
    background: #101020;
}
.mm-stage-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,20,40,0.72);
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 6px;
    color: #fff;
    cursor: grab;
    user-select: none;
    touch-action: none;
    white-space: nowrap;
    overflow: hidden;
}
.mm-stage-btn:active { cursor: grabbing; border-color: #6a9eff; box-shadow: 0 0 0 2px rgba(106,158,255,0.4); }
.mm-stage-conditional { opacity: 0.5; border-style: dashed; }

/* 圖片按鈕：以圖為面，不畫預設底/框（未選圖時退回虛線佔位）
   容器尺寸 = 原圖 × 縮放%（renderStage 於圖片載入後回填），圖填滿容器不變形 */
.mm-stage-btn-image { background: none; border-color: transparent; }
.mm-stage-btn-image img { width: 100%; height: 100%; display: block; pointer-events: none; }
/* 圖片底圖：框以圖為底、文字疊上 */
.mm-stage-btn-imgtext { border-color: transparent; background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.mm-stage-btn-image.mm-stage-placeholder,
.mm-stage-title.mm-stage-placeholder {
    border: 1px dashed rgba(255,255,255,0.45);
    background: rgba(20,20,40,0.4);
    color: #cbd;
}

/* 標題圖片圖層（背景之上、按鈕之下，可拖移） */
.mm-stage-title {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    touch-action: none;
    overflow: hidden;
    font-size: 12px;
    text-align: center;
}
.mm-stage-title:active { cursor: grabbing; outline: 2px solid rgba(106,158,255,0.5); }
.mm-stage-title img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }