.block-builder-page{padding:72px 0 40px}
.breadcrumbs{margin-bottom:12px;color:#64748b;font:700 12px/1 Poppins,sans-serif}.breadcrumbs a{color:#2563eb;text-decoration:none}
.intro h1{margin:0 0 8px;font:700 34px/1.1 Poppins,sans-serif;color:#0f172a}.intro p{max-width:980px;color:#475569}
.privacy-note{background:#f8fafc;border:1px solid #e2e8f0;padding:10px;border-radius:10px}
.builder-shell{margin-top:18px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px}
.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.toolbar h2{margin:0;font:700 20px Poppins,sans-serif}
.action-row{display:flex;flex-wrap:wrap;gap:8px}.action-row button,.touch-controls button,.inspector button,#applyProps{border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:8px 10px;font:700 12px Poppins,sans-serif;cursor:pointer}
.touch-controls button.is-active{background:#dbeafe;border-color:#93c5fd}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.danger{color:#991b1b;border-color:#fecaca;background:#fff1f2}

.workspace-grid{display:grid;grid-template-columns:280px minmax(300px,1fr) 250px;gap:12px;margin-top:12px}
.palette,.inspector{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px;min-height:500px}

#blockSearch{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px;margin:6px 0 10px}
.category-tabs{display:flex;gap:6px;flex-wrap:wrap}.category-tab{padding:6px 8px;border:1px solid #cbd5e1;border-radius:999px;font:700 11px Poppins,sans-serif;background:#fff;cursor:pointer}
.category-tab[aria-selected='true']{background:#dbeafe;border-color:#93c5fd}

.block-list{display:grid;gap:8px;margin-top:10px;max-height:390px;overflow:auto}
.block-item{display:flex;align-items:center;gap:8px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:8px;cursor:pointer}
.block-item img{width:18px;height:18px}
.block-item small{display:block;color:#64748b}

/* ===== Canvas region sizing fixes (iPad/mobile robust) ===== */
.canvas-region{
  background:#0f172a;
  border-radius:12px;
  border:1px solid #1e293b;
  position:relative;
  overflow:hidden;
  /* let the mount control the height; region stays flexible */
}

/* The mount must have a REAL height or the renderer will size to 0 */
.canvas-mount{
  width:100%;
  height:min(62vh,560px);
  min-height:360px;
}

/* Loading overlay */
.canvas-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#cbd5e1;
  padding:20px;
  text-align:center;
  z-index:2;
  /* helps prevent accidental scroll/pinch weirdness */
  pointer-events:none;
}

/* Touch controls */
.touch-controls{
  position:absolute;
  bottom:10px;
  left:10px;
  display:flex;
  gap:8px;
  z-index:3;
}

/* Inspector */
.inspector-fields{display:grid;gap:8px}
.inspector-fields label{display:grid;gap:4px;font:700 12px Poppins,sans-serif;color:#334155}
.inspector-fields input{border:1px solid #cbd5e1;border-radius:8px;padding:8px}

/* Hint bar */
.hint-bar{margin-top:10px;padding:10px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font:600 13px Nunito,sans-serif}

/* Lower sections */
.how-to,.classroom-ideas{margin-top:24px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px}
.how-to h2,.classroom-ideas h2{margin:0 0 10px;font:700 22px Poppins,sans-serif}
.classroom-ideas ul{margin:0;padding-left:18px;display:grid;gap:8px}
.internal-links{margin-top:10px}

/* Dialog */
#importDialog{border:1px solid #cbd5e1;border-radius:12px;max-width:600px;width:90%}
.import-form textarea{width:100%;padding:10px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Mobile/tablet layout */
@media (max-width:1100px){
  .workspace-grid{grid-template-columns:1fr}
  .palette,.inspector{min-height:auto}
  /* keep canvas large enough on small screens */
  .canvas-mount{
    height:min(54vh,520px);
    min-height:320px;
  }
  /* put controls below on small screens so they don't cover the build */
  .touch-controls{
    position:static;
    padding:10px;
    background:#0f172a;
    border-top:1px solid #1e293b;
  }
}