:root { --muted: rgba(0,0,0,.6); }
*{ box-sizing: border-box }

/* Move these to /styles.css if you want them site-wide:
   body{…} a{…}
*/
.create-builder a{ color: inherit }

/* Page container (scoped) */
.create-builder.container{ max-width:1024px; margin:0 auto; padding:24px }

.create-builder h1{ font-size:28px; margin:0 0 12px }
.create-builder p.sub{ margin:0 0 16px; color:var(--muted) }

.create-builder .grid{ display:grid; gap:12px }
.create-builder label>span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px }

.create-builder input,
.create-builder select,
.create-builder button{
  font:inherit; padding:10px 12px; border:1px solid #ddd; border-radius:10px
}
.create-builder input[type=range]{ width:100% }
.create-builder .color{ height:40px; padding:0 }
.create-builder .btn{ cursor:pointer }
.create-builder .btn.copy{ white-space:nowrap }

.create-builder .card{
  background:#fafafa; border:1px solid #eee; padding:12px; border-radius:12px; margin-top:12px
}

.create-builder .row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
@media (max-width:900px){
  .create-builder .row{ grid-template-columns:1fr }
}

.create-builder pre{
  white-space:pre-wrap; word-break:break-word; background:#fff;
  border:1px solid #eee; padding:8px; border-radius:8px; margin:8px 0
}

.create-builder .preview-wrap{ margin-top:16px }
.create-builder .preview-frame{
  border:1px dashed #ddd; border-radius:12px; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; min-height:140px
}

.create-builder fieldset{ border:1px solid #eee; border-radius:10px; padding:8px }
.create-builder legend{ font-size:12px; color:var(--muted) }
.create-builder .small-note{ font-size:12px; color:var(--muted) }

.create-builder .code-row{ display:flex; gap:8px; align-items:center }
.create-builder .code-input{
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff
}

/* View mode: hide builder chrome ONLY (keep site header/footer visible) */
.view-mode .create-builder > h1,
.view-mode .create-builder > p.sub,
.view-mode .create-builder #builder,
.view-mode .create-builder #result { display:none }

.view-mode .create-builder .preview-wrap{ display:block; margin:0; padding:16px }
.view-mode .create-builder .preview-frame{ display:flex; border:none; border-radius:0; min-height:0; width:100% }

/* Lite param: hide site chrome (classes must exist inside partials) */
.lite .site-header, .lite .site-footer{ display:none }