/* QuestDL Notifications — Canonical Toast component shared by frontend and Admin Preview.
 * The Admin Preview intentionally uses the same qdl-toast structure and this same stylesheet
 * so visual drift between the editor and the real site Toast is minimized.
 */
:root {
    --qdl-toast-brand-primary: #7757ff;
    --qdl-toast-brand-primary-strong: #6547d4;
    --qdl-toast-brand-cyan: #27d7e8;
    --qdl-toast-text-primary: #33405a;
    --qdl-toast-text-secondary: #6f7d92;
    --qdl-toast-text-tertiary: #64718a;
    --qdl-toast-text-warning: #8a6216;
    --qdl-toast-text-danger: #a35f75;
    --qdl-toast-focus-ring: rgba(94,73,196,.28);
    --qdl-toast-ease: cubic-bezier(.2,.78,.2,1);
}

.qdl-toast-container {
    width: min(420px, calc(100vw - 24px));
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    isolation: isolate;
}
.qdl-toast-container.qdl-toast-position-top-end { top: 18px; inset-inline-end: 18px; }
.qdl-toast-container.qdl-toast-position-top-start { top: 18px; inset-inline-start: 18px; }
.qdl-toast-container.qdl-toast-position-top-center { top: 18px; inset-inline-start: 50%; transform: translateX(-50%); }
.qdl-toast-container.qdl-toast-position-bottom-end { bottom: 18px; inset-inline-end: 18px; }
.qdl-toast-container.qdl-toast-position-bottom-start { bottom: 18px; inset-inline-start: 18px; }
.qdl-toast-container.qdl-toast-position-bottom-center { bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); }
.qdl-toast-container.qdl-toast-position-bottom-end,
.qdl-toast-container.qdl-toast-position-bottom-start,
.qdl-toast-container.qdl-toast-position-bottom-center { flex-direction: column-reverse; }

