/* Light Blue Theme, modern minimal UI */
:root{
  --bg: #f5f9ff;
  --panel: #ffffff;
  --brand: #3a86ff;        /* primary light blue */
  --brand-2: #6ea8ff;      /* lighter variant */
  --text: #0f172a;         /* slate-900 */
  --muted: #6b7280;        /* gray-500 */
  --border: #e5efff;
  --chip: #e8f1ff;
  --danger: #ef4444;
  --focus: #99c2ff;
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-size:14px; /* smaller base font */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), #fff 60%);
}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), #fff 60%);
}

.site-header{
  padding: 28px 20px 10px;
  text-align:center;
}
.site-header h1{ margin:0; font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight:700; }
.subtitle{ margin:8px 0 0; color:var(--muted); }

.container{
  width:min(1200px, 92%);
  margin:24px auto 48px;
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow: 0 6px 24px rgba(58,134,255,0.06);
}

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px){ .grid-2{ grid-template-columns: 1fr; } }

.form-group label{ font-weight:600; display:block; margin-bottom:6px; }
.form-group input, .form-group select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdff;
  outline:none;
}
.form-group input:focus, .form-group select:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 4px var(--focus);
}
.form-group small{ color:var(--muted); display:block; margin-top:6px; }

.control-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
/* Custom .btn styles removed in favor of Bootstrap's .btn classes */
.btn:hover{ box-shadow:0 8px 18px rgba(58,134,255,.15); }
.btn:active{ transform: translateY(1px); }
/* removed: using Bootstrap .btn-primary */
/* removed: using Bootstrap .btn-outline-danger */
/* removed: using Bootstrap .btn-sm */

.preview .preview-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chip{ background:var(--chip); color:#134074; padding:6px 10px; border-radius:999px; border:1px solid var(--border); font-size:.9rem; }

.grid-preview{
  margin-top:14px;
  border:1px dashed var(--brand-2);
  border-radius:12px;
  padding:14px;
  background: repeating-linear-gradient(135deg, #f6faff, #f6faff 10px, #ffffff 10px, #ffffff 20px);
}

.grid-stage{
  margin:0 auto; /* centered */
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
}
.grid-stage-inner{ display:grid; width:100%; min-height:200px; }

.item{
  position: relative;
  background: linear-gradient(180deg, #dbe9ff, #cfe2ff);
  border:1px solid #bcd6ff;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; color:#0b2a5e;
  user-select:none; cursor:grab;
}
.item:active{ cursor:grabbing; }
.item:focus{ outline:3px solid var(--focus); }
.item.dragging{ box-shadow:0 8px 24px rgba(58,134,255,.35); opacity:.9; }
.item .handle{
  position:absolute; right:6px; bottom:6px; width:14px; height:14px;
  border-radius:4px; border:1px solid #8fb5ff; background:#eaf2ff;
  display:flex; align-items:center; justify-content:center; font-size:10px; color:#3a86ff;
}
.item .handle:after{ content:\"\21F2\"; /* ? */ }
.item:focus{ outline:3px solid var(--focus); }

.tips{ margin-top:12px; }

.code-blocks textarea{$1font-size:.85rem; line-height:1.4; background:#061a3a; color:#e6f0ff; border:1px solid #082a66; border-radius:12px; padding:12px; }
.code-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.code-head strong{ color:#0b2a5e; }

.site-footer{ text-align:center; color:var(--muted); padding:18px 10px 40px; }