/* Fallbacks in var(): toast.css also loads on standalone pages without cm-tokens.css (creative-quiz). */
/* Toast toan web: vien trang bo tron, toi gian, truot tu tren xuong, can giua man hinh */
#toast-container.toast-top-center { top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; right: 0; width: auto; margin: 0 auto; padding: 0 12px; transform: none; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 20000; }
#toast-container > div,
#toast-container > .toast {
    position: relative; width: auto !important; max-width: min(92vw, 480px); margin: 0 0 8px; padding: 11px 20px 11px 46px !important;
    border-radius: 999px !important; background: var(--cm-elevated, #fff) !important; background-image: none !important; color: var(--cm-text, #101828) !important;
    box-shadow: 0 14px 36px -14px rgba(16, 24, 40, .32), 0 0 0 1px var(--cm-line, #EAECF0) !important; opacity: 1 !important;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.45;
    pointer-events: auto; cursor: default; animation: cmToastIn .42s cubic-bezier(.2, .9, .3, 1.15) both;
}
#toast-container > div:hover { box-shadow: 0 16px 40px -14px rgba(16, 24, 40, .38), 0 0 0 1px var(--cm-line-2, #D0D5DD) !important; }
#toast-container > div.cm-toast-out { animation: cmToastOut .25s ease-in both; }
#toast-container .toast-title { font-weight: 700; }
#toast-container .toast-message { word-break: break-word; }
#toast-container .toast-progress, #toast-container .toast-close-button { display: none; }
/* Icon trang thai: cham tron mau nho ben trai (mau trang thai dam giu nguyen o ca 2 theme: cham dac, chu trang) */
#toast-container > div::before {
    content: ''; position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font: 800 12px/22px system-ui, sans-serif; color: #fff; text-align: center;
}
#toast-container > .toast-success::before { content: '\2713'; background: #17B26A; }
#toast-container > .toast-error::before { content: '\2715'; background: #F04438; }
#toast-container > .toast-warning::before { content: '\21'; background: #F79009; font-family: inherit; font-weight: 800; font-size: 13px; }
#toast-container > .toast-info::before { content: '\69'; background: var(--cm-inverse, #101828); color: var(--cm-on-inverse, #fff); font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 13px; }
@keyframes cmToastIn { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cmToastOut { to { opacity: 0; transform: translateY(-12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { #toast-container > div { animation: none !important; } }
/* Dark: the navy-tinted shadow disappears on a dark page, so use the theme shadow (black + hairline ring) */
:root[data-theme="dark"] #toast-container > div { box-shadow: var(--cm-shadow-2), 0 0 0 1px var(--cm-line) !important; }

/* SweetAlert2 (public/js/sweet-alert.js, vendor: not edited) in dark mode. Scoped to dark only, so the light theme keeps
   SweetAlert's own look (#fff popup, #545454 text) exactly as before. Button colours set per call (green confirm) stay. */
:root[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: var(--cm-overlay); }
:root[data-theme="dark"] .swal2-popup { background: var(--cm-elevated); color: var(--cm-text-2); box-shadow: var(--cm-shadow-2); }
:root[data-theme="dark"] .swal2-popup.swal2-toast { box-shadow: var(--cm-shadow-2); }
:root[data-theme="dark"] .swal2-title { color: var(--cm-text); }
:root[data-theme="dark"] .swal2-html-container,
:root[data-theme="dark"] .swal2-popup .swal2-content { color: var(--cm-text-2); }
:root[data-theme="dark"] .swal2-close { color: var(--cm-faint); }
:root[data-theme="dark"] .swal2-close:hover { color: var(--cm-danger); }
:root[data-theme="dark"] .swal2-footer { border-top-color: var(--cm-line); color: var(--cm-muted); }
:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-file,
:root[data-theme="dark"] .swal2-textarea,
:root[data-theme="dark"] .swal2-select { background: var(--cm-surface); color: var(--cm-text); border-color: var(--cm-line-2); }
:root[data-theme="dark"] .swal2-input::placeholder,
:root[data-theme="dark"] .swal2-textarea::placeholder { color: var(--cm-faint); }
:root[data-theme="dark"] .swal2-radio,
:root[data-theme="dark"] .swal2-checkbox { background: transparent; color: var(--cm-text); }
:root[data-theme="dark"] .swal2-validation-message { background: var(--cm-surface-2); color: var(--cm-text-2); }
/* The success tick draws white masks over its ring: repaint them with the popup colour */
:root[data-theme="dark"] .swal2-icon.swal2-success [class^=swal2-success-circular-line],
:root[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--cm-elevated) !important; }
:root[data-theme="dark"] .swal2-timer-progress-bar { background: var(--cm-line-2); }