/* ===== 面板设计器样式（独立 CSS） ===== */
#panelDesignModal {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: none; align-items: center; justify-content: center; z-index: 900;
}
#panelDesignModal.show { display: flex; }
.pd-box {
    width: 800px; height: 650px; max-width: 96vw; max-height: 92vh;
    background: #23262e; border: 1px solid #3a3f4b; border-radius: 12px;
    display: flex; flex-direction: column; overflow: hidden;
}
.pd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #2e2e3a; font-size: 16px; font-weight: 600;
}
.pd-head .close { background: none; border: none; color: #888; font-size: 22px; cursor: pointer; }
.pd-head-actions { display: flex; align-items: center; gap: 12px; }
.pd-refresh-btn {
    padding: 5px 12px; background: #2a2f3a; color: #ccc; border: 1px solid #3a3f4b;
    border-radius: 6px; font-size: 12px; cursor: pointer;
}
.pd-refresh-btn:hover { border-color: #0e639c; color: #fff; }
.pd-main { flex: 1; display: flex; min-height: 0; }
.pd-left { width: 180px; flex: none; border-right: 1px solid #2e2e3a; display: flex; flex-direction: column; background: #1f2128; }
.pd-left-head { padding: 10px 14px; border-bottom: 1px solid #2e2e3a; font-size: 13px; color: #9a9aac; font-weight: 600; }
.pd-file-list { flex: 1; overflow-y: auto; padding: 10px; }
.pd-file {
    padding: 10px 12px; background: #1b1b21; border: 1px solid #2a2a35; border-radius: 6px;
    margin-bottom: 8px; cursor: pointer; font-size: 13px; color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-file:hover { border-color: #0e639c; }
.pd-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pd-right-head { padding: 10px 14px; border-bottom: 1px solid #2e2e3a; font-size: 13px; color: #9a9aac; font-weight: 600; }
.pd-content {
    height: 200px; flex: none; position: relative; overflow: hidden;
    border-radius: 8px; margin: 14px 14px 0; background-color: #fff;
    background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%), linear-gradient(-45deg, #d8d8d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8d8d8 75%), linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.pd-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #9a9aac; font-size: 15px; pointer-events: none;
}
#pdPanelImg { position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; }
.pd-text {
    position: absolute; cursor: move; user-select: none; white-space: nowrap;
    font-size: 14px; line-height: 1.3; padding: 1px 2px;
    border: 1px dashed rgba(0,0,0,.35);
}
.pd-text span { cursor: pointer; }
.pd-text span:hover { background: rgba(255,255,255,.5); }
.pd-text-editing {
    border: 2px dashed #1890ff !important;
    min-width: 30px; min-height: 16px;
    outline: none; cursor: text; background: rgba(24,144,255,.12);
    box-shadow: 0 0 0 3px rgba(24,144,255,.15);
}
.pd-output-head { padding: 10px 14px; border-bottom: 1px solid #2e2e3a; font-size: 13px; color: #9a9aac; font-weight: 600; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.pd-copy-btn {
    padding: 4px 12px; background: #0e639c; color: #fff; border: none;
    border-radius: 6px; font-size: 12px; cursor: pointer;
}
.pd-copy-btn:hover { filter: brightness(1.15); }
.pd-output {
    flex: none; height: 180px; margin: 14px 14px 0; padding: 10px; overflow: auto;
    background: #16171d; border: 1px solid #2a2a35; border-radius: 8px;
    font-family: Consolas, Monaco, monospace; font-size: 12px; color: #d4d4d4;
    white-space: pre-wrap; word-break: break-all;
}
.pd-note { margin: 8px 14px 14px; font-size: 12px; color: #7a7a8c; line-height: 1.7; }
.pd-note-warn { color: #ffb020; font-weight: 600; }