/* Existing playground.css content + additions */
.playground-layout { display: grid; grid-template-columns: 480px 1fr; gap: 1.5rem; }
.creator-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.creator-panel h3 { margin-bottom: .75rem; }
.logo-preview-box { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: .85rem; color: var(--text-muted); }
.logo-preview { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--surface2); border: 1px solid var(--border); transition: var(--transition); }
.my-apps-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.my-apps-panel h3 { margin-bottom: .25rem; }
.panel-sub { font-size: .8rem; color: var(--text-muted); margin-bottom: 1rem; }
.apps-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.result-msg { padding: .75rem 1rem; border-radius: 8px; margin-top: 1rem; font-size: .9rem; font-weight: 600; }
.result-msg.success { background: rgba(34,197,94,.15); border: 1px solid var(--success); color: var(--success); }
.result-msg.error { background: rgba(239,68,68,.15); border: 1px solid var(--danger); color: var(--danger); }

/* Auto-detect banner */
.detect-banner { background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(6,182,212,.15)); border: 1px solid rgba(124,58,237,.4); border-radius: var(--radius); padding: .9rem 1.25rem; margin-bottom: 1.25rem; font-size: .9rem; color: var(--text); animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:none } }

/* Detect hint */
.detect-hint { background: var(--surface2); border-left: 3px solid var(--secondary); padding: .6rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: 1.25rem; font-size: .8rem; color: var(--text-muted); }

/* Auto labels */
.auto-label { background: var(--primary); color: #fff; font-size: .7rem; padding: .1rem .4rem; border-radius: 4px; font-weight: 700; vertical-align: middle; }
.code-tip { font-size: .75rem; color: var(--secondary); font-weight: 400; }

/* Detected badge */
.detected-badge { font-size: .7rem; color: var(--secondary); background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.3); padding: .2rem .5rem; border-radius: 99px; display: inline-block; margin-top: .5rem; }

@media (max-width: 900px) { .playground-layout { grid-template-columns: 1fr; } }