/* Builder UI for CL Design System (GitHub Pages, no build) */
:root{
  --panel-w: 360px;
  --left-w: 340px;
  --canvas-bg: #eef2ff;
}
@media (max-width: 1100px){
  :root{ --panel-w: 320px; --left-w: 300px; }
}
.builder-shell{
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--panel-w);
  gap: 14px;
  padding: 16px;
  max-width: 1800px;
  margin: 0 auto;
}
@media (max-width: 980px){
  .builder-shell{ grid-template-columns: 1fr; }
  .builder-left, .builder-right{ order: 2; }
  .builder-canvas{ order: 1; }
}

.pane{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}
.pane-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-topbar-bg);
  backdrop-filter: blur(10px);
}
.pane-title{ font-weight: 750; }
.pane-body{ padding: 12px; }

.tabs{ display:flex; gap:8px; flex-wrap: wrap; }
.tab{
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}
.tab[aria-selected="true"]{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.35);
}

.search{
  width:100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.list{ margin-top: 10px; display:flex; flex-direction:column; gap:10px; }
.card-item{
  border:1px solid var(--ui-border);
  border-radius: 14px;
  padding: 10px;
  background: var(--ui-surface);
}
.card-item h4{ margin: 0 0 6px 0; font-size: 14px; }
.card-item p{ margin:0; color: var(--ui-text-soft); font-size: 13px; }
.card-actions{ margin-top: 10px; display:flex; gap:8px; flex-wrap: wrap; }
.btn-mini{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor:pointer;
  font-size: 13px;
}
.btn-mini.primary{
  background: var(--ui-accent);
  border-color: rgba(37,99,235,.55);
  color: white;
}
.btn-mini.danger{
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.35);
  color: var(--ui-danger);
}

.tree{
  font-size: 13px;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top: 10px;
}
.tree-item{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
  cursor: pointer;
}
.tree-item[aria-selected="true"]{
  outline: 2px solid rgba(37,99,235,.35);
  background: rgba(37,99,235,.06);
}
.tree-item .meta{ color: var(--ui-text-soft); font-size: 12px; }

.canvas-wrap{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}
.canvas-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-topbar-bg);
  backdrop-filter: blur(10px);
}
.toolbar-group{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.pill{
  border:1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  cursor:pointer;
}
.pill.active{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.35); }
.toolbar-sep{ width:1px; height: 26px; background: var(--ui-border); margin: 0 4px; }

.canvas-frame-wrap{
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
  padding: 14px;
}
.frame{
  width: 100%;
  height: min(78vh, 920px);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: white;
}
.frame.device-mobile{ max-width: 420px; margin: 0 auto; }
.frame.device-tablet{ max-width: 840px; margin: 0 auto; }

.form-grid{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.form-grid .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media(max-width:980px){ .form-grid .row2{ grid-template-columns: 1fr; } }

label{ font-size: 12px; color: var(--ui-text-soft); display:block; margin-bottom: 6px; }
input[type="text"], input[type="url"], textarea, select{
  width:100%;
  border:1px solid var(--ui-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
textarea{ min-height: 110px; resize: vertical; }
.help{
  color: var(--ui-text-soft);
  font-size: 12px;
  margin-top: 6px;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  border: 1px solid var(--ui-border);
  border-bottom-width: 2px;
  border-radius: 8px;
  padding: 2px 6px;
  font-size: 12px;
  background: rgba(15,23,42,.03);
}

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(2,6,23,.52);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 9999;
}
.modal{
  width: min(980px, 100%);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(2,6,23,.30);
  overflow:hidden;
}
.modal-head{
  padding: 12px 12px;
  border-bottom: 1px solid var(--ui-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-body{ padding: 12px; }
.codebox{
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(15,23,42,.03);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  white-space: pre;
  overflow:auto;
  max-height: 56vh;
}
.small{ font-size: 12px; color: var(--ui-text-soft); }


/* --- Nested Builder additions --- */
.tree-row{ display:flex; align-items:center; gap:8px; }
.tree-row .tree-item{ flex:1; display:flex; align-items:center; gap:10px; text-align:left; }
.tree-row .row-actions{ display:flex; gap:6px; }
.iconbtn{
  width:28px; height:28px; border-radius:10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text);
  display:grid; place-items:center;
}
.iconbtn:hover{ background: var(--ui-surface-2); }
.iconbtn.danger{ border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border)); }

.twisty{ width:14px; display:inline-block; opacity:.85; }
.twisty.spacer{ opacity:0; }

.tree-item .badge{
  font-size:11px;
  border:1px solid var(--ui-border);
  padding:2px 6px;
  border-radius:999px;
  background: var(--ui-surface-2);
  color: var(--ui-text-soft);
}
.tree-item .title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-item.active{ outline:2px solid color-mix(in srgb, var(--ui-accent) 50%, transparent); }
.tree-item.active-parent{ background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }

.tree-group.dragging{ opacity:.6; }
.tree-children{ margin-left: 10px; padding-left: 10px; border-left: 1px dashed var(--ui-border); }

.inspector{ background: var(--ui-surface); border:1px solid var(--ui-border); border-radius:16px; padding:12px; }
.ins-head{ display:flex; flex-direction:column; gap:4px; padding-bottom:10px; border-bottom:1px solid var(--ui-border); margin-bottom:10px; }
.ins-title{ font-weight:700; }
.ins-sub{ color: var(--ui-text-soft); font-size:12px; }
.ins-sep{ border:none; border-top:1px solid var(--ui-border); margin: 12px 0; }
.asset-box{ border:1px dashed var(--ui-border); border-radius:14px; padding:10px; background: var(--ui-surface-2); }
.asset-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.asset-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--ui-border); }
.asset-row:first-child{ border-top:none; }
.asset-row code{ font-size:11px; }

.list-group{ margin-bottom: 12px; }
.list-head{ font-size:12px; color: var(--ui-text-soft); margin: 8px 0; text-transform: uppercase; letter-spacing: .06em; }
.lib-item{ width:100%; text-align:left; border:1px solid var(--ui-border); background: var(--ui-surface); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:4px; }
.lib-item:hover{ background: var(--ui-surface-2); }
.lib-title{ font-weight:700; }
.lib-desc{ font-size:12px; color: var(--ui-text-soft); }
.lib-meta{ font-size:11px; color: var(--ui-text-soft); }

.modal-tabs{
  display:flex; gap:8px; padding: 8px 12px;
  border-bottom: 1px solid var(--ui-border);
}
.modal-tabs .tab{
  border:1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 999px;
  padding: 6px 10px;
}
.modal-tabs .tab[aria-selected="true"]{
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface));
}

.pilltag{
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: var(--ui-accent);
  border: 1px solid rgba(37,99,235,.25);
}