/* Frontend styles */
.prb-shell{ max-width:1200px; margin:0 auto; padding:18px; }
.prb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width: 1024px){ .prb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .prb-grid{ grid-template-columns:1fr; } }

.prb-card{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px; background:#fff; }
.prb-card img{ width:100%; border-radius:10px; aspect-ratio: 3/4; object-fit:cover; background:#f5f5f5; }
.prb-card h4{ margin:10px 0 6px; }
.prb-card a{ display:inline-block; margin-top:8px; font-weight:800; text-decoration:none; }

.prb-editor{ display:grid; grid-template-columns: 360px 1fr; gap:14px; }
@media (max-width: 1024px){ .prb-editor{ grid-template-columns:1fr; } }

.prb-panel{ border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; padding:14px; }
.prb-panel label{ display:block; margin:10px 0; font-size:13px; }
.prb-panel input, .prb-panel textarea{
  width:100%; padding:10px 10px; border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
}
.prb-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.prb-actions button{ padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#fff; font-weight:800; cursor:pointer; }
.prb-actions .primary{ background:#c07a5b; color:#fff; border-color:transparent; }

.prb-previewWrap{ border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff; padding:10px; overflow:auto; }
.prb-preview{ transform-origin: top left; }