:root{
  --bg:#0b0e12; --panel:#12161d; --line:#2b3340; --text:#e6edf3; --muted:#9fb1c7;
  --gold:#d4a94b; --blue:#2d6cdf; --white:#ffffff; --gray:#dbe2ea; --black:#000;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);background:#0e1319;position:sticky;top:0;z-index:10}
.brand{font-weight:700;letter-spacing:.5px}
.tabs .tab{margin-right:10px;color:var(--muted);cursor:pointer;text-decoration:none}
.tabs .tab.active{color:#fff;border-bottom:2px solid var(--gold)}
main{padding:12px}
.section{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
h3{margin:0 0 8px}
.grid{display:grid;gap:8px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input,.select,.textarea{width:100%;padding:8px;border-radius:8px;border:1px solid var(--line);background:#0f141b;color:var(--text)}
.textarea{min-height:80px}
.btn{padding:8px 12px;border:1px solid var(--line);background:#18202b;color:#e6edf3;border-radius:10px;cursor:pointer}
.btn.gold{background:var(--gold);color:#000}
.badge{display:inline-flex;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:#1a2330;border:1px solid var(--line);padding:4px 8px;border-radius:999px}
.tag.suggest{background:rgba(45,108,223,.12);border-color:#2d6cdf;color:#2d6cdf;cursor:pointer}
.muted{color:var(--muted);font-size:12px}
.mono{font-family: ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:12px}
.imgframe{background:#0f141b;border:1px dashed var(--line);border-radius:12px;display:flex;justify-content:center;align-items:center;min-height:120px;overflow:hidden}

/* Builder */
.builder{display:grid;grid-template-columns:280px 1fr;gap:10px}
@media (max-width:900px){.builder{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} .cols-3{grid-template-columns:1fr 1fr}}
.palette .block{border:1px dashed var(--line);border-radius:10px;padding:8px;margin-bottom:8px;cursor:pointer}
.pageHost{width:100%;overflow:auto;background:#0f141b;border:1px solid var(--line);border-radius:10px;padding:12px}
.pageCanvas{position:relative;width:794px;height:1123px;margin:auto;background:#fff; color:#111; background-image:linear-gradient(to right, rgba(45,108,223,.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(221,221,221,.6) 1px, transparent 1px); background-size: calc(794px/12) 100%, 100% 16px; }
.rblock{position:absolute;border:1px solid #e5e7eb;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.06);overflow:hidden}
.rblock .rb-head{background:linear-gradient(90deg,#0e1319,#19212b);color:#fff;padding:6px 8px;font-weight:600;cursor:move;display:flex;justify-content:space-between;align-items:center}
.rblock .rb-body{padding:8px}
.rblock .rb-tools{display:flex;gap:6px}
.handle{position:absolute;width:12px;height:12px;right:4px;bottom:4px;border:2px solid #0e1319;border-radius:3px;background:#d4a94b;cursor:nwse-resize}
.rblock.locked .rb-head{cursor:not-allowed;opacity:.6}
.rblock.locked .handle{display:none}

/* Preview / Print pages */
.page{ width:794px; min-height:1123px; margin:10px auto; background:#fff; color:#111; }
.page .card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px; margin-bottom:8px; }
.page .card h3{ margin:0 0 6px; font-size:14px; color:#0b1220; }
.page .kv{ display:grid; grid-template-columns:160px 1fr; gap:2px 10px; }
.page .table{ width:100%; border-collapse:collapse }
.page .table th, .page .table td{ border-bottom:1px solid #e5e7eb; padding:4px 6px; font-size:12px; }
.header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.header h1{ margin:0; font-size:18px; color:#0b1220; }
.header .meta{ font-size:11px; color:#475569; }
.page .tags .tag{ background:#f1f5f9; border-color:#e2e8f0; color:#0b1220; }
.canvasLegend{ font-size:11px; color:#334155; margin-top:4px; text-align:center; }

@media print{
  @page { size: A4 portrait; margin: 8mm; }
  body>*:not(#printRoot){ display:none !important; }
  #printRoot{ display:block !important; }
  #printRoot .page{ box-shadow:none; break-after: page; }
}