:root{--bg:#0b1116;--panel:#0f1720;--soft:#111827;--muted:#94a3b8;--text:#e5e7eb;--accent:#0ea5e9;--danger:#ef4444}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"}
.app{transform-origin: top left}

.app{display:grid;grid-template-columns:280px 1fr;gap:0;height:100vh}
.sidebar{padding:16px;background:var(--panel);border-right:1px solid #17212b;overflow:auto}
.drawer-close{display:none}
.app-title{margin:0 0 12px;font-size:18px}
.controls{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
.tools{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0 16px}

button,.upload-btn{appearance:none;border:1px solid #1e293b;background:#0b1622;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;transition:.15s ease;display:inline-flex;align-items:center;justify-content:center}
button:hover,.upload-btn:hover{border-color:#2a3a4f;background:#0d1b2a}
button:active{transform:translateY(1px)}
button.danger{border-color:#2b1e26;color:#ffd5d5;background:#2b0b13}
button.danger:hover{border-color:#3b2630;background:#3a0e18}

.upload-btn{user-select:none}
.page-settings{border-top:1px solid #17212b;padding-top:12px}
.page-settings summary{cursor:pointer;color:var(--muted)}
.page-settings label{display:grid;gap:6px;margin:10px 0}
.page-settings input,.page-settings select{background:#0b1622;border:1px solid #1e293b;border-radius:6px;color:var(--text);padding:8px 10px}

.main{display:grid;grid-template-columns:1fr 48%;gap:0;height:100vh;overflow:hidden}
.editor{padding:16px;overflow:auto}
.preview{border-left:1px solid #17212b;background:#0c141d;display:grid;grid-template-rows:auto 1fr}
.preview-header{padding:10px 12px;border-bottom:1px solid #17212b;color:var(--muted)}
#previewFrame{width:100%;height:100%;border:0;background:#fff}

.block{border:1px solid #1e293b;background:#0b1622;border-radius:10px;padding:12px;margin-bottom:12px}
.block-header{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
.block-type{font-size:12px;color:var(--muted)}
.block-actions{display:flex;gap:6px}
.block-actions button{padding:6px 8px;font-size:12px}
.block textarea{width:100%;min-height:72px;resize:vertical;background:#0b1622;border:1px solid #1e293b;border-radius:6px;color:var(--text);padding:8px}
.block input[type="text"]{width:100%;background:#0b1622;border:1px solid #1e293b;border-radius:6px;color:var(--text);padding:8px}
.img-preview{display:block;max-width:100%;height:auto;border-radius:8px;border:1px solid #1e293b;background:#07101a}

/* 样式控制行 */
.style-row{display:grid;grid-template-columns:repeat(6, 1fr);gap:6px;margin:8px 0 10px}
.inline-row{display:grid;grid-template-columns:2fr auto;gap:6px;margin:6px 0}
.inline-row input{background:#0b1622;border:1px solid #1e293b;border-radius:6px;color:var(--text);padding:6px 8px}
.inline-row button{padding:6px 10px}
.style-row label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.style-row input[type="number"],.style-row input[type="color"],.style-row select{background:#0b1622;border:1px solid #1e293b;border-radius:6px;color:var(--text);padding:6px 8px}

@media (max-width: 1200px){
  .main{grid-template-columns:1fr 52%}
  .style-row{grid-template-columns:repeat(3, 1fr)}
}

/* 拖拽指示 */
.block[draggable="true"]{cursor:move}
.block.drag-over{outline:2px dashed var(--accent)}

/* Mobile stacked layout with collapsible drawer */
@media (max-width: 900px){
  .app{grid-template-columns:1fr;height:auto}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:85vw;max-width:360px;transform:translateX(-100%);transition:transform .25s ease;z-index:30;border-right:1px solid #17212b;border-bottom:none}
  .sidebar.open{transform:translateX(0)}
  .drawer-close{display:block;position:absolute;right:8px;top:8px;background:#2b0b13;border:1px solid #3b2630;color:#ffd5d5;border-radius:8px;padding:4px 8px}
  .main{grid-template-columns:1fr;height:auto}
  .preview{border-left:none;border-top:1px solid #17212b;height:60vh}
  .editor{padding:12px}
  .fab{position:fixed;left:12px;bottom:12px;z-index:20;padding:10px 14px;border-radius:999px;background:#0ea5e9;color:#fff;border:none;box-shadow:0 4px 12px rgba(0,0,0,.35)}
  .drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:saturate(120%) blur(2px);z-index:25}
}

.empty{color:var(--muted);padding:24px;border:1px dashed #223041;border-radius:10px;background:#0b1622}

.muted{color:var(--muted)}