/* ---------- Toasts & popovers ---------- */
#toast-root { position: fixed; top: 18px; right: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--primary); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); display: flex; gap: 10px; align-items: center; font-size: 13.5px; max-width: 380px; animation: slidein .2s ease-out; }
.toast.success .ic { color: var(--mint); }
.toast.error { background: #8E2A22; }
.popover { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--divider); border-radius: 12px; box-shadow: 0 16px 36px rgba(31,59,57,.18); padding: 12px; min-width: 230px; animation: pop .12s ease-out; }
.popover h4 { font-size: 13px; margin-bottom: 8px; }
.popover .pop-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--divider); }
.demo-pop { width: 280px; padding: 8px; }
.demo-pop .dp-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 8px 10px 4px; }
.demo-pop .dp-sub { font-size: 13px; padding: 4px 10px; font-weight: 500; }
.demo-pop label { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; cursor: pointer; font-size: 13px; }
.demo-pop label input { accent-color: var(--brand); }
.demo-pop .dp-sep { height: 1px; background: var(--divider); margin: 6px 4px; }
.demo-pop button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--primary); }
.demo-pop button:hover { background: #F1F6F5; }