/* ============================================================================
 * 提示词工程中心 · 样式
 * ========================================================================== */
.pe-root { height:100%; background:#0a0f1a; color:#e4e7ee; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; }
.pe-wrap { display:flex; flex-direction:column; height:100%; min-height:100vh; }

/* Header */
.pe-header { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding:14px 24px; background:linear-gradient(135deg,#111a2c 0%,#0c1325 100%); border-bottom:1px solid #1e2a44; gap:20px; }
.pe-header-title { display:flex; align-items:center; gap:14px; }
.pe-header-title > i { font-size:28px; background:linear-gradient(135deg,#e8b04b,#c8791f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pe-title { font-size:18px; font-weight:600; }
.pe-sub { font-size:12px; color:#8a94a8; margin-top:2px; }
.pe-header-center { display:flex; align-items:center; gap:10px; justify-content:center; }
.pe-cloud-status { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:14px; font-size:12px; }
.pe-cloud-status.ok { background:#0f3d29; color:#34d399; }
.pe-cloud-status.empty { background:#3a2f10; color:#fbbf24; }
.pe-cloud-status.unknown { background:#1a2338; color:#94a3b8; }
.pe-dirty-badge { display:inline-flex; align-items:center; gap:4px; background:#3a2030; color:#f87171; padding:4px 10px; border-radius:12px; font-size:11px; }
.pe-dirty-badge i { font-size:8px; }
.pe-header-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Buttons */
.pe-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:6px; background:#1a2338; border:1px solid #2a3554; color:#e4e7ee; font-size:13px; cursor:pointer; transition:all .2s; }
.pe-btn:hover:not(:disabled) { background:#222e4a; border-color:#3c4a74; }
.pe-btn:disabled { opacity:0.5; cursor:not-allowed; }
.pe-btn.primary { background:linear-gradient(135deg,#e8b04b,#c8791f); border:none; color:#fff; }
.pe-btn.primary:hover:not(:disabled) { filter:brightness(1.1); }
.pe-btn.ghost { background:transparent; }
.pe-btn.small { padding:5px 10px; font-size:12px; }
.pe-btn.tiny { padding:3px 8px; font-size:11px; }
.pe-btn.danger { color:#ef4444; border-color:#3a2030; }

/* Body */
.pe-body { display:grid; grid-template-columns: 280px 1fr 320px; flex:1; min-height:0; }

/* Sidebar */
.pe-side { background:#0f1626; border-right:1px solid #1e2a44; display:flex; flex-direction:column; min-height:0; }
.pe-side-head { display:flex; gap:6px; padding:12px; border-bottom:1px solid #1e2a44; align-items:center; }
.pe-side-search { flex:1; padding:6px 10px; background:#1a2338; border:1px solid #2a3554; border-radius:6px; color:#e4e7ee; font-size:12px; }
.pe-side-body { flex:1; overflow-y:auto; padding:6px; min-height:0; }

.pe-category { margin-bottom:2px; }
.pe-cat-head { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; border-radius:6px; transition:background .2s; }
.pe-cat-head:hover { background:#1a2338; }
.pe-cat-head > i:first-child { color:#e0a13a; width:14px; }
.pe-cat-name { flex:1; font-size:13px; font-weight:500; }
.pe-cat-count { font-size:10px; background:#1e2a44; color:#8a94a8; padding:1px 6px; border-radius:8px; }
.pe-cat-toggle { color:#6b7694; font-size:10px; }
.pe-scenes { padding:2px 0 6px 26px; }
.pe-scene { display:flex; align-items:center; padding:6px 10px; cursor:pointer; border-radius:4px; margin-bottom:2px; transition:background .2s; }
.pe-scene:hover { background:#162036; }
.pe-scene.active { background:#1e2a44; }
.pe-scene-name { flex:1; font-size:12px; color:#c9d2e5; }
.pe-scene-name i { margin-right:4px; color:#6b7694; font-size:9px; }
.pe-scene.active .pe-scene-name { color:#fff; }
.pe-scene-count { font-size:10px; color:#6b7694; }
.pe-add-scene { padding:6px 10px; font-size:11px; color:#e0a13a; cursor:pointer; border-radius:4px; border:1px dashed #3c4a74; margin-top:4px; text-align:center; }
.pe-add-scene:hover { background:#1a2338; }

/* Main */
.pe-main { padding:20px 24px; overflow-y:auto; min-height:0; }
.pe-editor { display:flex; flex-direction:column; gap:14px; }
.pe-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pe-crumb { display:flex; align-items:center; gap:8px; font-size:14px; color:#c9d2e5; }
.pe-crumb i:first-child { color:#e0a13a; }
.pe-crumb i.fa-angle-right { color:#6b7694; font-size:11px; }
.pe-crumb-scene { font-weight:600; color:#fff; }
.pe-editor-actions { display:flex; gap:8px; flex-wrap:wrap; }

.pe-scene-desc { font-size:12px; color:#8a94a8; padding:8px 12px; background:#111a2c; border-radius:6px; line-height:1.6; }

.pe-vars { background:#162036; padding:10px 12px; border-radius:6px; display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; }
.pe-vars code { background:#0a0f1a; color:#fbbf24; padding:1px 6px; border-radius:3px; font-family:monospace; margin-right:4px; }
.pe-var-desc { color:#c9d2e5; margin-right:14px; }
.pe-vars-empty { color:#6b7694; }

.pe-tpl-tabs { display:flex; gap:2px; border-bottom:1px solid #1e2a44; overflow-x:auto; }
.pe-tpl-tab { display:flex; align-items:center; gap:6px; padding:8px 14px; cursor:pointer; border-radius:6px 6px 0 0; color:#8a94a8; font-size:12px; border:1px solid transparent; border-bottom:none; white-space:nowrap; transition:all .2s; }
.pe-tpl-tab:hover { color:#c9d2e5; background:#162036; }
.pe-tpl-tab.active { color:#fff; background:#162036; border-color:#1e2a44; }
.pe-tpl-badge { font-size:9px; padding:1px 5px; border-radius:3px; }
.pe-tpl-badge.def { background:#1e3a5f; color:#60a5fa; }
.pe-tpl-badge.user { background:#3a2f10; color:#fbbf24; }
.pe-tpl-close { opacity:.4; font-size:10px; margin-left:4px; }
.pe-tpl-close:hover { opacity:1; color:#f87171; }
.pe-tpl-new { padding:8px 12px; cursor:pointer; color:#e0a13a; font-size:12px; border:1px dashed #3c4a74; border-radius:6px 6px 0 0; white-space:nowrap; }
.pe-tpl-new:hover { background:#162036; }

.pe-tpl-meta { display:grid; grid-template-columns: 200px 1fr auto; gap:10px; align-items:center; padding:10px 0; }
.pe-tpl-name { padding:7px 10px; background:#1a2338; border:1px solid #2a3554; border-radius:6px; color:#fff; font-size:13px; font-weight:500; }
.pe-tpl-note { padding:7px 10px; background:#1a2338; border:1px solid #2a3554; border-radius:6px; color:#c9d2e5; font-size:12px; }
.pe-tpl-time { color:#6b7694; font-size:11px; }

.pe-edit-row { display:flex; flex-direction:column; gap:6px; }
.pe-label { font-size:12px; color:#8a94a8; }
.pe-textarea { width:100%; padding:12px; background:#0a0f1a; border:1px solid #2a3554; border-radius:6px; color:#e4e7ee; font-family:monospace; font-size:13px; line-height:1.7; resize:vertical; }
.pe-textarea:focus { outline:none; border-color:#e0a13a; }

.pe-edit-foot { display:flex; gap:10px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.pe-edit-hint { color:#8a94a8; font-size:12px; flex:1; text-align:right; }
.pe-edit-hint strong { color:#fbbf24; }

/* Right panel */
.pe-right { background:#0a0f1a; border-left:1px solid #1e2a44; padding:16px; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:18px; }
.pe-right-section { background:#0f1626; border:1px solid #1e2a44; border-radius:8px; padding:12px; }
.pe-right-title { font-size:13px; font-weight:600; margin-bottom:10px; color:#c9d2e5; }
.pe-right-title i { color:#e0a13a; margin-right:6px; }

.pe-cloud-info { display:flex; flex-direction:column; gap:6px; font-size:11px; }
.pe-cloud-info > div { display:flex; justify-content:space-between; gap:8px; }
.pe-kv-k { color:#8a94a8; }
.pe-kv-v { color:#c9d2e5; font-family:monospace; font-size:10px; word-break:break-all; text-align:right; max-width:220px; }

.pe-ver-list { display:flex; flex-direction:column; gap:4px; max-height:400px; overflow-y:auto; }
.pe-ver-item { padding:8px 10px; border-radius:6px; cursor:pointer; background:#162036; transition:background .2s; }
.pe-ver-item:hover { background:#1e2a44; }
.pe-ver-item.active { background:#1e2a44; border-left:3px solid #e0a13a; padding-left:7px; }
.pe-ver-name { font-size:12px; font-weight:500; color:#fff; }
.pe-ver-time { font-size:10px; color:#6b7694; margin-top:3px; }

.pe-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#6b7694; gap:12px; }
.pe-empty i { font-size:36px; opacity:.3; }
.pe-empty-mini { padding:10px; color:#6b7694; font-size:11px; text-align:center; }

/* Modal */
.pe-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; }
.pe-modal-back { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); }
.pe-modal-body { position:relative; width:90vw; max-width:1000px; height:80vh; background:#0f1626; border:1px solid #1e2a44; border-radius:12px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.pe-modal-body.pe-modal-narrow { max-width:640px; height:auto; max-height:80vh; }
.pe-modal-head { padding:14px 20px; border-bottom:1px solid #1e2a44; display:flex; align-items:center; justify-content:space-between; }
.pe-modal-title { font-size:15px; font-weight:600; }
.pe-modal-title i { color:#e0a13a; margin-right:8px; }
.pe-modal-close { width:32px; height:32px; border-radius:6px; background:#1a2338; border:1px solid #2a3554; color:#e4e7ee; cursor:pointer; }
.pe-modal-content { flex:1; overflow:auto; padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pe-modal-body.pe-modal-narrow .pe-modal-content { grid-template-columns:1fr; }
.pe-modal-desc { font-size:12px; color:#8a94a8; margin-bottom:12px; grid-column:1 / -1; padding:10px 12px; background:#162036; border-radius:6px; }

.pe-preview-inputs { display:flex; flex-direction:column; gap:10px; }
.pe-preview-inputs-title { font-size:12px; color:#8a94a8; }
.pe-modal-row { display:flex; flex-direction:column; gap:4px; }
.pe-modal-row label { font-size:11px; font-family:monospace; color:#fbbf24; }
.pe-modal-row textarea { padding:6px 10px; background:#0a0f1a; border:1px solid #2a3554; border-radius:4px; color:#e4e7ee; font-size:12px; resize:vertical; }
.pe-preview-output { overflow-y:auto; max-height:60vh; }
.pe-preview-label { font-size:11px; color:#8a94a8; margin:10px 0 4px; }
.pe-preview-pre { background:#0a0f1a; padding:10px; border-radius:6px; font-family:monospace; font-size:11px; line-height:1.6; white-space:pre-wrap; word-break:break-all; margin:0; color:#c9d2e5; }
.pe-preview-actions { display:flex; gap:8px; margin-top:10px; justify-content:flex-end; }

.pe-hist-list { display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
.pe-hist-item { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 12px; background:#162036; border-radius:6px; }
.pe-hist-name { font-family:monospace; font-size:12px; color:#fff; }
.pe-hist-meta { font-size:11px; color:#8a94a8; }
.pe-hist-actions { display:flex; gap:4px; }

/* Responsive */
@media (max-width: 1400px) {
    .pe-body { grid-template-columns: 250px 1fr 280px; }
}
@media (max-width: 1100px) {
    .pe-body { grid-template-columns: 220px 1fr; }
    .pe-right { display:none; }
}