.qdl-toast {
    --qdl-template-start: var(--qdl-toast-brand-primary);
    --qdl-template-end: var(--qdl-toast-brand-cyan);
    --qdl-color-brand-primary: var(--qdl-toast-brand-primary);
    --qdl-color-brand-primary-strong: var(--qdl-toast-brand-primary-strong);
    --qdl-color-brand-cyan: var(--qdl-toast-brand-cyan);
    --qdl-color-text-primary: var(--qdl-toast-text-primary);
    --qdl-color-text-secondary: var(--qdl-toast-text-secondary);
    --qdl-color-text-tertiary: var(--qdl-toast-text-tertiary);
    --qdl-color-text-warning: var(--qdl-toast-text-warning);
    --qdl-color-text-danger: var(--qdl-toast-text-danger);
    --qdl-color-text-on-brand: #ffffff;
    --qdl-focus-ring: var(--qdl-toast-focus-ring);
    --qdl-ease-premium: var(--qdl-toast-ease);
    --qdl-font-chip: 10.5px;
    --qdl-font-action: 11.5px;
    --qdl-weight-bold: 700;
    --qdl-weight-extrabold: 800;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 104px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 23px;
    isolation: isolate;
    color: var(--qdl-color-text-primary);
    background:
        radial-gradient(circle at 92% 7%, color-mix(in srgb,var(--qdl-template-end) 12%,transparent), transparent 28%),
        radial-gradient(circle at 8% 100%, color-mix(in srgb,var(--qdl-template-start) 8%,transparent), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,248,255,.97));
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 17%,rgba(73,86,126,.08));
    box-shadow:
        0 26px 62px rgba(44,54,91,.17),
        0 7px 18px rgba(78,83,141,.06),
        0 1px 0 rgba(255,255,255,.94) inset;
    backdrop-filter: blur(20px) saturate(1.04);
    -webkit-backdrop-filter: blur(20px) saturate(1.04);
    animation: qdlToastIn .36s cubic-bezier(.2,.8,.2,1);
    contain: layout;
}
.qdl-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--qdl-template-start) 8%, transparent), transparent 38%);
    opacity: .72;
}
.qdl-toast::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(120deg,rgba(255,255,255,.30),transparent 28%,transparent 72%,rgba(255,255,255,.18));
    mix-blend-mode: screen;
}
.qdl-toast > * { position: relative; z-index: 1; }
.qdl-toast.is-leaving { animation: qdlToastOut .18s ease forwards; }
.qdl-toast.is-paused {
    box-shadow: 0 18px 52px color-mix(in srgb,var(--qdl-template-start) 12%,rgba(48,62,101,.18));
}
.qdl-toast-priority-indicator {
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 0;
    width: 5px;
    border-radius: 0 7px 7px 0;
    background: linear-gradient(180deg,var(--qdl-template-start),var(--qdl-template-end));
    box-shadow: 0 0 16px color-mix(in srgb,var(--qdl-template-start) 24%,transparent);
    opacity: .8;
    z-index: 2;
}
.qdl-toast.priority-important .qdl-toast-priority-indicator { opacity: .92; }
.qdl-toast.priority-high .qdl-toast-priority-indicator { width: 6px; opacity: .96; }
.qdl-toast.priority-critical .qdl-toast-priority-indicator {
    width: 7px;
    background: linear-gradient(180deg,#ff5ca8,#ff875f);
    box-shadow: 0 0 18px rgba(255,92,168,.28);
}
.qdl-toast-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 30% 18%,rgba(255,255,255,.32),transparent 27%),
        linear-gradient(135deg,var(--qdl-template-start),var(--qdl-template-end));
    border: 1px solid rgba(255,255,255,.30);
    box-shadow:
        0 13px 28px color-mix(in srgb,var(--qdl-template-start) 20%,transparent),
        0 2px 0 rgba(255,255,255,.20) inset;
    transition: transform .18s var(--qdl-ease-premium),box-shadow .18s ease;
}
.qdl-toast-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 5px rgba(32,43,88,.16)); }
@media (hover:hover) {
    .qdl-toast:hover .qdl-toast-icon {
        transform: translateY(-1px);
        box-shadow: 0 15px 29px color-mix(in srgb,var(--qdl-template-start) 19%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
    }
}
.qdl-toast-body {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-inline: 0;
    padding-block: 1px;
}
.qdl-toast-topline {
    min-height: 26px;
    padding-inline-end: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.qdl-toast-source,
.qdl-toast-priority-label {
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--qdl-font-chip);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.25;
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 11%,rgba(73,86,126,.05));
    box-shadow: 0 1px 0 rgba(255,255,255,.76) inset;
}
.qdl-toast-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    color: var(--qdl-color-brand-primary-strong);
    background: color-mix(in srgb,var(--qdl-template-start) 7%,white);
}
.qdl-toast-source-icon { display: inline-grid; width: 13px; height: 13px; place-items: center; }
.qdl-toast-source-icon svg { width: 13px; height: 13px; }
.qdl-toast-priority-label {
    color: var(--qdl-color-text-warning);
    background: rgba(255,217,94,.15);
    border-color: rgba(203,168,54,.20);
}
.qdl-toast-body strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    margin-top: 7px;
    padding-inline-end: 30px;
    color: var(--qdl-color-text-primary);
    font-size: 16px;
    font-weight: var(--qdl-weight-extrabold);
    line-height: 1.5;
    letter-spacing: -.012em;
    text-wrap: pretty;
}
.qdl-toast-summary .qdl-toast-body strong { font-size: 20px; line-height: 1.4; margin-top: 7px; padding-inline-end: 30px; }
.qdl-toast-body p {
    max-width: 100%;
    margin: 6px 0 0;
    color: var(--qdl-color-text-secondary);
    font-size: 12.75px;
    line-height: 1.72;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.qdl-toast-action,
.qdl-toast-summary-action {
    --qdl-toast-action-text: #40365f;
    width: fit-content;
    min-height: 34px;
    margin-top: 10px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 11px;
    color: var(--qdl-toast-action-text);
    background: #f6f3ff;
    background:
        linear-gradient(135deg,
            color-mix(in srgb,var(--qdl-template-start) 7%,#ffffff),
            color-mix(in srgb,var(--qdl-template-end) 5%,#f6fbff));
    
    border: 1px solid #ddd6f8;
    border-color: color-mix(in srgb,var(--qdl-template-start) 18%,rgba(73,86,126,.08));
    box-shadow: 0 7px 16px color-mix(in srgb,var(--qdl-template-start) 9%,rgba(48,62,101,.06)), inset 0 1px 0 rgba(255,255,255,.92);
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    transition: none;
}
.qdl-toast > button:focus-visible {
    color: var(--qdl-color-text-primary);
    border-color: color-mix(in srgb,var(--qdl-template-start) 13%,rgba(73,86,126,.06));
}
.qdl-toast > button:focus-visible,
.qdl-toast-action:focus-visible,
.qdl-toast-summary-action:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 3px;
}
.qdl-toast-progress { height: 4px; min-height: 4px; margin-top: 11px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb,var(--qdl-template-start) 10%,white); box-shadow: inset 0 0 0 1px rgba(73,86,126,.04); }
.qdl-toast-progress span { display:block; width:100%; height:100%; transform-origin:var(--qdl-progress-origin,100%); background:linear-gradient(90deg,var(--qdl-template-start),var(--qdl-template-end)); box-shadow:0 0 10px color-mix(in srgb,var(--qdl-template-start) 22%,transparent); animation:qdlToastProgress var(--qdl-toast-duration,5000ms) linear forwards; }
.qdl-toast-progress span.is-paused { animation-play-state: paused; }
.qdl-toast-thumb {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    justify-self: center;
    width: 84px;
    height: 84px;
    min-width: 84px;
    min-height: 84px;
    border-radius: 17px;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb,var(--qdl-template-start) 5%,#fff), color-mix(in srgb,var(--qdl-template-end) 7%,#fff));
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 13%,rgba(73,86,126,.08));
    box-shadow: 0 10px 24px rgba(48,62,101,.11), inset 0 1px 0 rgba(255,255,255,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}
.qdl-toast-thumb img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain !important; object-position:center center; background:rgba(255,255,255,.42); }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-landscape { width:112px; height:72px; min-width:112px; min-height:72px; border-radius:17px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-square { width:84px; height:84px; min-width:84px; min-height:84px; border-radius:17px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-portrait { width:74px; height:94px; min-width:74px; min-height:94px; border-radius:17px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-icon { width:26px; height:26px; min-width:26px; border-radius:9px; margin:0 2px 2px 0; align-self:end; justify-self:end; z-index:3; }
.qdl-toast.qdl-layout-compact { padding: 11px 12px; }
.qdl-toast.qdl-layout-compact .qdl-toast-icon { width:38px; height:38px; min-width:38px; border-radius:13px; }
.qdl-toast.qdl-layout-hero { background: linear-gradient(135deg, color-mix(in srgb,var(--qdl-template-start) 8%,white), color-mix(in srgb,var(--qdl-template-end) 7%,white)); }
.qdl-toast.qdl-layout-hero .qdl-toast-icon { width:46px; height:46px; min-width:46px; }
.qdl-toast.qdl-layout-image-focus { display:grid; grid-template-columns: auto minmax(0,1fr) auto; min-height:0; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-thumb { grid-column:1 / -1; grid-row:1; width:100%; max-width:100%; min-width:0; height:94px; min-height:94px; padding:5px; border:0; box-shadow:none; aspect-ratio:16 / 7; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-thumb img { width:100%; height:100%; border-radius:11px; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-icon { grid-row:2; width:46px; height:46px; min-width:46px; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-body { grid-row:2; min-width:0; padding-block:0; }
.qdl-toast.qdl-layout-image-focus > button { position:static; grid-row:2; width:30px; height:30px; min-width:30px; min-height:30px; }
.qdl-toast.qdl-effect-glow { box-shadow: 0 18px 50px color-mix(in srgb,var(--qdl-template-start) 17%,rgba(48,62,101,.16)); }
.qdl-toast.qdl-effect-pulse .qdl-toast-icon { animation:qdlTemplatePulse 2.1s ease-in-out infinite; }
.qdl-toast.qdl-effect-shine .qdl-toast-icon { position:relative; overflow:hidden; }
.qdl-toast.qdl-effect-shine .qdl-toast-icon::after { content:""; position:absolute; inset:-80%; background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%); transform:translateX(80%); animation:qdlTemplateShine 3s ease-in-out infinite; }
.qdl-toast-summary { min-height:124px; grid-template-columns:auto minmax(0,1fr) auto; background:radial-gradient(circle at 88% 14%,rgba(39,215,232,.13),transparent 30%),radial-gradient(circle at 8% 88%,rgba(119,87,255,.11),transparent 32%),linear-gradient(145deg,#fff,#f7f5ff 58%,#f2fbfd); border-color:rgba(119,87,255,.15); }
.qdl-toast-summary .qdl-toast-icon { width:56px; height:56px; min-width:56px; border-radius:18px; background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.38),transparent 26%),linear-gradient(135deg,var(--qdl-color-brand-primary),var(--qdl-color-brand-cyan)); }
.qdl-toast-summary .qdl-toast-source { color:var(--qdl-color-brand-primary-strong); background:rgba(119,87,255,.075); }
.qdl-toast-summary .qdl-toast-progress { margin-top:11px; }
.qdl-toast-summary-action { align-self:flex-start; }
.qdl-toast.qdl-effect-pulse .qdl-toast-icon,
.qdl-toast.qdl-effect-shine .qdl-toast-icon::after { animation-iteration-count:1; animation-play-state:paused; }
.qdl-toast.is-new.qdl-effect-pulse .qdl-toast-icon,
.qdl-toast.is-new.qdl-effect-shine .qdl-toast-icon::after { animation-play-state:running; }

@keyframes qdlToastIn { from { transform:translateY(-12px) scale(.98); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes qdlToastOut { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(-8px) scale(.98); } }
@keyframes qdlToastProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@keyframes qdlToastPulseOnce { 0%,100% { transform:scale(1); } 45% { transform:scale(1.025); } }
@keyframes qdlTemplatePulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); box-shadow:0 0 0 6px color-mix(in srgb,var(--qdl-template-start) 10%,transparent); } }
@keyframes qdlTemplateShine { 0%, 52%, 100% { transform:translateX(80%) rotate(12deg); } 70% { transform:translateX(-80%) rotate(12deg); } }

@media (max-width: 680px) {
    .qdl-toast-container { width:min(100%,calc(100vw - 20px)); max-width:none; gap:8px; }
    .qdl-toast-container.qdl-toast-position-top-end,
    .qdl-toast-container.qdl-toast-position-top-start,
    .qdl-toast-container.qdl-toast-position-top-center { top:max(10px,calc(env(safe-area-inset-top) + 6px)); inset-inline-start:max(10px,env(safe-area-inset-left)); inset-inline-end:max(10px,env(safe-area-inset-right)); transform:none; }
    .qdl-toast-container.qdl-toast-position-bottom-end,
    .qdl-toast-container.qdl-toast-position-bottom-start,
    .qdl-toast-container.qdl-toast-position-bottom-center { bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px)); inset-inline-start:max(10px,env(safe-area-inset-left)); inset-inline-end:max(10px,env(safe-area-inset-right)); transform:none; }
    .qdl-toast { min-height:96px; padding:12px 13px; border-radius:20px; }
    .qdl-toast-icon { width:48px; height:48px; min-width:48px; border-radius:16px; }
    .qdl-toast-body { padding-inline-end:33px; }
    .qdl-toast-body strong { font-size:15px; line-height:1.52; }
    .qdl-toast-summary .qdl-toast-body strong { font-size:18px; line-height:1.42; }
    .qdl-toast-body p { font-size:12.25px; line-height:1.68; }
    .qdl-toast-source, .qdl-toast-priority-label { min-height:24px; padding-inline:7px; font-size:10.5px; }
    .qdl-toast-action, .qdl-toast-summary-action { min-height:32px; margin-top:9px; padding-inline:10px; font-size:11.5px; border-radius:10px; }
    .qdl-toast > button { inset-block-start:8px; inset-inline-end:8px; width:32px; height:32px; min-width:32px; min-height:32px; }
    .qdl-toast-summary { min-height:116px; }
    .qdl-toast-summary .qdl-toast-icon { width:52px; height:52px; min-width:52px; border-radius:17px; }
}
@media (max-width: 560px) {
    .qdl-toast { min-height:98px; padding:11px 12px 10px; border-radius:19px; }
    .qdl-toast-icon { width:44px; height:44px; min-width:44px; border-radius:15px; }
    .qdl-toast-body { padding-inline-end:31px; }
    .qdl-toast-body strong { font-size:14.25px; }
    .qdl-toast-summary .qdl-toast-body strong { font-size:17px; }
    .qdl-toast-body p { font-size:12px; line-height:1.65; }
    .qdl-toast-summary { min-height:110px; }
    .qdl-toast-summary .qdl-toast-icon { width:48px; height:48px; min-width:48px; }
}
@media (max-width: 360px) {
    .qdl-toast-container { width:calc(100vw - 16px); max-width:calc(100vw - 16px); }
    .qdl-toast { padding-inline:10px; }
    .qdl-toast-body { padding-inline-end:29px; }
    .qdl-toast-body strong { font-size:14px; }
    .qdl-toast-body p { font-size:11.75px; }
    .qdl-toast-source, .qdl-toast-priority-label { font-size:10px; }
    .qdl-toast-action, .qdl-toast-summary-action { font-size:11px; padding-inline:9px; }
    .qdl-toast-summary .qdl-toast-body strong { font-size:16.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-toast,
    .qdl-toast.qdl-effect-pulse .qdl-toast-icon,
    .qdl-toast.qdl-effect-shine .qdl-toast-icon::after,
    .qdl-toast-progress span,
    .qdl-toast-pulse-once { animation:none !important; }
    .qdl-toast,
    .qdl-toast-icon,
    .qdl-toast-action,
    .qdl-toast-summary-action,
    .qdl-toast > button { transition:none !important; }
}
@media (forced-colors: active) {
    .qdl-toast,
    .qdl-toast::before,
    .qdl-toast::after,
    .qdl-toast-priority-indicator,
    .qdl-toast-icon,
    .qdl-toast-source,
    .qdl-toast > button,
    .qdl-toast-action,
    .qdl-toast-summary-action { forced-color-adjust:auto; }
    .qdl-toast { background:Canvas !important; color:CanvasText !important; border-color:CanvasText !important; box-shadow:none !important; }
    .qdl-toast-body strong,
    .qdl-toast-body p,
    .qdl-toast-source,
    .qdl-toast-priority-label,
    .qdl-toast-action,
    .qdl-toast-summary-action,
    .qdl-toast > button { color:CanvasText !important; }
    .qdl-toast-action,
    .qdl-toast-summary-action,
    .qdl-toast > button { background:ButtonFace !important; border-color:ButtonText !important; }
}
@supports not (color: color-mix(in srgb, white 10%, black)) {
    .qdl-toast { background:#fff; border-color:#e2e6ef; }
    .qdl-toast-source { background:#f4f1ff; color:#6547d4; }
    .qdl-toast-progress { background:#eeeaf9; }
    .qdl-toast.qdl-layout-hero { background:#faf8ff; }
    .qdl-toast-thumb { background:#f7f9ff; }
}

/* v4.38.57 — Canonical action icon rendering for Toast. */
.qdl-toast-action, .qdl-toast-summary-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.qdl-toast-action .qdl-ui-icon, .qdl-toast-summary-action .qdl-ui-icon { width:14px; height:14px; flex:0 0 14px; }
.qdl-toast > button .qdl-ui-icon { width:17px; height:17px; }
.qdl-toast > button .qdl-ui-icon svg { width:17px; height:17px; }