/* ══════════════════════════════════
   Sandbox Mode — Demo Experience
   ══════════════════════════════════ */

/* Demo picker section */
.sandbox-demos{margin:0 0 20px}
.sandbox-demos h3{font-size:1em;font-weight:800;margin:0 0 4px;text-align:center;color:#5b21b6}
.sandbox-demos p{font-size:.85em;color:#6b7280;text-align:center;margin:0 0 14px}
.sandbox-demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Individual demo card */
.sandbox-demo-card{border:2px solid #e5e7eb;border-radius:14px;padding:14px;text-align:center;cursor:pointer;transition:all .15s;background:#fff}
.sandbox-demo-card:hover{border-color:#7c3aed;background:#f3e8ff;transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,58,237,.12)}
.sandbox-demo-card.active{border-color:#7c3aed;background:#f3e8ff}
.sandbox-demo-card img{width:100%;border-radius:10px;margin:0 0 8px;aspect-ratio:1;object-fit:cover}
.sandbox-demo-card .demo-label{font-weight:700;font-size:.82em;color:#1a1a2e;line-height:1.3}
.sandbox-demo-card .demo-sub{font-size:.72em;color:#6b7280;margin:3px 0 0}

/* Upgrade banner */
.sandbox-upgrade{background:linear-gradient(135deg,#f3e8ff,#ede9fe);border:2px solid #c4b5fd;border-radius:16px;padding:28px 20px;text-align:center;margin:20px 0 0}
.sandbox-upgrade h3{font-size:1.15em;font-weight:800;color:#5b21b6;margin:0 0 6px}
.sandbox-upgrade p{font-size:.88em;color:#6b7280;margin:0 0 16px;line-height:1.5}
.sandbox-upgrade-btn{display:inline-block;padding:14px 36px;background:#7c3aed;color:#fff;border:none;border-radius:12px;font-size:1.05em;font-weight:800;cursor:pointer;text-decoration:none;transition:all .15s}
.sandbox-upgrade-btn:hover{background:#6d28d9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(124,58,237,.25)}
.sandbox-upgrade-sub{font-size:.78em;color:#9ca3af;margin:8px 0 0}

/* Demo badge overlay on result */
.sandbox-result-wrap{position:relative}
.sandbox-badge{position:absolute;top:10px;left:10px;background:#7c3aed;color:#fff;font-size:.7em;font-weight:800;padding:4px 12px;border-radius:8px;letter-spacing:.04em;z-index:5;pointer-events:none}

/* Lock overlay for disabled inputs */
.sandbox-locked{position:relative;pointer-events:none;opacity:.45;filter:grayscale(.3)}

@media(max-width:700px){
  .sandbox-demo-grid{grid-template-columns:1fr}
  .sandbox-upgrade{padding:20px 16px}
}