/* Ajustes exclusivos da demonstração */
.demo-banner {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin-bottom:18px; padding:13px 15px; border:1px solid #d9c9ea;
    border-radius:14px; background:#faf7ff; color:#5f4a70;
}
.demo-banner strong { color:#6d3db4; }
.demo-banner small { display:block; margin-top:3px; color:#81718e; }
.demo-badge {
    flex:0 0 auto; padding:7px 10px; border-radius:999px; background:#8b5cf6;
    color:#fff; font-size:.68rem; font-weight:850; letter-spacing:.08em;
}
.demo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.demo-note { margin-top:14px; font-size:.74rem; color:#81718e; }
.demo-readonly { opacity:.78; }
.demo-readonly input { cursor:not-allowed; }
.demo-config-content {
    margin-top:8px; padding:8px 10px; border:1px dashed #d8cce5;
    border-radius:9px; background:#fbf9ff; color:#694c82; font-family:monospace;
    font-size:.72rem; word-break:break-all;
}
.demo-toast {
    position:fixed; right:18px; bottom:18px; z-index:9999; max-width:340px;
    padding:12px 14px; border-radius:12px; background:#2f2640; color:#fff;
    box-shadow:0 14px 38px rgba(61,42,84,.25); opacity:0; transform:translateY(8px);
    pointer-events:none; transition:.2s ease;
}
.demo-toast.show { opacity:1; transform:translateY(0); }
@media (max-width:720px) {
    .demo-banner { align-items:flex-start; flex-direction:column; }
    .demo-badge { align-self:flex-start; }
}