:root{
  --bg:#0b0d14; --surface:#12151f; --panel:#10131c; --border:#262b3b;
  --text:#edeff5; --muted:#8a90a6; --accent:#7c6cff; --accent2:#4d8bff; --danger:#ff5d73;
}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mini-btn{background:#0c0e16;color:var(--accent);border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700}
.mini-btn:hover{border-color:var(--accent)}
.page-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.page-item{display:flex;align-items:center;gap:6px;background:#0c0e16;border:1px solid var(--border);border-radius:10px;padding:5px 8px;cursor:pointer}
.page-item.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.page-name{flex:1;background:transparent;border:0;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;padding:4px 2px;min-width:0}
.page-name:focus{outline:none}
.page-del{background:transparent;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:6px}
.page-del:hover{color:var(--danger);background:rgba(255,93,115,.12)}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
.topbar{
  height:58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:5;
}
.brand{font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px}
.brand .mark{color:var(--accent)}
.top-actions{display:flex; gap:8px}
button{font-family:inherit; cursor:pointer}
.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  border:0; padding:9px 16px; border-radius:10px; font-weight:700; font-size:13px;
}
.ghost{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  padding:9px 14px; border-radius:10px; font-weight:600; font-size:13px;
}
.ghost:hover{color:var(--text); border-color:#3a4258}
.layout{display:flex; flex:1; min-height:0}

/* LEFT form */
.form-panel{
  width:380px; flex-shrink:0; border-right:1px solid var(--border);
  overflow-y:auto; padding:16px; background:var(--panel);
}
.block{margin-bottom:22px}
.label{font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); margin:0 0 10px}
form label{display:block; font-size:12px; color:var(--muted); margin-bottom:12px}
form input, form textarea{
  display:block; width:100%; margin-top:5px; background:#0c0e16; color:var(--text);
  border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:13px;
  font-family:inherit; resize:vertical;
}
form input:focus, form textarea:focus{outline:none; border-color:var(--accent)}
.tpl-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.tpl-pick{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  background:#0c0e16; border:1px solid var(--border); border-radius:11px;
  padding:10px; color:var(--text); text-align:left;
}
.tpl-pick .sw{width:100%; height:26px; border-radius:7px; margin-bottom:4px}
.tpl-pick b{font-size:12px}
.tpl-pick small{font-size:10px; color:var(--muted)}
.tpl-pick.active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.color-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.color{display:flex; flex-direction:column; font-size:11px}
.color input[type=color]{height:34px; padding:2px; cursor:pointer}

/* RIGHT preview */
.preview-panel{flex:1; display:flex; flex-direction:column; padding:16px; min-width:0}
#previewFrame{
  flex:1; width:100%; border:1px solid var(--border); border-radius:14px;
  background:#fff; min-height:420px;
}
.code-box{margin-top:14px}
.code-box summary{cursor:pointer; color:var(--muted); font-size:12px; padding:6px 0}
.code-box pre{
  max-height:260px; overflow:auto; background:#0c0e16; border:1px solid var(--border);
  border-radius:10px; padding:12px; font-size:11px; line-height:1.5; color:#b9c0d4;
  white-space:pre-wrap; word-break:break-all;
}
@media(max-width:860px){
  .layout{flex-direction:column}
  .form-panel{width:100%; border-right:0; border-bottom:1px solid var(--border); max-height:50vh}
  .preview-panel{min-height:60vh}
}

/* ---- account menu ---- */
.account{position:relative}
.account-btn{position:relative}
.account-menu{
  position:absolute; top:calc(100% + 8px); right:0; width:260px; z-index:50;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px; box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.acc-pane{display:flex; flex-direction:column; gap:8px}
.acc-title{font-weight:800; font-size:14px; color:var(--text); margin:0}
.acc-sub{font-size:12px; color:var(--muted); margin:0}
.acc-sub b{color:var(--text)}
.acc-hint{font-size:11px; color:var(--muted); margin:2px 0 0; text-align:center}
.account-menu label{display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted)}
.account-menu input{
  background:#0c0e16; border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; color:var(--text); font-size:13px; font-family:inherit;
}
.account-menu input:focus{outline:none; border-color:var(--accent)}
.primary.block, .ghost.block{width:100%; margin-top:2px}
.ghost.danger{color:var(--danger); border-color:var(--danger)}
.ghost.danger:hover{background:rgba(255,93,115,.12)}