:root{
  --bg:#0b0f18; --panel:#111827; --muted:#6b7280; --text:#e5e7eb; --accent:#7c3aed; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background:var(--bg); color:var(--text);
}

/* Layout */
.app{ display:grid; grid-template-columns:400px 8px 1fr; min-height:100vh; }
aside{
  padding:20px; border-right:1px solid #1f2937; background:var(--panel);
  overflow:auto; /* own scroll */
}
#gutter{ cursor:col-resize; background:linear-gradient(90deg,transparent,#1f2937,transparent) }
main{ padding:0; overflow:hidden }

/* Controls */
h1{ font-size:18px; margin:0 0 12px }
.muted{ color:var(--muted) }
.small{ font-size:12px }
.split{ display:grid; grid-template-columns:1fr auto; align-items:center }
fieldset{ border:1px solid #1f2937; border-radius:var(--radius); padding:12px 12px 8px; margin:0 0 12px }
legend{ padding:0 8px; color:#9ca3af }
label{ display:block; margin:0 0 8px }
.checkbox{ display:flex; align-items:center; gap:8px }

input[type=text],input[type=number],select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #334155; background:#0b1220; color:var(--text);
}
textarea{ resize:vertical }
input[type=color]{ width:100%; height:42px; padding:0; border-radius:10px; border:1px solid #334155; background:#0b1220 }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chip{ border:1px solid #374151; border-radius:999px; padding:6px 10px; cursor:pointer; user-select:none }
.chip.active{ background:var(--accent); border-color:transparent; color:#fff }
.btns{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
button{ cursor:pointer; border:1px solid #374151; background:#0e1626; color:var(--text); padding:10px 12px; border-radius:10px }
button.primary{ background:var(--accent); border-color:transparent; color:#fff }

/* Canvas list */
.sortable{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.sortable li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid #2b3547; border-radius:10px; padding:8px 10px; background:#0b1220;
}
.sortable li.dragging{ opacity:.6 }
.sortable .handle{ cursor:grab; user-select:none; opacity:.8 }
.sortable .right{ display:flex; align-items:center; gap:8px }

/* Preview */
.preview-toolbar{ display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid #1f2937; background:#0b1220 }
.preview-wrap{ display:flex; justify-content:center; align-items:flex-start; padding:14px; height:calc(100vh - 44px); overflow:auto; background:#0b0f18 }
.device{
  position:relative;
  background:#0b0f18; border:1px solid #1f2937; border-radius:16px; padding:8px; box-shadow:0 10px 40px rgba(0,0,0,.35); width:1100px;
}
iframe{ width:100%; height:calc(100vh - 110px); border:0; background:#0b0f18 }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:#2b3547 transparent }
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{ background:#2b3547; border-radius:10px }
*::-webkit-scrollbar-track{ background:transparent }