:root{
  --bg:#0f172a; --card:#0b1220; --muted:#94a3b8; --text:#e2e8f0; --accent:#22d3ee;
  --panel:#0b1220; --border:#1e293b; --success:#10b981; --danger:#ef4444;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{display:grid; grid-template-columns:280px 1fr; gap:16px; height:100vh}
.left{background:var(--panel); border-right:1px solid var(--border); padding:16px; overflow:auto}
.right{padding:16px; overflow:auto}
h1{font-size:24px; margin:8px 0 16px}
h2{font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:16px 0 8px}
.palette .tool{background:var(--card); border:1px dashed var(--border); padding:10px; margin-bottom:8px; cursor:grab; border-radius:12px; user-select:none}
.toolbar{display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap}
.btn{background:#111827; border:1px solid var(--border); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#0891b2,#0284c7); border:0}
.btn.success{background:linear-gradient(180deg,#059669,#047857)}
.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.canvas-wrap{border:1px dashed var(--border); border-radius:12px; padding:12px; background:rgba(148,163,184,.04)}
.canvas{display:grid; grid-template-columns:repeat(12,1fr); gap:12px; min-height:60vh}
.block{grid-column:span 6; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px; position:relative}
.block.small{grid-column:span 3}
.block.medium{grid-column:span 6}
.block.large{grid-column:span 12}
.block .handle{position:absolute; inset:8px auto auto 8px; font-size:12px; color:var(--muted); cursor:grab}
.block .actions{position:absolute; top:8px; right:8px; display:flex; gap:6px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:rgba(148,163,184,.12); border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px}
label{display:block; font-size:12px; color:var(--muted); margin:6px 0 2px}
input[type=text], input[type=url], textarea, select{width:100%; padding:8px 10px; background:#0b1020; color:var(--text); border:1px solid var(--border); border-radius:10px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.kpi{display:grid; gap:4px}
.kpi .big{font-size:28px; font-weight:700}
.preview-iframe{width:100%; height:340px; border:0; background:#0b0f1a; border-radius:8px}
.footer{color:var(--muted); font-size:12px; margin-top:12px}
.note{color:#94a3b8; font-size:13px}
hr{border:0; border-top:1px solid var(--border); margin:12px 0}
.empty{border:2px dashed var(--border); border-radius:12px; padding:24px; text-align:center; color:var(--muted)}
#reportList{max-height:200px; overflow:auto; padding:0; margin:0; list-style:none}
#reportList li{display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin-bottom:6px}
li .row-actions{display:flex; gap:6px}