/* v4.38.56 — QuestDL Core Notification Icon System.
 * Canonical SVG rendering for core semantic icons shared by template, card, toast and detail surfaces.
 */
.qdl-notification-icon svg,
.qdl-source-icon svg,
.qdl-toast-icon svg,
.qdl-toast-source-icon svg,
.qdl-detail-source-icon svg,
.qdl-popover-footer-link-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    vector-effect: non-scaling-stroke;
}
.qdl-notification-icon svg *,
.qdl-source-icon svg *,
.qdl-toast-icon svg *,
.qdl-toast-source-icon svg *,
.qdl-detail-source-icon svg *,
.qdl-popover-footer-link-icon svg * {
    vector-effect: non-scaling-stroke;
}
:root {
    --qdl-purple: #7757ff;
    --qdl-cyan: #27d7e8;
    --qdl-pink: #ff5ca8;
    --qdl-yellow: #ffd95e;
    --qdl-ink: #26334d;
    --qdl-muted: #73809a;
    --qdl-surface: rgba(255, 255, 255, .94);
    --qdl-border: rgba(55, 72, 110, .12);
    --qdl-shadow: 0 18px 55px rgba(67, 72, 118, .16);
}

.qdl-notification-shell { font-family: inherit; box-sizing: border-box; }
.qdl-notification-shell * { box-sizing: border-box; }
.qdl-notification-header { position: relative; display: inline-flex; align-items: center; }
.qdl-pulse { animation: qdlPulse .85s ease; }
.qdl-unread-badge { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--qdl-pink), #ff8a70); color: #fff; border: 2px solid #fff; font-size: 11px; font-weight: 800; line-height: 1; z-index: 4; box-shadow: 0 6px 14px rgba(255,92,168,.3); }
.qdl-notification-popover { position: absolute; z-index: 2147483647; top: calc(100% + 14px); inset-inline-end: 0; width: min(390px, calc(100vw - 24px)); background: var(--qdl-surface); backdrop-filter: blur(18px); border: 1px solid var(--qdl-border); border-radius: 24px; box-shadow: var(--qdl-shadow); overflow: hidden; }
.qdl-popover-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 18px 14px; background: linear-gradient(135deg, rgba(119,87,255,.09), rgba(39,215,232,.08)); }
.qdl-popover-head strong { display:block; color:var(--qdl-ink); font-size:16px; }
.qdl-popover-head span { display:block; color:var(--qdl-muted); font-size:11px; margin-top:4px; }
.qdl-popover-read-all, .qdl-read-all { border: 0; background: transparent; color: var(--qdl-purple); font-weight: 700; cursor: pointer; font-size: 11px; white-space: nowrap; }
.qdl-popover-list { max-height: 430px; overflow: auto; padding: 8px; }
.qdl-popover-footer { display:flex; justify-content:center; gap:14px; padding:13px 18px; background:#fbfcff; border-top:1px solid var(--qdl-border); }
.qdl-popover-footer a { text-decoration:none; text-align:center; font-weight:800; font-size:11px; color:var(--qdl-purple); }
.qdl-popover-footer .qdl-popover-settings-link { color:#6f7b91; }
.qdl-settings-link { color:var(--qdl-purple); text-decoration:none; font-size:11px; font-weight:900; }
.qdl-notification-item { position:relative; display:flex; gap:10px; align-items:flex-start; padding:13px; border-radius:18px; transition: background .18s ease, transform .18s ease; cursor:pointer; }
.qdl-notification-item:hover { background:rgba(119,87,255,.06); transform:translateY(-1px); }
.qdl-notification-item.is-unread { background:linear-gradient(90deg, rgba(119,87,255,.07), rgba(39,215,232,.04)); }
.qdl-notification-icon { width:38px; height:38px; flex:0 0 38px; border-radius:13px; display:grid; place-items:center; color:var(--qdl-purple); background:linear-gradient(135deg,#f0ecff,#e9fbff); box-shadow:inset 0 0 0 1px rgba(119,87,255,.06); }
.qdl-notification-icon svg, .qdl-toast-icon svg { width:21px; height:21px; }
.qdl-notification-content { min-width:0; flex:1; }
.qdl-notification-title-row { display:flex; align-items:center; gap:8px; }
.qdl-notification-title-row strong { font-size:12px; color:var(--qdl-ink); }
.qdl-dot { width:7px; height:7px; border-radius:50%; background:var(--qdl-pink); box-shadow:0 0 0 4px rgba(255,92,168,.10); }
.qdl-notification-content p { margin:5px 0 8px; color:var(--qdl-muted); font-size:11px; line-height:1.7; }
.qdl-notification-meta { display:flex; justify-content:space-between; gap:8px; align-items:center; color:#99a3b6; font-size:10px; }
.qdl-notification-action { text-decoration:none; color:var(--qdl-purple); font-weight:800; }
.qdl-notification-delete { border:0; background:transparent; color:#b4bdcb; cursor:pointer; width:24px; height:24px; border-radius:8px; font-size:18px; line-height:1; }
.qdl-notification-delete:hover { background:#f2f4f8; color:#667085; }
.qdl-empty { padding:28px 16px; text-align:center; color:var(--qdl-muted); font-size:12px; }
.qdl-toast-container { position:fixed; z-index:100000; width:min(410px,calc(100vw - 28px)); display:grid; gap:10px; pointer-events:none; }
.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 { --qdl-template-start:var(--qdl-purple); --qdl-template-end:var(--qdl-cyan); pointer-events:auto; position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 14px; border:1px solid color-mix(in srgb,var(--qdl-template-start) 16%,white); border-radius:22px; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); box-shadow:0 18px 48px rgba(48,62,101,.2); animation:qdlToastIn .36s cubic-bezier(.2,.8,.2,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:0; inset-inline-start:0; width:4px; background:linear-gradient(180deg,var(--qdl-template-start),var(--qdl-template-end)); opacity:.72; }
.qdl-toast.priority-important .qdl-toast-priority-indicator { opacity:.9; }
.qdl-toast.priority-high .qdl-toast-priority-indicator { width:5px; }
.qdl-toast.priority-critical .qdl-toast-priority-indicator { width:6px; background:linear-gradient(180deg,#ff5ca8,#ff8c5a); }
.qdl-toast-icon { grid-row:1; grid-column:1; width:44px; height:44px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--qdl-template-start),var(--qdl-template-end)); flex:0 0 auto; box-shadow:0 10px 22px color-mix(in srgb,var(--qdl-template-start) 18%,transparent); }
.qdl-toast-topline { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.qdl-toast-source { display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; padding:3px 7px; border-radius:999px; background:color-mix(in srgb,var(--qdl-template-start) 7%,white); color:var(--qdl-template-start); font-size:9px; font-weight:900; line-height:1.2; }
.qdl-toast-source-icon { display:inline-grid; width:12px; height:12px; place-items:center; }
.qdl-toast-source-icon svg { width:12px; height:12px; }
.qdl-toast-priority-label { display:inline-flex; padding:3px 7px; border-radius:999px; background:#fff3ea; color:#d56a28; font-size:9px; font-weight:900; }
.qdl-toast-body strong { display:block; margin-top:5px; color:var(--qdl-ink); font-size:13px; line-height:1.45; }
.qdl-toast-body p { margin:4px 0 0; color:var(--qdl-muted); font-size:11px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.qdl-toast-action { display:inline-flex; margin-top:7px; color:#40365f; text-decoration:none; font-size:10px; font-weight:900; }
.qdl-toast > button { grid-column:3; grid-row:1; align-self:start; border:0; background:transparent; color:#9ba4b4; cursor:pointer; width:28px; height:28px; border-radius:9px; font-size:18px; line-height:1; }
.qdl-toast > button:focus-visible { outline:3px solid var(--qdl-focus-ring); outline-offset:2px; }
.qdl-toast-progress { height:3px; margin-top:9px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--qdl-template-start) 9%,white); }
.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)); animation:qdlToastProgress var(--qdl-toast-duration) linear forwards; }
.qdl-toast-progress span.is-paused { animation-play-state:paused; }
.qdl-toast-thumb { grid-column:1; grid-row:1; align-self:center; justify-self:center; width:78px; height:78px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--qdl-template-start) 7%,white),color-mix(in srgb,var(--qdl-template-end) 7%,white)); display:flex; align-items:center; justify-content:center; padding:0; border:1px solid color-mix(in srgb,var(--qdl-template-start) 10%,rgba(73,86,126,.05)); box-shadow:0 8px 18px rgba(48,62,101,.10); }
.qdl-toast-thumb {
    contain:layout paint;
}
.qdl-toast-thumb::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(115deg,
        color-mix(in srgb,var(--qdl-template-start) 6%,#fff) 0%,
        color-mix(in srgb,var(--qdl-template-end) 10%,#fff) 42%,
        rgba(255,255,255,.94) 50%,
        color-mix(in srgb,var(--qdl-template-end) 9%,#fff) 58%,
        color-mix(in srgb,var(--qdl-template-start) 6%,#fff) 100%);
    background-size:220% 100%;
    opacity:0;
    transition:opacity .22s ease;
}
.qdl-toast-thumb.is-loading::before {
    opacity:1;
    animation:qdlToastMediaShimmer 1.55s linear infinite;
}
.qdl-toast-thumb img {
    position:relative;
    z-index:2;
    opacity:0;
    transform:scale(.985);
    filter:blur(2px);
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    border-radius:15px;
    transition:opacity .28s ease,transform .36s cubic-bezier(.2,.8,.2,1),filter .28s ease;
}
.qdl-toast-thumb.is-ready img {
    opacity:1;
    transform:scale(1);
    filter:none;
}
.qdl-toast-thumb.is-ready::before,
.qdl-toast-thumb.is-broken::before {
    opacity:0;
    animation:none;
}
.qdl-toast-thumb.is-broken img {
    opacity:0;
    visibility:hidden;
}
.qdl-toast-thumb.is-broken::after {
    content:"";
    position:absolute;
    inset:50% auto auto 50%;
    width:30px;
    height:30px;
    transform:translate(-50%,-50%);
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--qdl-template-start) 18%,#dfe4ef);
    background:linear-gradient(145deg,#fff,#f2f5fb);
    box-shadow:0 8px 18px rgba(48,62,101,.09),0 0 0 4px color-mix(in srgb,var(--qdl-template-start) 5%,transparent);
}
@keyframes qdlToastMediaShimmer {
    from { background-position:190% 0; }
    to { background-position:-10% 0; }
}
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-landscape { width:104px; height:66px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-square { width:78px; height:78px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-portrait { width:70px; height:88px; }
.qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-icon { grid-column:1; grid-row:1; z-index:3; align-self:end; justify-self:end; width:27px; height:27px; border-radius:9px; box-shadow:0 7px 16px rgba(48,62,101,.18), inset 0 1px 0 rgba(255,255,255,.28); margin:0 2px 2px 0; }
.qdl-toast.qdl-layout-image-focus { grid-template-columns:auto minmax(0,1fr) auto; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-thumb { grid-column:1 / -1; grid-row:1; width:100%; height:94px; min-height:94px; aspect-ratio:16 / 7; padding:5px; border:0; box-shadow:none; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-icon { grid-row:2; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-body { grid-row:2; }
.qdl-toast.qdl-layout-compact .qdl-toast-icon { width:38px; height: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:47px; height:47px; }
.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-summary { grid-template-columns:auto minmax(0,1fr) auto; }
.qdl-toast-summary .qdl-toast-icon { background:linear-gradient(135deg,var(--qdl-purple),var(--qdl-cyan)); }
.qdl-toast-summary-label { margin-top:0 !important; }
.qdl-toast-summary-action { display:inline-flex; margin-top:7px; color:var(--qdl-purple); text-decoration:none; font-size:10px; font-weight:900; }
.qdl-toast-pulse-once { animation:qdlToastPulseOnce .42s ease; }
@keyframes qdlPulse { 0%,100% { transform:scale(1); box-shadow:none; } 45% { transform:scale(1.04); box-shadow:0 0 0 9px rgba(39,215,232,.10); } }
@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); } }
@media (max-width:680px) {
    .qdl-toast-container { width:min(100vw - 20px,520px); }
    .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:10px; inset-inline-start:10px; inset-inline-end:10px; 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:10px; inset-inline-start:10px; inset-inline-end:10px; transform:none; }
    .qdl-toast { border-radius:19px; padding:12px; }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-landscape { width:88px; height:56px; }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-square { width:68px; height:68px; }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-portrait { width:62px; height:78px; }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-icon { width:24px; height:24px; border-radius:8px; margin:0 1px 1px 0; }
}
@supports not (color:color-mix(in srgb,white 10%,black)) {
    .qdl-toast-source { background:#f4f1ff; }
    .qdl-toast-progress { background:#eeeaf9; }
    .qdl-toast.qdl-layout-hero { background:#faf8ff; }
    .qdl-toast-thumb::before { background:linear-gradient(115deg,#f6f3ff 0%,#eefcff 44%,#fff 50%,#eefcff 56%,#f6f3ff 100%); background-size:220% 100%; }
    .qdl-toast-thumb.is-broken::after { border-color:#dfe4ef; box-shadow:0 8px 18px rgba(48,62,101,.09),0 0 0 4px rgba(119,87,255,.05); }
}
@media (forced-colors:active) {
    .qdl-toast-thumb::before { display:none; }
    .qdl-toast-thumb.is-broken::after { border-color:CanvasText; background:Canvas; box-shadow:none; }
    .qdl-toast-thumb img { filter:none; }
}

@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-thumb.is-loading::before,
    .qdl-toast-pulse-once { animation:none !important; }
}

.qdl-notification-icon {
    color: var(--qdl-template-start);
    background: linear-gradient(135deg, color-mix(in srgb, var(--qdl-template-start) 12%, white), color-mix(in srgb, var(--qdl-template-end) 11%, white));
}
.qdl-notification-action { color: var(--qdl-template-start); }
.qdl-notification-item.qdl-layout-compact { padding: 10px 12px; gap: 8px; }
.qdl-notification-item.qdl-layout-compact .qdl-notification-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
.qdl-notification-item.qdl-layout-compact .qdl-notification-content p { margin-bottom: 5px; }
.qdl-notification-item.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) 8%, white)); }
.qdl-notification-item.qdl-layout-hero .qdl-notification-icon { width: 44px; height: 44px; flex-basis: 44px; color: #fff; background: linear-gradient(135deg, var(--qdl-template-start), var(--qdl-template-end)); box-shadow: 0 10px 22px color-mix(in srgb, var(--qdl-template-start) 22%, transparent); }
.qdl-notification-item.qdl-layout-image-focus { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { grid-column: 1 / -1; order: -1; width: 100%; height: 118px; min-height: 118px; border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--qdl-template-start) 10%, #fff), color-mix(in srgb, var(--qdl-template-end) 10%, #fff)); display: flex; align-items: center; justify-content: center; padding: 5px; }
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; border-radius: 11px; }
.qdl-notification-item.qdl-effect-glow { box-shadow: 0 10px 34px color-mix(in srgb, var(--qdl-template-start) 10%, rgba(68,75,111,.06)); }
.qdl-notification-item.qdl-effect-pulse .qdl-notification-icon { animation: qdlTemplatePulse 2.3s ease-in-out infinite; }
.qdl-notification-item.qdl-effect-shine .qdl-notification-icon { position: relative; overflow: hidden; }
.qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after { content:""; position:absolute; inset:-55%; background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.75) 50%, transparent 64%); transform:translateX(80%); animation:qdlTemplateShine 3.3s ease-in-out infinite; }
.qdl-toast {
    --qdl-template-start: var(--qdl-purple);
    --qdl-template-end: var(--qdl-cyan);
    border-color: color-mix(in srgb, var(--qdl-template-start) 16%, white);
}
.qdl-toast-icon { background:linear-gradient(135deg,var(--qdl-template-start),var(--qdl-template-end)); }
.qdl-toast-body a { color: var(--qdl-template-start); }
.qdl-toast.qdl-layout-compact { padding: 11px 12px; }
.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; flex-basis:46px; }
.qdl-toast.qdl-layout-image-focus { display:grid; grid-template-columns:46px 1fr auto; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-thumb { grid-column:1 / -1; width:100%; height:94px; }
.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; }
@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); } }
@supports not (color: color-mix(in srgb, white 10%, black)) {
    .qdl-notification-icon { background: #f1efff; }
    .qdl-notification-item.qdl-layout-hero { background:#faf8ff; }
    .qdl-toast.qdl-layout-hero { background:#faf8ff; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item.qdl-effect-pulse .qdl-notification-icon,
    .qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after,
    .qdl-toast.qdl-effect-pulse .qdl-toast-icon,
    .qdl-toast.qdl-effect-shine .qdl-toast-icon::after { animation:none; }
}

/* v1.7 avatar notification trigger */
.qdl-avatar-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--qdl-purple);
    cursor: pointer;
    border-radius: 50%;
    transition: transform .22s ease, filter .22s ease;
    isolation: isolate;
}
.qdl-avatar-trigger:hover { transform: translateY(-2px); filter: saturate(1.05); }
.qdl-avatar-trigger:focus-visible { outline: 3px solid rgba(119,87,255,.22); outline-offset: 4px; }
.qdl-avatar-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: visible;
    background: linear-gradient(135deg, #ffffff 10%, #f5f1ff 56%, #eefcff 100%);
    box-shadow: 0 11px 26px rgba(67,78,126,.15), 0 0 0 1px rgba(255,255,255,.96) inset;
}
.qdl-avatar-wrap::before,
.qdl-avatar-wrap::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.qdl-avatar-wrap::before {
    inset:-1px;
    border:1px solid rgba(130,36,227,.10);
    box-shadow:0 0 0 5px rgba(39,215,232,.035), 0 0 22px rgba(130,36,227,.08);
}
.qdl-avatar-wrap::after {
    width:10px;
    height:10px;
    top:2px;
    inset-inline-end:6px;
    background:radial-gradient(circle at 35% 30%, #ffffff 0 28%, #b9f8ff 29% 58%, rgba(39,215,232,0) 70%);
    opacity:.86;
    filter:blur(.1px);
}
.qdl-user-avatar {
    position: relative;
    z-index: 3;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(145deg, #f2efff, #e8fbff);
    border: 2px solid rgba(255,255,255,.96);
}
.qdl-user-avatar-placeholder {
    display: grid;
    place-items: center;
    color: var(--qdl-purple);
}
.qdl-user-avatar-placeholder svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.qdl-avatar-ring {
    position: absolute;
    inset: -2px;
    z-index: 1;
    border-radius: 50%;
    background: conic-gradient(from 210deg, var(--qdl-purple), var(--qdl-cyan), var(--qdl-pink), var(--qdl-purple));
    opacity: .72;
    filter: blur(.1px);
    animation: qdlAvatarSpin 7s linear infinite;
}
.qdl-avatar-ring::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
.qdl-avatar-spark {
    position: absolute;
    z-index: 4;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow:0 0 0 2px rgba(255,255,255,.75), 0 0 0 4px rgba(39,215,232,.10), 0 0 14px rgba(39,215,232,.50);
    pointer-events:none;
}
.qdl-avatar-spark.spark-one { top: 2px; inset-inline-start: 10px; }
.qdl-avatar-spark.spark-two { bottom: 5px; inset-inline-end: 1px; background: #fff2fa; box-shadow: 0 0 0 3px rgba(255,92,168,.10), 0 0 12px rgba(255,92,168,.42); }
.qdl-unread-badge {
    position: absolute;
    z-index: 8;
    top: 1px;
    inset-inline-end: -11px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border: 3px solid #fff;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff4f9a 0%, #ff775f 52%, #ffae62 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(255,92,168,.28), 0 2px 0 rgba(255,255,255,.78) inset;
    transform-origin: center;
}
.qdl-unread-badge::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255,92,168,.18), rgba(255,92,168,0) 68%);
    z-index: -1;
}
.qdl-unread-badge.is-updated { animation: qdlBadgePop .58s cubic-bezier(.18,.88,.32,1.18); }
.qdl-unread-badge.is-empty { display: none; }
@keyframes qdlAvatarSpin { to { transform: rotate(360deg); } }
@keyframes qdlBadgePop {
    0% { transform: scale(.72); opacity: .45; }
    55% { transform: scale(1.22); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-avatar-ring { animation: none; }
    .qdl-unread-badge.is-updated { animation: none; }
}

/* v1.8 guest login trigger + lightweight avatar neon halo */
.qdl-avatar-trigger,
.qdl-guest-login-trigger {
    -webkit-tap-highlight-color: transparent;
}
.qdl-avatar-wrap {
    overflow: visible;
    isolation: isolate;
    background: linear-gradient(145deg, #ffffff, #f3f0ff);
    box-shadow: 0 10px 24px rgba(67,78,126,.14), 0 0 0 1px rgba(255,255,255,.98) inset;
}
.qdl-user-avatar,
.qdl-user-avatar-placeholder {
    box-shadow: 0 0 0 1px rgba(255,255,255,.92), 0 4px 13px rgba(49,61,103,.10);
}
.qdl-avatar-halo {
    position: absolute;
    inset: -7px;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
    opacity: .7;
}
.qdl-avatar-halo-one {
    background: radial-gradient(circle, rgba(130,36,227,.28) 0%, rgba(130,36,227,.10) 42%, rgba(130,36,227,0) 72%);
    filter: blur(5px);
}
.qdl-avatar-halo-two {
    inset: -4px;
    background: conic-gradient(from 30deg, rgba(130,36,227,.0), rgba(54,216,232,.46), rgba(255,92,168,.34), rgba(130,36,227,.0) 72%);
    filter: blur(1.5px);
    opacity: .56;
    animation: qdlAvatarHaloDrift 6.8s linear infinite;
}
.qdl-avatar-ring {
    inset: -2px;
    opacity: .9;
    box-shadow: 0 0 14px rgba(130,36,227,.18), 0 0 22px rgba(54,216,232,.10);
}
.qdl-avatar-trigger:hover .qdl-avatar-halo-one,
.qdl-avatar-trigger:focus-visible .qdl-avatar-halo-one { opacity: .95; }
.qdl-avatar-trigger:hover .qdl-avatar-halo-two,
.qdl-avatar-trigger:focus-visible .qdl-avatar-halo-two { opacity: .74; }

.qdl-guest-login-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 98px;
    min-height: 48px;
    padding: 6px 12px 6px 10px;
    border-radius: 18px;
    overflow: visible;
    text-decoration: none !important;
    color: #fff;
    background: #8224e3;
    box-shadow: 0 10px 24px rgba(130,36,227,.28), 0 0 0 1px rgba(255,255,255,.12) inset, 0 1px 0 rgba(255,255,255,.18) inset;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    isolation: isolate;
}
.qdl-guest-login-trigger::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    background: radial-gradient(circle at 26% 30%, rgba(255,255,255,.24), transparent 31%), radial-gradient(circle at 72% 72%, rgba(54,216,232,.18), transparent 36%);
    filter: blur(7px);
    opacity: .64;
    z-index: -2;
}
.qdl-guest-login-trigger:hover,
.qdl-guest-login-trigger:focus-visible {
    transform: translateY(-2px);
    filter: saturate(1.05);
    box-shadow: 0 14px 30px rgba(130,36,227,.34), 0 0 0 1px rgba(255,255,255,.14) inset, 0 1px 0 rgba(255,255,255,.2) inset;
}
.qdl-guest-login-trigger:focus-visible {
    outline: 3px solid rgba(130,36,227,.24);
    outline-offset: 4px;
}
.qdl-guest-login-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 5px 12px rgba(46,15,76,.18);
}
.qdl-guest-login-icon svg { width: 20px; height: 20px; }
.qdl-guest-login-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; white-space: nowrap; }
.qdl-guest-login-copy strong { font-size: 12px; font-weight: 900; letter-spacing: -.1px; }
.qdl-guest-login-copy small { font-size: 9px; font-weight: 700; opacity: .78; }
.qdl-guest-login-shine {
    position: absolute;
    top: -20%;
    bottom: -20%;
    inset-inline-start: -22%;
    width: 26%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
    filter: blur(1px);
    transform: skewX(-18deg) translateX(-150%);
    opacity: .42;
    pointer-events: none;
}
.qdl-guest-login-trigger:hover .qdl-guest-login-shine,
.qdl-guest-login-trigger:focus-visible .qdl-guest-login-shine { animation: qdlGuestShine .75s ease-out forwards; }
.qdl-guest-unread-badge {
    top: 50%;
    inset-inline-end: -12px;
    transform: translateY(-50%);
    border-width: 3px;
}
.qdl-guest-login-trigger:hover .qdl-guest-unread-badge { filter: saturate(1.05); }
@keyframes qdlAvatarHaloDrift { to { transform: rotate(360deg); } }
@keyframes qdlGuestShine { to { transform: skewX(-18deg) translateX(590%); opacity: 0; } }
@media (max-width: 520px) {
    .qdl-guest-login-trigger { min-width: 86px; min-height: 44px; padding-inline: 9px; gap: 7px; border-radius: 16px; }
    .qdl-guest-login-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 11px; }
    .qdl-guest-login-icon svg { width: 18px; height: 18px; }
    .qdl-guest-login-copy strong { font-size: 11px; }
    .qdl-guest-login-copy small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-avatar-halo-two,
    .qdl-guest-login-trigger:hover .qdl-guest-login-shine,
    .qdl-guest-login-trigger:focus-visible .qdl-guest-login-shine { animation: none; }
}

.qdl-guest-popover .qdl-popover-title-icon { background:linear-gradient(145deg,rgba(130,36,227,.14),rgba(39,215,232,.12)); }

/* v3.6 guest split trigger: notification icon opens public guest feed; auth text navigates */
.qdl-guest-access {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    direction:rtl;
}
.qdl-guest-notification-trigger {
    position:relative;
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    flex:0 0 50px;
    padding:0;
    border:1px solid rgba(130,36,227,.12);
    border-radius:17px;
    color:#fff;
    background:linear-gradient(145deg,#8224e3,#6f34ef);
    box-shadow:0 10px 22px rgba(130,36,227,.24), 0 0 0 1px rgba(255,255,255,.12) inset;
    cursor:pointer;
    isolation:isolate;
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color:transparent;
}
.qdl-guest-notification-trigger:hover {
    transform:translateY(-2px);
    filter:saturate(1.05);
    box-shadow:0 14px 28px rgba(130,36,227,.30), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.qdl-guest-notification-trigger:focus-visible { outline:3px solid rgba(130,36,227,.24); outline-offset:4px; }
.qdl-guest-notification-icon {
    position:relative; z-index:2; width:29px; height:29px; display:grid; place-items:center; border-radius:11px;
    background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
}
.qdl-guest-notification-icon svg { width:21px; height:21px; display:block; }
.qdl-guest-icon-glow {
    position:absolute; inset:-5px; border-radius:20px; pointer-events:none; opacity:.7; z-index:0;
    background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.30),transparent 34%), radial-gradient(circle at 70% 72%,rgba(39,215,232,.22),transparent 42%);
    filter:blur(6px);
}
.qdl-guest-auth-link {
    position:relative; z-index:2; color:#8224e3; text-decoration:none; font-size:12px; font-weight:900; white-space:nowrap;
    padding:8px 4px; border-radius:9px; transition:color .18s ease, background .18s ease;
}
.qdl-guest-auth-link:hover, .qdl-guest-auth-link:focus-visible { color:#6d20be; background:rgba(130,36,227,.06); text-decoration:none; }
.qdl-guest-auth-link:focus-visible { outline:2px solid rgba(130,36,227,.18); outline-offset:2px; }
.qdl-guest-unread-badge {
    top:-7px; inset-inline-end:-8px; min-width:22px; height:22px; padding:0 6px; border-width:2px; transform:none;
}
@media (max-width:520px) {
    .qdl-guest-access { gap:8px; }
    .qdl-guest-notification-trigger { width:46px; height:46px; flex-basis:46px; border-radius:15px; }
    .qdl-guest-notification-icon { width:27px; height:27px; border-radius:10px; }
    .qdl-guest-notification-icon svg { width:19px; height:19px; }
    .qdl-guest-auth-link { font-size:11px; padding-inline:2px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-guest-notification-trigger, .qdl-guest-auth-link { transition:none; }
}

/* v1.9 avatar micro-interactions, smart priority halo and responsive tooltip */
.qdl-avatar-trigger { --qdl-priority-glow: rgba(130,36,227,.22); --qdl-priority-accent: #8224e3; }
.qdl-avatar-trigger.qdl-priority-important { --qdl-priority-glow: rgba(255,180,68,.24); --qdl-priority-accent: #ffae44; }
.qdl-avatar-trigger.qdl-priority-high { --qdl-priority-glow: rgba(255,92,168,.26); --qdl-priority-accent: #ff5ca8; }
.qdl-avatar-trigger.qdl-priority-critical { --qdl-priority-glow: rgba(255,82,82,.30); --qdl-priority-accent: #ff5252; }
.qdl-avatar-trigger.qdl-priority-important .qdl-avatar-ring,
.qdl-avatar-trigger.qdl-priority-high .qdl-avatar-ring,
.qdl-avatar-trigger.qdl-priority-critical .qdl-avatar-ring { opacity: 1; }
.qdl-avatar-trigger.qdl-priority-critical .qdl-avatar-ring { box-shadow: 0 0 16px var(--qdl-priority-glow), 0 0 28px rgba(255,82,82,.10); }
.qdl-avatar-trigger.qdl-priority-critical .qdl-avatar-halo-two { animation-duration: 4.6s; opacity: .78; }
.qdl-avatar-trigger.qdl-priority-high .qdl-avatar-halo-two { animation-duration: 5.4s; }
.qdl-avatar-trigger.qdl-priority-important .qdl-avatar-halo-two { animation-duration: 6.2s; }
.qdl-avatar-tooltip {
    position: absolute;
    inset-inline-end: -4px;
    top: calc(100% + 10px);
    z-index: 20;
    min-width: max-content;
    max-width: 220px;
    padding: 8px 11px;
    border-radius: 11px;
    background: rgba(31,38,61,.94);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(31,38,61,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px) scale(.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.qdl-avatar-tooltip::before {
    content: "";
    position: absolute;
    top: -5px;
    inset-inline-end: 16px;
    width: 10px;
    height: 10px;
    background: rgba(31,38,61,.94);
    transform: rotate(45deg);
    border-radius: 2px;
}
.qdl-avatar-trigger:hover .qdl-avatar-tooltip,
.qdl-avatar-trigger:focus-visible .qdl-avatar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.qdl-avatar-trigger .qdl-unread-badge {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.qdl-avatar-trigger:hover .qdl-unread-badge,
.qdl-avatar-trigger:focus-visible .qdl-unread-badge {
    filter: saturate(1.08);
    box-shadow: 0 9px 20px rgba(255,92,168,.34), 0 2px 0 rgba(255,255,255,.8) inset;
}
.qdl-avatar-trigger.qdl-priority-important .qdl-unread-badge { box-shadow: 0 9px 20px rgba(255,174,68,.28), 0 2px 0 rgba(255,255,255,.8) inset; }
.qdl-avatar-trigger.qdl-priority-high .qdl-unread-badge { box-shadow: 0 9px 20px rgba(255,92,168,.34), 0 2px 0 rgba(255,255,255,.8) inset; }
.qdl-avatar-trigger.qdl-priority-critical .qdl-unread-badge { box-shadow: 0 9px 22px rgba(255,82,82,.34), 0 2px 0 rgba(255,255,255,.8) inset; }
.qdl-avatar-trigger.qdl-priority-critical .qdl-unread-badge::before { background: radial-gradient(circle, rgba(255,82,82,.23), rgba(255,82,82,0) 68%); }
@media (max-width: 640px) {
    .qdl-avatar-tooltip { display: none; }
    .qdl-avatar-halo { inset: -5px; }
    .qdl-avatar-halo-two { filter: blur(1px); }
    .qdl-avatar-ring { inset: -2px; }
    .qdl-unread-badge { min-width: 22px; height: 22px; padding-inline: 6px; inset-inline-end: -9px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-avatar-trigger.qdl-priority-critical .qdl-avatar-halo-two,
    .qdl-avatar-trigger.qdl-priority-high .qdl-avatar-halo-two,
    .qdl-avatar-trigger.qdl-priority-important .qdl-avatar-halo-two { animation: none; }
    .qdl-avatar-tooltip { transition: none; }
}
.qdl-notifications-lock { overflow: hidden !important; }
.qdl-notification-accent { position:absolute; inset-inline-start:0; top:14px; bottom:14px; width:3px; border-radius:0 4px 4px 0; opacity:0; background:linear-gradient(180deg,var(--qdl-template-start),var(--qdl-template-end)); transition:opacity .18s ease; }
.qdl-notification-source { display:inline-flex; align-items:center; min-width:0; padding:3px 7px; border-radius:999px; background:rgba(119,87,255,.06); color:#7f6bc5; font-weight:800; }
.qdl-notification-item.is-removing { opacity:0; transform:translateY(5px) scale(.99); }
.qdl-action-btn { padding:8px 11px; border-radius:11px; background:rgba(119,87,255,.07); }
.qdl-action-btn:hover { background:rgba(119,87,255,.11); }
.qdl-notification-backdrop { position:fixed; inset:0; z-index:99990; background:rgba(28,34,52,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.qdl-notification-popover { width:min(420px,calc(100vw - 24px)); border-radius:24px; border-color:rgba(55,72,110,.1); box-shadow:0 26px 70px rgba(40,48,78,.22); transform-origin:top right; animation:qdlPopoverIn .2s ease both; }
.qdl-popover-grab { display:none; }
.qdl-popover-head { padding:15px 16px 12px; }
.qdl-popover-title-wrap { display:flex; align-items:center; gap:9px; min-width:0; }
.qdl-popover-title-icon {
    position:relative;
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--qdl-text-accent, #5e49c4);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), transparent 28%),
        linear-gradient(145deg, rgba(130,36,227,.13), rgba(39,215,232,.12));
    border:1px solid rgba(130,36,227,.10);
    box-shadow:0 8px 18px rgba(95,78,154,.09), 0 1px 0 rgba(255,255,255,.86) inset;
    isolation:isolate;
    overflow:visible;
}
.qdl-popover-title-icon::after {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    inset:auto 2px 3px auto;
    border-radius:50%;
    background:var(--qdl-cyan);
    box-shadow:0 0 0 3px rgba(39,215,232,.10), 0 0 12px rgba(39,215,232,.30);
}
.qdl-popover-title-icon svg {
    width:27px;
    height:27px;
    display:block;
    position:relative;
    z-index:1;
    filter:drop-shadow(0 3px 7px rgba(95,78,154,.10));
}
.qdl-popover-title-icon svg * { vector-effect:non-scaling-stroke; }
.qdl-popover-head-actions { display:flex; align-items:center; gap:5px; }
.qdl-popover-close { display:inline-grid; place-items:center; width:30px; height:30px; border:0; border-radius:10px; background:transparent; color:#9aa4b4; cursor:pointer; font-size:19px; line-height:1; }
.qdl-popover-close:hover { background:#f4f6fa; color:#667085; }
.qdl-popover-list { padding:7px; max-height:min(62vh,450px); scrollbar-width:thin; }
.qdl-popover-list:focus { outline:2px solid rgba(119,87,255,.14); outline-offset:-2px; }
.qdl-popover-list .qdl-notification-item { padding:11px 10px; border-radius:16px; }
.qdl-popover-list .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { height: 104px; min-height: 104px; }
.qdl-popover-list .qdl-notification-content p { margin-bottom:6px; }
.qdl-popover-list .qdl-notification-meta { justify-content:flex-start; }
.qdl-popover-list .qdl-notification-meta > span:not(.qdl-notification-source) { margin-inline-start:0; }
.qdl-popover-footer { padding:11px 14px; }
.qdl-popover-footer a { min-height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0 9px; border-radius:9px; }
@keyframes qdlPopoverIn { from { opacity:0; transform:translateY(-5px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width: 680px) {
    .qdl-notification-icon { width:36px; height:36px; flex-basis:36px; border-radius:12px; }
    .qdl-notification-thumb { width:42px; height:42px; flex-basis:42px; }
    .qdl-notification-delete { width:30px; height:30px; }

    .qdl-notification-backdrop { z-index:2147483646; background:rgba(28,34,52,.42); }
    .qdl-notification-popover { position:fixed; z-index:2147483647; inset:auto; top:auto; right:auto; bottom:auto; left:auto; width:min(448px,calc(100vw - 16px)); max-width:calc(100vw - 16px); max-height:min(82vh,720px); border-radius:26px; transform-origin:top right; }
    .qdl-popover-grab { display:none; }
    .qdl-popover-head { padding:12px 14px 10px; }
    .qdl-popover-list { max-height:56vh; }
    .qdl-popover-footer { padding-bottom:max(11px,env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
    .qdl-settings-link, .qdl-action-btn { display:flex; align-items:center; justify-content:center; min-height:36px; }
    .qdl-settings-link { padding:0 9px; background:#fff; border:1px solid rgba(55,72,110,.08); border-radius:10px; }
    .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { height: 92px; min-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-popover, .qdl-pulse, .qdl-toast { animation:none !important; transition:none !important; }
}

/* v2.3 delivery/realtime status */

/* v2.5.0 */
.sr-only,.qdl-popover-live{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.qdl-notification-item:focus-visible,.qdl-avatar-trigger:focus-visible,.qdl-secondary-btn:focus-visible,.qdl-primary-btn:focus-visible{outline:3px solid rgba(130,36,227,.38);outline-offset:3px;}
.qdl-notification-item[tabindex="0"]{cursor:pointer;}
.qdl-guest-pref-note{margin-top:8px;padding:8px 12px;border-radius:10px;background:rgba(130,36,227,.08);font-size:12px;}
.qdl-media-picker{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;}
.qdl-media-preview{width:120px;min-height:70px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;}
.qdl-media-preview img{display:block;max-width:100%;height:auto;}

/* v3.3 Notification Card Design 2.0 */
.qdl-notification-item {
    --qdl-card-radius: 20px;
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
    padding: 13px 14px;
    border-radius: var(--qdl-card-radius);
    border: 1px solid rgba(55,72,110,.09);
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 22px rgba(57,68,106,.055);
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.qdl-notification-item:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(57,68,106,.09);
    border-color: rgba(119,87,255,.14);
}
.qdl-notification-item:focus-visible {
    outline: 3px solid rgba(130,36,227,.22);
    outline-offset: 2px;
}
.qdl-notification-item.is-unread {
    background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,246,255,.97));
}
.qdl-notification-item.is-unread::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--qdl-template-start), var(--qdl-template-end));
    opacity: .8;
}
.qdl-notification-accent { display: none; }
.qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--qdl-template-start) 12%, #fff),
        color-mix(in srgb, var(--qdl-template-end) 9%, #fff)
    );
    box-shadow: 0 7px 18px rgba(65,78,120,.10), inset 0 0 0 1px rgba(255,255,255,.9);
    align-self: start;
}
.qdl-notification-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 45%, rgba(130,36,227,.05));
}
.qdl-notification-icon {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    align-self: end;
    justify-self: end;
    margin: 0 2px 2px 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--qdl-purple);
    background: rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(57,68,106,.12), inset 0 0 0 1px rgba(119,87,255,.11);
    backdrop-filter: blur(8px);
}
.qdl-notification-item.no-image .qdl-notification-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    margin: 0;
    align-self: start;
    justify-self: center;
    border-radius: 15px;
    color: var(--qdl-template-start);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--qdl-template-start) 11%, #fff),
        color-mix(in srgb, var(--qdl-template-end) 10%, #fff)
    );
    box-shadow: 0 9px 19px color-mix(in srgb, var(--qdl-template-start) 12%, rgba(57,68,106,.10));
}
.qdl-notification-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-inline-end: 29px;
}
.qdl-notification-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 20px;
    margin-bottom: 5px;
}
.qdl-notification-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px 4px 7px;
    border-radius: 999px;
    background: rgba(119,87,255,.065);
    color: #7360bd;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    border: 1px solid rgba(119,87,255,.08);
}
.qdl-source-icon { width: 12px; height: 12px; display:grid; place-items:center; flex:0 0 12px; }
.qdl-source-icon svg { width: 12px; height: 12px; }
.qdl-source-woocommerce { color: #6f5ab8; background: rgba(119,87,255,.07); border-color: rgba(119,87,255,.1); }
.qdl-source-admin { color: #9a5f19; background: rgba(255,183,77,.10); border-color: rgba(255,183,77,.16); }
.qdl-source-wordpress { color: #42758a; background: rgba(39,215,232,.08); border-color: rgba(39,215,232,.14); }
.qdl-source-campaign, .qdl-source-questdl { color: #b04a78; background: rgba(255,92,168,.08); border-color: rgba(255,92,168,.14); }
.qdl-source-system { color: #5d6b85; background: rgba(115,128,154,.09); border-color: rgba(115,128,154,.13); }
.qdl-source-generic { color: #6d7590; background: rgba(112,122,148,.08); border-color: rgba(112,122,148,.12); }
.qdl-notification-unread-pill {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #b34572;
    background: rgba(255,92,168,.075);
    border: 1px solid rgba(255,92,168,.13);
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}
.qdl-notification-title-row strong {
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--qdl-ink);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 900;
    letter-spacing: -.01em;
}
.qdl-notification-content p {
    margin: 5px 0 9px;
    color: #77839a;
    font-size: 11px;
    line-height: 1.82;
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}
.qdl-notification-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
    color: #9aa4b7;
    font-size: 9px;
}
.qdl-notification-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 10px;
    color: #6f50df;
    background: rgba(119,87,255,.075);
    border: 1px solid rgba(119,87,255,.10);
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.qdl-notification-action:hover {
    background: rgba(119,87,255,.11);
    transform: translateY(-1px);
    box-shadow: 0 6px 13px rgba(119,87,255,.10);
}
.qdl-notification-delete {
    position: absolute;
    inset-inline-end: 9px;
    top: 9px;
    z-index: 5;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(80,92,125,.07);
    border-radius: 9px;
    background: rgba(255,255,255,.82);
    color: #a8b1c2;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.qdl-notification-delete:hover {
    background: #fff;
    color: #6a7387;
    transform: scale(1.04);
}

.qdl-notification-item.qdl-layout-hero,
.qdl-notification-item.qdl-layout-image-focus {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 11px;
    padding: 12px 12px 13px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 104px;
    max-height: 154px;
    aspect-ratio: 16 / 6.8;
    border-radius: 17px;
    padding: 5px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb img,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb img {
    padding: 0;
    border-radius: 12px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-icon,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-icon {
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    align-self: end;
    justify-self: end;
    margin: 0 9px 9px 0;
    border-radius: 11px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-content,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-content {
    grid-column: 1;
    grid-row: 2;
    padding-inline-end: 29px;
}
.qdl-notification-item.qdl-layout-hero.no-image .qdl-notification-icon,
.qdl-notification-item.qdl-layout-image-focus.no-image .qdl-notification-icon {
    width: 44px;
    height: 44px;
    margin: 0;
    justify-self: start;
}

.qdl-popover-list .qdl-notification-title-row strong { font-size: 12.5px; }
.qdl-popover-list .qdl-notification-content p { font-size: 10.5px; line-height: 1.72; }
.qdl-popover-list .qdl-notification-action { min-height: 26px; padding: 4px 8px; }
.qdl-popover-list .qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
.qdl-popover-list .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { min-height: 104px; max-height: 132px; }

@media (max-width: 680px) {
    .qdl-notification-title-row strong { font-size: 13px; }
    .qdl-notification-content p { font-size: 10.5px; line-height: 1.75; }
    .qdl-notification-source { font-size: 8.5px; }
    .qdl-notification-action { min-height: 28px; padding-inline: 9px; }
    .qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
    .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { min-height: 108px; max-height: 142px; }
}

@media (max-width: 420px) {
    .qdl-notification-meta { gap:6px; }
    .qdl-notification-item.qdl-layout-hero,
    .qdl-notification-item.qdl-layout-image-focus { gap:9px; }
    .qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
    .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb { min-height: 96px; max-height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item,
    .qdl-notification-action,
    .qdl-notification-delete { transition:none; }
}

@supports not (color: color-mix(in srgb, white 10%, black)) {
    .qdl-notification-thumb { background: #f6f3ff; }
    .qdl-notification-item.no-image .qdl-notification-icon { background: #f3efff; }
}
@keyframes qdlCenterSkeleton { from { transform:translateX(100%); } to { transform:translateX(-100%); } }
.qdl-notification-details { grid-column:1 / -1; margin-top:10px; padding:12px 13px; border-radius:15px; background:linear-gradient(145deg,rgba(130,36,227,.045),rgba(39,215,232,.035)); border:1px solid rgba(130,36,227,.07); }
.qdl-notification-details-message { font-size:12px; line-height:1.9; color:#4f586a; white-space:pre-wrap; }
.qdl-notification-details-grid span { display:flex; flex-direction:column; gap:3px; padding:8px 9px; border-radius:11px; background:rgba(255,255,255,.72); border:1px solid rgba(55,72,110,.05); }
.qdl-notification-details-grid b { font-size:9px; color:#98a1b0; }
.qdl-notification-details-grid em { font-size:10px; font-style:normal; color:#4e576a; font-weight:800; }
.qdl-notification-expand { border:0; background:transparent; color:var(--qdl-purple); padding:0; font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.qdl-notification-expand:hover { text-decoration:underline; }
@media (max-width: 640px) {
    .qdl-notification-details-grid { grid-template-columns:1fr; }
    .qdl-notification-details { padding:11px; }
    .qdl-notification-details-message { font-size:11px; }
    .qdl-notification-expand { font-size:9px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item { animation:none !important; transition:none !important; }
}

/* v3.7 — Guest notification micro-interactions and empty state */
.qdl-guest-notification-trigger.qdl-guest-pulse { animation:qdlGuestPulse .72s cubic-bezier(.2,.8,.2,1); }
@keyframes qdlGuestPulse {
  0% { transform:translateY(0) scale(1); box-shadow:0 10px 22px rgba(130,36,227,.24),0 0 0 0 rgba(39,215,232,0); }
  38% { transform:translateY(-2px) scale(1.035); box-shadow:0 14px 28px rgba(130,36,227,.30),0 0 0 8px rgba(39,215,232,.10); }
  100% { transform:translateY(0) scale(1); box-shadow:0 10px 22px rgba(130,36,227,.24),0 0 0 0 rgba(39,215,232,0); }
}
.qdl-guest-empty { min-height:190px; display:grid; place-items:center; align-content:center; gap:8px; padding:22px 18px; text-align:center; color:var(--qdl-muted); }
.qdl-guest-empty strong { color:var(--qdl-ink); font-size:13px; }
.qdl-guest-empty > span:not(.qdl-guest-empty-orbit) { max-width:250px; font-size:10px; line-height:1.8; }
.qdl-guest-empty-orbit { position:relative; width:68px; height:68px; display:block; margin-bottom:4px; }
.qdl-guest-empty-orbit::before,.qdl-guest-empty-orbit::after { content:""; position:absolute; inset:8px; border:1px solid rgba(130,36,227,.18); border-radius:50%; }
.qdl-guest-empty-orbit::after { inset:17px; border-color:rgba(39,215,232,.18); }
.qdl-guest-empty-orbit i { position:absolute; width:6px; height:6px; border-radius:50%; background:#8224e3; box-shadow:0 0 10px rgba(130,36,227,.45); }
.qdl-guest-empty-orbit i:first-child { top:12px; left:32px; }
.qdl-guest-empty-orbit i:nth-child(2) { right:10px; bottom:17px; background:#27d7e8; box-shadow:0 0 10px rgba(39,215,232,.45); }
.qdl-guest-empty-orbit b { position:absolute; width:15px; height:15px; border-radius:50%; left:26px; top:26px; background:linear-gradient(145deg,#8224e3,#27d7e8); box-shadow:0 0 18px rgba(130,36,227,.24); }
@media (prefers-reduced-motion: reduce) { .qdl-guest-notification-trigger.qdl-guest-pulse { animation:none; } }
.qdl-summary-spark { position:relative; width:38px; height:38px; flex:0 0 38px; border-radius:13px; background:linear-gradient(135deg,rgba(130,36,227,.12),rgba(39,215,232,.12)); }
.qdl-summary-spark::before,.qdl-summary-spark::after { content:""; position:absolute; border-radius:50%; }
.qdl-summary-spark::before { inset:9px; border:1px solid rgba(130,36,227,.35); }
.qdl-summary-spark::after { width:6px; height:6px; top:8px; inset-inline-end:7px; background:#ff5ca8; box-shadow:0 0 10px rgba(255,92,168,.48); }
.qdl-notification-expand { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:3px 8px !important; border-radius:8px !important; background:rgba(130,36,227,.05) !important; }
@media (prefers-reduced-motion: reduce) { .qdl-summary-spark::after { transition:none !important; animation:none !important; } }

/* v4.0 Card menu + responsive polish */
.qdl-notification-more-wrap { position:absolute; inset-inline-end:10px; top:10px; z-index:7; }
.qdl-notification-more { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(80,92,125,.07); border-radius:9px; background:rgba(255,255,255,.86); color:#8993a7; cursor:pointer; font-size:13px; line-height:1; letter-spacing:1px; transition:background .18s ease,color .18s ease,transform .18s ease; }
.qdl-notification-more:hover,.qdl-notification-more[aria-expanded="true"] { background:#fff; color:#6b7489; transform:scale(1.03); }
.qdl-notification-menu { position:absolute; inset-inline-end:0; top:35px; width:180px; padding:5px; border:1px solid rgba(55,72,110,.09); border-radius:12px; background:rgba(255,255,255,.98); box-shadow:0 16px 34px rgba(54,61,102,.14); }
.qdl-notification-menu button { display:flex; width:100%; align-items:center; justify-content:flex-start; min-height:34px; padding:0 9px; border:0; border-radius:9px; background:transparent; color:#68738a; font:inherit; font-size:10px; font-weight:800; cursor:pointer; text-align:start; }
.qdl-notification-menu button:hover { background:rgba(130,36,227,.06); color:#5e49c4; }
.qdl-notification-menu [data-qdl-menu-delete] { color:#b05d71; }
.qdl-notification-menu [data-qdl-menu-delete]:hover { background:rgba(255,92,168,.06); color:#a24763; }
@media (max-width:680px) {
 .qdl-notification-menu { position:fixed; inset-inline-end:14px; top:auto; inset-block-end:14px; width:min(220px,calc(100vw - 28px)); z-index:100020; }
}
@media (prefers-reduced-motion:reduce) { .qdl-notification-more { transition:none; } }

/* v4.0 large-list rendering budget: browser-native viewport skipping without changing pagination */
.qdl-summary-spark { width:28px; height:28px; flex:0 0 28px; border-radius:10px; background:radial-gradient(circle at 35% 35%, #fff 0 6%, transparent 7%), linear-gradient(135deg, rgba(130,36,227,.18), rgba(39,215,232,.12)); box-shadow:inset 0 0 0 1px rgba(119,87,255,.08); }

/* v4.2 Phase B — Notification Card 2.0 shared card system */
.qdl-notification-item {
    grid-template-columns: 60px minmax(0,1fr);
    min-height: 128px;
    padding: 15px 16px;
    border-radius: 20px;
    border-color: rgba(55,72,110,.075);
    box-shadow: 0 10px 26px rgba(57,68,106,.052);
}
.qdl-notification-item::after {
    content:"";
    position:absolute;
    inset-inline-start:0;
    inset-block:10px;
    width:3px;
    border-radius:0 999px 999px 0;
    background:linear-gradient(180deg,var(--qdl-template-start),var(--qdl-template-end));
    opacity:0;
    transform:scaleY(.72);
    transform-origin:center;
    transition:opacity .2s ease, transform .2s ease;
}
.qdl-notification-item.is-unread::after {
    opacity:.95;
    transform:scaleY(1);
}
.qdl-notification-item:hover {
    transform:translateY(-3px);
    box-shadow:0 17px 34px rgba(57,68,106,.09);
    border-color:color-mix(in srgb,var(--qdl-template-start) 14%,#fff);
}
.qdl-notification-item:active { transform:translateY(-1px) scale(.998); }
.qdl-notification-item:focus-visible {
    outline:3px solid color-mix(in srgb,var(--qdl-template-start) 20%,transparent);
    outline-offset:2px;
}
.qdl-notification-topline {
    min-height:24px;
    margin-bottom:6px;
    gap:6px;
}
.qdl-notification-source {
    min-height:24px;
    padding:4px 9px 4px 8px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.qdl-notification-source .qdl-source-icon { opacity:.95; }
.qdl-notification-unread-pill,
.qdl-notification-read-pill,
.qdl-notification-priority {
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:22px;
    padding:3px 7px;
    border-radius:999px;
    white-space:nowrap;
    font-size:8px;
    font-weight:950;
    letter-spacing:.005em;
}
.qdl-notification-unread-pill {
    color:#9f3d69;
    background:rgba(255,92,168,.07);
    border:1px solid rgba(255,92,168,.13);
}
.qdl-notification-unread-pill i,
.qdl-notification-read-pill i,
.qdl-notification-priority i {
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:currentColor;
}
.qdl-notification-unread-pill i { box-shadow:0 0 0 3px rgba(255,92,168,.08); }
.qdl-notification-read-pill {
    color:#8791a4;
    background:#f7f8fb;
    border:1px solid rgba(87,99,130,.08);
}
.qdl-notification-priority-important {
    color:#a0641f;
    background:rgba(255,183,77,.10);
    border:1px solid rgba(255,183,77,.18);
}
.qdl-notification-priority-high {
    color:#7853bc;
    background:rgba(130,36,227,.075);
    border:1px solid rgba(130,36,227,.13);
}
.qdl-notification-priority-critical {
    color:#b04472;
    background:rgba(255,92,168,.08);
    border:1px solid rgba(255,92,168,.15);
}
.qdl-notification-title-row strong {
    font-size:15px;
    line-height:1.6;
    letter-spacing:-.012em;
}
.qdl-notification-content p {
    margin-top:5px;
    margin-bottom:10px;
    color:#758199;
    font-size:11px;
    line-height:1.8;
}
.qdl-notification-meta {
    gap:7px;
    min-height:30px;
}
.qdl-notification-time {
    color:#9aa4b6;
    font-size:9px;
}
.qdl-notification-action {
    min-height:31px;
    padding:5px 11px;
    border-radius:10px;
    color:#6448cf;
    background:linear-gradient(135deg,rgba(119,87,255,.075),rgba(54,216,232,.035));
    border:1px solid rgba(119,87,255,.10);
}
.qdl-notification-more-wrap { inset-inline-end:11px; top:11px; }
.qdl-notification-more {
    width:31px;
    height:31px;
    border-radius:10px;
    background:rgba(255,255,255,.92);
}
.qdl-notification-menu {
    width:190px;
    padding:6px;
    border-radius:14px;
}
.qdl-notification-menu button {
    min-height:36px;
    border-radius:10px;
}
.qdl-notification-details {
    margin-top:11px;
    padding:13px 14px;
    border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.qdl-notification-item.qdl-layout-compact {
    min-height:96px;
    padding:11px 12px;
}
.qdl-notification-item.qdl-layout-compact .qdl-notification-topline { min-height:21px; }
.qdl-notification-item.qdl-layout-hero,
.qdl-notification-item.qdl-layout-image-focus {
    border-radius:22px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-title-row strong,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-title-row strong { font-size:16px; }
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb {
    border-radius:17px;
    padding:6px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--qdl-template-start) 8%,#fff),color-mix(in srgb,var(--qdl-template-end) 7%,#fff));
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb img,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb img {
    border-radius:12px;
}
@media (max-width:760px) {
    .qdl-notification-item { grid-template-columns:56px minmax(0,1fr); min-height:118px; padding:14px; border-radius:18px; }
    .qdl-notification-item.no-image .qdl-notification-icon { width:44px; height:44px; border-radius:14px; }
    .qdl-notification-thumb { width:56px; height:56px; min-width:56px; border-radius:15px; }
    .qdl-notification-title-row strong { font-size:13.5px; }
    .qdl-notification-content p { font-size:10.5px; line-height:1.72; }
    .qdl-notification-unread-pill,
    .qdl-notification-read-pill,
    .qdl-notification-priority { font-size:7.5px; padding-inline:6px; }
}
@media (max-width:520px) {
    .qdl-notification-topline { flex-wrap:wrap; }
    .qdl-notification-priority { order:3; }
    .qdl-notification-topline-spacer { display:none; }
    .qdl-notification-unread-pill,
    .qdl-notification-read-pill { margin-inline-start:auto; }
    .qdl-notification-meta { flex-wrap:wrap; }
    .qdl-notification-action { margin-inline-start:auto; }
}
@media (prefers-reduced-motion:reduce) {
    .qdl-notification-item,
    .qdl-notification-item::after {
        transition: none !important;
        animation: none !important;
    }
}

/* v4.3 Phase C — Adaptive Media System */
.qdl-notification-thumb,
.qdl-toast-thumb {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.qdl-notification-thumb.qdl-media-landscape,
.qdl-notification-thumb.qdl-media-square,
.qdl-notification-thumb.qdl-media-portrait {
    display:flex;
    align-items:center;
    justify-content:center;
}
.qdl-notification-thumb img,
.qdl-toast-thumb img {
    max-width:100%;
    max-height:100%;
}
.qdl-notification-thumb.is-broken,
.qdl-toast-thumb.is-broken {
    background:linear-gradient(135deg,rgba(119,87,255,.08),rgba(54,216,232,.06));
}
.qdl-notification-thumb.is-broken::before,
.qdl-toast-thumb.is-broken::before {
    content:"";
    width:32px;
    height:32px;
    border-radius:10px;
    border:1px dashed rgba(119,87,255,.25);
    background:rgba(255,255,255,.72);
    box-shadow:0 5px 14px rgba(57,68,106,.07);
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb.qdl-media-landscape,
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb.qdl-media-square,
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb.qdl-media-portrait,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb.qdl-media-landscape,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb.qdl-media-square,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb.qdl-media-portrait {
    aspect-ratio:16 / 7;
    min-height:150px;
    max-height:250px;
    height:auto;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb img,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb img {
    object-fit:contain;
    width:100%;
    height:100%;
}
@media (max-width:760px) {
    .qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
    .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb {
        min-height:108px;
        max-height:170px;
    }
}
@media (max-width:520px) {
    .qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
    .qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb {
        min-height:96px;
        max-height:140px;
    }
}

/* v4.4 Phase D — Interaction / Detail Drawer 2.0 */

/* v4.6 — navigation and smart filtering */

/* v4.7.0 — Phase F loading / empty / error states */

/* v4.8.0 — Phase G: Meta Quest Visual Polish / shared gaming surface system */
:root {
    --qdl-purple-deep: #6f34ef;
    --qdl-purple-soft: rgba(130,36,227,.10);
    --qdl-cyan-soft: rgba(39,215,232,.10);
    --qdl-pink-soft: rgba(255,92,168,.08);
    --qdl-surface-solid: rgba(255,255,255,.965);
    --qdl-surface-soft: rgba(248,250,255,.92);
    --qdl-surface-line: rgba(73,86,126,.085);
    --qdl-focus-ring: rgba(130,36,227,.22);
    --qdl-ease-premium: cubic-bezier(.2,.78,.2,1);
}

/* Shared surface language: Center, Popover, Toast and Drawer */
.qdl-notification-popover,
.qdl-toast {
    --qdl-surface-base: var(--qdl-surface-solid);
    --qdl-surface-border: var(--qdl-surface-line);
    --qdl-surface-shadow: 0 22px 58px rgba(56,65,104,.13);
}

/* Stats become soft gaming tiles rather than generic metric boxes. */

/* Search/filter surface and states */
.qdl-action-btn,
.qdl-settings-link {
    -webkit-tap-highlight-color: transparent;
}
.qdl-settings-link:focus-visible,
.qdl-action-btn:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 2px;
}

/* Shared Notification Card visual polish. */
.qdl-notification-item {
    --qdl-priority-color: var(--qdl-purple);
    isolation: isolate;
    border-color: rgba(73,86,126,.082);
    transition: transform .2s var(--qdl-ease-premium), box-shadow .2s var(--qdl-ease-premium), border-color .18s ease, background .18s ease;
}
.qdl-notification-item::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--qdl-priority-color) 10%, transparent), transparent 34%),
        linear-gradient(115deg, rgba(255,255,255,.44), transparent 38%);
}
.qdl-notification-item > * {
    position: relative;
    z-index: 1;
}
.qdl-notification-item.is-unread {
    border-color: color-mix(in srgb, var(--qdl-priority-color) 13%, rgba(73,86,126,.08));
    background: linear-gradient(145deg, rgba(255,255,255,.98), color-mix(in srgb, var(--qdl-priority-color) 2.8%, #fff));
    box-shadow: 0 13px 30px color-mix(in srgb, var(--qdl-priority-color) 7%, rgba(61,70,110,.055)), 0 1px 0 rgba(255,255,255,.9) inset;
}
.qdl-notification-item.is-unread::before { opacity: .95; }
.qdl-notification-item.priority-important { --qdl-priority-color: #e39a2a; }
.qdl-notification-item.priority-high { --qdl-priority-color: #8056dc; }
.qdl-notification-item.priority-critical { --qdl-priority-color: #d65380; }
@media (hover:hover) {
    .qdl-notification-item:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--qdl-priority-color) 16%, rgba(73,86,126,.08));
        box-shadow: 0 18px 38px color-mix(in srgb, var(--qdl-priority-color) 6%, rgba(61,70,110,.075)), 0 1px 0 rgba(255,255,255,.92) inset;
    }
}
.qdl-notification-item:active {
    transform: translateY(-1px) scale(.997);
}
.qdl-notification-item:focus-within {
    border-color: color-mix(in srgb, var(--qdl-priority-color) 16%, rgba(73,86,126,.08));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--qdl-priority-color) 5%, rgba(61,70,110,.06)), 0 0 0 3px color-mix(in srgb, var(--qdl-priority-color) 10%, transparent);
}
.qdl-notification-accent {
    width: 4px;
    background: linear-gradient(180deg, var(--qdl-priority-color), color-mix(in srgb, var(--qdl-priority-color) 48%, var(--qdl-cyan)));
    box-shadow: 0 0 13px color-mix(in srgb, var(--qdl-priority-color) 18%, transparent);
}
.qdl-notification-item.is-unread .qdl-notification-accent { opacity: 1; }
.qdl-notification-icon {
    border: 1px solid color-mix(in srgb, var(--qdl-template-start) 11%, rgba(73,86,126,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px color-mix(in srgb, var(--qdl-template-start) 9%, transparent);
    transition: transform .2s var(--qdl-ease-premium), box-shadow .2s ease;
}
@media (hover:hover) {
    .qdl-notification-item:hover .qdl-notification-icon {
        transform: translateY(-1px) scale(1.015);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 22px color-mix(in srgb, var(--qdl-template-start) 12%, transparent);
    }
}
.qdl-notification-source {
    border: 1px solid color-mix(in srgb, var(--qdl-template-start) 12%, rgba(73,86,126,.05));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--qdl-template-start) 5%, transparent), inset 0 1px 0 rgba(255,255,255,.72);
}
.qdl-notification-content p {
    max-width: 78ch;
}
.qdl-notification-action {
    border-color: color-mix(in srgb, var(--qdl-template-start) 12%, rgba(73,86,126,.04));
    box-shadow: 0 6px 15px color-mix(in srgb, var(--qdl-template-start) 5%, transparent), inset 0 1px 0 rgba(255,255,255,.75);
    transition: transform .18s var(--qdl-ease-premium), box-shadow .18s ease, background .18s ease;
}
.qdl-notification-action:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 9px 19px color-mix(in srgb, var(--qdl-template-start) 8%, transparent), inset 0 1px 0 rgba(255,255,255,.8);
}
.qdl-notification-more:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 2px;
}
@media (hover:hover) {
    .qdl-notification-more:hover {
        transform: translateY(-1px) scale(1.025);
        box-shadow: 0 9px 18px rgba(61,70,110,.07), 0 1px 0 rgba(255,255,255,.86) inset;
    }
}

/* Priority is clear through accent, not flashing or motion-heavy effects. */
.qdl-notification-item.priority-critical .qdl-notification-icon,
.qdl-toast.priority-critical .qdl-toast-icon {
    animation: none !important;
}
.qdl-notification-item.priority-critical .qdl-notification-priority {
    color: #b5446f;
    background: rgba(213,83,128,.08);
    border-color: rgba(213,83,128,.15);
}
.qdl-notification-item.priority-high .qdl-notification-priority {
    color: #754bbd;
    background: rgba(128,86,220,.075);
    border-color: rgba(128,86,220,.14);
}

/* Popover and Drawer join the same premium surface family. */
.qdl-notification-popover {
    background:
        radial-gradient(circle at 94% 0%, rgba(39,215,232,.09), transparent 24%),
        linear-gradient(145deg, rgba(255,255,255,.985), rgba(249,248,255,.965));
    border-color: rgba(73,86,126,.09);
    box-shadow: 0 28px 78px rgba(41,49,79,.20), 0 1px 0 rgba(255,255,255,.92) inset;
}
.qdl-popover-head {
    background: linear-gradient(135deg, rgba(130,36,227,.085), rgba(39,215,232,.055));
    border-bottom: 1px solid rgba(73,86,126,.055);
}
.qdl-popover-title-icon {
    box-shadow: 0 10px 21px rgba(95,78,154,.10), 0 1px 0 rgba(255,255,255,.82) inset;
}
.qdl-popover-close:focus-visible,
.qdl-popover-read-all:focus-visible,
.qdl-popover-footer a:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 2px;
}
.qdl-popover-list .qdl-notification-item {
    box-shadow: 0 7px 18px rgba(61,70,110,.035);
}
.qdl-popover-footer {
    background: linear-gradient(145deg, rgba(250,251,255,.88), rgba(247,245,255,.82));
    border-top-color: rgba(73,86,126,.06);
}

/* Toast uses the same card language, with a restrained aurora edge. */
.qdl-toast {
    border-color: color-mix(in srgb, var(--qdl-template-start) 15%, rgba(73,86,126,.08));
    box-shadow: 0 21px 55px rgba(44,54,91,.17), 0 1px 0 rgba(255,255,255,.9) inset;
}
.qdl-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--qdl-template-start) 8%, transparent), transparent 38%);
    opacity: .72;
}
.qdl-toast > * { position: relative; z-index: 1; }
.qdl-toast-icon {
    box-shadow: 0 12px 25px color-mix(in srgb, var(--qdl-template-start) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform .18s var(--qdl-ease-premium), box-shadow .18s ease;
}
@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-source {
    border: 1px solid color-mix(in srgb, var(--qdl-template-start) 12%, rgba(73,86,126,.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.qdl-toast-action {
    min-height: 28px;
    padding-inline: 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--qdl-template-start) 5%, white);
    border: 1px solid color-mix(in srgb, var(--qdl-template-start) 10%, rgba(73,86,126,.04));
}
.qdl-toast > button:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 2px;
}

/* Realtime / state accents stay visually connected to the same palette. */

/* Gaming accents remain quiet on dense lists and narrow screens. */

@media (max-width: 680px) {
    .qdl-popover-list .qdl-notification-item {
        box-shadow: 0 9px 21px rgba(61,70,110,.052);
    }
    .qdl-toast {
        box-shadow: 0 17px 42px rgba(44,54,91,.15), 0 1px 0 rgba(255,255,255,.9) inset;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item,
    .qdl-notification-icon,
    .qdl-notification-action,
    .qdl-notification-more,
    .qdl-toast-icon {
        transition: none !important;
        transform: none !important;
    }
}

/* v4.9.0 — Phase H: Accessibility final pass */
.qdl-notification-item:focus-visible,
.qdl-avatar-trigger:focus-visible,
.qdl-guest-notification-trigger:focus-visible,
.qdl-guest-auth-link:focus-visible,
.qdl-settings-link:focus-visible,
.qdl-action-btn:focus-visible,
.qdl-notification-expand:focus-visible,
.qdl-notification-action:focus-visible,
.qdl-notification-more:focus-visible,
.qdl-popover-close:focus-visible,
.qdl-popover-read-all:focus-visible,
.qdl-popover-footer a:focus-visible,
.qdl-secondary-btn:focus-visible,
.qdl-primary-btn:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 3px;
}
.qdl-notification-menu [role="menuitem"]:focus-visible {
    outline: 2px solid var(--qdl-focus-ring);
    outline-offset: -2px;
}
.qdl-notification-item:focus-visible {
    scroll-margin-block: 14px;
}
.qdl-notification-details[hidden],
.qdl-notification-menu[hidden],
.qdl-channel-screen[hidden] {
    display: none !important;
}
.qdl-unread-live {
    pointer-events: none;
}

@media (forced-colors: active) {
    .qdl-popover-title-icon {
        background:Canvas !important;
        border-color:ButtonText !important;
        box-shadow:none !important;
        color:ButtonText !important;
    }
    .qdl-avatar-wrap::before, .qdl-avatar-wrap::after { display:none; }
}

@media (forced-colors: active) {
    .qdl-notification-item:focus-visible,
    .qdl-avatar-trigger:focus-visible,
    .qdl-guest-notification-trigger:focus-visible,
    .qdl-notification-expand:focus-visible,
    .qdl-notification-more:focus-visible,
    .qdl-popover-close:focus-visible,
    .qdl-popover-read-all:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-avatar-halo-one,
    .qdl-avatar-halo-two,
    .qdl-avatar-spark,
    .qdl-notification-item,
    .qdl-notification-popover,
    .qdl-toast {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.qdl-pref-toggle input:focus-visible + .qdl-switch,
.qdl-pref-toggle-inline input:focus-visible + span,
.qdl-quiet-row input:focus-visible {
    outline: 3px solid var(--qdl-focus-ring);
    outline-offset: 3px;
}
.qdl-pref-toggle input:focus-visible + .qdl-switch {
    border-radius: 999px;
}

/* Settings architecture */
.qdl-preferences {
    --qdl-settings-surface:rgba(255,255,255,.96);
    --qdl-settings-soft:#f7f7fd;
    --qdl-settings-border:rgba(55,72,110,.08);
    max-width:1060px;
    margin:28px auto;
    padding:20px;
    color:var(--qdl-ink);
    border:1px solid rgba(71,83,128,.09);
    border-radius:30px;
    background:linear-gradient(145deg,#fbfdff,#f7f4ff);
    box-shadow:var(--qdl-shadow);
    font-family:inherit;
    box-sizing:border-box;
    isolation:isolate;
}
.qdl-preferences *, .qdl-preferences *::before, .qdl-preferences *::after { box-sizing:border-box; }
.qdl-preferences-hero {
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:'back copy';
    align-items:center;
    gap:16px;
    overflow:hidden;
    padding:21px 22px;
    border:1px solid rgba(119,87,255,.08);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(119,87,255,.08),rgba(39,215,232,.045) 55%,rgba(255,92,168,.035));
}
.qdl-preferences-hero-orb { position:absolute; inset:auto 0 0 auto; width:260px; height:160px; pointer-events:none; opacity:.55; }
.qdl-preferences-hero-orb::before,.qdl-preferences-hero-orb::after { content:""; position:absolute; border-radius:50%; filter:blur(1px); }
.qdl-preferences-hero-orb::before { width:170px; height:170px; inset-inline-end:-55px; bottom:-95px; background:radial-gradient(circle,rgba(119,87,255,.17),transparent 68%); }
.qdl-preferences-hero-orb::after { width:130px; height:130px; inset-inline-start:24px; top:22px; background:radial-gradient(circle,rgba(39,215,232,.10),transparent 68%); }
.qdl-preferences-hero-copy { grid-area:copy; position:relative; z-index:1; min-width:0; }
.qdl-preferences-hero-copy h2 { margin:5px 0 4px; color:#293650; font-size:26px; line-height:1.45; font-weight:950; letter-spacing:-.03em; }
.qdl-preferences-hero-copy p { margin:0; color:#78839a; font-size:11px; line-height:1.8; }
.qdl-preferences-back { grid-area:back; position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid rgba(119,87,255,.10); border-radius:12px; color:#6752c8; background:rgba(255,255,255,.72); text-decoration:none; font-size:10px; font-weight:950; box-shadow:0 7px 18px rgba(78,75,123,.055); }
.qdl-preferences-back:hover { color:#563fb2; background:#fff; }
.qdl-preferences-back span:first-child { font-size:14px; }
.qdl-guest-pref-note {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:12px;
    padding:11px 13px;
    border:1px solid rgba(119,87,255,.10);
    border-radius:15px;
    background:rgba(255,255,255,.74);
}
.qdl-pref-note-icon { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; border-radius:8px; color:#6752c8; background:rgba(119,87,255,.08); font-size:10px; font-weight:950; }
.qdl-guest-pref-note div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.qdl-guest-pref-note strong { color:#59647a; font-size:10px; font-weight:950; }
.qdl-guest-pref-note span:not(.qdl-pref-note-icon) { color:#8993a7; font-size:9px; line-height:1.75; }
.qdl-preferences-stack { display:grid; gap:13px; margin-top:13px; }
.qdl-pref-card { padding:17px; border:1px solid var(--qdl-settings-border); border-radius:21px; background:var(--qdl-settings-surface); box-shadow:0 10px 28px rgba(60,69,111,.045); }
.qdl-pref-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:13px; }
.qdl-pref-card-head > div { min-width:0; }
.qdl-pref-section-kicker { display:block; margin-bottom:3px; color:#8c5ed2; font-size:8px; font-weight:950; letter-spacing:.15em; }
.qdl-pref-card h3 { margin:0; color:#43506a; font-size:14px; font-weight:950; }
.qdl-pref-card-head p { max-width:720px; margin:4px 0 0; color:#8b95a7; font-size:10px; line-height:1.75; }
.qdl-channel-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.qdl-pref-toggle { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:11px; min-height:64px; padding:11px 12px; border:1px solid rgba(55,72,110,.065); border-radius:15px; background:linear-gradient(145deg,#fff,#fbfbff); cursor:pointer; }
.qdl-channel-list > .qdl-pref-toggle { height:100%; }
.qdl-pref-toggle > span:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.qdl-pref-toggle strong { color:#4c5871; font-size:10px; font-weight:950; line-height:1.5; }
.qdl-pref-toggle small { color:#929bad; font-size:9px; line-height:1.65; }
.qdl-switch { position:relative; width:40px; height:24px; flex:0 0 40px; overflow:hidden; border-radius:999px; background:#d9dce6; box-shadow:inset 0 0 0 1px rgba(55,72,110,.07); transition:background .18s ease,box-shadow .18s ease; }
.qdl-pref-toggle input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }
.qdl-pref-toggle input:checked + .qdl-switch { background:linear-gradient(135deg,#7757ff,#27d7e8); box-shadow:0 0 0 3px rgba(119,87,255,.08),0 7px 15px rgba(119,87,255,.14); }
.qdl-pref-toggle input:checked + .qdl-switch::after { transform:translateX(-16px); }
.qdl-preferences[dir="rtl"] .qdl-pref-toggle input:checked + .qdl-switch::after { transform:translateX(16px); }
.qdl-switch::after { content:""; position:absolute; top:3px; inset-inline-end:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(49,60,92,.18); transition:transform .18s ease; }
.qdl-preferences .qdl-switch { overflow:hidden; }
.qdl-channel-card { display:grid; gap:7px; padding:11px; border:1px solid rgba(55,72,110,.065); border-radius:15px; background:linear-gradient(145deg,#fff,#fbfbff); }
.qdl-channel-main .qdl-pref-toggle { min-height:58px; border:0; padding:3px 2px; background:transparent; }
.qdl-channel-status { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 9px; border-radius:11px; background:#f8f8fd; }
.qdl-channel-status-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.qdl-channel-status-copy span { color:#99a1b2; font-size:8px; font-weight:850; }
.qdl-channel-status-copy strong { color:#667089; font-size:9px; font-weight:950; }
.qdl-channel-action { min-height:32px; padding:0 10px; border:1px solid rgba(119,87,255,.10); border-radius:9px; background:#fff; color:#6953c4; font:inherit; font-size:9px; font-weight:950; cursor:pointer; white-space:nowrap; }
.qdl-channel-action:hover:not(:disabled) { background:rgba(119,87,255,.06); }
.qdl-channel-action:disabled { opacity:.52; cursor:not-allowed; }
.qdl-pref-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.qdl-pref-type-grid .qdl-pref-toggle { min-height:78px; align-items:start; }
.qdl-pref-type-grid .qdl-switch { margin-top:2px; }
.qdl-quiet-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,1.5fr); align-items:end; gap:9px; margin-top:10px; padding:11px; border:1px solid rgba(55,72,110,.055); border-radius:15px; background:#fafaff; transition:opacity .18s ease; }
.qdl-quiet-options.is-disabled { opacity:.52; }
.qdl-time-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.qdl-time-field span { color:#8a94a8; font-size:9px; font-weight:900; }
.qdl-time-field input { width:100%; min-height:40px; border:1px solid rgba(55,72,110,.09); border-radius:10px; background:#fff; color:#59647a; font:inherit; font-size:10px; padding:0 10px; }
.qdl-pref-toggle-inline { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 9px; border:1px solid rgba(55,72,110,.065); border-radius:10px; background:#fff; color:#667189; font-size:9px; font-weight:900; }
.qdl-pref-toggle-inline input { accent-color:#7757ff; }
.qdl-pref-toggle-inline input:disabled { cursor:not-allowed; }
.qdl-pref-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; padding:10px 3px 1px; }
.qdl-pref-footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.qdl-pref-save-status { display:inline-flex; align-items:center; gap:7px; min-height:32px; color:#8a94a8; font-size:9px; font-weight:850; }
.qdl-pref-save-status[data-state="saving"] { color:#806bd1; }
.qdl-pref-save-status[data-state="saved"] { color:#4d8e7f; }
.qdl-pref-save-status[data-state="error"] { color:#a35f75; }
.qdl-pref-status-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#aab2c1; box-shadow:0 0 0 4px rgba(170,178,193,.10); }
.qdl-pref-save-status[data-state="saving"] .qdl-pref-status-dot { background:#7757ff; box-shadow:0 0 0 4px rgba(119,87,255,.10); }
.qdl-pref-save-status[data-state="saved"] .qdl-pref-status-dot { background:#3f9a7f; box-shadow:0 0 0 4px rgba(63,154,127,.10); }
.qdl-pref-save-status[data-state="error"] .qdl-pref-status-dot { background:#d16d88; box-shadow:0 0 0 4px rgba(209,109,136,.10); }
.qdl-secondary-btn.qdl-reset-btn { min-height:34px; padding-inline:11px; border:1px solid rgba(55,72,110,.075); border-radius:10px; background:#fff; color:#8f6674; font:inherit; font-size:9px; font-weight:900; cursor:pointer; }
.qdl-secondary-btn.qdl-reset-btn:hover { color:#9b4f69; background:#fffafa; border-color:rgba(255,92,168,.14); }
.qdl-reset-confirm { display:inline-flex; align-items:center; gap:7px; padding:5px 7px 5px 10px; border:1px solid rgba(255,92,168,.12); border-radius:10px; background:#fff9fb; color:#8e6371; font-size:9px; font-weight:850; }
.qdl-reset-confirm button { min-height:28px; padding:0 8px; border-radius:8px; border:1px solid transparent; font:inherit; font-size:8px; font-weight:950; cursor:pointer; }
.qdl-reset-cancel { color:#8b93a4; background:#fff; border-color:rgba(55,72,110,.07) !important; }
.qdl-reset-confirm-btn { color:#fff; background:linear-gradient(135deg,#c26686,#d67c92); }
.qdl-reset-confirm-btn:disabled { opacity:.6; cursor:not-allowed; }

.qdl-preferences a:focus-visible,
.qdl-preferences button:focus-visible,
.qdl-preferences input:focus-visible,
.qdl-preferences select:focus-visible {
    outline:3px solid var(--qdl-focus-ring,#7a61e8);
    outline-offset:3px;
}
.qdl-preferences input:focus-visible + .qdl-switch { outline:3px solid var(--qdl-focus-ring,#7a61e8); outline-offset:3px; }
.qdl-preferences [disabled] { cursor:not-allowed; }
.qdl-preferences [disabled] + .qdl-switch { opacity:.55; }

@media (max-width:860px) {
    .qdl-channel-list { grid-template-columns:1fr; }
    .qdl-pref-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .qdl-preferences { margin:12px 8px; padding:11px; border-radius:22px; }
    .qdl-preferences-hero { grid-template-columns:1fr; grid-template-areas:'back' 'copy'; gap:10px; padding:17px; }
    .qdl-preferences-back { justify-self:start; }
    .qdl-preferences-hero-copy h2 { font-size:22px; }
    .qdl-pref-type-grid { grid-template-columns:1fr 1fr; }
    .qdl-quiet-options { grid-template-columns:1fr 1fr; }
    .qdl-pref-toggle-inline { grid-column:1 / -1; }
    .qdl-pref-footer { align-items:flex-start; flex-direction:column; }
    .qdl-pref-footer-actions { width:100%; justify-content:flex-start; }
}
@media (max-width:460px) {
    .qdl-pref-card { padding:14px; border-radius:18px; }
    .qdl-pref-type-grid { grid-template-columns:1fr; }
    .qdl-quiet-options { grid-template-columns:1fr; }
    .qdl-pref-toggle-inline { grid-column:auto; }
    .qdl-reset-confirm { align-items:stretch; flex-wrap:wrap; }
}
@media (forced-colors: active) {
    .qdl-preferences-back:focus-visible,
    .qdl-channel-action:focus-visible,
    .qdl-reset-btn:focus-visible,
    .qdl-reset-confirm button:focus-visible,
    .qdl-pref-toggle-inline input:focus-visible,
    .qdl-time-field input:focus-visible {
        outline:2px solid CanvasText;
        outline-offset:2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-switch,
    .qdl-switch::after,
    .qdl-quiet-options { transition:none !important; animation:none !important; }
}

/* v4.12.0 — Guest Meta Quest trigger + Center navigation polish */
.qdl-guest-notification-trigger {
    width:54px;
    height:54px;
    flex-basis:54px;
    border-radius:18px;
    background:linear-gradient(145deg,#8224e3,#6d43f2);
    box-shadow:0 12px 26px rgba(130,36,227,.24),0 0 0 1px rgba(255,255,255,.14) inset;
}
.qdl-guest-notification-icon {
    width:34px;
    height:34px;
    border-radius:12px;
    background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
    box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 18px rgba(41,17,73,.18);
}
.qdl-meta-quest-icon { width:27px !important; height:auto !important; overflow:visible; filter:drop-shadow(0 4px 9px rgba(39,215,232,.16)); }
.qdl-guest-notification-trigger:hover .qdl-meta-quest-icon,
.qdl-guest-notification-trigger:focus-visible .qdl-meta-quest-icon { transform:translateY(-1px) rotate(-1deg); }
.qdl-guest-icon-glow { inset:-6px; opacity:.78; animation:qdlGuestHaloFloat 4.8s ease-in-out infinite; }
.qdl-guest-notification-trigger .qdl-guest-unread-badge { top:-8px; inset-inline-end:-9px; }
.qdl-guest-auth-link {
    font:inherit;
    font-size:14px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.01em;
    color:inherit;
    padding:9px 5px;
}
.qdl-guest-auth-link:hover,
.qdl-guest-auth-link:focus-visible { color:#6d20be; }
@keyframes qdlGuestHaloFloat { 0%,100% { transform:scale(.98); opacity:.68; } 50% { transform:scale(1.04); opacity:.88; } }
@media (max-width:560px) {
    .qdl-guest-auth-link { font-size:13px; }
    .qdl-guest-notification-trigger { width:50px; height:50px; flex-basis:50px; }
    .qdl-meta-quest-icon { width:25px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-guest-icon-glow { animation:none !important; }
    .qdl-guest-notification-trigger { transition:none !important; transform:none !important; }
}
.qdl-notification-source { font-size: 11px; }

/* v4.19.0 — Stage 6: Typography / Visual / Accessibility Contract */
:root {
    --qdl-muted: #64718a;
    --qdl-text-primary: #26334d;
    --qdl-text-secondary: #5f6a80;
    --qdl-text-tertiary: #667085;
    --qdl-text-subtle: #6f7b91;
    --qdl-text-accent: #5e49c4;
    --qdl-text-positive: #23725e;
    --qdl-text-danger: #a35f75;
    --qdl-focus-solid: #5e49c4;
    --qdl-focus-ring: rgba(94,73,196,.28);
}

/* Meaningful frontend copy must remain readable; badges may stay compact. */
.qdl-notification-shell,
.qdl-preferences {
    color: var(--qdl-text-primary);
}
.qdl-preferences-hero-copy p {
    color: var(--qdl-text-secondary);
    font-size: 14px;
    line-height: 1.85;
}

.qdl-popover-list .qdl-notification-title-row strong {
    color: var(--qdl-text-primary);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 800;
}
.qdl-popover-list .qdl-notification-content p {
    color: var(--qdl-text-secondary);
    font-size: 13px;
    line-height: 1.85;
}
.qdl-popover-list .qdl-notification-meta {
    color: var(--qdl-text-tertiary);
    font-size: 11px;
    line-height: 1.65;
}
.qdl-popover-list .qdl-notification-action {
    color: var(--qdl-text-accent);
    font-size: 12px;
    font-weight: 800;
}
.qdl-notification-delete,
.qdl-popover-close,
.qdl-notification-more { color: var(--qdl-text-tertiary); }
.qdl-notification-delete:hover,
.qdl-notification-more:hover { color: #4f5b72; }
.qdl-empty { color: var(--qdl-text-secondary); font-size: 13px; line-height: 1.8; }

.qdl-toast-source,
.qdl-toast-priority-label { font-size: 10px; font-weight: 800; }
.qdl-toast-body strong { font-size: 14px; font-weight: 800; line-height: 1.55; }
.qdl-toast-body p { color: var(--qdl-text-secondary); font-size: 12px; line-height: 1.75; }
.qdl-toast-action,
.qdl-toast-summary-action { font-size: 12px; font-weight: 800; }
.qdl-popover-head span { color: var(--qdl-text-secondary); font-size: 12px; line-height: 1.65; }
.qdl-popover-read-all,
.qdl-read-all,
.qdl-popover-footer a,
.qdl-settings-link { font-size: 12px; font-weight: 800; }
.qdl-notification-menu button { color: var(--qdl-text-secondary); font-size: 12px; font-weight: 700; }
.qdl-notification-menu button:hover { color: var(--qdl-text-accent); }

.qdl-notification-details-message { color: var(--qdl-text-secondary); font-size: 13px; line-height: 1.95; }
.qdl-notification-expand { font-size: 11px; font-weight: 800; }

/* Settings: preserve readable body copy at every breakpoint. */
.qdl-preferences-hero-copy h2 { color: var(--qdl-text-primary); font-size: 28px; font-weight: 800; letter-spacing: 0; }
.qdl-preferences-hero-copy p { color: var(--qdl-text-secondary); }
.qdl-preferences-back { color: #5e49c4; font-size: 12px; font-weight: 800; }
.qdl-preferences-back:hover { color: #4f3aa9; }
.qdl-guest-pref-note { color: var(--qdl-text-primary); }
.qdl-guest-pref-note span:not(.qdl-pref-note-icon) { color: var(--qdl-text-secondary); font-size: 12px; line-height: 1.8; }
.qdl-guest-pref-note strong { font-size: 13px; font-weight: 800; }
.qdl-pref-note-icon { font-size: 11px; }
.qdl-pref-section-kicker { color: #6f34ef; font-size: 10px; letter-spacing: .12em; }
.qdl-pref-card h3 { color: #405069; font-size: 16px; font-weight: 800; }
.qdl-pref-card-head p { color: var(--qdl-text-secondary); font-size: 12px; line-height: 1.8; }
.qdl-pref-toggle strong { color: #4c5871; font-size: 13px; font-weight: 800; line-height: 1.6; }
.qdl-pref-toggle small { color: var(--qdl-text-secondary); font-size: 12px; line-height: 1.7; }
.qdl-channel-status-copy span { color: var(--qdl-text-tertiary); font-size: 11px; font-weight: 700; }
.qdl-channel-status-copy strong { color: var(--qdl-text-secondary); font-size: 12px; font-weight: 800; }
.qdl-channel-action { color: #5e49c4; font-size: 12px; font-weight: 800; }
.qdl-time-field span { color: var(--qdl-text-secondary); font-size: 12px; font-weight: 700; }
.qdl-time-field input { color: var(--qdl-text-secondary); font-size: 15px; font-weight: 600; }
.qdl-pref-toggle-inline { color: var(--qdl-text-secondary); font-size: 12px; font-weight: 700; line-height: 1.65; }
.qdl-pref-save-status { color: var(--qdl-text-secondary); font-size: 12px; font-weight: 700; }
.qdl-pref-save-status[data-state="saving"] { color: #6b55b8; }
.qdl-pref-save-status[data-state="saved"] { color: var(--qdl-text-positive); }
.qdl-pref-save-status[data-state="error"] { color: var(--qdl-text-danger); }
.qdl-secondary-btn.qdl-reset-btn { color: #7d6374; font-size: 12px; font-weight: 700; }
.qdl-reset-confirm { color: var(--qdl-text-danger); font-size: 12px; font-weight: 700; }
.qdl-reset-confirm button { font-size: 12px; font-weight: 800; }

/* Focus must remain visible without relying on a translucent accent alone. */
.qdl-notification-item:focus-visible,
.qdl-avatar-trigger:focus-visible,
.qdl-guest-notification-trigger:focus-visible,
.qdl-guest-auth-link:focus-visible,
.qdl-settings-link:focus-visible,
.qdl-action-btn:focus-visible,
.qdl-notification-expand:focus-visible,
.qdl-notification-action:focus-visible,
.qdl-notification-more:focus-visible,
.qdl-popover-close:focus-visible,
.qdl-popover-read-all:focus-visible,
.qdl-popover-footer a:focus-visible,
.qdl-secondary-btn:focus-visible,
.qdl-primary-btn:focus-visible,
.qdl-preferences a:focus-visible,
.qdl-preferences button:focus-visible,
.qdl-preferences input:focus-visible,
.qdl-preferences select:focus-visible {
    outline: 3px solid var(--qdl-focus-solid);
    outline-offset: 3px;
}

@media (max-width: 680px) {
    .qdl-popover-list .qdl-notification-title-row strong { font-size: 14px; }
    .qdl-popover-list .qdl-notification-content p { font-size: 12px; }
    .qdl-popover-list .qdl-notification-meta { font-size: 11px; }
    .qdl-preferences-hero-copy h2 { font-size: 24px; }
    .qdl-preferences-hero-copy p { font-size: 13px; }
    .qdl-pref-card h3 { font-size: 16px; }
    .qdl-pref-card-head p { font-size: 12px; }
    .qdl-pref-toggle strong { font-size: 13px; }
    .qdl-pref-toggle small { font-size: 12px; }
    .qdl-time-field input { font-size: 16px; }
}

@media (max-width: 430px) {
    .qdl-popover-list .qdl-notification-title-row strong { font-size: 14px; }
    .qdl-popover-list .qdl-notification-content p { font-size: 12px; }
}

@media (forced-colors: active) {
    .qdl-preferences,
    .qdl-notification-popover,
    .qdl-toast,
    .qdl-pref-card,
    .qdl-channel-card,
    .qdl-pref-toggle,
    .qdl-quiet-options,
    .qdl-pref-toggle-inline,
    .qdl-time-field input {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    .qdl-notification-title-row strong,
    .qdl-notification-content p,
    .qdl-notification-meta,
    .qdl-preferences-hero-copy h2,
    .qdl-preferences-hero-copy p,
    .qdl-pref-card h3,
    .qdl-pref-card-head p,
    .qdl-pref-toggle strong,
    .qdl-pref-toggle small,
    .qdl-channel-status-copy span,
    .qdl-channel-status-copy strong,
    .qdl-time-field span,
    .qdl-pref-toggle-inline,
    .qdl-pref-save-status,
    .qdl-reset-confirm {
        color: CanvasText !important;
    }
    .qdl-channel-action,
    .qdl-reset-btn,
    .qdl-reset-confirm button,
    .qdl-notification-action,
    .qdl-notification-more,
    .qdl-notification-delete,
    .qdl-popover-read-all,
    .qdl-popover-footer a,
    .qdl-settings-link {
        color: ButtonText !important;
        background: ButtonFace !important;
        border-color: ButtonText !important;
    }
    .qdl-notification-item.is-unread { background: Canvas !important; border-color: CanvasText !important; }
    .qdl-notification-item.is-unread::after { background: Highlight !important; opacity:1; }
    .qdl-unread-badge { background: Highlight !important; color: HighlightText !important; border-color: Canvas !important; box-shadow:none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item,
    .qdl-toast,
    .qdl-pref-toggle,
    .qdl-channel-action,
    .qdl-reset-confirm {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Stage 6 follow-up: error/connectivity copy and compact metadata remain readable. */
.qdl-notification-source { font-size: 10px; font-weight: 800; }
.qdl-notification-unread-pill { font-size: 10px; font-weight: 800; }
.qdl-guest-login-copy small { font-size: 11px; }
.qdl-guest-empty > span:not(.qdl-guest-empty-orbit) { font-size: 12px; line-height: 1.8; color: var(--qdl-text-secondary); }

@media (forced-colors: active) {
    .qdl-summary-spark { background: Canvas !important; box-shadow: none !important; }
}

/* v4.26.0 — Smart Filter Chips / Adaptive Notification Action Bar / Sticky Navigation */
.qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link:hover {
    color:#fff;
    background:#8224e3;
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 11px 22px rgba(130,36,227,.24), 0 0 0 1px rgba(255,255,255,.17) inset;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link:focus-visible {
    color:#fff;
    background:#8224e3;
    text-decoration:none;
    outline:3px solid rgba(130,36,227,.28);
    outline-offset:3px;
    box-shadow:0 8px 18px rgba(130,36,227,.20), 0 0 0 1px rgba(255,255,255,.14) inset;
}
@media (max-width:560px) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link {
        min-height:44px;
        padding:9px 11px;
        font-size:13px;
        border-radius:12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link {
        transition:none !important;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link:hover {
        transform:none;
    }
}
@media (forced-colors: active) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link {
        color:ButtonText !important;
        background:ButtonFace !important;
        border-color:ButtonText !important;
        box-shadow:none !important;
        text-decoration:underline;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-auth-link:focus-visible {
        outline:2px solid Highlight;
        outline-offset:3px;
    }
}

/* v4.29.0 — Guest header visual pairing, micro-interaction and narrow-screen hardening */
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
    --qdl-guest-cta-purple:#8224e3;
    --qdl-guest-cta-cyan:#27d7e8;
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:5px;
    max-inline-size:100%;
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(14px) saturate(125%);
    backdrop-filter:blur(14px) saturate(125%);
    box-shadow:0 10px 24px rgba(60,69,111,.06),0 0 0 1px rgba(255,255,255,.12) inset;
    isolation:isolate;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429::before {
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:22px;
    pointer-events:none;
    z-index:0;
    background:linear-gradient(90deg,rgba(130,36,227,.10),rgba(39,215,232,.10),rgba(130,36,227,.06));
    filter:blur(7px);
    opacity:.76;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429:hover,
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429:focus-within {
    border-color:rgba(255,255,255,.30);
    background:rgba(255,255,255,.09);
    box-shadow:0 13px 28px rgba(60,69,111,.08),0 0 0 1px rgba(255,255,255,.16) inset,0 0 0 3px rgba(39,215,232,.055);
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger {
    flex:0 0 50px;
    border-color:rgba(130,36,227,.22);
    box-shadow:0 10px 22px rgba(130,36,227,.23),0 0 0 1px rgba(255,255,255,.15) inset,0 0 0 1px rgba(39,215,232,.08);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger:hover {
    transform:translateY(-2px);
    filter:saturate(1.06);
    box-shadow:0 13px 27px rgba(130,36,227,.28),0 0 0 1px rgba(255,255,255,.16) inset,0 0 0 1px rgba(39,215,232,.10);
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 1 auto;
    min-inline-size:max-content;
    min-block-size:44px;
    max-inline-size:100%;
    overflow:hidden;
    box-sizing:border-box;
    padding:10px 14px;
    border:1px solid rgba(130,36,227,.22);
    border-radius:13px;
    font:inherit;
    font-size:14px;
    font-weight:800;
    line-height:1.4;
    letter-spacing:-.01em;
    color:#fff !important;
    background:var(--qdl-guest-cta-purple) !important;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(130,36,227,.19),0 0 0 1px rgba(255,255,255,.14) inset;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link::before {
    content:"";
    position:absolute;
    inset:0 auto 0 -45%;
    width:34%;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.05) 34%,rgba(255,255,255,.24) 50%,rgba(255,255,255,.05) 66%,transparent 100%);
    transform:skewX(-18deg);
    animation:qdlGuestCtaSheen 5.8s ease-in-out infinite;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link:hover,
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link:focus-visible {
    color:#fff !important;
    background:var(--qdl-guest-cta-purple) !important;
    text-decoration:none;
    transform:translateY(-1px);
    filter:saturate(1.04);
    box-shadow:0 11px 23px rgba(130,36,227,.24),0 0 0 1px rgba(255,255,255,.17) inset;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link:focus-visible {
    outline:3px solid rgba(39,215,232,.34);
    outline-offset:3px;
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger:focus-visible {
    outline-color:rgba(39,215,232,.44);
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-icon-glow {
    opacity:.82;
}
@keyframes qdlGuestCtaSheen {
    0%,62%,100% { transform:translateX(0) skewX(-18deg); opacity:0; }
    69% { opacity:.35; }
    76% { transform:translateX(420%) skewX(-18deg); opacity:.8; }
    82% { opacity:0; }
}
@media (max-width:560px) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
        gap:7px;
        padding:4px;
        border-radius:17px;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger {
        flex-basis:48px;
        width:48px;
        height:48px;
        border-radius:15px;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
        min-block-size:44px;
        padding:9px 11px;
        font-size:13px;
        border-radius:12px;
    }
}
@media (max-width:390px) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
        gap:6px;
        padding:3px;
        max-inline-size:calc(100vw - 24px);
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger {
        flex-basis:46px;
        width:46px;
        height:46px;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
        min-block-size:44px;
        padding-inline:10px;
        font-size:13px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429::before,
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link::before {
        animation:none !important;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger,
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }
}
@media (forced-colors: active) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
        border-color:ButtonText !important;
        background:Canvas !important;
        box-shadow:none !important;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429::before,
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link::before {
        display:none;
    }
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
        color:ButtonText !important;
        background:ButtonFace !important;
        border-color:ButtonText !important;
        box-shadow:none !important;
        text-decoration:underline;
    }
}

/* v4.36.0 — Header action navigation and guest glass shell */
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
    /* White overlay intentionally stays <= 10% so host-header artwork remains visible. */
    background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(14px) saturate(125%);
    backdrop-filter:blur(14px) saturate(125%);
}
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429:hover,
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429:focus-within {
    background:rgba(255,255,255,.09);
}
@media (forced-colors: active) {
    .qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 {
        background:Canvas !important;
        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;
    }
}

/* v4.35.0 — Toast card hierarchy and media prominence */
.qdl-toast {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    min-height: 104px;
    isolation: isolate;
}
.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-thumb {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    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-color: 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);
}
.qdl-toast-thumb img {
    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-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    margin: 0 2px 2px 0;
    box-shadow: 0 8px 18px rgba(48,62,101,.18), inset 0 1px 0 rgba(255,255,255,.3);
}
.qdl-toast-body {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-inline: 0;
    padding-block: 1px;
}
.qdl-toast-topline {
    min-height: 24px;
    padding-inline-end: 2px;
}
.qdl-toast-source,
.qdl-toast-priority-label {
    font-size: 11px;
    line-height: 1.35;
    padding: 4px 8px;
}
.qdl-toast-body strong {
    margin-top: 6px;
    padding-inline-end: 30px;
    color: var(--qdl-text-primary, var(--qdl-ink));
    font-size: 15.5px;
    font-weight: 850;
    line-height: 1.5;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.qdl-toast-body p {
    margin-top: 5px;
    color: var(--qdl-text-secondary, var(--qdl-muted));
    font-size: 12.5px;
    line-height: 1.72;
    -webkit-line-clamp: 2;
}
.qdl-toast-action {
    width: fit-content;
    min-height: 32px;
    margin-top: 9px;
    padding-inline: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
    text-decoration: none;
    background: color-mix(in srgb,var(--qdl-template-start) 7%,#fff);
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 12%,rgba(73,86,126,.04));
    box-shadow: 0 5px 13px rgba(48,62,101,.06), inset 0 1px 0 rgba(255,255,255,.82);
    transition: transform .18s var(--qdl-ease-premium), box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.qdl-toast > button {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 4;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    font-size: 18px;
    line-height: 1;
}
.qdl-toast-progress {
    height: 3px;
    margin-top: 10px;
    opacity: .82;
}
.qdl-toast.qdl-layout-image-focus {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 0;
}
.qdl-toast.qdl-layout-image-focus .qdl-toast-body {
    padding-block: 0;
}
.qdl-toast.qdl-layout-image-focus > button {
    position: static;
    grid-row: 2;
    width: 30px;
    height: 30px;
}
@media (max-width:680px) {
    .qdl-toast {
        gap: 10px;
        padding: 12px 13px;
        min-height: 96px;
    }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-landscape {
        width: 92px;
        height: 60px;
        min-width: 92px;
        min-height: 60px;
    }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-square {
        width: 70px;
        height: 70px;
        min-width: 70px;
        min-height: 70px;
    }
    .qdl-toast.has-image:not(.qdl-layout-image-focus) .qdl-toast-thumb.qdl-media-portrait {
        width: 62px;
        height: 82px;
        min-width: 62px;
        min-height: 82px;
    }
    .qdl-toast-body strong {
        font-size: 14.5px;
        padding-inline-end: 24px;
    }
        .qdl-toast-source,
    .qdl-toast-priority-label {
        font-size: 10.5px;
    }
    .qdl-toast-action {
        min-height: 30px;
        margin-top: 8px;
        padding-inline: 10px;
        font-size: 11.5px;
    }
    .qdl-toast > button {
        inset-block-start: 8px;
        inset-inline-end: 8px;
        width: 28px;
        height: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-toast-action,
    .qdl-toast-icon {
        transition: none !important;
    }
}
@media (forced-colors: active) {
    .qdl-toast-thumb,
    .qdl-toast-action,
    .qdl-toast > button {
        background: ButtonFace !important;
        color: ButtonText !important;
        border-color: ButtonText !important;
        box-shadow: none !important;
    }
    .qdl-toast-body strong,
    .qdl-toast-body p,
    .qdl-toast-source,
    .qdl-toast-priority-label {
        color: CanvasText !important;
    }
}

/* v4.37.0 — Guest auth weight normalization and header notification wheel scrolling */
.qdl-notification-shell.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link {
    font-weight:400;
}
.qdl-notification-shell.qdl-notification-header .qdl-popover-list {
    overscroll-behavior:contain;
    scroll-behavior:auto;
    -webkit-overflow-scrolling:touch;
}

/* v4.38.5 — Toast stacking, hierarchy, responsive safety, and media priority */
.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-bottom-end,
.qdl-toast-container.qdl-toast-position-bottom-start,
.qdl-toast-container.qdl-toast-position-bottom-center { flex-direction: column-reverse; }
.qdl-toast { flex: 0 0 auto; width: 100%; min-width: 0; min-height: 104px; padding: 14px 16px; border-radius: 20px; overflow: hidden; overflow-wrap: anywhere; word-break: normal; contain: layout; }
.qdl-toast-summary { min-height: 96px; }
.qdl-toast-body { min-width: 0; max-width: 100%; }
.qdl-toast-source, .qdl-toast-priority-label { min-height: 24px; font-size: 11px; line-height: 1.35; }
.qdl-toast-body strong { min-width: 0; max-width: 100%; font-size: 15.5px; line-height: 1.52; text-wrap: pretty; }
.qdl-toast-body p { max-width: 100%; margin-top: 5px; font-size: 12.5px; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.qdl-toast-action, .qdl-toast-summary-action { min-height: 32px; font-size: 12px; line-height: 1.3; }
.qdl-toast-summary-action { align-self: flex-start; margin-top: 7px; }
.qdl-toast > button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer; }
.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: 2px; }
.qdl-toast-progress { height: 3px; min-height: 3px; margin-top: 10px; border-radius: 999px; overflow: hidden; }
.qdl-toast-thumb img { display: block; width: 100%; height: 100%; object-fit: contain !important; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-thumb { min-width: 0; width: 100%; max-width: 100%; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-body { min-width: 0; }
.qdl-toast.qdl-layout-image-focus .qdl-toast-action { max-width: 100%; }
@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)); }
    .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)); }
    .qdl-toast { min-height: 96px; padding: 12px 13px; border-radius: 18px; }
    .qdl-toast-body strong { font-size: 14.5px; line-height: 1.5; }
    .qdl-toast-body p { font-size: 12px; line-height: 1.68; }
    .qdl-toast-source, .qdl-toast-priority-label { font-size: 10.5px; }
    .qdl-toast-action, .qdl-toast-summary-action { min-height: 30px; font-size: 11.5px; }
    .qdl-toast > button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
}
@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-thumb.is-loading::before, .qdl-toast-pulse-once { animation: none !important; }
}
@media (forced-colors: active) {
    .qdl-toast, .qdl-toast::before, .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; }
}

/* v4.38.37 — Stage 6 canonical CSS consolidation.
 * Safe maintenance pass: provably dominated duplicate rules and superseded release-layer
 * Header overrides are removed. Canonical Stage 1–5 layers are now the maintenance source
 * of truth; behavior, markup contracts, delivery logic, REST, cache, and data storage remain unchanged.
 */

/* v4.38.34 — Stage 1 canonical [qdl_notifications] popover hierarchy.
 * Scope: header trigger/popover presentation only. No delivery, REST, cache, or notification logic changes.
 * One canonical component layer replaces the previous release-specific header overrides.
 */

/* Native Popover top-layer + safe fallback stack. */
.qdl-notification-header .qdl-notification-popover {
    z-index: 2147483647;
    width: min(448px, calc(100vw - 20px));
    max-width: 448px;
    border-radius: 24px;
    border: 1px solid rgba(72,84,126,.11);
    background:
        radial-gradient(circle at 93% 0%, rgba(39,215,232,.09), transparent 25%),
        radial-gradient(circle at 0% 100%, rgba(255,92,168,.045), transparent 23%),
        linear-gradient(145deg, rgba(255,255,255,.99), rgba(249,248,255,.985));
    box-shadow:
        0 30px 84px rgba(40,48,79,.20),
        0 2px 0 rgba(255,255,255,.94) inset,
        0 0 0 1px rgba(255,255,255,.40);
}
.qdl-notification-header .qdl-notification-popover.qdl-native-top-layer,
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned {
    position: fixed;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}
.qdl-notification-header .qdl-notification-popover.qdl-native-top-layer::backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* v4.38.42 — Header Popover containing-block & width stability.
 * Fallback fixed positioning may become relative to a transformed/contained ancestor;
 * JavaScript supplies translated coordinates and a constrained inline width. Native top-layer
 * popovers remain viewport-based.
 */
.qdl-notification-header .qdl-notification-popover.qdl-popover-contained-positioned {
    max-width: min(448px, calc(100vw - 12px));
}

/* v4.38.41 — Header Popover visual anchoring polish.
 * The outer popover stays viewport-positioned while this subtle connector points to the
 * trigger. Surface clipping remains on the inner visual regions through the existing layout.
 */
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned {
    --qdl-popover-anchor-x: calc(100% - 28px);
    --qdl-popover-origin-x: 92%;
    --qdl-popover-entry-offset: -7px;
    overflow: visible;
    transform-origin: var(--qdl-popover-origin-x) 0%;
}
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 12px;
    height: 12px;
    left: calc(var(--qdl-popover-anchor-x) - 6px);
    top: -6px;
    border: 1px solid rgba(72,84,126,.10);
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,248,255,.98));
    box-shadow: 0 5px 12px rgba(40,48,79,.07);
    transform: rotate(45deg);
    pointer-events: none;
}
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 2px;
    height: 7px;
    left: var(--qdl-popover-anchor-x);
    top: -12px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(119,87,255,.20), rgba(39,215,232,.22));
    transform: translateX(-50%);
    pointer-events: none;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-flipped {
    transform-origin: var(--qdl-popover-origin-x) 100%;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-flipped::before {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-flipped::after {
    top: auto;
    bottom: -12px;
    background: linear-gradient(180deg, rgba(39,215,232,.22), rgba(119,87,255,.20));
}
/* Stage 106: compact layout for mobile viewports where neither side of the trigger has usable room. */
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling {
    overflow: hidden;
    border-radius: 18px;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling::before,
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling::after {
    display: none;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling > .qdl-popover-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-position-ready {
    animation: qdlHeaderPopoverIn var(--qdl-motion-standard) var(--qdl-motion-ease) both;
}
@keyframes qdlHeaderPopoverIn {
    0% { opacity: 0; transform: translateY(var(--qdl-popover-entry-offset, -7px)) scale(.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header: one clear identity/action row, one compact meta row. */
.qdl-notification-header .qdl-popover-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 14px 15px 12px;
    background:
        linear-gradient(135deg, rgba(130,36,227,.065), rgba(39,215,232,.045) 64%, rgba(255,255,255,.10));
    border-bottom: 1px solid rgba(72,84,126,.065);
}
.qdl-notification-header .qdl-popover-head::after {
    content: "";
    position: absolute;
    inset-inline: 15px;
    inset-block-end: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(119,87,255,.20), rgba(39,215,232,.14), transparent);
    pointer-events: none;
}
.qdl-notification-header .qdl-popover-head-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.qdl-notification-header .qdl-popover-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qdl-notification-header .qdl-popover-title-copy {
    min-width: 0;
    flex: 1 1 auto;
    text-align: right;
}
.qdl-notification-header .qdl-popover-title-copy strong {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    color: var(--qdl-text-primary, #33405a);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qdl-notification-header .qdl-popover-title-copy > span {
    display: block;
    min-width: 0;
    margin-top: 3px;
    color: var(--qdl-text-secondary, #77839a);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.qdl-notification-header .qdl-popover-head-actions {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: static !important;
    inset: auto !important;
}
.qdl-notification-header .qdl-popover-read-all {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 9px;
    border-radius: 10px;
    color: #6248c8;
    background: rgba(119,87,255,.055);
    border: 1px solid rgba(119,87,255,.075);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}
.qdl-notification-header .qdl-popover-read-all:hover {
    background: rgba(119,87,255,.09);
    color: #5339b8;
}
.qdl-notification-header .qdl-popover-read-all:focus-visible,
.qdl-notification-header .qdl-popover-close:focus-visible {
    outline: 3px solid var(--qdl-focus-ring, rgba(119,87,255,.28));
    outline-offset: 2px;
}
.qdl-notification-header .qdl-read-all-icon {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 6px;
    background: rgba(119,87,255,.10);
    color: #684ad0;
    font-size: 12px;
    line-height: 1;
}
.qdl-notification-header .qdl-popover-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    color: #818ba0;
    font-size: 18px;
}
.qdl-notification-header .qdl-popover-close:hover {
    background: rgba(70,83,119,.055);
    color: #5f697d;
}
.qdl-notification-header .qdl-popover-sync {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #3d7b89;
    background: rgba(39,215,232,.065);
    border: 1px solid rgba(39,215,232,.13);
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}
.qdl-notification-header .qdl-popover-sync > i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #27c8cf;
    box-shadow: 0 0 0 3px rgba(39,200,207,.08);
}
.qdl-notification-header .qdl-popover-sync[data-qdl-live-state="checking"] > i,
.qdl-notification-header .qdl-popover-sync[data-qdl-live-state="retrying"] > i {
    background: #d99b25;
    box-shadow: 0 0 0 3px rgba(217,155,37,.09);
}
.qdl-notification-header .qdl-popover-sync.is-offline > i {
    background: #d65380;
    box-shadow: 0 0 0 3px rgba(214,83,128,.09);
}
.qdl-user-avatar-placeholder-icon { width:25px; height:25px; display:block; }
/* Compatibility guard only: hide retired loyalty markup from stale full-page caches until frontend.js removes it. */
.qdl-notification-header .qdl-loyalty-diamonds-slot, .qdl-notification-header [data-qdl-loyalty-diamonds-slot], .qdl-notification-header [data-qdl-loyalty-diamonds], .qdl-notification-header .qdl-loyalty-diamonds-copy, .qdl-notification-header .qdl-loyalty-diamonds-label, .qdl-notification-header .qdl-loyalty-diamonds-soon, .qdl-notification-header .qdl-popover-head-meta-actions {
    display: none !important;
}
.qdl-notification-header .qdl-popover-head,
.qdl-notification-header .qdl-popover-footer {
    flex: 0 0 auto;
}
.qdl-notification-header .qdl-popover-list {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding: 9px;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling {
    overflow: hidden;
    border-radius: 18px;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling::before,
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling::after {
    display: none;
}
.qdl-notification-header .qdl-notification-popover.qdl-popover-viewport-filling > .qdl-popover-list {
    min-height: 0;
    max-height: none !important;
    flex: 1 1 auto;
    overflow-y: auto;
}
.qdl-notification-header .qdl-popover-list:focus {
    outline: 2px solid rgba(119,87,255,.14);
    outline-offset: -2px;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item-shell { position: relative; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item {
    min-height: 118px;
    padding: 12px 13px;
    border-radius: 18px;
    border: 1px solid rgba(70,84,124,.075);
    background: rgba(255,255,255,.90);
    box-shadow: 0 8px 20px rgba(55,65,104,.045), inset 0 1px 0 rgba(255,255,255,.88);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item::after {
    inset-block: 11px;
    width: 3px;
    border-radius: 0 999px 999px 0;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread {
    background: linear-gradient(145deg, rgba(255,255,255,.99), color-mix(in srgb, var(--qdl-priority-color, #7757ff) 2.5%, #fff));
    border-color: color-mix(in srgb, var(--qdl-priority-color, #7757ff) 15%, rgba(70,84,124,.07));
    box-shadow: 0 12px 27px color-mix(in srgb, var(--qdl-priority-color, #7757ff) 5%, rgba(55,65,104,.055)), inset 0 1px 0 rgba(255,255,255,.93);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--qdl-priority-color, #7757ff) 17%, rgba(70,84,124,.08));
    box-shadow: 0 15px 30px color-mix(in srgb, var(--qdl-priority-color, #7757ff) 6%, rgba(55,65,104,.072)), inset 0 1px 0 rgba(255,255,255,.93);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 15px;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-source {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-priority {
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-state {
    min-height: 21px;
    gap: 5px;
    color: var(--qdl-text-tertiary, #8993a8);
    padding: 0 2px;
    font-size: 10px;
    font-weight: 500;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-state-unread { color: #a94270; }
.qdl-notification-header .qdl-popover-list .qdl-notification-state-read > i {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    border-radius: 6px;
    background: rgba(92,113,145,.065);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong {
    display: block;
    color: var(--qdl-text-primary, #33405a);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -.008em;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-content p {
    margin: 5px 0 8px;
    color: var(--qdl-text-secondary, #707c92);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.72;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-meta {
    min-height: 30px;
    font-size: 10.5px;
    line-height: 1.45;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-action {
    min-height: 31px;
    padding: 5px 9px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-more,
.qdl-notification-header .qdl-popover-list .qdl-notification-expand {
    min-height: 31px;
}

/* [qdl_notifications] Notification Type Identity & Pastel Fade — canonical rules.
 * Type identity owns the card surface, edge, icon and action accent. Priority remains
 * independently communicated by its semantic chip; template colors do not override
 * this header-card palette. The far edge fades to near-white to protect text contrast.
 */
.qdl-notification-header .qdl-popover-list .qdl-notification-item {
    --qdl-type-accent: #475569;
    --qdl-type-deep: #334155;
    --qdl-type-tint-strong: rgba(71,85,105,.13);
    --qdl-type-tint-mid: rgba(71,85,105,.075);
    --qdl-type-tint-soft: rgba(71,85,105,.025);
    --qdl-type-unread-strong: rgba(71,85,105,.18);
    --qdl-type-unread-mid: rgba(71,85,105,.095);
    --qdl-type-border: rgba(71,85,105,.19);
    --qdl-type-border-strong: rgba(71,85,105,.30);
    --qdl-type-chip-bg: rgba(71,85,105,.075);
    --qdl-type-action-bg: rgba(71,85,105,.055);
    --qdl-type-focus: rgba(71,85,105,.52);
    --qdl-type-shadow: rgba(71,85,105,.13);
    --qdl-type-glow: rgba(71,85,105,.085);
    --qdl-priority-color: var(--qdl-type-accent);
    border-color: var(--qdl-type-border);
    background: linear-gradient(90deg,
        var(--qdl-type-tint-strong) 0%,
        var(--qdl-type-tint-mid) 31%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
    box-shadow: 0 8px 20px rgba(55,65,104,.045), inset 0 1px 0 rgba(255,255,255,.88);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce {
    --qdl-type-accent: #6D28D9;
    --qdl-type-deep: #5B21B6;
    --qdl-type-tint-strong: rgba(109,40,217,.145);
    --qdl-type-tint-mid: rgba(109,40,217,.078);
    --qdl-type-tint-soft: rgba(109,40,217,.025);
    --qdl-type-unread-strong: rgba(109,40,217,.19);
    --qdl-type-unread-mid: rgba(109,40,217,.098);
    --qdl-type-border: rgba(109,40,217,.19);
    --qdl-type-border-strong: rgba(109,40,217,.31);
    --qdl-type-chip-bg: rgba(109,40,217,.075);
    --qdl-type-action-bg: rgba(109,40,217,.06);
    --qdl-type-focus: rgba(109,40,217,.52);
    --qdl-type-shadow: rgba(109,40,217,.14);
    --qdl-type-glow: rgba(109,40,217,.095);
}
/* WooCommerce download lifecycle cards have their own identity; purchase cards keep the purple palette above. */
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-download {
    --qdl-type-accent: #3F6212;
    --qdl-type-deep: #365314;
    --qdl-type-tint-strong: rgba(63,98,18,.15);
    --qdl-type-tint-mid: rgba(63,98,18,.082);
    --qdl-type-tint-soft: rgba(63,98,18,.026);
    --qdl-type-unread-strong: rgba(63,98,18,.19);
    --qdl-type-unread-mid: rgba(63,98,18,.102);
    --qdl-type-border: rgba(63,98,18,.21);
    --qdl-type-border-strong: rgba(63,98,18,.33);
    --qdl-type-chip-bg: rgba(63,98,18,.082);
    --qdl-type-action-bg: rgba(63,98,18,.062);
    --qdl-type-focus: rgba(63,98,18,.55);
    --qdl-type-shadow: rgba(63,98,18,.14);
    --qdl-type-glow: rgba(63,98,18,.10);
}
/* Event-level semantic accents: each WooCommerce lifecycle state gets a unique hue. */
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-processing { --qdl-type-accent: #4F46E5; --qdl-type-deep: #3730A3; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-completed { --qdl-type-accent: #15803D; --qdl-type-deep: #166534; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-on-hold { --qdl-type-accent: #7C3AED; --qdl-type-deep: #6D28D9; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-access { --qdl-type-accent: #0369A1; --qdl-type-deep: #075985; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-remaining { --qdl-type-accent: #C2410C; --qdl-type-deep: #9A3412; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-limit-reached { --qdl-type-accent: #BE123C; --qdl-type-deep: #9F1239; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-expiry-warning { --qdl-type-accent: #A16207; --qdl-type-deep: #854D0E; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-expired { --qdl-type-accent: #334155; --qdl-type-deep: #1E293B; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-woocommerce[class*="qdl-event-variant-"] {
    --qdl-type-tint-strong: color-mix(in srgb, var(--qdl-type-accent) 15%, transparent);
    --qdl-type-tint-mid: color-mix(in srgb, var(--qdl-type-accent) 8%, transparent);
    --qdl-type-tint-soft: color-mix(in srgb, var(--qdl-type-accent) 2.5%, transparent);
    --qdl-type-unread-strong: color-mix(in srgb, var(--qdl-type-accent) 19%, transparent);
    --qdl-type-unread-mid: color-mix(in srgb, var(--qdl-type-accent) 10%, transparent);
    --qdl-type-border: color-mix(in srgb, var(--qdl-type-accent) 22%, transparent);
    --qdl-type-border-strong: color-mix(in srgb, var(--qdl-type-accent) 34%, transparent);
    --qdl-type-chip-bg: color-mix(in srgb, var(--qdl-type-accent) 8%, transparent);
    --qdl-type-action-bg: color-mix(in srgb, var(--qdl-type-accent) 6%, transparent);
    --qdl-type-focus: color-mix(in srgb, var(--qdl-type-accent) 56%, transparent);
    --qdl-type-shadow: color-mix(in srgb, var(--qdl-type-accent) 14%, transparent);
    --qdl-type-glow: color-mix(in srgb, var(--qdl-type-accent) 10%, transparent);
}

.qdl-notification-header .qdl-popover-list .qdl-notification-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--qdl-type-border);
    border-radius: 9px;
    color: var(--qdl-type-accent);
    background: var(--qdl-type-chip-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    font-size: var(--qdl-font-chip);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.3;
    white-space: nowrap;
}

.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-system {
    --qdl-type-accent: #1D4ED8;
    --qdl-type-deep: #1E40AF;
    --qdl-type-tint-strong: rgba(29,78,216,.135);
    --qdl-type-tint-mid: rgba(29,78,216,.073);
    --qdl-type-tint-soft: rgba(29,78,216,.023);
    --qdl-type-unread-strong: rgba(29,78,216,.18);
    --qdl-type-unread-mid: rgba(29,78,216,.092);
    --qdl-type-border: rgba(29,78,216,.19);
    --qdl-type-border-strong: rgba(29,78,216,.31);
    --qdl-type-chip-bg: rgba(29,78,216,.075);
    --qdl-type-action-bg: rgba(29,78,216,.055);
    --qdl-type-focus: rgba(29,78,216,.52);
    --qdl-type-shadow: rgba(29,78,216,.13);
    --qdl-type-glow: rgba(29,78,216,.09);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-game {
    --qdl-type-accent: #0E7490;
    --qdl-type-deep: #155E75;
    --qdl-type-tint-strong: rgba(14,116,144,.14);
    --qdl-type-tint-mid: rgba(14,116,144,.076);
    --qdl-type-tint-soft: rgba(14,116,144,.024);
    --qdl-type-unread-strong: rgba(14,116,144,.185);
    --qdl-type-unread-mid: rgba(14,116,144,.095);
    --qdl-type-border: rgba(14,116,144,.20);
    --qdl-type-border-strong: rgba(14,116,144,.32);
    --qdl-type-chip-bg: rgba(14,116,144,.08);
    --qdl-type-action-bg: rgba(14,116,144,.06);
    --qdl-type-focus: rgba(14,116,144,.54);
    --qdl-type-shadow: rgba(14,116,144,.13);
    --qdl-type-glow: rgba(14,116,144,.09);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-message {
    --qdl-type-accent: #047857;
    --qdl-type-deep: #065F46;
    --qdl-type-tint-strong: rgba(4,120,87,.135);
    --qdl-type-tint-mid: rgba(4,120,87,.073);
    --qdl-type-tint-soft: rgba(4,120,87,.023);
    --qdl-type-unread-strong: rgba(4,120,87,.18);
    --qdl-type-unread-mid: rgba(4,120,87,.092);
    --qdl-type-border: rgba(4,120,87,.20);
    --qdl-type-border-strong: rgba(4,120,87,.32);
    --qdl-type-chip-bg: rgba(4,120,87,.075);
    --qdl-type-action-bg: rgba(4,120,87,.055);
    --qdl-type-focus: rgba(4,120,87,.54);
    --qdl-type-shadow: rgba(4,120,87,.13);
    --qdl-type-glow: rgba(4,120,87,.09);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-reward {
    --qdl-type-accent: #92400E;
    --qdl-type-deep: #78350F;
    --qdl-type-tint-strong: rgba(146,64,14,.13);
    --qdl-type-tint-mid: rgba(146,64,14,.07);
    --qdl-type-tint-soft: rgba(146,64,14,.022);
    --qdl-type-unread-strong: rgba(146,64,14,.18);
    --qdl-type-unread-mid: rgba(146,64,14,.09);
    --qdl-type-border: rgba(146,64,14,.20);
    --qdl-type-border-strong: rgba(146,64,14,.32);
    --qdl-type-chip-bg: rgba(146,64,14,.075);
    --qdl-type-action-bg: rgba(146,64,14,.055);
    --qdl-type-focus: rgba(146,64,14,.54);
    --qdl-type-shadow: rgba(146,64,14,.13);
    --qdl-type-glow: rgba(146,64,14,.09);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-promotion {
    --qdl-type-accent: #9D174D;
    --qdl-type-deep: #831843;
    --qdl-type-tint-strong: rgba(157,23,77,.13);
    --qdl-type-tint-mid: rgba(157,23,77,.07);
    --qdl-type-tint-soft: rgba(157,23,77,.022);
    --qdl-type-unread-strong: rgba(157,23,77,.18);
    --qdl-type-unread-mid: rgba(157,23,77,.09);
    --qdl-type-border: rgba(157,23,77,.20);
    --qdl-type-border-strong: rgba(157,23,77,.32);
    --qdl-type-chip-bg: rgba(157,23,77,.075);
    --qdl-type-action-bg: rgba(157,23,77,.055);
    --qdl-type-focus: rgba(157,23,77,.54);
    --qdl-type-shadow: rgba(157,23,77,.13);
    --qdl-type-glow: rgba(157,23,77,.09);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-type-generic {
    --qdl-type-accent: #475569;
    --qdl-type-deep: #334155;
    --qdl-type-tint-strong: rgba(71,85,105,.13);
    --qdl-type-tint-mid: rgba(71,85,105,.075);
    --qdl-type-tint-soft: rgba(71,85,105,.025);
    --qdl-type-unread-strong: rgba(71,85,105,.18);
    --qdl-type-unread-mid: rgba(71,85,105,.095);
    --qdl-type-border: rgba(71,85,105,.19);
    --qdl-type-border-strong: rgba(71,85,105,.30);
    --qdl-type-chip-bg: rgba(71,85,105,.075);
    --qdl-type-action-bg: rgba(71,85,105,.055);
    --qdl-type-focus: rgba(71,85,105,.52);
    --qdl-type-shadow: rgba(71,85,105,.13);
    --qdl-type-glow: rgba(71,85,105,.085);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread {
    background: linear-gradient(90deg,
        var(--qdl-type-unread-strong) 0%,
        var(--qdl-type-unread-mid) 32%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
    border-color: var(--qdl-type-border-strong);
    box-shadow: 0 12px 27px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.93);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item::before {
    background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 44%);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread::before { opacity: .62; }
.qdl-notification-header .qdl-popover-list .qdl-notification-item::after {
    background: linear-gradient(180deg, var(--qdl-type-accent), var(--qdl-type-deep));
    box-shadow: 0 0 12px var(--qdl-type-glow);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread .qdl-notification-accent {
    background: linear-gradient(180deg, var(--qdl-type-accent), var(--qdl-type-deep));
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.no-image .qdl-notification-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--qdl-type-accent), var(--qdl-type-deep));
    border-color: rgba(255,255,255,.50);
    box-shadow: 0 9px 19px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.20);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-icon {
    color: var(--qdl-type-accent);
    background: rgba(255,255,255,.96);
    border-color: var(--qdl-type-border);
    box-shadow: 0 6px 13px rgba(57,68,106,.11), inset 0 1px 0 rgba(255,255,255,.95);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-thumb {
    background: linear-gradient(90deg, var(--qdl-type-tint-strong), var(--qdl-type-tint-soft) 62%, #fff 100%);
    border-color: var(--qdl-type-border);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-source {
    color: var(--qdl-type-accent);
    border-color: var(--qdl-type-border);
    background: var(--qdl-type-chip-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-source-icon { color: var(--qdl-type-accent); }
.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-action {
    color: var(--qdl-type-accent);
    background: var(--qdl-type-action-bg);
    border-color: var(--qdl-type-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-action:hover {
    color: var(--qdl-type-accent);
    background: var(--qdl-type-action-bg);
    border-color: var(--qdl-type-border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--qdl-type-focus), var(--qdl-card-shadow, 0 8px 24px rgba(55,66,105,.055));
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item:hover {
    background: linear-gradient(90deg,
        var(--qdl-type-tint-strong) 0%,
        var(--qdl-type-tint-mid) 31%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
    border-color: var(--qdl-type-border-strong);
    box-shadow: 0 15px 30px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.93);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread:hover {
    background: linear-gradient(90deg,
        var(--qdl-type-unread-strong) 0%,
        var(--qdl-type-unread-mid) 32%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
}
.qdl-notification-header .qdl-popover-list .qdl-source-icon {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 5px;
    background: color-mix(in srgb, currentColor 7%, white);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.qdl-notification-header .qdl-popover-list .qdl-source-icon svg { width: 11px; height: 11px; }

/* Authenticated footer: three compact, equal-width actions in one horizontal row. */
.qdl-notification-header .qdl-popover-footer-auth {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: stretch;
    gap: 6px;
    padding: 8px 9px max(10px, env(safe-area-inset-bottom));
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary {
    min-width: 0;
    min-height: 42px;
    padding: 6px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 10px;
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--qdl-color-brand-primary) 0%, var(--qdl-color-brand-primary-strong) 55%, #5b49c7 100%);
    box-shadow: 0 6px 14px rgba(119,87,255,.17), inset 0 1px 0 rgba(255,255,255,.16);
    font-size: 11.5px;
    line-height: 1.25;
    font-weight: 700;
    white-space: nowrap;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary:hover {
    background: linear-gradient(135deg, #7050ee, #6251e8 55%, #5669e5);
    transform: translateY(-1px);
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
    min-width: 0;
    min-height: 42px;
    padding: 6px 5px;
    gap: 4px;
    border-radius: 10px;
    border: 1px solid rgba(73,86,126,.075);
    background: rgba(255,255,255,.72);
    color: var(--qdl-text-secondary, #58657b);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.94);
    border-color: rgba(119,87,255,.13);
    box-shadow: 0 7px 16px rgba(76,70,132,.055);
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-settings-link:hover { color: #5e49c4; }
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-panel-link:hover { color: #3f7f90; }
.qdl-notification-header .qdl-popover-footer-link-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 6px;
}
.qdl-notification-header .qdl-popover-footer-link-icon svg { width: 12px; height: 12px; }
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link > span:not(.qdl-popover-footer-link-icon) {
    min-width: 0;
    white-space: nowrap;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary .qdl-popover-footer-link-icon,
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary .qdl-popover-footer-link-icon {
    background: rgba(255,255,255,.16);
    color: #fff;
}

/* Compatibility guard: a full-page cache can briefly contain the retired games link. */
.qdl-notification-header .qdl-popover-games-link { display: none !important; }

/* Guest footer contains only the public notification-center action and shares
 * the authenticated primary action's brand surface and text interaction language.
 * Its full-width geometry is intentional because it is the only guest action. */
.qdl-notification-header .qdl-popover-footer-guest {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    padding: 9px 10px max(10px, env(safe-area-inset-bottom));
}
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary {
    width: 100%;
    min-height: 43px;
    padding: 8px 11px;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    /* Guest CTA text is explicitly white and must not inherit/lose contrast to theme link styles. */
    color: #fff !important;
    background: linear-gradient(135deg,
        var(--qdl-interactive-primary-start) 0%,
        var(--qdl-interactive-primary-mid) 55%,
        var(--qdl-interactive-primary-end) 100%);
    box-shadow: 0 9px 20px rgba(119,87,255,.16), inset 0 1px 0 rgba(255,255,255,.16);
    font-size: var(--qdl-font-primary-action);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.4;
}
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary > span:not(.qdl-popover-footer-link-icon) {
    color: #fff !important;
}
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary .qdl-popover-footer-link-icon {
    color: #fff;
}

/* Meaningful interactive states. */
.qdl-notification-header .qdl-popover-footer-link:focus-visible,
.qdl-notification-header .qdl-popover-footer-primary:focus-visible {
    outline: 3px solid var(--qdl-focus-ring, rgba(119,87,255,.28));
    outline-offset: 2px;
}

/* Increase-only unread badge feedback + restrained new/read transitions. */
.qdl-notification-header .qdl-unread-badge.is-updated {
    animation: qdlBadgePop .58s cubic-bezier(.18,.88,.32,1.18);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new {
    animation: qdlHeaderCardIn .46s cubic-bezier(.18,.8,.22,1) both;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new::after {
    animation: qdlHeaderEdgePulse .76s ease-out both;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-read-transition {
    animation: qdlHeaderCardRead .42s ease-out both;
}
@keyframes qdlHeaderCardIn {
    0% { opacity:0; transform:translateY(7px) scale(.988); }
    58% { opacity:1; transform:translateY(-1px) scale(1.002); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes qdlHeaderEdgePulse {
    0% { opacity:0; transform:scaleY(.4); }
    45% { opacity:1; transform:scaleY(1); }
    100% { opacity:.84; transform:scaleY(1); }
}
@keyframes qdlHeaderCardRead {
    0% { transform:translateY(0); }
    45% { transform:translateY(-1px); }
    100% { transform:translateY(0); }
}

@media (max-width: 680px) {
    .qdl-notification-header .qdl-notification-popover {
        width: min(448px, calc(100vw - 16px));
    }
    .qdl-notification-header .qdl-popover-head {
        padding: 13px 13px 11px;
        gap: 8px;
    }
    .qdl-notification-header .qdl-popover-title-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
            .qdl-notification-header .qdl-popover-read-all {
        min-height: 33px;
        padding-inline: 8px;
        font-size: 11.5px;
    }
    .qdl-notification-header .qdl-popover-close {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
    }
    .qdl-notification-header .qdl-popover-list { max-height: min(62vh, 460px); padding: 8px; }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item { min-height: 112px; padding: 11px 11px; }
        .qdl-notification-header .qdl-popover-list .qdl-notification-content p { font-size: 12.25px; }
    }

@media (max-width: 440px) {
    .qdl-notification-header .qdl-notification-popover {
        width: calc(100vw - 14px);
        max-width: none;
        border-radius: 22px;
    }
    .qdl-notification-header .qdl-popover-head {
        padding: 12px 11px 10px;
    }
    .qdl-notification-header .qdl-popover-head-main {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 7px;
    }
    .qdl-notification-header .qdl-popover-title-copy strong { font-size: 16px; }
    .qdl-notification-header .qdl-popover-title-copy > span { font-size: 11px; }

.qdl-notification-header .qdl-popover-read-all {
        padding-inline: 7px;
        font-size: 11px;
    }
    .qdl-notification-header .qdl-popover-sync { font-size: 10px; }
    .qdl-notification-header .qdl-popover-footer-auth {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px;
        padding-inline: 8px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary {
        min-height: 44px;
        font-size: 11.5px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
        min-height: 45px;
        padding-inline: 5px;
        gap: 4px;
        font-size: 11px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}

@media (max-width: 360px) {
    .qdl-notification-header .qdl-popover-head-main {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 5px;
    }
    .qdl-notification-header .qdl-popover-read-all span:last-child { display: none; }
    .qdl-notification-header .qdl-popover-read-all { width: 33px; padding: 0; justify-content: center; }
    .qdl-notification-header .qdl-popover-title-copy > span { font-size: 10.5px; }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
        font-size: 10.5px;
        line-height: 1.25;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-header .qdl-popover-list .qdl-notification-item,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new::after,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-read-transition,
    .qdl-notification-header .qdl-unread-badge.is-updated {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .qdl-notification-header .qdl-notification-popover,
    .qdl-notification-header .qdl-popover-head,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link,
    .qdl-notification-header .qdl-popover-sync {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
    }
    .qdl-notification-header .qdl-popover-title-copy strong,
    .qdl-notification-header .qdl-popover-title-copy > span,
    .qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong,
    .qdl-notification-header .qdl-popover-list .qdl-notification-content p,
    .qdl-notification-header .qdl-popover-list .qdl-notification-meta,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link {
        color: CanvasText !important;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary {
        background: Highlight !important;
        color: HighlightText !important;
        border-color: CanvasText !important;
    }
    .qdl-notification-header .qdl-popover-footer-link-icon,
    .qdl-notification-header .qdl-popover-title-icon,
    .qdl-notification-header .qdl-read-all-icon {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: CanvasText !important;
    }

}

/* v4.38.34 — Stage 2 canonical Typography & Color System.
 * Scope: shared frontend text/color semantics across Trigger, Popover, Cards,
 * Notification Center, Toast, Detail Drawer, and Preferences. No delivery or
 * interaction logic is changed here; Stage 6 keeps the canonical layers as the maintenance source of truth.
 */
:root {
    --qdl-color-brand-primary: #7757ff;
    --qdl-color-brand-primary-strong: #6547d4;
    --qdl-color-brand-quest: #8224e3;
    --qdl-color-brand-cyan: #27d7e8;
    --qdl-color-accent-pink: #ff5ca8;
    --qdl-color-accent-yellow: #ffd95e;

    --qdl-color-text-primary: #33405a;
    --qdl-color-text-secondary: #6f7d92;
    --qdl-color-text-tertiary: #64718a;
    --qdl-color-text-subtle: #7b879d;
    --qdl-color-text-on-brand: #ffffff;
    --qdl-color-text-success: #23725e;
    --qdl-color-text-info: #2f7280;
    --qdl-color-text-warning: #8a6216;
    --qdl-color-text-danger: #a35f75;

    --qdl-color-surface: #ffffff;
    --qdl-color-surface-soft: #f8f9fd;
    --qdl-color-surface-muted: #f3f6fb;
    --qdl-color-border: rgba(72,84,126,.10);
    --qdl-color-border-strong: rgba(72,84,126,.16);
    --qdl-color-focus: #5e49c4;
    --qdl-color-focus-ring: rgba(94,73,196,.28);

    --qdl-font-popover-title: 17px;
    --qdl-font-summary: 12px;
    --qdl-font-card-title: 15px;
    --qdl-font-card-body: 12.5px;
    --qdl-font-meta: 10.5px;
    --qdl-font-chip: 10.5px;
    --qdl-font-action: 11.5px;
    --qdl-font-primary-action: 12px;
    --qdl-font-center-title: 30px;
    --qdl-font-detail-title: 22px;

    --qdl-weight-regular: 400;
    --qdl-weight-medium: 500;
    --qdl-weight-semibold: 600;
    --qdl-weight-bold: 700;
    --qdl-weight-extrabold: 800;

    /* Backward-compatible aliases used by the existing stylesheet. */
    --qdl-purple: var(--qdl-color-brand-primary);
    --qdl-cyan: var(--qdl-color-brand-cyan);
    --qdl-pink: var(--qdl-color-accent-pink);
    --qdl-yellow: var(--qdl-color-accent-yellow);
    --qdl-ink: var(--qdl-color-text-primary);
    --qdl-muted: var(--qdl-color-text-secondary);
    --qdl-text-primary: var(--qdl-color-text-primary);
    --qdl-text-secondary: var(--qdl-color-text-secondary);
    --qdl-text-tertiary: var(--qdl-color-text-tertiary);
    --qdl-text-subtle: var(--qdl-color-text-subtle);
    --qdl-text-accent: var(--qdl-color-brand-primary-strong);
    --qdl-text-positive: var(--qdl-color-text-success);
    --qdl-text-danger: var(--qdl-color-text-danger);
    --qdl-focus-solid: var(--qdl-color-focus);
    --qdl-focus-ring: var(--qdl-color-focus-ring);
}

/* Global semantic typography/color contract. */
.qdl-notification-shell,
.qdl-preferences {
    color: var(--qdl-color-text-primary);
}

.qdl-notification-shell.qdl-notification-header,
.qdl-notification-shell.qdl-notification-header * {
    font-family: inherit !important;
}

/* Header / Popover */
.qdl-notification-header .qdl-popover-title-copy strong {
    color: var(--qdl-color-text-primary);
    font-size: var(--qdl-font-popover-title);
    font-weight: var(--qdl-weight-extrabold);
}
.qdl-notification-header .qdl-popover-title-copy > span,
.qdl-notification-header .qdl-popover-head > span {
    color: var(--qdl-color-text-secondary);
    font-size: var(--qdl-font-summary);
    font-weight: var(--qdl-weight-medium);
}

.qdl-notification-header .qdl-popover-read-all,
.qdl-notification-header .qdl-read-all,
.qdl-notification-header .qdl-popover-footer a {
    color: var(--qdl-color-brand-primary-strong);
}
.qdl-notification-header .qdl-popover-read-all {
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-semibold);
}
.qdl-notification-header .qdl-popover-read-all:hover {
    color: var(--qdl-color-brand-primary-strong);
    background: rgba(119,87,255,.085);
}
.qdl-notification-header .qdl-popover-close {
    color: var(--qdl-color-text-tertiary);
}
.qdl-notification-header .qdl-popover-close:hover {
    color: var(--qdl-color-text-secondary);
    background: rgba(72,84,126,.055);
}
.qdl-notification-header .qdl-popover-sync {
    color: var(--qdl-color-text-info);
    border-color: rgba(39,215,232,.15);
    background: rgba(39,215,232,.065);
    font-size: var(--qdl-font-meta);
    font-weight: var(--qdl-weight-semibold);
}

/* Header cards and the shared card system. */
.qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong {
    color: var(--qdl-color-text-primary);
    font-size: var(--qdl-font-card-title);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.55;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-content p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    color: var(--qdl-color-text-primary, #33405a) !important;
    font-size: 13px !important;
    font-weight: var(--qdl-weight-regular);
    line-height: 1.78 !important;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-meta {
    color: var(--qdl-color-text-tertiary);
    font-size: var(--qdl-font-meta);
    line-height: 1.55;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-source,
.qdl-notification-header .qdl-popover-list .qdl-notification-priority,
.qdl-notification-header .qdl-popover-list .qdl-notification-state {
    font-size: var(--qdl-font-chip);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-action,
.qdl-notification-header .qdl-popover-list .qdl-notification-expand {
    color: var(--qdl-color-brand-primary-strong);
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-semibold);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-time {
    color: var(--qdl-color-text-tertiary);
    font-size: var(--qdl-font-meta);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-state-unread {
    color: var(--qdl-color-text-danger);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-priority-important {
    color: var(--qdl-color-text-warning);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-priority-high {
    color: var(--qdl-color-brand-primary-strong);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-priority-critical {
    color: var(--qdl-color-text-danger);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-delete {
    color: var(--qdl-color-text-tertiary);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-delete:hover {
    color: var(--qdl-color-text-secondary);
}

/* Source labels retain their source text; their visual tint is defined by notification type above. */

/* Authenticated / Guest footer typography and color hierarchy. */
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary,
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary {
    color: var(--qdl-color-text-on-brand);
    background: linear-gradient(135deg, var(--qdl-color-brand-primary), var(--qdl-color-brand-primary-strong) 55%, #5a6ee8);
    font-size: var(--qdl-font-primary-action);
    font-weight: var(--qdl-weight-bold);
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
    color: var(--qdl-color-text-secondary);
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-semibold);
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover {
    color: var(--qdl-color-brand-primary-strong);
    border-color: rgba(119,87,255,.14);
}
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-link {
    color: var(--qdl-color-text-secondary);
    font-size: var(--qdl-font-action);
}

/* v4.38.55 — Current Toast canonical Premium Bright Gaming surface.
 * The component stays compact and readable while adding depth, a restrained
 * aurora accent, a stronger focal hierarchy, and a real CTA treatment.
 */
.qdl-toast {
    --qdl-toast-surface-top: rgba(255,255,255,.985);
    --qdl-toast-surface-bottom: rgba(248,248,255,.97);
    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,var(--qdl-toast-surface-top),var(--qdl-toast-surface-bottom));
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 17%,rgba(73,86,126,.08));
    border-radius: 23px;
    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);
    padding: 14px 15px 11px;
}
.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-priority-indicator {
    width: 5px;
    inset-block: 12px;
    inset-inline-start: 0;
    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;
}
.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 {
    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)); }
.qdl-toast-body {
    min-width: 0;
    padding-inline-end: 35px;
}
.qdl-toast-topline {
    min-height: 26px;
    align-items: center;
    gap: 6px;
}
.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 {
    color: var(--qdl-color-brand-primary-strong);
    background: color-mix(in srgb,var(--qdl-template-start) 7%,white);
}
.qdl-toast-source-icon { width: 13px; height: 13px; }
.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;
    margin-top: 7px;
    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;
}
.qdl-toast-body p {
    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 {
    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-color-text-on-brand);
    background: linear-gradient(135deg,var(--qdl-template-start),var(--qdl-template-end));
    border: 1px solid color-mix(in srgb,var(--qdl-template-start) 18%,rgba(73,86,126,.04));
    box-shadow: 0 8px 17px color-mix(in srgb,var(--qdl-template-start) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-bold);
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s var(--qdl-ease-premium),filter .18s ease,box-shadow .18s ease;
}
.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.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;
}
.qdl-toast-summary .qdl-toast-progress { margin-top: 11px; }
.qdl-toast > button {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 4;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--qdl-color-text-tertiary);
    background: rgba(255,255,255,.56);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(48,62,101,.045);
    transition: transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.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;
    margin-top: 11px;
    border-radius: 999px;
    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 {
    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);
}
.qdl-empty { color: var(--qdl-color-text-secondary); font-size: 13px; line-height: 1.8; }

@media (max-width: 390px) {
    .qdl-state-visual,
    .qdl-smart-empty-visual { width: 78px; height: 78px; border-radius: 24px; }
    .qdl-state-visual-icon { width: 43px; height: 43px; }
    .qdl-state-visual::before,
    .qdl-smart-empty-visual span { inset: 7px; border-radius: 21px; }
}
@media (forced-colors: active) {
    .qdl-state-visual,
    .qdl-smart-empty-visual { background: Canvas; }
    .qdl-state-visual::before,
    .qdl-smart-empty-visual span { border-color: CanvasText; background: Canvas; box-shadow: none; }
    .qdl-state-visual::after,
    .qdl-state-visual i,
    .qdl-state-visual b { background: CanvasText; box-shadow: none; }
    .qdl-state-visual-icon { color: CanvasText; filter:none; }
}

/* Detail Drawer */
.qdl-notification-details-message { color: var(--qdl-color-text-secondary); font-size: 13.5px; line-height: 1.95; }

/* Preferences share the same semantic type scale. */
.qdl-preferences-hero-copy h2 { color: var(--qdl-color-text-primary); font-size: 28px; font-weight: var(--qdl-weight-extrabold); }
.qdl-preferences-hero-copy p { color: var(--qdl-color-text-secondary); font-size: 13.5px; }
.qdl-preferences-back,
.qdl-channel-action { color: var(--qdl-color-brand-primary-strong); font-size: var(--qdl-font-action); font-weight: var(--qdl-weight-bold); }
.qdl-guest-pref-note { color: var(--qdl-color-text-primary); }
.qdl-guest-pref-note span:not(.qdl-pref-note-icon) { color: var(--qdl-color-text-secondary); font-size: 12.5px; }
.qdl-guest-pref-note strong { font-size: 13px; font-weight: var(--qdl-weight-bold); }
.qdl-pref-card h3 { color: var(--qdl-color-text-primary); font-size: 16px; font-weight: var(--qdl-weight-bold); }
.qdl-pref-card-head p,
.qdl-pref-toggle small { color: var(--qdl-color-text-secondary); font-size: 12.5px; }
.qdl-pref-toggle strong { color: var(--qdl-color-text-primary); font-size: 13px; font-weight: var(--qdl-weight-bold); }
.qdl-channel-status-copy span { color: var(--qdl-color-text-tertiary); font-size: var(--qdl-font-meta); }
.qdl-channel-status-copy strong { color: var(--qdl-color-text-secondary); font-size: 12px; font-weight: var(--qdl-weight-bold); }
.qdl-time-field span,
.qdl-pref-toggle-inline,
.qdl-pref-save-status { color: var(--qdl-color-text-secondary); font-size: 12px; }
.qdl-time-field input { color: var(--qdl-color-text-primary); font-size: 15px; font-weight: var(--qdl-weight-semibold); }

/* Keep focus contrast aligned with the semantic text palette. */
.qdl-notification-shell :focus-visible,
.qdl-preferences :focus-visible {
    outline-color: var(--qdl-color-focus);
}

/* Narrow screens: keep meaningful text stable; save space from decoration/details first. */
@media (max-width: 680px) {
    .qdl-notification-header .qdl-popover-title-copy strong { font-size: 16.5px; }
            .qdl-notification-header .qdl-popover-list .qdl-notification-content p { font-size: 12.5px; }
    .qdl-notification-header .qdl-popover-list .qdl-notification-meta { font-size: 10.5px; }
}

@media (max-width: 430px) {
    .qdl-notification-header .qdl-popover-title-copy strong { font-size: 16px; }
    .qdl-notification-header .qdl-popover-title-copy > span { font-size: 11px; }
    .qdl-notification-header .qdl-popover-sync { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-shell *,
    .qdl-preferences * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    .qdl-notification-shell,
    .qdl-preferences { color: CanvasText !important; }
}


/* Notification Center — canonical component system.
 * Scope: [qdl_notification_center] only. This is the single maintenance source
 * for Center layout, controls, states, cards, menus, and Detail Drawer.
 * Shared notification-card primitives remain in the global card system below.
 */
.qdl-center {
    position: relative;
    isolation: isolate;
    width: min(1060px, calc(100% - 32px));
    max-width: 1060px;
    margin: 28px auto;
    padding: 28px;
    border: 1px solid rgba(72,84,126,.10);
    border-radius: 30px;
    background: linear-gradient(145deg, #fbfdff, #f8f6ff 60%, #f5fbfd);
    box-shadow: 0 20px 56px rgba(67,72,118,.13);
    overflow: hidden;
    font-family: inherit;
}
.qdl-center::before,
.qdl-center::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}
.qdl-center::before {
    width: 260px;
    height: 260px;
    inset-inline-end: -130px;
    top: -130px;
    background: radial-gradient(circle, rgba(119,87,255,.10), rgba(119,87,255,0) 68%);
}
.qdl-center::after {
    width: 230px;
    height: 230px;
    inset-inline-start: -115px;
    bottom: -125px;
    background: radial-gradient(circle, rgba(39,215,232,.08), rgba(39,215,232,0) 70%);
}

/* Header: identity, actions, and sync form three clear layers. */
.qdl-center-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 30px;
    align-items: center;
    padding: 3px 3px 0;
}
.qdl-center-heading { min-width: 0; }
.qdl-center-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(119,87,255,.07);
    color: var(--qdl-color-brand-primary-strong);
    font-size: 10.5px;
    font-weight: var(--qdl-weight-bold);
    letter-spacing: .12em;
}
.qdl-center-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 9px;
}
.qdl-center-title-row h2 {
    margin: 0;
    color: var(--qdl-color-text-primary);
    font-size: var(--qdl-font-center-title);
    line-height: 1.35;
    font-weight: var(--qdl-weight-extrabold);
    letter-spacing: -.025em;
}
.qdl-center-header p {
    max-width: 660px;
    margin: 7px 0 0;
    color: var(--qdl-color-text-secondary);
    font-size: 13.5px;
    line-height: 1.85;
}
.qdl-center-profile {
    min-width: 310px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
}
.qdl-center-profile-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}
.qdl-center-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.qdl-center-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(119,87,255,.10);
    border-radius: 19px;
    background: linear-gradient(145deg, #fff, #f2edff);
    box-shadow: 0 10px 24px rgba(74,53,125,.10);
}
.qdl-center-avatar img {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
}
.qdl-center-avatar-glow {
    position: absolute;
    inset: -5px;
    border-radius: 23px;
    background: radial-gradient(circle at 30% 25%, rgba(130,36,227,.22), transparent 54%), radial-gradient(circle at 75% 70%, rgba(39,215,232,.18), transparent 56%);
    filter: blur(7px);
    opacity: .75;
    pointer-events: none;
}
.qdl-center-avatar-badge {
    position: absolute;
    z-index: 4;
    inset-inline-end: -7px;
    inset-block-start: -7px;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--qdl-color-brand-primary), #9c74f1);
    color: var(--qdl-color-text-on-brand);
    font-size: 10.5px;
    font-weight: var(--qdl-weight-bold);
    line-height: 1;
    box-shadow: 0 7px 18px rgba(119,87,255,.20);
}
.qdl-center-guest-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(130,36,227,.12);
    border-radius: 11px;
    background: rgba(130,36,227,.07);
    color: var(--qdl-color-brand-quest);
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--qdl-weight-bold);
}
.qdl-center-guest-login-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--qdl-color-brand-cyan);
    box-shadow: 0 0 0 4px rgba(39,215,232,.08);
}
.qdl-center-guest-login:hover { background: rgba(130,36,227,.10); }
.qdl-center-profile .qdl-settings-link,
.qdl-center-profile .qdl-action-btn {
    min-height: 38px;
}
.qdl-center-profile .qdl-settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(72,84,126,.09);
    border-radius: 11px;
    background: rgba(255,255,255,.72);
    color: var(--qdl-color-text-secondary);
    text-decoration: none;
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-semibold);
}
.qdl-center-profile .qdl-action-btn {
    border: 1px solid rgba(119,87,255,.11);
    border-radius: 11px;
    background: rgba(119,87,255,.07);
    color: var(--qdl-color-brand-primary-strong);
    font-size: var(--qdl-font-action);
    font-weight: var(--qdl-weight-semibold);
    cursor: pointer;
}
.qdl-center-profile .qdl-settings-link:hover,
.qdl-center-profile .qdl-action-btn:hover { background: #fff; color: var(--qdl-color-brand-primary-strong); }

.qdl-center :is(a, button, input, select):focus-visible {
    outline: 3px solid var(--qdl-color-focus-ring);
    outline-offset: 3px;
}
.qdl-center-search input:focus-visible { outline: none; }
.qdl-center-feedback {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}
.qdl-center-sync-block {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 34px;
    padding-top: 10px;
    border-top: 1px solid rgba(72,84,126,.07);
}
.qdl-center-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid rgba(39,215,232,.14);
    border-radius: 999px;
    background: rgba(39,215,232,.06);
    color: var(--qdl-color-text-info);
    font-size: var(--qdl-font-meta);
    font-weight: var(--qdl-weight-semibold);
}
 .qdl-center-live .qdl-live-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #23c9a4; display:inline-grid; place-items:center; }
.qdl-center-live .qdl-live-icon svg { width:14px; height:14px; }
.qdl-center-live.is-offline .qdl-live-icon { color: var(--qdl-color-text-danger); }
.qdl-center-live.is-retrying .qdl-live-icon { color: var(--qdl-color-text-warning); }
.qdl-center-updated-text { color: var(--qdl-color-text-tertiary); font-size: var(--qdl-font-meta); }
.qdl-center-updated-text time { color: var(--qdl-color-text-secondary); font-weight: var(--qdl-weight-semibold); }

/* Overview: three measurable signals, followed by a compact helper note. */
.qdl-center-overview {
    display: grid;
    gap: 11px;
    margin-top: 22px;
}
.qdl-center-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.qdl-overview-card {
    position: relative;
    min-width: 0;
    min-height: 112px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 11px;
    row-gap: 1px;
    padding: 15px 16px;
    overflow: hidden;
    border: 1px solid rgba(72,84,126,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 9px 24px rgba(70,82,124,.045);
}
.qdl-overview-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    inset-inline-end: -52px;
    bottom: -58px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(119,87,255,.09), rgba(119,87,255,0) 70%);
    pointer-events: none;
}
.qdl-overview-icon {
    grid-row: 1 / 4;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(119,87,255,.08);
    color: var(--qdl-color-brand-primary-strong);
}
 .qdl-overview-icon svg { width: 19px; height: 19px; }
.qdl-overview-icon-unread { background: rgba(119,87,255,.08); }
.qdl-overview-icon-important { background: rgba(255,217,94,.15); color: var(--qdl-color-text-warning); }
.qdl-overview-icon-week { background: rgba(39,215,232,.09); color: var(--qdl-color-text-info); }
.qdl-overview-label {
    min-width: 0;
    color: var(--qdl-color-text-secondary);
    font-size: var(--qdl-font-meta);
    font-weight: var(--qdl-weight-semibold);
}
.qdl-overview-card strong {
    min-width: 0;
    color: var(--qdl-color-text-primary);
    font-size: 26px;
    line-height: 1.1;
    font-weight: var(--qdl-weight-extrabold);
    font-variant-numeric: tabular-nums;
}
.qdl-overview-card small {
    min-width: 0;
    color: var(--qdl-color-text-tertiary);
    font-size: 11px;
    line-height: 1.55;
}
.qdl-center-summary-note {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 64px;
    padding: 11px 14px;
    border: 1px solid rgba(119,87,255,.08);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(119,87,255,.045), rgba(39,215,232,.035));
}
.qdl-summary-spark {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(119,87,255,.13), rgba(39,215,232,.10));
    box-shadow: inset 0 0 0 1px rgba(119,87,255,.07);
}
.qdl-summary-spark::before,
.qdl-summary-spark::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.qdl-summary-spark::before { width: 7px; height: 7px; top: 7px; inset-inline-start: 8px; background: var(--qdl-color-brand-primary); }
.qdl-summary-spark::after { width: 5px; height: 5px; bottom: 6px; inset-inline-end: 7px; background: var(--qdl-color-accent-pink); }
.qdl-center-summary-note > div { min-width: 0; display: grid; gap: 2px; }
.qdl-center-summary-note strong { color: var(--qdl-color-text-primary); font-size: 12.5px; font-weight: var(--qdl-weight-bold); }
.qdl-center-summary-note span:last-child { color: var(--qdl-color-text-secondary); font-size: var(--qdl-font-meta); line-height: 1.65; }

/* Toolbar: Search is the primary input; view controls form a consistent second row. */
.qdl-center-toolbar-sentinel { height: 1px; margin-top: 14px; }
.qdl-center-toolbar {
    position: sticky;
    top: 10px;
    z-index: 20;
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 1px solid rgba(72,84,126,.09);
    border-radius: 18px;
    background: rgba(247,248,253,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 12px 30px rgba(57,64,104,.055);
}
.qdl-center-toolbar.is-stuck { box-shadow: 0 15px 32px rgba(57,64,104,.09); }
.qdl-center-toolbar-main { display: grid; gap: 9px; width: 100%; }
.qdl-center-search {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding-inline: 14px 8px;
    border: 1px solid rgba(72,84,126,.09);
    border-radius: 15px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 20px rgba(57,64,104,.04);
}
.qdl-center-search:focus-within {
    border-color: rgba(94,73,196,.23);
    box-shadow: 0 0 0 4px var(--qdl-color-focus-ring), 0 11px 24px rgba(57,64,104,.06);
}
 .qdl-center-search-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .82; }
.qdl-center-search input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--qdl-color-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: var(--qdl-weight-semibold);
    line-height: 1.65;
}
.qdl-center-search input::placeholder { color: var(--qdl-color-text-tertiary); opacity: 1; font-weight: var(--qdl-weight-medium); }
.qdl-center-search-clear {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--qdl-color-text-tertiary);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
}
.qdl-center-search-clear:hover { background: var(--qdl-color-surface-muted); color: var(--qdl-color-text-primary); }
.qdl-center-viewbar {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(165px, .9fr) minmax(175px, .95fr) auto;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}
.qdl-primary-filters {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.82);
}
.qdl-primary-filters button,
.qdl-category-toggle,
.qdl-category-panel button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0 12px;
    background: transparent;
    color: var(--qdl-color-text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: var(--qdl-weight-semibold);
    line-height: 1.5;
    cursor: pointer;
}
.qdl-primary-filters button { flex: 1 1 0; min-width: 0; }
 .qdl-primary-filters button { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.qdl-filter-state-icon { width:16px; height:16px; flex:0 0 16px; display:inline-grid; place-items:center; opacity:.78; }
.qdl-filter-state-icon svg { width:16px; height:16px; }
.qdl-primary-filters button.is-active .qdl-filter-state-icon { opacity:1; }
.qdl-primary-filters button:hover,
.qdl-category-toggle:hover,
.qdl-category-panel button:hover,
.qdl-clear-view:hover { color: var(--qdl-color-brand-primary-strong); }
.qdl-primary-filters button.is-active,
.qdl-category-toggle.is-active,
.qdl-category-grid button.is-active {
    color: var(--qdl-color-text-on-brand);
    background: linear-gradient(135deg, var(--qdl-color-brand-primary) 0%, var(--qdl-color-brand-primary-strong) 55%, #5b49c7 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(119,87,255,.14);
    font-weight: var(--qdl-weight-bold);
}
.qdl-primary-filters button span[data-qdl-filter-count],
.qdl-category-panel button span[data-qdl-filter-count],
.qdl-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-inline-start: 5px;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(119,87,255,.08);
    color: var(--qdl-color-brand-primary-strong);
    font-size: 10px;
    font-weight: var(--qdl-weight-bold);
}
.qdl-primary-filters button.is-active span[data-qdl-filter-count],
.qdl-category-panel button.is-active span[data-qdl-filter-count],
.qdl-category-toggle.is-active .qdl-category-count { background: rgba(255,255,255,.18); color: #fff; }
.qdl-category-control { min-width: 0; position: relative; }
.qdl-category-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-color: rgba(72,84,126,.09);
    background: rgba(255,255,255,.84);
}
.qdl-category-chevron { line-height: 1; font-size: 12px; transition: transform .18s ease; }
.qdl-category-toggle[aria-expanded="true"] .qdl-category-chevron { transform: rotate(180deg); }
.qdl-sort-control {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 4px 7px 4px 10px;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.84);
}
.qdl-sort-control-label { color: var(--qdl-color-text-tertiary); font-size: 10.5px; font-weight: var(--qdl-weight-semibold); white-space: nowrap; }
.qdl-sort-control-field { min-width: 0; position: relative; display: flex; align-items: center; }
.qdl-sort-control-field select {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    padding: 0 26px 0 7px;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 9px;
    background: #fff;
    color: var(--qdl-color-text-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: var(--qdl-weight-semibold);
    cursor: pointer;
}
.qdl-clear-view {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.78);
    color: var(--qdl-color-text-secondary);
    font: inherit;
    font-size: 11.5px;
    font-weight: var(--qdl-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}
.qdl-category-panel {
    width: 100%;
    margin-top: 1px;
    padding: 13px;
    border: 1px solid rgba(72,84,126,.09);
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #faf9ff);
    box-shadow: 0 16px 34px rgba(57,64,104,.08);
}
.qdl-category-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 2px 11px; }
.qdl-category-panel-head > div { min-width: 0; display: grid; gap: 2px; }
.qdl-category-panel-kicker { color: var(--qdl-color-brand-primary-strong); font-size: 10px; font-weight: var(--qdl-weight-bold); letter-spacing: .10em; }
.qdl-category-panel-head strong { color: var(--qdl-color-text-primary); font-size: 14px; font-weight: var(--qdl-weight-bold); }
.qdl-category-panel-head button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 9px;
    background: var(--qdl-color-surface-soft);
    color: var(--qdl-color-text-tertiary);
    font-size: 17px;
}
.qdl-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.qdl-category-grid button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    min-height: 48px;
    padding-inline: 11px;
    text-align: start;
    border-color: rgba(72,84,126,.08);
    background: linear-gradient(145deg, #fff, #fbfbff);
}
.qdl-category-grid button:hover { background: #fff; }
.qdl-category-grid button.is-active { box-shadow: 0 8px 18px rgba(119,87,255,.12); }
.qdl-category-grid button span[data-qdl-filter-count] { margin-inline-start: auto; }
.qdl-category-icon { width: 20px; height: 20px; flex: 0 0 20px; position: relative; display: inline-grid; place-items: center; color: var(--qdl-color-brand-primary-strong); }
.qdl-category-icon svg { width: 19px; height: 19px; }
.qdl-category-grid button.is-active .qdl-category-icon { color: #fff; }
.qdl-active-view {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding-top: 1px;
}
.qdl-active-view-title { color: var(--qdl-color-text-tertiary); font-size: 10.5px; font-weight: var(--qdl-weight-semibold); }
.qdl-view-chip {
    max-width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 1px solid rgba(94,73,196,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: var(--qdl-color-text-secondary);
    font: inherit;
    font-size: 10.5px;
    font-weight: var(--qdl-weight-semibold);
    cursor: pointer;
}
.qdl-view-chip:hover { background: #fff; color: var(--qdl-color-brand-primary-strong); }
 .qdl-view-chip-icon { width: 15px; height: 15px; flex: 0 0 15px; position: relative; color: var(--qdl-color-brand-primary-strong); }
 .qdl-view-chip-icon::before { content:none; }
.qdl-center-updated-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--qdl-color-brand-cyan); box-shadow: 0 0 0 4px rgba(39,215,232,.08); }
.qdl-center-connectivity {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,174,68,.15);
    border-radius: 13px;
    background: rgba(255,174,68,.06);
    color: var(--qdl-color-text-warning);
    font-size: 12px;
    line-height: 1.65;
}
.qdl-connectivity-icon { width: 20px; height: 20px; flex: 0 0 20px; display:grid; place-items:center; color: var(--qdl-color-text-danger); }
.qdl-connectivity-icon svg { width:20px; height:20px; }
.qdl-connectivity-retry {
    margin-inline-start: auto;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(94,73,196,.12);
    border-radius: 9px;
    background: #fff;
    color: var(--qdl-color-brand-primary-strong);
    font: inherit;
    font-size: 11.5px;
    font-weight: var(--qdl-weight-bold);
    cursor: pointer;
    white-space: nowrap;
}
.qdl-center-list { position: relative; min-height: 160px; display: grid; gap: 10px; }
.qdl-day-group { display: grid; gap: 8px; }
.qdl-day-group + .qdl-day-group { margin-top: 18px; }
.qdl-day-group-head {
    position: sticky;
    top: 76px;
    z-index: 4;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(72,84,126,.07);
    border-radius: 999px;
    background: rgba(247,248,253,.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--qdl-color-text-secondary);
    font-size: var(--qdl-font-meta);
    font-weight: var(--qdl-weight-semibold);
    box-shadow: 0 6px 16px rgba(55,72,110,.035);
}
.qdl-day-group-head i { width: 22px; height: 1px; flex: 0 0 22px; background: linear-gradient(90deg, rgba(94,73,196,.22), transparent); }
.qdl-day-group-list { display: grid; gap: 10px; }
.qdl-center .qdl-notification-item {
    min-height: 136px;
    height: auto;
    max-height: none;
    padding: 16px 17px;
    border-radius: 20px;
    background: rgba(255,255,255,.95);
    border-color: rgba(72,84,126,.09);
    box-shadow: 0 10px 26px rgba(61,68,107,.045);
    align-self: start;
}
.qdl-center .qdl-notification-item.is-unread { background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,246,255,.98)); }
.qdl-center .qdl-notification-item:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(61,68,107,.07); }
.qdl-center .qdl-notification-item:active { transform: none; }
.qdl-center .qdl-notification-item.has-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 14px;
}
.qdl-center .qdl-notification-item.has-image .qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 116px;
    max-height: 250px;
    border-radius: 18px;
}
.qdl-center .qdl-notification-item.has-image .qdl-notification-content {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}
.qdl-center .qdl-notification-title-row strong { font-size: 16px; line-height: 1.55; }
.qdl-center .qdl-notification-content p { max-width: 78ch; font-size: 13px; line-height: 1.85; }
.qdl-center .qdl-notification-meta { min-height: 38px; margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.qdl-center .qdl-notification-time { min-width: 0; }
.qdl-center .qdl-notification-action-bar { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-inline-start: auto; }
.qdl-center .qdl-notification-action,
.qdl-center .qdl-notification-expand { min-height: 36px; font-size: 12px; }
.qdl-center .qdl-notification-action { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.4; }
.qdl-center .qdl-notification-more-wrap { position: relative; inset: auto; }
.qdl-center .qdl-notification-item-shell { position: relative; }
.qdl-center .qdl-notification-item-shell.qdl-menu-open { z-index: 30; }
.qdl-center .qdl-notification-item-shell.qdl-menu-open .qdl-notification-item { position: relative; z-index: 31; }
.qdl-center .qdl-notification-menu { z-index: 35; min-width: 180px; }
.qdl-center .qdl-notification-menu button { min-height: 36px; font-size: 12px; }
.qdl-center .qdl-notification-menu [data-qdl-menu-delete] { color: var(--qdl-color-text-danger); }
.qdl-center .qdl-notification-menu [data-qdl-menu-delete]:hover { color: #8f3e59; background: rgba(255,92,168,.06); }
.qdl-notification-item.is-removing { opacity: 0; transform: translateY(5px) scale(.99); }

/* Skeleton / empty / error states use the same surface hierarchy as the feed. */
.qdl-center-skeleton {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    gap: 14px;
    min-height: 126px;
    padding: 16px;
    border: 1px solid rgba(72,84,126,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    overflow: hidden;
    position: relative;
}
.qdl-center-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    transform: translateX(100%);
    animation: qdlCenterSkeleton 1.15s ease-in-out infinite;
}
.qdl-skeleton-media { width: 64px; height: 64px; border-radius: 17px; background: #edf0f6; }
.qdl-skeleton-copy { display: grid; gap: 9px; align-content: center; }
.qdl-skeleton-copy i,
.qdl-skeleton-copy b,
.qdl-skeleton-copy em { display: block; height: 9px; border-radius: 999px; background: #edf0f6; }
.qdl-skeleton-copy i { width: 30%; }
.qdl-skeleton-copy b { width: 78%; }
.qdl-skeleton-copy em { width: 55%; }
.qdl-center-state {
    min-height: 230px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 28px 22px;
    text-align: center;
    border: 1px solid rgba(72,84,126,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 9px 24px rgba(70,82,124,.04);
}
.qdl-center-state strong { max-width: 520px; color: var(--qdl-color-text-primary); font-size: 16px; line-height: 1.55; font-weight: var(--qdl-weight-bold); }
.qdl-center-state > span { max-width: 540px; color: var(--qdl-color-text-secondary); font-size: 13px; line-height: 1.85; }
.qdl-state-visual,
.qdl-smart-empty-visual {
    position: relative;
    width: 88px;
    height: 88px;
    margin-bottom: 2px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 38%, rgba(119,87,255,.14), rgba(39,215,232,.055) 46%, transparent 74%);
    overflow: visible;
}
.qdl-state-visual::before,
.qdl-smart-empty-visual span {
    content:"";
    position:absolute;
    inset: 8px;
    border: 1px solid rgba(119,87,255,.12);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.46), rgba(248,247,255,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 28px rgba(83,72,132,.055);
}
.qdl-state-visual::after,
.qdl-state-visual i,
.qdl-state-visual b,
.qdl-smart-empty-visual i,
.qdl-smart-empty-visual b {
    position: absolute;
    content: "";
    border-radius: 50%;
    pointer-events: none;
}
.qdl-state-visual::after {
    width: 7px;
    height: 7px;
    inset-inline-end: 8px;
    top: 12px;
    background: var(--qdl-color-brand-cyan);
    box-shadow: 0 0 0 5px rgba(39,215,232,.08);
}
.qdl-state-visual i {
    width: 5px;
    height: 5px;
    inset-inline-start: 8px;
    bottom: 15px;
    background: var(--qdl-color-accent-pink);
    opacity: .62;
}
.qdl-state-visual b {
    width: 4px;
    height: 4px;
    inset-inline-end: 20px;
    bottom: 10px;
    background: var(--qdl-color-brand-primary);
    opacity: .56;
}
.qdl-state-visual-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    color: var(--qdl-color-brand-primary-strong);
    filter: drop-shadow(0 7px 13px rgba(84,72,166,.09));
}
.qdl-state-visual-icon svg {
    width: 100%;
    height: 100%;
}
.qdl-state-visual-search .qdl-state-visual-icon { color: var(--qdl-color-brand-primary-strong); }
.qdl-state-visual-filter .qdl-state-visual-icon { color: var(--qdl-color-brand-primary-strong); }
.qdl-state-visual-general .qdl-state-visual-icon { color: var(--qdl-color-brand-primary-strong); }
.qdl-state-visual-error { background: radial-gradient(circle at 50% 38%, rgba(255,174,68,.14), rgba(255,92,168,.055) 48%, transparent 75%); }
.qdl-state-visual-error::after { background: var(--qdl-color-accent-pink); box-shadow: 0 0 0 5px rgba(255,92,168,.08); }
.qdl-state-visual-error .qdl-state-visual-icon { color: var(--qdl-color-text-danger); }
.qdl-state-visual-error i { background: #ffae44; }
.qdl-state-visual-error b { background: var(--qdl-color-text-danger); }
.qdl-state-offline .qdl-state-visual-icon { color: var(--qdl-color-text-warning); }
.qdl-state-error strong { max-width: 560px; }
.qdl-state-retry {
    min-height: 40px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px solid rgba(94,73,196,.13);
    border-radius: 10px;
    background: #fff;
    color: var(--qdl-color-brand-primary-strong);
    font: inherit;
    font-size: 11.5px;
    font-weight: var(--qdl-weight-bold);
    cursor: pointer;
}
/* Detail Drawer */
.qdl-center-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100100;
    background: rgba(28,34,52,.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.qdl-center-detail {
    --qdl-detail-accent: #6D28D9;
    --qdl-detail-deep: #5B21B6;
    --qdl-detail-tint: #F5F0FF;
    --qdl-detail-line: #DDD6FE;
    position: fixed;
    z-index: 100101;
    inset-block: 16px;
    inset-inline-end: 16px;
    box-sizing: border-box;
    width: min(480px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid var(--qdl-detail-line);
    border-radius: 24px;
    background: linear-gradient(to left, var(--qdl-detail-tint) 0%, #FFFFFF 76%);
    box-shadow: 0 28px 82px rgba(50,50,90,.20);
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(.985);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
    outline: none;
}
.qdl-center-detail[data-event-category="download"] {
    --qdl-detail-accent: #3F6212;
    --qdl-detail-deep: #365314;
    --qdl-detail-tint: #F1F8E9;
    --qdl-detail-line: #DCE9C8;
}
.qdl-center-detail[data-event-variant="purchase-processing"] { --qdl-detail-accent:#4F46E5; --qdl-detail-deep:#3730A3; --qdl-detail-tint:#F1F0FF; --qdl-detail-line:#DCD9FF; }
.qdl-center-detail[data-event-variant="purchase-completed"] { --qdl-detail-accent:#15803D; --qdl-detail-deep:#166534; --qdl-detail-tint:#EAF8EE; --qdl-detail-line:#C5E8CF; }
.qdl-center-detail[data-event-variant="purchase-on-hold"] { --qdl-detail-accent:#7C3AED; --qdl-detail-deep:#6D28D9; --qdl-detail-tint:#F5EAFF; --qdl-detail-line:#E3D2FF; }
.qdl-center-detail[data-event-variant="download-access"] { --qdl-detail-accent:#0369A1; --qdl-detail-deep:#075985; --qdl-detail-tint:#EAF6FC; --qdl-detail-line:#C9EAF8; }
.qdl-center-detail[data-event-variant="download-remaining"] { --qdl-detail-accent:#C2410C; --qdl-detail-deep:#9A3412; --qdl-detail-tint:#FFF0E8; --qdl-detail-line:#FFD7C3; }
.qdl-center-detail[data-event-variant="download-limit-reached"] { --qdl-detail-accent:#BE123C; --qdl-detail-deep:#9F1239; --qdl-detail-tint:#FDEBF0; --qdl-detail-line:#F9C8D5; }
.qdl-center-detail[data-event-variant="download-expiry-warning"] { --qdl-detail-accent:#A16207; --qdl-detail-deep:#854D0E; --qdl-detail-tint:#FFF6E3; --qdl-detail-line:#F7E0AD; }
.qdl-center-detail[data-event-variant="download-expired"] { --qdl-detail-accent:#334155; --qdl-detail-deep:#1E293B; --qdl-detail-tint:#EDF0F4; --qdl-detail-line:#D2D9E2; }
.qdl-center-detail.is-open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
/* Lock document-level horizontal and vertical scroll while the detail dialog is open. */
html.qdl-detail-lock,
body.qdl-detail-lock { overflow:hidden !important; overscroll-behavior:none !important; }
.qdl-center-detail > *,
.qdl-center-detail .qdl-detail-head,
.qdl-center-detail .qdl-detail-head-copy,
.qdl-center-detail .qdl-detail-source,
.qdl-center-detail .qdl-detail-media,
.qdl-center-detail .qdl-detail-content,
.qdl-center-detail .qdl-detail-meta,
.qdl-center-detail .qdl-detail-action,
.qdl-center-detail .qdl-detail-media-frame { box-sizing:border-box; min-width:0; max-width:100%; }
.qdl-center-detail.is-closing { opacity:0; transform:translateX(18px) scale(.985); }
.qdl-detail-swipe-handle { display:none; }
.qdl-detail-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qdl-detail-head-copy { min-width:0; display:grid; gap:2px; }
.qdl-detail-kicker { color:var(--qdl-color-text-tertiary); font-size:var(--qdl-font-meta); font-weight:var(--qdl-weight-semibold); letter-spacing:.08em; }
.qdl-detail-head-status { color:var(--qdl-color-text-info); font-size:var(--qdl-font-chip); font-weight:var(--qdl-weight-bold); }
.qdl-detail-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(72,84,126,.09);
    border-radius:10px;
    background:#fff;
    color:var(--qdl-color-text-tertiary);
    font:inherit;
    font-size:18px;
    cursor:pointer;
}
.qdl-detail-source { display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px; width:fit-content; max-width:100%; min-width:0; box-sizing:border-box; padding:6px 9px; border:1px solid var(--qdl-detail-line); border-radius:14px; background:linear-gradient(to left,var(--qdl-detail-tint),#fff 92%); color:var(--qdl-detail-deep); font-size:11.5px; font-weight:var(--qdl-weight-bold); }
.qdl-detail-source-icon { display:inline-grid; place-items:center; flex:0 0 20px; width:20px; height:20px; min-width:20px; min-height:20px; overflow:hidden; border-radius:6px; background:var(--qdl-detail-accent); color:#fff; line-height:1; }
.qdl-detail-source-icon svg { display:block; width:100% !important; height:100% !important; max-width:20px; max-height:20px; overflow:hidden; }
.qdl-detail-source-icon svg * { vector-effect:non-scaling-stroke; }
.qdl-detail-source-label { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.qdl-detail-category-chip { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:22px; padding:2px 8px; border-radius:7px; border:1px solid var(--qdl-detail-line); background:var(--qdl-detail-tint); color:var(--qdl-detail-deep); font-size:10.5px; font-weight:800; line-height:1.4; }
.qdl-detail-source-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--qdl-detail-accent); box-shadow:0 0 0 4px var(--qdl-detail-tint); }
.qdl-detail-media { width:100%; max-width:100%; min-width:0; box-sizing:border-box; aspect-ratio:16/9; min-height:170px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--qdl-detail-line); border-radius:17px; background:linear-gradient(110deg,#fff 0%,var(--qdl-detail-tint) 100%); }
.qdl-detail-media img { width:100%; max-width:100%; height:100%; min-width:0; box-sizing:border-box; object-fit:contain; display:block; }
.qdl-detail-content { min-width:0; display:grid; gap:10px; }
.qdl-center-detail h3 { min-width:0; max-width:100%; margin:0; padding-inline-start:10px; border-inline-start:3px solid var(--qdl-detail-accent); color:var(--qdl-color-text-primary); font-size:var(--qdl-font-detail-title); line-height:1.58; font-weight:var(--qdl-weight-extrabold); overflow-wrap:anywhere; }
.qdl-detail-message { min-width:0; max-width:100%; color:var(--qdl-color-text-secondary); font-size:13.5px; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; }
.qdl-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; max-width:100%; gap:8px; }
.qdl-detail-meta span { display:grid; gap:3px; min-width:0; max-width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--qdl-detail-line); border-radius:11px; background:linear-gradient(to left,var(--qdl-detail-tint),#fff 88%); color:var(--qdl-color-text-tertiary); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.qdl-detail-meta b { min-width:0; max-width:100%; color:var(--qdl-color-text-secondary); font-size:11.5px; font-weight:var(--qdl-weight-semibold); overflow-wrap:anywhere; }
.qdl-detail-action { width:100%; max-width:100%; min-width:0; min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; margin-top:auto; padding:8px 15px; border:1px solid var(--qdl-detail-accent); border-radius:12px; background:linear-gradient(135deg,var(--qdl-detail-deep) 0%,var(--qdl-detail-accent) 100%); color:#fff !important; text-align:center; text-decoration:none; font-size:12.5px; font-weight:var(--qdl-weight-bold); line-height:1.6; white-space:normal; overflow-wrap:anywhere; box-shadow:0 11px 24px color-mix(in srgb,var(--qdl-detail-accent) 18%,transparent); }
.qdl-detail-action:hover { transform:none; }
.qdl-center-detail:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--qdl-detail-accent) 45%,transparent), 0 28px 82px rgba(50,50,90,.20); }

@keyframes qdlCenterSkeleton { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

@media (max-width: 980px) {
    .qdl-center-header { grid-template-columns: 1fr; gap: 15px; }
    .qdl-center-profile { min-width: 0; justify-content: flex-start; }
    .qdl-center-overview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .qdl-center-viewbar { grid-template-columns: 1fr 1fr; }
    .qdl-primary-filters { grid-column: 1 / -1; }
    .qdl-category-control,
    .qdl-sort-control,
    .qdl-clear-view { min-width: 0; }
}

@media (max-width: 720px) {
    .qdl-center { width: calc(100% - 16px); margin: 10px auto; padding: 17px; border-radius: 23px; }
    .qdl-center-title-row h2 { font-size: 25px; }
    .qdl-center-header p { font-size: 13px; }
    .qdl-center-profile { align-items: flex-start; flex-wrap: wrap; }
    .qdl-center-profile-main { width: 100%; justify-content: flex-start; }
    .qdl-center-actions { flex: 1 1 auto; justify-content: flex-start; }
    .qdl-center-sync-block { padding-top: 9px; }
    .qdl-center-overview-grid { grid-template-columns: 1fr 1fr; }
    .qdl-overview-week { grid-column: 1 / -1; }
    .qdl-center-toolbar { top: 6px; }
    .qdl-center-viewbar { grid-template-columns: 1fr; }
    .qdl-primary-filters { grid-column: auto; }
    .qdl-category-control,
    .qdl-sort-control,
    .qdl-clear-view { width: 100%; }
    .qdl-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .qdl-center .qdl-notification-item { min-height: 122px; grid-template-columns: 56px minmax(0,1fr); column-gap: 11px; padding: 13px; border-radius: 18px; }
    .qdl-center .qdl-notification-item.has-image {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 10px;
    }
    .qdl-center .qdl-notification-item.has-image .qdl-notification-thumb {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 112px;
        max-height: 210px;
        border-radius: 15px;
    }
    .qdl-center .qdl-notification-title-row strong { font-size: 15px; }
    .qdl-center .qdl-notification-content p { font-size: 12.5px; }
    .qdl-center .qdl-notification-meta { min-height: 35px; }
    .qdl-center .qdl-notification-action { max-width: 55vw; }
    .qdl-center-detail { inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); width: auto; max-width: none; max-height: min(88vh, 760px); padding: 14px; overflow-x: hidden; overflow-y: auto; border-radius: 23px; transform: translateY(18px) scale(.985); }
    .qdl-center-detail.is-open { transform:none; }
    .qdl-detail-swipe-handle { display:block; width:42px; height:4px; margin:-2px auto 4px; border-radius:999px; background:#d8ddea; }
    .qdl-detail-media { min-height: 150px; max-height: 42vh; }
    .qdl-detail-meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
    .qdl-center { padding: 14px; }
    .qdl-center-kicker { font-size: 10px; }
    .qdl-center-title-row { margin-top: 7px; }
    .qdl-center-title-row h2 { font-size: 23px; }
    .qdl-center-profile-main { flex-wrap: wrap; }
    .qdl-center-actions { width: 100%; }
    .qdl-center-profile .qdl-settings-link,
    .qdl-center-profile .qdl-action-btn { flex: 1 1 0; min-width: 0; }
    .qdl-center-sync-block { flex-wrap: wrap; gap: 7px 10px; }
    .qdl-center-overview-grid { gap: 8px; }
    .qdl-overview-card { min-height: 102px; padding: 12px; }
    .qdl-overview-icon { width: 31px; height: 31px; }
    .qdl-overview-card strong { font-size: 23px; }
    .qdl-overview-card small { font-size: 10.5px; }
    .qdl-center-summary-note { min-height: 58px; padding: 10px 11px; }
    .qdl-center-summary-note span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .qdl-center-search { min-height: 50px; }
    .qdl-center-search input { font-size: 13.5px; }
    .qdl-primary-filters button { min-height: 43px; font-size: 12px; }
    .qdl-category-grid { grid-template-columns: 1fr; }
    .qdl-center .qdl-notification-item { grid-template-columns: 50px minmax(0,1fr); min-height: 116px; padding: 12px; border-radius: 16px; }
    .qdl-center .qdl-notification-item.has-image {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 9px;
    }
    .qdl-center .qdl-notification-item.has-image .qdl-notification-thumb {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 108px;
        max-height: 188px;
        border-radius: 14px;
    }
    .qdl-center .qdl-notification-title-row strong { font-size: 14.5px; }
    .qdl-center .qdl-notification-content p { font-size: 12px; }
    .qdl-center .qdl-notification-action-bar { width: 100%; justify-content: flex-start; }
    .qdl-center .qdl-notification-action { max-width: 100%; }
    .qdl-detail-meta { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .qdl-center { width: calc(100% - 12px); padding: 12px; border-radius: 21px; }
    .qdl-center-title-row h2 { font-size: 22px; }
    .qdl-center-search input { font-size: 13px; }
    .qdl-overview-label { font-size: 10.5px; }
    .qdl-overview-card strong { font-size: 22px; }
    .qdl-center-summary-note { display: none; }
    .qdl-center .qdl-notification-item { grid-template-columns: 46px minmax(0,1fr); column-gap: 8px; }
    .qdl-center .qdl-notification-item.has-image {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 8px;
    }
    .qdl-center .qdl-notification-item.has-image .qdl-notification-thumb {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 104px;
        max-height: 168px;
        border-radius: 13px;
    }
    .qdl-center .qdl-notification-title-row strong { font-size: 14px; }
    .qdl-center .qdl-notification-content p { font-size: 12px; }
    .qdl-center .qdl-notification-meta { min-height: 33px; font-size: 10.5px; }
    .qdl-center .qdl-notification-action { min-height: 34px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-center-search,
    .qdl-center .qdl-notification-item,
    .qdl-center-detail,
    .qdl-load-more,
    .qdl-center-skeleton::after {
        transition: none !important;
        animation: none !important;
    }
    .qdl-center .qdl-notification-item:hover { transform: none; }
}

@media (forced-colors: active) {
    .qdl-center,
    .qdl-center-toolbar,
    .qdl-center-search,
    .qdl-overview-card,
    .qdl-center-summary-note,
    .qdl-center-state,
    .qdl-center-detail,
    .qdl-center-detail-backdrop,
    .qdl-primary-filters,
    .qdl-category-panel,
    .qdl-sort-control,
    .qdl-view-chip { forced-color-adjust: auto; }
    .qdl-center-live,
    .qdl-center-guest-login,
    .qdl-center-profile .qdl-settings-link,
    .qdl-center-profile .qdl-action-btn,
    .qdl-primary-filters button.is-active,
    .qdl-category-toggle.is-active,
    .qdl-category-grid button.is-active { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow:none; }
    .qdl-center :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
    .qdl-center-detail {
        color: CanvasText !important;
        background: Canvas !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
    }
    .qdl-center-detail .qdl-detail-source,
    .qdl-center-detail .qdl-detail-category-chip,
    .qdl-center-detail .qdl-detail-meta span,
    .qdl-center-detail .qdl-detail-media,
    .qdl-center-detail .qdl-detail-action {
        color: CanvasText !important;
        background: Canvas !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
        forced-color-adjust: auto;
    }
    .qdl-center-detail .qdl-detail-source-icon { color: Canvas !important; background: CanvasText !important; }
    .qdl-center-detail h3 { border-inline-start-color: Highlight !important; }
}

/* v4.38.34 — Stage 3 canonical Notification Card system.
 * One visual language for Header Popover + Notification Center cards.
 * Keep the existing markup, delivery logic, menu positioning, and media behavior intact.
 */
.qdl-notification-item {
    --qdl-card-radius: 18px;
    --qdl-card-border: rgba(74, 87, 123, .105);
    --qdl-card-shadow: 0 8px 24px rgba(55, 66, 105, .055);
    --qdl-card-shadow-hover: 0 14px 30px rgba(55, 66, 105, .09);
    --qdl-card-surface: rgba(255,255,255,.985);
    --qdl-card-surface-unread: linear-gradient(135deg, rgba(255,255,255,.995), rgba(248,246,255,.98));
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
    min-height: 124px;
    padding: 14px 15px;
    border: 1px solid var(--qdl-card-border);
    border-radius: var(--qdl-card-radius);
    background: var(--qdl-card-surface);
    box-shadow: var(--qdl-card-shadow);
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s var(--qdl-ease-premium, cubic-bezier(.2,.8,.2,1)), box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.qdl-notification-item::before {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block: 12px;
    width: 3px;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(180deg, var(--qdl-template-start), var(--qdl-template-end));
    opacity: 0;
    transition: opacity .18s ease;
}
.qdl-notification-item.is-unread {
    background: var(--qdl-card-surface-unread);
    border-color: color-mix(in srgb, var(--qdl-template-start) 15%, var(--qdl-card-border));
    box-shadow: 0 11px 27px color-mix(in srgb, var(--qdl-template-start) 5%, rgba(55,66,105,.055));
}
.qdl-notification-item.is-unread::before { opacity: .92; }
@media (hover:hover) {
    .qdl-notification-item:hover {
        transform: translateY(-2px);
        background: #fff;
        border-color: color-mix(in srgb, var(--qdl-template-start) 18%, var(--qdl-card-border));
        box-shadow: var(--qdl-card-shadow-hover);
    }
}
.qdl-notification-item:active { transform: translateY(-1px); }
.qdl-notification-item:focus-visible {
    outline: 3px solid var(--qdl-focus-solid, #694cff);
    outline-offset: 2px;
}
.qdl-notification-accent { display: none !important; }

/* Media/icon column: artwork stays intact instead of being cropped into tiny thumbnails. */
.qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--qdl-template-start) 11%, #fff),
        color-mix(in srgb, var(--qdl-template-end) 9%, #fff)
    );
    border: 1px solid color-mix(in srgb, var(--qdl-template-start) 8%, rgba(74,87,123,.05));
    box-shadow: 0 7px 17px rgba(65,78,120,.09), inset 0 1px 0 rgba(255,255,255,.9);
}
.qdl-notification-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 48%);
}
.qdl-notification-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 4px;
}
.qdl-notification-item.has-image { grid-template-columns: 66px minmax(0,1fr); }
.qdl-notification-item.has-image .qdl-notification-thumb { width: 66px; height: 66px; min-width: 66px; border-radius: 17px; }
.qdl-notification-icon {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    align-self: end;
    justify-self: end;
    margin: 0 1px 1px 0;
    color: var(--qdl-template-start);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(74,87,123,.08);
    box-shadow: 0 6px 13px rgba(57,68,106,.11), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(7px);
}
.qdl-notification-icon svg { width: 16px; height: 16px; }
.qdl-notification-item.no-image .qdl-notification-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    margin: 0;
    align-self: start;
    justify-self: center;
    border-radius: 15px;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--qdl-template-start) 11%, #fff),
        color-mix(in srgb, var(--qdl-template-end) 10%, #fff)
    );
    box-shadow: 0 8px 18px color-mix(in srgb, var(--qdl-template-start) 10%, rgba(57,68,106,.10));
}

/* Content owns the full width; no artificial end padding is reserved for the menu. */
.qdl-notification-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding-inline-end: 0 !important;
}
.qdl-notification-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 24px;
    margin-bottom: 7px;
}
.qdl-notification-topline-spacer { flex: 1 1 auto; min-width: 4px; }
.qdl-notification-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: min(100%, 220px);
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1px solid rgba(74,87,123,.08);
    background: rgba(119,87,255,.055);
    color: var(--qdl-color-text-accent);
    font-size: var(--qdl-font-chip, 10.5px);
    line-height: 1.35;
    font-weight: var(--qdl-weight-semibold, 600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qdl-source-icon { width: 16px; height: 16px; display: inline-grid; place-items: center; flex: 0 0 16px; }
.qdl-source-icon svg { width: 11px; height: 11px; }
.qdl-notification-source > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.qdl-notification-priority,
.qdl-notification-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: var(--qdl-font-chip, 10.5px);
    line-height: 1.35;
    font-weight: var(--qdl-weight-semibold, 600);
}
.qdl-notification-priority { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 15%, transparent); }
.qdl-notification-priority i,
.qdl-notification-state-unread > i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}
.qdl-notification-state {
    padding-inline: 2px;
    color: var(--qdl-color-text-tertiary);
    font-weight: var(--qdl-weight-medium, 500);
}
.qdl-notification-state-unread { color: var(--qdl-color-text-danger); }
.qdl-notification-state-unread > i { box-shadow: 0 0 0 4px rgba(255,92,168,.09); }
.qdl-notification-state-read { color: var(--qdl-color-text-tertiary); }
.qdl-notification-state-read > i {
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 6px;
    background: rgba(92,113,145,.065);
    border: 1px solid rgba(92,113,145,.11);
}

.qdl-notification-title-row { display: flex; align-items: flex-start; min-width: 0; }
.qdl-notification-title-row strong {
    display: block;
    overflow: visible;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--qdl-color-text-primary);
    font-size: var(--qdl-font-card-title, 15px);
    line-height: 1.55;
    font-weight: var(--qdl-weight-bold, 700);
    letter-spacing: -.008em;
    text-wrap: balance;
}
.qdl-notification-content p {
    margin: 6px 0 10px;
    color: var(--qdl-color-text-secondary);
    font-size: 12.75px;
    line-height: 1.82;
    font-weight: var(--qdl-weight-regular, 400);
    display: block;
    overflow: visible;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Stable bottom row: timestamp first, actions second; controls never float over title text. */
.qdl-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-width: 0;
    min-height: 34px;
    color: var(--qdl-color-text-tertiary);
    font-size: var(--qdl-font-meta, 10.5px);
    line-height: 1.5;
}
.qdl-notification-time {
    min-width: 0;
    color: var(--qdl-color-text-tertiary);
    font-size: var(--qdl-font-meta, 10.5px);
    font-weight: var(--qdl-weight-medium, 500);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.qdl-notification-action-bar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin-inline-start: auto;
    flex: 0 1 auto;
    flex-wrap: wrap;
}
.qdl-notification-action,
.qdl-notification-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(119,87,255,.105);
    font-size: var(--qdl-font-action, 11.5px);
    font-weight: var(--qdl-weight-semibold, 600);
    line-height: 1.4;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.qdl-notification-action {
    color: var(--qdl-color-brand-primary-strong);
    background: linear-gradient(135deg, rgba(119,87,255,.08), rgba(39,215,232,.038));
}
.qdl-notification-expand {
    color: var(--qdl-color-text-secondary);
    background: rgba(247,248,251,.82);
    border-color: rgba(74,87,123,.08);
    cursor: pointer;
}
@media (hover:hover) {
    .qdl-notification-action:hover,
    .qdl-notification-expand:hover {
        transform: translateY(-1px);
        text-decoration: none;
        background: #fff;
        border-color: rgba(119,87,255,.16);
        box-shadow: 0 7px 15px rgba(61,70,110,.055);
    }
}
.qdl-notification-more {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(74,87,123,.08);
    border-radius: 10px;
    background: rgba(248,249,252,.9);
    color: var(--qdl-color-text-tertiary);
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
@media (hover:hover) {
    .qdl-notification-more:hover,
    .qdl-notification-more[aria-expanded="true"] {
        transform: translateY(-1px);
        background: #fff;
        border-color: rgba(119,87,255,.15);
        color: var(--qdl-color-brand-primary-strong);
        box-shadow: 0 7px 14px rgba(61,70,110,.055);
    }
}
.qdl-notification-more:focus-visible,
.qdl-notification-action:focus-visible,
.qdl-notification-expand:focus-visible {
    outline: 3px solid var(--qdl-focus-solid, #694cff);
    outline-offset: 2px;
}

/* Expanded details keep the same hierarchy as the card instead of looking like a second card. */
.qdl-notification-details {
    margin-top: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(74,87,123,.075);
    border-radius: 13px;
    background: rgba(248,249,253,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.qdl-notification-details-message {
    color: var(--qdl-color-text-secondary);
    font-size: 12.5px;
    line-height: 1.8;
}
.qdl-notification-details-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin-top: 10px;
}
.qdl-notification-details-grid span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.qdl-notification-details-grid b {
    color: var(--qdl-color-text-tertiary);
    font-size: 10.5px;
    font-weight: var(--qdl-weight-medium, 500);
}
.qdl-notification-details-grid em {
    color: var(--qdl-color-text-primary);
    font-size: 11.5px;
    font-style: normal;
    font-weight: var(--qdl-weight-semibold, 600);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header popover: compact preview without sacrificing readable text. */
.qdl-notification-header .qdl-popover-list .qdl-notification-item {
    min-height: 112px;
    grid-template-columns: 50px minmax(0,1fr);
    column-gap: 11px;
    padding: 12px 12px;
    border-radius: 16px;
    box-shadow: 0 7px 18px rgba(55,66,105,.042);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 10px;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 104px;
    max-height: 220px;
    border-radius: 16px;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-content {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.no-image .qdl-notification-icon { width: 44px; height: 44px; }
.qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong { font-size: 15px; line-height: 1.52; }
.qdl-notification-header .qdl-popover-list .qdl-notification-content p { font-size: 12.25px; line-height: 1.72; margin: 5px 0 8px; }
.qdl-notification-header .qdl-popover-list .qdl-notification-meta { min-height: 31px; font-size: 10.5px; }
.qdl-notification-header .qdl-popover-list .qdl-notification-action { min-height: 31px; padding: 5px 9px; font-size: 11.5px; }
.qdl-notification-header .qdl-popover-list .qdl-notification-state { min-height: 22px; font-size: 10.5px; }

/* Hero/image-focus keeps artwork prominent while preserving the same content hierarchy. */
.qdl-notification-item.qdl-layout-hero,
.qdl-notification-item.qdl-layout-image-focus {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto;
    gap: 11px;
    padding: 12px 12px 14px;
    border-radius: 21px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-thumb,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 110px;
    max-height: 200px;
    aspect-ratio: 16 / 7;
    border-radius: 17px;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-icon,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-icon {
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    margin: 0 8px 8px 0;
}
.qdl-notification-item.qdl-layout-hero .qdl-notification-content,
.qdl-notification-item.qdl-layout-image-focus .qdl-notification-content {
    grid-column: 1;
    grid-row: 2;
    padding-inline-end: 0 !important;
}
.qdl-notification-item.qdl-layout-hero.no-image .qdl-notification-content,
.qdl-notification-item.qdl-layout-image-focus.no-image .qdl-notification-content {
    grid-row: 1 / span 2;
    grid-column: 1;
    padding-inline-start: 58px;
}

@media (max-width: 680px) {
    .qdl-notification-item {
        min-height: 118px;
        grid-template-columns: 50px minmax(0,1fr);
        column-gap: 11px;
        padding: 13px;
        border-radius: 17px;
    }
    .qdl-notification-item.has-image { grid-template-columns: 58px minmax(0,1fr); }
    .qdl-notification-item.has-image .qdl-notification-thumb { width: 58px; height: 58px; min-width: 58px; border-radius: 15px; }
    .qdl-notification-item.no-image .qdl-notification-icon { width: 45px; height: 45px; border-radius: 14px; }
    .qdl-notification-topline { gap: 6px; }
    .qdl-notification-source { max-width: min(56%, 190px); }
    .qdl-notification-content p { font-size: 12.5px; line-height: 1.78; }
    .qdl-notification-meta { min-height: 36px; }
    .qdl-notification-action,
    .qdl-notification-expand { min-height: 34px; }
}
@media (max-width: 460px) {
    .qdl-notification-item { grid-template-columns: 46px minmax(0,1fr); column-gap: 10px; padding: 12px; }
    .qdl-notification-item.has-image { grid-template-columns: 54px minmax(0,1fr); }
    .qdl-notification-item.has-image .qdl-notification-thumb { width: 54px; height: 54px; min-width: 54px; border-radius: 14px; }
    .qdl-notification-item.no-image .qdl-notification-icon { width: 42px; height: 42px; border-radius: 13px; }
    .qdl-notification-source { max-width: 52%; }
    .qdl-notification-title-row strong { font-size: 14.5px; }
    .qdl-notification-content p { font-size: 12.25px; }
    .qdl-notification-meta { align-items: flex-start; }
    .qdl-notification-action-bar { width: 100%; justify-content: flex-start; }
    .qdl-notification-action,
    .qdl-notification-expand { flex: 0 1 auto; max-width: 100%; }
    .qdl-notification-details-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
    .qdl-notification-state > span { display: none; }
    .qdl-notification-source { max-width: 48%; }
    .qdl-notification-details-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-notification-item,
    .qdl-notification-item::before,
    .qdl-notification-action,
    .qdl-notification-expand,
    .qdl-notification-more {
        transition: none !important;
        animation: none !important;
    }
}
@media (forced-colors: active) {
    .qdl-notification-item { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; box-shadow: none !important; }
    .qdl-notification-item.is-unread::before { background: Highlight !important; }
    .qdl-notification-header .qdl-popover-list .qdl-notification-content p { color: CanvasText !important; }
    .qdl-notification-source,
    .qdl-notification-priority,
    .qdl-notification-state,
    .qdl-notification-action,
    .qdl-notification-expand,
    .qdl-notification-more { background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText !important; }
}

/* v4.38.36 — Stage 4 canonical Interaction, Motion & Accessibility system.
 * Motion is event/state driven, focus is always visible, and modal mobile
 * navigation remains contained without changing notification data behavior.
 */
:root {
    --qdl-motion-fast: 160ms;
    --qdl-motion-standard: 220ms;
    --qdl-motion-slow: 320ms;
    --qdl-motion-ease: cubic-bezier(.2,.78,.2,1);
    --qdl-focus-solid: #5e49c4;
    --qdl-focus-ring: rgba(94,73,196,.30);
}

.qdl-notification-shell.qdl-notification-header button,
.qdl-notification-shell.qdl-notification-header a,
.qdl-notification-item button,
.qdl-notification-item a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Entry motion is enabled only after the trigger-relative geometry is measured. */

/* The native top-layer popover needs a real visual scrim on mobile too. */
@media (max-width: 680px) {
    .qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::before {
        width: 11px;
        height: 11px;
        top: -5px;
    }
    .qdl-notification-header .qdl-notification-popover.qdl-popover-flipped::before {
        top: auto;
        bottom: -5px;
    }
    .qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::after {
        height: 6px;
        top: -10px;
    }
    .qdl-notification-header .qdl-notification-popover.qdl-popover-flipped::after {
        top: auto;
        bottom: -10px;
    }
    .qdl-notification-header .qdl-notification-popover:popover-open::backdrop {
        background: rgba(27,35,60,.20);
        backdrop-filter: blur(1.5px);
    }
    .qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned {
        box-shadow: 0 26px 70px rgba(40,48,78,.18), 0 1px 0 rgba(255,255,255,.92) inset;
    }
}

.qdl-notification-header .qdl-avatar-trigger[aria-expanded=\"true\"],
.qdl-notification-header .qdl-guest-notification-trigger[aria-expanded=\"true\"] {
    box-shadow: 0 0 0 3px var(--qdl-focus-ring), 0 9px 24px rgba(61,70,110,.10);
}

.qdl-notification-header .qdl-avatar-trigger:focus-visible,
.qdl-notification-header .qdl-guest-notification-trigger:focus-visible,
.qdl-notification-header .qdl-popover-close:focus-visible,
.qdl-notification-header .qdl-popover-read-all:focus-visible,
.qdl-notification-header .qdl-popover-footer a:focus-visible,
.qdl-notification-header .qdl-notification-action:focus-visible,
.qdl-notification-header .qdl-notification-expand:focus-visible,
.qdl-notification-header .qdl-notification-more:focus-visible {
    outline: 3px solid var(--qdl-focus-solid);
    outline-offset: 2px;
}

/* Card focus is kept inside the card's overflow boundary. */
.qdl-notification-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--qdl-focus-solid), var(--qdl-card-shadow, 0 8px 24px rgba(55,66,105,.055));
}
.qdl-notification-item:focus-visible:hover {
    transform: none;
}

.qdl-notification-header .qdl-popover-list:focus-visible {
    outline: 3px solid var(--qdl-focus-solid);
    outline-offset: -3px;
}

.qdl-notification-header .qdl-popover-close:disabled,
.qdl-notification-header .qdl-popover-read-all:disabled,
.qdl-notification-header .qdl-notification-action:disabled,
.qdl-notification-header .qdl-notification-expand:disabled,
.qdl-notification-header .qdl-notification-more:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none !important;
}

/* Continuous template motion is demoted to stateful feedback. */
.qdl-notification-item.qdl-effect-pulse .qdl-notification-icon,
.qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after {
    animation-iteration-count: 1;
}
.qdl-notification-item.qdl-effect-pulse .qdl-notification-icon,
.qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after {
    animation-play-state: paused;
}
.qdl-notification-item.is-new.qdl-effect-pulse .qdl-notification-icon,
.qdl-notification-item.is-new.qdl-effect-shine .qdl-notification-icon::after {
    animation-play-state: running;
}

/* Do not let decorative hover transforms become the keyboard interaction. */
@media (hover:hover) {
    .qdl-notification-header .qdl-popover-footer-link:hover,
    .qdl-notification-header .qdl-popover-read-all:hover,
    .qdl-notification-header .qdl-popover-close:hover {
        outline: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-header .qdl-notification-popover:not([hidden]),
    .qdl-notification-header .qdl-notification-popover.qdl-popover-position-ready,
    .qdl-notification-item.qdl-effect-pulse .qdl-notification-icon,
    .qdl-notification-item.qdl-effect-shine .qdl-notification-icon::after,
    .qdl-notification-header .qdl-unread-badge.is-updated,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-new::after,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.is-read-transition {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .qdl-notification-header .qdl-notification-popover:popover-open::backdrop {
        backdrop-filter: none;
    }
}

@media (forced-colors: active) {
    .qdl-notification-header .qdl-avatar-trigger[aria-expanded=\"true\"],
    .qdl-notification-header .qdl-guest-notification-trigger[aria-expanded=\"true\"] {
        box-shadow: 0 0 0 3px Highlight !important;
    }
    .qdl-notification-header .qdl-notification-popover:popover-open::backdrop {
        background: Canvas;
        opacity: .94;
        backdrop-filter: none;
    }
    .qdl-notification-header .qdl-popover-list:focus-visible,
    .qdl-notification-item:focus-visible {
        outline: 3px solid Highlight !important;
        box-shadow: none !important;
    }
}

/* v4.38.36 — Stage 5 canonical Responsive System.
 * Responsive behavior is based on controlled reflow rather than micro-text.
 * Meaningful Persian/RTL text keeps readable sizes; secondary decoration,
 * spacing, and optional detail are reduced before typography is reduced.
 */

.qdl-notification-header,
.qdl-notification-header .qdl-guest-access,
.qdl-notification-header .qdl-popover-head,
.qdl-notification-header .qdl-popover-head-main,
.qdl-notification-header .qdl-popover-title-wrap,
.qdl-notification-header .qdl-popover-title-copy,
.qdl-notification-header .qdl-popover-footer,
.qdl-notification-item,
.qdl-notification-content,
.qdl-notification-meta,
.qdl-toast,
.qdl-toast-body {
    min-width: 0;
    max-width: 100%;
}

.qdl-notification-header .qdl-guest-access,
.qdl-notification-header .qdl-guest-access-v429 {
    max-width: 100%;
}

/* Large tablets: preserve desktop hierarchy while allowing the Center to breathe. */

/* Tablet: stack the Center heading, keep overview information in one row,
 * and turn the dense toolbar into clear horizontal bands. */

/* Mobile landscape / large phone: the header popover remains an anchored dropdown.
 * It opens below the trigger, uses viewport coordinates, and follows the trigger on scroll;
 * only collision at the viewport edge may cause a controlled upward flip. */
@media (max-width: 680px) {
    .qdl-notification-header .qdl-guest-access,
    .qdl-notification-header .qdl-guest-access-v429 {
        gap: 7px;
    }
    .qdl-notification-header .qdl-guest-login-trigger {
        min-height: 46px;
    }
    .qdl-notification-header .qdl-guest-login-copy strong {
        font-size: 11.5px;
    }
    .qdl-notification-header .qdl-guest-login-copy small {
        font-size: 10px;
        line-height: 1.35;
    }

    .qdl-notification-header .qdl-notification-popover.qdl-native-top-layer,
    .qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned {
        position: fixed;
        inset: auto;
        width: min(448px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
        max-height: min(82vh, 720px);
        border-radius: 24px;
        transform-origin: top right;
    }
    .qdl-notification-header .qdl-popover-grab {
        display: none;
    }
    .qdl-notification-header .qdl-popover-head {
        padding: 13px 14px 11px;
        gap: 8px;
    }
    .qdl-notification-header .qdl-popover-head-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
    }
    .qdl-notification-header .qdl-popover-title-wrap {
        gap: 8px;
    }
    .qdl-notification-header .qdl-popover-title-copy strong {
        font-size: 16px;
        line-height: 1.5;
    }
    .qdl-notification-header .qdl-popover-title-copy > span {
        font-size: 11.5px;
        line-height: 1.6;
    }

.qdl-notification-header .qdl-popover-head-actions {
        gap: 4px;
    }
    .qdl-notification-header .qdl-popover-read-all {
        min-height: 34px;
        padding-inline: 8px;
        font-size: 11.5px;
    }
    .qdl-notification-header .qdl-popover-close {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .qdl-notification-header .qdl-popover-sync {
        min-height: 32px;
    }
    .qdl-notification-header .qdl-popover-sync {
        font-size: 10.5px;
    }
    .qdl-notification-header .qdl-popover-list {
        max-height: min(58vh, 500px);
        padding: 8px;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 108px;
        column-gap: 10px;
        padding: 11px;
        border-radius: 17px;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 0;
        row-gap: 9px;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-thumb {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100px;
        max-height: 188px;
        border-radius: 15px;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.has-image .qdl-notification-content {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-item.no-image .qdl-notification-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong {
        font-size: 14.5px;
        line-height: 1.55;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-content p {
        font-size: 12px;
        line-height: 1.78;
    }
    .qdl-notification-header .qdl-popover-list .qdl-notification-meta {
        gap: 7px;
        font-size: 10.5px;
    }

    .qdl-notification-header .qdl-popover-footer-auth {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 9px 9px max(10px, env(safe-area-inset-bottom));
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary {
        min-height: 44px;
        font-size: 12px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
        min-height: 44px;
        padding-inline: 7px;
        font-size: 11.5px;
    }
    .qdl-notification-header .qdl-popover-footer-guest {
        grid-template-columns: minmax(0,1fr);
        gap: 7px;
        padding: 9px 9px max(10px, env(safe-area-inset-bottom));
    }
    .qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-link {
        min-height: 44px;
        font-size: 11.5px;
    }
    .qdl-notification-details-message {
        font-size: 13px;
        line-height: 1.95;
    }

    .qdl-toast-container {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        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, env(safe-area-inset-top));
        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, env(safe-area-inset-bottom));
        inset-inline-start: max(10px, env(safe-area-inset-left));
        inset-inline-end: max(10px, env(safe-area-inset-right));
        transform: none;
    }
    .qdl-toast {
        width: 100%;
        min-height: 104px;
        padding: 12px 13px 10px;
        border-radius: 20px;
        box-shadow: 0 20px 48px rgba(44,54,91,.15), 0 5px 15px rgba(78,83,141,.05), 0 1px 0 rgba(255,255,255,.94) inset;
    }
    .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;
    }
}

/* Narrow phones: remove competition between controls instead of shrinking copy. */
@media (max-width: 560px) {
    .qdl-notification-header .qdl-popover-footer-auth {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        padding-inline: 7px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link {
        min-width: 0;
        padding-inline: 4px;
        gap: 4px;
    }
}

/* Small phones: keep the three shortened footer actions in one row with compact gaps. */
@media (max-width: 390px) {
    .qdl-notification-header .qdl-notification-popover.qdl-native-top-layer,
    .qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned {
        width: min(448px, calc(100vw - 12px));
        max-width: calc(100vw - 12px);
        border-radius: 22px;
    }
    .qdl-notification-header .qdl-popover-head {
        padding-inline: 11px;
    }
    .qdl-notification-header .qdl-popover-title-copy strong {
        font-size: 15.5px;
    }
    .qdl-notification-header .qdl-popover-title-copy > span {
        font-size: 11px;
    }
    .qdl-notification-header .qdl-popover-read-all span:last-child {
        display: none;
    }
    .qdl-notification-header .qdl-popover-read-all {
        width: 34px;
        padding-inline: 0;
        justify-content: center;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link {
        min-height: 42px;
        padding-inline: 3px;
        gap: 3px;
        font-size: 10.75px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link-icon {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link-icon svg {
        width: 11px;
        height: 11px;
    }
    .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;
    }
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
        font-size: 11px;
    }
}


/* Canonical interactive-control state matrix / contrast normalization.
 * Every notification-surface control has explicit Normal, Active, Selected,
 * Disabled, Loading, Focused and Open semantics. Hover is intentionally
 * visually neutral; explicit state changes carry the interaction meaning.
 */
:root {
    --qdl-interactive-text: #5f6a80;
    --qdl-interactive-text-strong: #6547d4;
    --qdl-interactive-danger: #8f3e59;
    --qdl-interactive-surface: #ffffff;
    --qdl-interactive-surface-soft: #f7f8fb;
    --qdl-interactive-primary-start: #7757ff;
    --qdl-interactive-primary-mid: #6547d4;
    --qdl-interactive-primary-end: #5b49c7;
    --qdl-interactive-active-surface: rgba(119,87,255,.095);
    --qdl-interactive-selected-start: #7757ff;
    --qdl-interactive-selected-mid: #6547d4;
    --qdl-interactive-selected-end: #5b49c7;
    --qdl-interactive-disabled-opacity: .52;
    --qdl-interactive-focus-solid: #5e49c4;
    --qdl-interactive-loading-opacity: .72;
    --qdl-interactive-loading-track: rgba(119,87,255,.20);
    --qdl-interactive-loading-indicator: #6547d4;
}

/* Readability: do not use pale template/source colors as interactive text. */
.qdl-notification-header .qdl-popover-read-all,
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary),
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-link,
.qdl-notification-header .qdl-notification-action,
.qdl-notification-header .qdl-notification-expand,
.qdl-center .qdl-center-profile .qdl-settings-link,
.qdl-center .qdl-center-profile .qdl-action-btn,
.qdl-center .qdl-primary-filters button,
.qdl-center .qdl-category-toggle,
.qdl-center .qdl-category-panel button,
.qdl-center .qdl-clear-view,
.qdl-center .qdl-view-chip,
.qdl-center .qdl-connectivity-retry,
.qdl-center .qdl-load-more,
.qdl-center .qdl-notification-action,
.qdl-center .qdl-notification-expand {
    color: var(--qdl-interactive-text);
}

.qdl-notification-header .qdl-popover-read-all,
.qdl-notification-header .qdl-notification-action,
.qdl-center .qdl-notification-action,
.qdl-center .qdl-load-more {
    color: var(--qdl-interactive-text-strong);
}

.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary,
.qdl-center .qdl-primary-filters button.is-active,
.qdl-center .qdl-category-toggle.is-active,
.qdl-center .qdl-category-grid button.is-active,
.qdl-center .qdl-detail-action {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-primary-start) 0%,
        var(--qdl-interactive-primary-mid) 55%,
        var(--qdl-interactive-primary-end) 100%);
}

.qdl-center .qdl-notification-action {
    background: linear-gradient(135deg, rgba(119,87,255,.08), rgba(39,215,232,.04));
    border-color: rgba(119,87,255,.12);
    box-shadow: 0 6px 15px rgba(119,87,255,.05), inset 0 1px 0 rgba(255,255,255,.75);
}
.qdl-center .qdl-notification-expand {
    background: rgba(247,248,251,.88);
    border-color: rgba(74,87,123,.08);
}
.qdl-center .qdl-notification-more,
.qdl-center .qdl-notification-delete {
    color: var(--qdl-color-text-tertiary);
    background: rgba(255,255,255,.92);
    border-color: rgba(74,87,123,.08);
}
.qdl-center .qdl-notification-menu button {
    color: var(--qdl-interactive-text);
}
.qdl-center .qdl-notification-menu [data-qdl-menu-delete] {
    color: var(--qdl-interactive-danger);
}
.qdl-notification-header .qdl-notification-delete {
    color: var(--qdl-color-text-tertiary);
}
.qdl-center .qdl-center-search-clear,
.qdl-center .qdl-category-panel-head button {
    color: var(--qdl-color-text-tertiary);
}
.qdl-center .qdl-center-guest-login {
    color: var(--qdl-color-brand-quest);
}
.qdl-center .qdl-detail-close {
    color: var(--qdl-color-text-tertiary);
}

/* Explicit state matrix: Normal → Active/Selected → Disabled → Loading → Focused/Open. */
.qdl-notification-header .qdl-popover-read-all,
.qdl-notification-header .qdl-popover-close,
.qdl-notification-header .qdl-popover-footer a,
.qdl-notification-header .qdl-notification-action,
.qdl-notification-header .qdl-notification-expand,
.qdl-notification-header .qdl-notification-more,
.qdl-notification-header .qdl-notification-delete,
.qdl-center .qdl-center-guest-login,
.qdl-center .qdl-center-profile .qdl-settings-link,
.qdl-center .qdl-center-profile .qdl-action-btn,
.qdl-center .qdl-center-search-clear,
.qdl-center .qdl-primary-filters button,
.qdl-center .qdl-category-toggle,
.qdl-center .qdl-category-panel button,
.qdl-center .qdl-clear-view,
.qdl-center .qdl-view-chip,
.qdl-center .qdl-connectivity-retry,
.qdl-center .qdl-load-more,
.qdl-center .qdl-notification-action,
.qdl-center .qdl-notification-expand,
.qdl-center .qdl-notification-more,
.qdl-center .qdl-notification-delete,
.qdl-center .qdl-notification-menu button,
.qdl-center .qdl-detail-close {
    -webkit-tap-highlight-color: transparent;
}

/* Active / pressed gives immediate feedback without hover animation. */
.qdl-notification-header .qdl-popover-read-all:active,
.qdl-notification-header .qdl-popover-close:active,
.qdl-notification-header .qdl-popover-footer a:active,
.qdl-center .qdl-center-guest-login:active,
.qdl-center .qdl-center-profile .qdl-settings-link:active,
.qdl-center .qdl-center-profile .qdl-action-btn:active,
.qdl-center .qdl-center-search-clear:active,
.qdl-center .qdl-clear-view:active,
.qdl-center .qdl-view-chip:active,
.qdl-center .qdl-connectivity-retry:active,
.qdl-center .qdl-load-more:active,
.qdl-center .qdl-notification-more:active,
.qdl-center .qdl-notification-delete:active,
.qdl-center .qdl-notification-menu button:active,
.qdl-center .qdl-detail-close:active {
    transform: none;
    filter: none;
    opacity: .90;
}

/* Selected state: filter/category controls stay visibly selected without hover. */
.qdl-center .qdl-primary-filters button.is-active,
.qdl-center .qdl-primary-filters button[aria-pressed="true"],
.qdl-center .qdl-category-grid button.is-active,
.qdl-center .qdl-category-grid button[aria-pressed="true"] {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-selected-start) 0%,
        var(--qdl-interactive-selected-mid) 55%,
        var(--qdl-interactive-selected-end) 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(119,87,255,.14);
    transform: none;
}
.qdl-center .qdl-primary-filters button.is-active span[data-qdl-filter-count],
.qdl-center .qdl-primary-filters button[aria-pressed="true"] span[data-qdl-filter-count],
.qdl-center .qdl-category-grid button.is-active span[data-qdl-filter-count],
.qdl-center .qdl-category-grid button[aria-pressed="true"] span[data-qdl-filter-count] {
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* Open state: disclosure/menu controls must read as open rather than merely hovered. */
.qdl-notification-header .qdl-notification-more[aria-expanded="true"],
.qdl-center .qdl-category-toggle[aria-expanded="true"],
.qdl-center .qdl-notification-more[aria-expanded="true"],
.qdl-notification-header .qdl-avatar-trigger[aria-expanded="true"],
.qdl-notification-header .qdl-guest-notification-trigger[aria-expanded="true"] {
    border-color: rgba(119,87,255,.16);
    box-shadow: 0 7px 16px rgba(119,87,255,.10);
    transform: none;
}
.qdl-center .qdl-category-toggle[aria-expanded="true"] {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-selected-start) 0%,
        var(--qdl-interactive-selected-mid) 55%,
        var(--qdl-interactive-selected-end) 100%);
    border-color: transparent;
}
.qdl-center .qdl-category-toggle[aria-expanded="true"] .qdl-category-toggle-icon {
    background: rgba(255,255,255,.14);
}
.qdl-center .qdl-category-toggle[aria-expanded="true"] .qdl-category-chevron { color: #fff; }

/* Focused state is always a distinct keyboard affordance. */
.qdl-notification-header :is(.qdl-popover-read-all, .qdl-popover-close, .qdl-popover-footer a, .qdl-notification-action, .qdl-notification-expand, .qdl-notification-more, .qdl-notification-delete):focus-visible,
.qdl-center :is(.qdl-center-guest-login, .qdl-center-profile .qdl-settings-link, .qdl-center-profile .qdl-action-btn, .qdl-center-search-clear, .qdl-primary-filters button, .qdl-category-toggle, .qdl-category-panel button, .qdl-clear-view, .qdl-view-chip, .qdl-connectivity-retry, .qdl-load-more, .qdl-notification-action, .qdl-notification-expand, .qdl-notification-more, .qdl-notification-delete, .qdl-notification-menu button, .qdl-detail-close, .qdl-detail-action):focus-visible {
    outline: 3px solid var(--qdl-interactive-focus-solid);
    outline-offset: 2px;
}

/* Disabled state is quiet and non-interactive; no hover may revive it. */
.qdl-notification-header :is(button, a)[disabled],
.qdl-notification-header :is(.qdl-popover-footer a, .qdl-notification-action)[aria-disabled="true"],
.qdl-center :is(button, a)[disabled],
.qdl-center :is(.qdl-center-guest-login, .qdl-notification-action, .qdl-detail-action)[aria-disabled="true"] {
    opacity: var(--qdl-interactive-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Loading state: retain readable copy while exposing a small progress cue. */
.qdl-notification-header :is(.qdl-popover-read-all, .qdl-notification-more, .qdl-notification-delete)[data-qdl-loading="true"],
.qdl-center :is(.qdl-center-profile .qdl-action-btn, .qdl-connectivity-retry, .qdl-load-more, .qdl-notification-more, .qdl-notification-delete, .qdl-notification-menu button)[data-qdl-loading="true"] {
    position: relative;
    cursor: progress;
    opacity: var(--qdl-interactive-loading-opacity);
    transform: none !important;
    filter: none !important;
    pointer-events: none;
}
.qdl-notification-header :is(.qdl-popover-read-all, .qdl-notification-more, .qdl-notification-delete)[data-qdl-loading="true"]::after,
.qdl-center :is(.qdl-center-profile .qdl-action-btn, .qdl-connectivity-retry, .qdl-load-more, .qdl-notification-more, .qdl-notification-delete, .qdl-notification-menu button)[data-qdl-loading="true"]::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-inline-start: 7px;
    flex: 0 0 11px;
    border: 2px solid var(--qdl-interactive-loading-track);
    border-inline-start-color: var(--qdl-interactive-loading-indicator);
    border-radius: 50%;
    animation: qdlInteractiveSpinner .68s linear infinite;
}
.qdl-center .qdl-notification-more[data-qdl-loading="true"]::after { display: none; }
@keyframes qdlInteractiveSpinner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    [data-qdl-loading="true"]::after { animation: none !important; }
}

/* Remove hover-only visual changes while retaining semantic active/open states. */
.qdl-notification-header .qdl-popover-read-all:hover {
    color: var(--qdl-interactive-text-strong);
    background: rgba(119,87,255,.055);
    border-color: rgba(119,87,255,.075);
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-notification-header .qdl-popover-close:hover {
    color: var(--qdl-color-text-tertiary);
    background: transparent;
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary:hover {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-primary-start) 0%,
        var(--qdl-interactive-primary-mid) 55%,
        var(--qdl-interactive-primary-end) 100%);
    border-color: transparent;
    transform: none;
    box-shadow: 0 9px 20px rgba(119,87,255,.16), inset 0 1px 0 rgba(255,255,255,.16);
    filter: none;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover {
    color: var(--qdl-interactive-text);
    background: rgba(255,255,255,.72);
    border-color: rgba(73,86,126,.075);
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-notification-header .qdl-notification-action:hover,
.qdl-center .qdl-notification-action:hover {
    color: var(--qdl-interactive-text-strong);
    background: linear-gradient(135deg, rgba(119,87,255,.08), rgba(39,215,232,.04));
    border-color: rgba(119,87,255,.12);
    transform: none;
    box-shadow: 0 6px 15px rgba(119,87,255,.05), inset 0 1px 0 rgba(255,255,255,.75);
    filter: none;
}
.qdl-notification-header .qdl-notification-expand:hover,
.qdl-center .qdl-notification-expand:hover {
    color: var(--qdl-interactive-text);
    background: rgba(247,248,251,.88);
    border-color: rgba(74,87,123,.08);
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-notification-header .qdl-notification-more:hover,
.qdl-center .qdl-notification-more:hover {
    color: var(--qdl-color-text-tertiary);
    background: rgba(255,255,255,.92);
    border-color: rgba(74,87,123,.08);
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-notification-header .qdl-notification-delete:hover,
.qdl-center .qdl-notification-delete:hover {
    color: var(--qdl-color-text-tertiary);
    background: rgba(255,255,255,.92);
    border-color: rgba(74,87,123,.08);
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-center .qdl-notification-more[aria-expanded="true"] {
    color: var(--qdl-interactive-text-strong);
    background: var(--qdl-interactive-surface);
    border-color: rgba(119,87,255,.15);
    box-shadow: 0 7px 14px rgba(61,70,110,.055);
    transform: none;
}
 .qdl-center .qdl-center-guest-login:hover,
.qdl-center .qdl-center-profile .qdl-settings-link:hover,
.qdl-center .qdl-center-profile .qdl-action-btn:hover,
.qdl-center .qdl-center-search-clear:hover,
.qdl-center .qdl-primary-filters button:hover,
.qdl-center .qdl-category-toggle:hover,
.qdl-center .qdl-category-panel button:hover,
.qdl-center .qdl-clear-view:hover,
.qdl-center .qdl-view-chip:hover,
.qdl-center .qdl-connectivity-retry:hover,
.qdl-center .qdl-load-more:hover,
.qdl-center .qdl-detail-action:hover,
.qdl-center .qdl-category-grid button:hover {
    transform: none;
    filter: none;
}
.qdl-center .qdl-center-guest-login:hover {
    color: var(--qdl-color-brand-quest);
    background: rgba(130,36,227,.07);
}
.qdl-center .qdl-center-profile .qdl-settings-link:hover {
    color: var(--qdl-interactive-text);
    background: rgba(255,255,255,.72);
}
.qdl-center .qdl-center-profile .qdl-action-btn:hover {
    color: var(--qdl-interactive-text-strong);
    background: rgba(119,87,255,.07);
}
.qdl-center .qdl-center-search-clear:hover {
    color: var(--qdl-color-text-tertiary);
    background: transparent;
}
.qdl-center .qdl-primary-filters button:hover:not(.is-active) {
    color: var(--qdl-interactive-text);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.qdl-center .qdl-category-toggle:hover:not(.is-active) {
    color: var(--qdl-interactive-text);
    background: rgba(255,255,255,.84);
    border-color: rgba(72,84,126,.09);
    box-shadow: none;
}
.qdl-center .qdl-category-panel button:hover:not(.is-active),
.qdl-center .qdl-category-grid button:hover:not(.is-active) {
    color: var(--qdl-interactive-text);
    background: linear-gradient(145deg, #fff, #fbfbff);
    border-color: rgba(72,84,126,.08);
    box-shadow: none;
}
.qdl-center .qdl-clear-view:hover {
    color: var(--qdl-interactive-text);
    background: rgba(255,255,255,.78);
    border-color: rgba(72,84,126,.08);
    box-shadow: none;
}
.qdl-center .qdl-view-chip:hover {
    color: var(--qdl-interactive-text);
    background: rgba(255,255,255,.78);
    border-color: rgba(94,73,196,.11);
    box-shadow: none;
}
.qdl-center .qdl-primary-filters button.is-active:hover,
.qdl-center .qdl-category-toggle.is-active:hover,
.qdl-center .qdl-category-grid button.is-active:hover {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-primary-start) 0%,
        var(--qdl-interactive-primary-mid) 55%,
        var(--qdl-interactive-primary-end) 100%);
    transform: none;
    box-shadow: 0 7px 16px rgba(119,87,255,.14);
}
.qdl-center .qdl-detail-action:hover {
    color: #fff;
    background: linear-gradient(135deg,var(--qdl-detail-deep) 0%,var(--qdl-detail-accent) 100%);
    transform: none;
    box-shadow: 0 11px 24px color-mix(in srgb,var(--qdl-detail-accent) 18%,transparent);
}
.qdl-center .qdl-category-panel button:hover:not(.is-active) {
    border-color: rgba(72,84,126,.08);
}
.qdl-center .qdl-connectivity-retry:hover,
.qdl-center .qdl-load-more:hover {
    color: var(--qdl-interactive-text-strong);
    background: #fff;
}
.qdl-center .qdl-detail-close:hover {
    color: var(--qdl-color-text-tertiary);
    background: #fff;
    transform: none;
    box-shadow: none;
    filter: none;
}
.qdl-center .qdl-notification-menu button:hover {
    color: var(--qdl-interactive-text);
    background: transparent;
    transform: none;
    filter: none;
    box-shadow: none;
}
.qdl-center .qdl-notification-menu [data-qdl-menu-delete]:hover {
    color: var(--qdl-interactive-danger);
    background: transparent;
}

/* The legacy global card-action hover rules must not leak into Center action controls. */

/* Canonical state precedence wins over legacy neutral-hover rules. */
.qdl-center .qdl-primary-filters button.is-active:hover,
.qdl-center .qdl-primary-filters button[aria-pressed="true"]:hover,
.qdl-center .qdl-category-grid button.is-active:hover,
.qdl-center .qdl-category-grid button[aria-pressed="true"]:hover,
.qdl-center .qdl-category-toggle[aria-expanded="true"]:hover {
    color: #fff;
    background: linear-gradient(135deg,
        var(--qdl-interactive-selected-start) 0%,
        var(--qdl-interactive-selected-mid) 55%,
        var(--qdl-interactive-selected-end) 100%);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(119,87,255,.14);
    transform: none;
    filter: none;
}
.qdl-center .qdl-category-toggle[aria-expanded="true"]:hover .qdl-category-chevron { color: #fff; }
.qdl-center .qdl-notification-more[aria-expanded="true"]:hover {
    color: var(--qdl-interactive-text-strong);
    background: var(--qdl-interactive-surface);
    border-color: rgba(119,87,255,.15);
    box-shadow: 0 7px 14px rgba(61,70,110,.055);
    transform: none;
    filter: none;
}
.qdl-notification-header .qdl-avatar-trigger[aria-expanded="true"]:hover,
.qdl-notification-header .qdl-guest-notification-trigger[aria-expanded="true"]:hover {
    transform: none;
    filter: none;
}
.qdl-notification-header :is(button, a)[disabled]:hover,
.qdl-center :is(button, a)[disabled]:hover,
.qdl-center :is(.qdl-center-guest-login, .qdl-notification-action, .qdl-detail-action)[aria-disabled="true"]:hover {
    opacity: var(--qdl-interactive-disabled-opacity);
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}
.qdl-notification-header :is(.qdl-popover-read-all, .qdl-notification-delete)[data-qdl-loading="true"]:hover,
.qdl-center :is(.qdl-center-profile .qdl-action-btn, .qdl-connectivity-retry, .qdl-load-more, .qdl-notification-delete, .qdl-notification-menu button)[data-qdl-loading="true"]:hover {
    opacity: var(--qdl-interactive-loading-opacity);
    cursor: progress;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

@media (forced-colors: active) {
    .qdl-notification-header .qdl-popover-read-all:hover,
    .qdl-notification-header .qdl-popover-close:hover,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary:hover,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover,
    .qdl-notification-header .qdl-notification-action:hover,
    .qdl-notification-header .qdl-notification-expand:hover,
    .qdl-notification-header .qdl-notification-more:hover,
    .qdl-notification-header .qdl-notification-delete:hover,
    .qdl-center .qdl-center-guest-login:hover,
    .qdl-center .qdl-center-profile .qdl-settings-link:hover,
    .qdl-center .qdl-center-profile .qdl-action-btn:hover,
    .qdl-center .qdl-center-search-clear:hover,
    .qdl-center .qdl-primary-filters button:hover,
    .qdl-center .qdl-category-toggle:hover,
    .qdl-center .qdl-category-panel button:hover,
    .qdl-center .qdl-clear-view:hover,
    .qdl-center .qdl-view-chip:hover,
    .qdl-center .qdl-connectivity-retry:hover,
    .qdl-center .qdl-load-more:hover,
    .qdl-center .qdl-notification-action:hover,
    .qdl-center .qdl-notification-expand:hover,
    .qdl-center .qdl-notification-more:hover,
    .qdl-center .qdl-notification-delete:hover,
    .qdl-center .qdl-notification-menu button:hover,
    .qdl-center .qdl-detail-close:hover,
    .qdl-center .qdl-detail-action:hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-header .qdl-notification-popover,
    .qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link,
    .qdl-toast {
        transition: none !important;
    }
}


/* v4.38.49 — Full-width notification card media. */
/*
 * Any notification card that carries artwork uses a dedicated full-width media row.
 * The artwork remains uncropped (object-fit: contain) so game covers are not damaged.
 * The media frame is kept consistent to prevent title/message/action reflow from being
 * squeezed beside a thumbnail. Missing-image cards continue to use the icon column.
 */
.qdl-notification-item.has-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 12px;
}
.qdl-notification-item.has-image .qdl-notification-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 112px;
    max-height: 220px;
    aspect-ratio: 16 / 7.5;
    padding: 5px;
    border-radius: 17px;
}
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-square {
    aspect-ratio: 4 / 3;
}
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-portrait {
    aspect-ratio: 4 / 5;
}
.qdl-notification-item.has-image .qdl-notification-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 0;
    border-radius: 12px;
}
.qdl-notification-item.has-image .qdl-notification-icon {
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
    align-self: end;
    justify-self: end;
    margin: 0 10px 10px 0;
}
.qdl-notification-item.has-image .qdl-notification-content {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}
@media (max-width: 760px) {
    .qdl-notification-item.has-image {
        row-gap: 10px;
    }
    .qdl-notification-item.has-image .qdl-notification-thumb {
        min-height: 108px;
        max-height: 180px;
        aspect-ratio: 16 / 7.5;
    }
    .qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-square {
        aspect-ratio: 4 / 3;
    }
    .qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-portrait {
        aspect-ratio: 4 / 5;
        max-height: 210px;
    }
    .qdl-notification-item.has-image .qdl-notification-icon {
        margin: 0 8px 8px 0;
    }
}
@media (max-width: 390px) {
    .qdl-notification-item.has-image .qdl-notification-thumb {
        min-height: 104px;
        max-height: 160px;
    }
    .qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-portrait {
        max-height: 185px;
    }
}

/* v4.38.55 — Adaptive Notification Media Presentation. */

/* v4.38.55 — Adaptive Notification Media Presentation.
 * The frame follows the decoded source ratio within a bounded visual-height budget.
 * This prevents ultrawide art from becoming a sliver and portrait art from creating
 * an excessively tall card. Artwork remains fully visible; focal alignment never crops.
 */
.qdl-notification-item.has-image .qdl-notification-thumb,
.qdl-detail-media-frame {
    --qdl-media-frame-ratio: 16 / 7.5;
    aspect-ratio: var(--qdl-media-frame-ratio);
    width: 100%;
    min-width: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.qdl-notification-item.has-image .qdl-notification-thumb img,
.qdl-detail-media-frame img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: contain;
    object-position: var(--qdl-media-focus, center);
}
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-ultrawide,
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-wide {
    min-height: 116px;
}
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-tall,
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-ultratall {
    max-height: 250px;
}
.qdl-notification-item.has-image .qdl-notification-thumb.qdl-media-ultratall {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--qdl-template-start) 9%, #fff),
        color-mix(in srgb, var(--qdl-template-end) 8%, #fff)
    );
}
@media (max-width:760px) {
    .qdl-notification-item.has-image .qdl-notification-thumb,
    .qdl-detail-media-frame {
        min-height: 112px;
        max-height: 210px;
    }
}
@media (max-width:520px) {
    .qdl-notification-item.has-image .qdl-notification-thumb,
    .qdl-detail-media-frame {
        min-height: 108px;
        max-height: 188px;
    }
}
@media (max-width:390px) {
    .qdl-notification-item.has-image .qdl-notification-thumb,
    .qdl-detail-media-frame {
        min-height: 104px;
        max-height: 168px;
    }
}

/* v4.38.57 — Canonical UI control icon family. */
.qdl-ui-icon { display:inline-grid; place-items:center; flex:0 0 auto; width:18px; height:18px; line-height:1; }
.qdl-ui-icon svg { display:block; width:100%; height:100%; overflow:visible; }
.qdl-center-search-icon::before,
.qdl-center-search-icon::after,
.qdl-sort-control-icon::before,
.qdl-sort-control-icon::after,
.qdl-chip-icon-search::before,
.qdl-chip-icon-search::after,
.qdl-chip-icon-sort::before,
.qdl-chip-icon-sort::after,
.qdl-notification-action::after,
.qdl-notification-expand::after,
.qdl-notification-more::before { content:none !important; display:none !important; }
.qdl-center-search-icon { width:18px; height:18px; border:0 !important; border-radius:0 !important; color:var(--qdl-color-text-tertiary); opacity:.82; }
.qdl-center-search-icon svg { width:18px; height:18px; }
.qdl-center-search-clear .qdl-ui-icon { width:15px; height:15px; }
.qdl-category-toggle-icon { width:17px; height:17px; padding:0; background:transparent; display:inline-grid; place-items:center; }
.qdl-category-toggle-icon svg { width:17px; height:17px; }
.qdl-category-chevron { width:15px; height:15px; display:inline-grid; place-items:center; font-size:0; color:currentColor; transition:transform .18s ease; }
.qdl-category-chevron svg { width:15px; height:15px; }
.qdl-category-toggle[aria-expanded="true"] .qdl-category-chevron { transform:rotate(180deg); }
.qdl-sort-control-icon { width:16px; height:16px; flex:0 0 16px; margin-inline-end:5px; position:static; opacity:.82; }
.qdl-sort-control-icon svg { width:16px; height:16px; }
.qdl-read-all-icon { width:17px; height:17px; }
.qdl-popover-close .qdl-ui-icon, .qdl-detail-close .qdl-ui-icon { width:17px; height:17px; }
.qdl-notification-more { font-size:0; }
.qdl-notification-more .qdl-ui-icon { width:18px; height:18px; }
.qdl-notification-action, .qdl-notification-expand { gap:6px; }
.qdl-notification-action .qdl-ui-icon, .qdl-notification-expand .qdl-ui-icon { width:14px; height:14px; }
.qdl-notification-expand .qdl-ui-icon { transform:rotate(0deg); transition:transform .18s ease; }
.qdl-notification-expand[aria-expanded="true"] .qdl-ui-icon { transform:rotate(180deg); }
.qdl-notification-state-read > i.qdl-ui-icon { width:17px; height:17px; border-radius:6px; background:rgba(92,113,145,.065); border:1px solid rgba(92,113,145,.11); }
.qdl-notification-state-read > i.qdl-ui-icon svg { width:13px; height:13px; }
.qdl-view-chip-icon { display:inline-grid; place-items:center; width:15px; height:15px; position:static; }
.qdl-view-chip-icon::before, .qdl-view-chip-icon::after { content:none !important; }
.qdl-view-chip-icon svg { width:15px; height:15px; }
.qdl-view-chip-icon svg { width:15px; height:15px; }
.qdl-view-chip-close { display:inline-grid; place-items:center; width:13px; height:13px; }
.qdl-view-chip-close svg { width:13px; height:13px; }
.qdl-preferences-back .qdl-ui-icon { width:16px; height:16px; }
.qdl-settings-link { gap:6px; }
.qdl-settings-link .qdl-ui-icon { width:16px; height:16px; }
.qdl-connectivity-retry, .qdl-load-more, .qdl-clear-view, .qdl-state-retry { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.qdl-connectivity-retry .qdl-ui-icon, .qdl-load-more .qdl-ui-icon, .qdl-clear-view .qdl-ui-icon, .qdl-state-retry .qdl-ui-icon { width:15px; height:15px; }
@media (forced-colors:active) { .qdl-ui-icon svg { stroke:currentColor; } }

/* v4.38.69 — Notification Center shares the approved WooCommerce event palette.
 * This block mirrors the Header Popover's eight-event identity at the Center's
 * roomier reading density without changing filters, controls, read-state or actions.
 */
.qdl-center .qdl-notification-item.qdl-type-woocommerce {
    --qdl-type-accent: #6D28D9;
    --qdl-type-deep: #5B21B6;
    --qdl-type-tint-strong: rgba(109,40,217,.145);
    --qdl-type-tint-mid: rgba(109,40,217,.078);
    --qdl-type-tint-soft: rgba(109,40,217,.025);
    --qdl-type-unread-strong: rgba(109,40,217,.19);
    --qdl-type-unread-mid: rgba(109,40,217,.098);
    --qdl-type-border: rgba(109,40,217,.19);
    --qdl-type-border-strong: rgba(109,40,217,.31);
    --qdl-type-chip-bg: rgba(109,40,217,.075);
    --qdl-type-action-bg: rgba(109,40,217,.06);
    --qdl-type-focus: rgba(109,40,217,.52);
    --qdl-type-shadow: rgba(109,40,217,.14);
    --qdl-type-glow: rgba(109,40,217,.095);
    --qdl-priority-color: var(--qdl-type-accent);
    border-color: var(--qdl-type-border);
    background: linear-gradient(90deg,
        var(--qdl-type-tint-strong) 0%,
        var(--qdl-type-tint-mid) 31%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
    box-shadow: 0 10px 26px rgba(55,65,104,.045), inset 0 1px 0 rgba(255,255,255,.88);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-download {
    --qdl-type-accent: #3F6212;
    --qdl-type-deep: #365314;
    --qdl-type-tint-strong: rgba(63,98,18,.15);
    --qdl-type-tint-mid: rgba(63,98,18,.082);
    --qdl-type-tint-soft: rgba(63,98,18,.026);
    --qdl-type-unread-strong: rgba(63,98,18,.19);
    --qdl-type-unread-mid: rgba(63,98,18,.102);
    --qdl-type-border: rgba(63,98,18,.21);
    --qdl-type-border-strong: rgba(63,98,18,.33);
    --qdl-type-chip-bg: rgba(63,98,18,.082);
    --qdl-type-action-bg: rgba(63,98,18,.062);
    --qdl-type-focus: rgba(63,98,18,.55);
    --qdl-type-shadow: rgba(63,98,18,.14);
    --qdl-type-glow: rgba(63,98,18,.10);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-processing { --qdl-type-accent: #4F46E5; --qdl-type-deep: #3730A3; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-completed { --qdl-type-accent: #15803D; --qdl-type-deep: #166534; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-purchase-on-hold { --qdl-type-accent: #7C3AED; --qdl-type-deep: #6D28D9; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-access { --qdl-type-accent: #0369A1; --qdl-type-deep: #075985; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-remaining { --qdl-type-accent: #C2410C; --qdl-type-deep: #9A3412; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-limit-reached { --qdl-type-accent: #BE123C; --qdl-type-deep: #9F1239; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-expiry-warning { --qdl-type-accent: #A16207; --qdl-type-deep: #854D0E; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce.qdl-event-variant-download-expired { --qdl-type-accent: #334155; --qdl-type-deep: #1E293B; }
.qdl-center .qdl-notification-item.qdl-type-woocommerce[class*="qdl-event-variant-"] {
    --qdl-type-tint-strong: color-mix(in srgb, var(--qdl-type-accent) 15%, transparent);
    --qdl-type-tint-mid: color-mix(in srgb, var(--qdl-type-accent) 8%, transparent);
    --qdl-type-tint-soft: color-mix(in srgb, var(--qdl-type-accent) 2.5%, transparent);
    --qdl-type-unread-strong: color-mix(in srgb, var(--qdl-type-accent) 19%, transparent);
    --qdl-type-unread-mid: color-mix(in srgb, var(--qdl-type-accent) 10%, transparent);
    --qdl-type-border: color-mix(in srgb, var(--qdl-type-accent) 22%, transparent);
    --qdl-type-border-strong: color-mix(in srgb, var(--qdl-type-accent) 34%, transparent);
    --qdl-type-chip-bg: color-mix(in srgb, var(--qdl-type-accent) 8%, transparent);
    --qdl-type-action-bg: color-mix(in srgb, var(--qdl-type-accent) 6%, transparent);
    --qdl-type-focus: color-mix(in srgb, var(--qdl-type-accent) 56%, transparent);
    --qdl-type-shadow: color-mix(in srgb, var(--qdl-type-accent) 14%, transparent);
    --qdl-type-glow: color-mix(in srgb, var(--qdl-type-accent) 10%, transparent);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.is-unread {
    background: linear-gradient(90deg,
        var(--qdl-type-unread-strong) 0%,
        var(--qdl-type-unread-mid) 32%,
        var(--qdl-type-tint-soft) 62%,
        rgba(255,255,255,.985) 100%);
    border-color: var(--qdl-type-border-strong);
    box-shadow: 0 12px 27px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.93);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce::after {
    background: linear-gradient(180deg, var(--qdl-type-accent), var(--qdl-type-deep));
    box-shadow: 0 0 12px var(--qdl-type-glow);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.no-image .qdl-notification-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--qdl-type-accent), var(--qdl-type-deep));
    border-color: rgba(255,255,255,.50);
    box-shadow: 0 9px 19px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.20);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.has-image .qdl-notification-icon {
    color: var(--qdl-type-accent);
    background: rgba(255,255,255,.96);
    border-color: var(--qdl-type-border);
    box-shadow: 0 6px 13px rgba(57,68,106,.11), inset 0 1px 0 rgba(255,255,255,.95);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce.has-image .qdl-notification-thumb {
    background: linear-gradient(90deg, var(--qdl-type-tint-strong), var(--qdl-type-tint-soft) 62%, #fff 100%);
    border: 1px solid var(--qdl-type-border);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-source {
    color: var(--qdl-type-accent);
    border-color: var(--qdl-type-border);
    background: var(--qdl-type-chip-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-source-icon { color: var(--qdl-type-accent); }
.qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 27px;
    padding: 4px 10px;
    border: 1px solid var(--qdl-type-border);
    border-radius: 10px;
    color: var(--qdl-type-accent);
    background: var(--qdl-type-chip-bg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: var(--qdl-weight-bold);
    line-height: 1.35;
    white-space: nowrap;
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-action {
    color: var(--qdl-type-accent);
    background: var(--qdl-type-action-bg);
    border-color: var(--qdl-type-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-action:hover {
    color: var(--qdl-type-accent);
    background: var(--qdl-type-action-bg);
    border-color: var(--qdl-type-border-strong);
}
.qdl-center .qdl-notification-item.qdl-type-woocommerce:focus-visible,
.qdl-center .qdl-notification-item.qdl-type-woocommerce:focus-within {
    outline-color: var(--qdl-type-focus);
    border-color: var(--qdl-type-border-strong);
}
@media (prefers-reduced-motion: reduce) {
    .qdl-center .qdl-notification-item.qdl-type-woocommerce,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-icon,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-action { transition: none !important; }
}
@media (forced-colors: active) {
    .qdl-center .qdl-notification-item.qdl-type-woocommerce,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce.is-unread {
        color: CanvasText !important;
        background: Canvas !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
    }
    .qdl-center .qdl-notification-item.qdl-type-woocommerce::after { background: Highlight; box-shadow: none; }
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-icon,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-source,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-category,
    .qdl-center .qdl-notification-item.qdl-type-woocommerce .qdl-notification-action {
        color: CanvasText !important;
        background: Canvas !important;
        border-color: CanvasText !important;
        box-shadow: none !important;
        forced-color-adjust: auto;
    }
}
.qdl-notification-header .qdl-popover-head-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
}
.qdl-notification-header .qdl-popover-title-wrap {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 8px !important;
}
.qdl-notification-header .qdl-popover-title-icon,
.qdl-notification-header [data-qdl-popover-summary] { display: none !important; }
.qdl-notification-header .qdl-popover-title-copy { display: block; min-width: 0; flex: 1 1 auto; }
.qdl-notification-header .qdl-popover-title-copy > strong {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    white-space: nowrap;
}
.qdl-notification-header .qdl-popover-head-actions {
    display: inline-flex !important;
    align-items: flex-start !important;
    justify-self: start;
    gap: 5px !important;
    min-width: 0;
    white-space: nowrap;
    position: static !important;
}
.qdl-notification-header .qdl-popover-read-all { min-height: 34px; padding-inline: 9px; white-space: nowrap; }
.qdl-notification-header .qdl-popover-close { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; }
.qdl-notification-header .qdl-popover-sync {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    min-height: 22px;
    margin: 0 !important;
    padding: 3px 7px;
    overflow: visible;
    color: #3d7b89;
    font-size: 10.5px;
    line-height: 1.25;
    text-overflow: clip;
    vertical-align: top;
    white-space: nowrap;
}
@media (max-width: 440px) {
    .qdl-notification-header .qdl-popover-head-main { gap: 5px !important; }
    .qdl-notification-header .qdl-popover-head-actions { gap: 3px !important; }
    .qdl-notification-header .qdl-popover-read-all { min-height: 32px; padding-inline: 7px; font-size: 11px; }
    .qdl-notification-header .qdl-popover-close { width: 32px; height: 32px; flex-basis: 32px; }
    .qdl-notification-header .qdl-popover-sync { min-height: 21px; padding: 3px 6px; font-size: 10px; }
}


/* Loyalty / Diamonds integration category */
.qdl-source-loyalty { color:#0F766E; background:rgba(20,184,166,.10); border-color:rgba(20,184,166,.18); }
.qdl-event-diamonds { --qdl-type-accent:#0F766E; --qdl-type-deep:#115E59; --qdl-type-tint:rgba(20,184,166,.10); --qdl-type-line:rgba(20,184,166,.22); }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-event-diamonds,
.qdl-center .qdl-notification-item.qdl-event-diamonds { background:linear-gradient(115deg,rgba(45,212,191,.14) 0%,rgba(255,255,255,.96) 68%,#fff 100%); }
.qdl-notification-header .qdl-popover-list .qdl-notification-item.qdl-event-diamonds.is-unread,
.qdl-center .qdl-notification-item.qdl-event-diamonds.is-unread { background:linear-gradient(115deg,rgba(45,212,191,.20) 0%,rgba(255,255,255,.97) 70%,#fff 100%); }
.qdl-category-icon-diamonds { color:#0F766E; background:rgba(20,184,166,.10); border-color:rgba(20,184,166,.18); }
.qdl-detail-category-diamonds { color:#115E59; background:rgba(20,184,166,.10); border-color:rgba(20,184,166,.20); }

/* v4.38.86 — compact authenticated Loyalty diamond ribbon inside the existing header row. */
.qdl-notification-header.qdl-notification-header-has-loyalty {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.qdl-notification-header-has-loyalty .qdl-header-user-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.qdl-notification-header-has-loyalty .qdl-avatar-trigger {
    flex: 0 0 54px;
    z-index: 1;
}
.qdl-header-loyalty-ribbon {
    display: grid;
    grid-template-columns: 38px minmax(70px, max-content) minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 4px 10px;
    border: 1px solid rgba(22, 101, 52, .24);
    border-radius: 15px;
    background: linear-gradient(105deg, #DCFCE7 0%, #F0FDF4 34%, #FFF7ED 64%, #FFEDD5 100%);
    box-shadow: 0 5px 16px rgba(22, 101, 52, .09), 0 2px 8px rgba(154, 52, 18, .045), inset 0 1px 0 rgba(255,255,255,.78);
    color: #173D2A !important;
    text-decoration: none !important;
    line-height: 1.25;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.qdl-header-loyalty-ribbon:visited,
.qdl-header-loyalty-ribbon:active { color: #173D2A !important; }
.qdl-header-loyalty-ribbon:hover {
    color: #173D2A !important;
    border-color: rgba(154, 52, 18, .34);
    box-shadow: 0 7px 20px rgba(22, 101, 52, .12), 0 3px 10px rgba(154, 52, 18, .075), inset 0 1px 0 rgba(255,255,255,.88);
    transform: translateY(-1px);
}
.qdl-header-loyalty-ribbon:focus-visible {
    outline: 3px solid #9A3412;
    outline-offset: 3px;
}
.qdl-header-loyalty-ribbon-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(22, 101, 52, .16);
    border-radius: 12px;
    background: linear-gradient(145deg, #BBF7D0 0%, #FEF3C7 58%, #FED7AA 100%);
    color: #166534;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.qdl-header-loyalty-ribbon-icon svg { display: block; width: 23px; height: 23px; }
.qdl-header-loyalty-ribbon-balance,
.qdl-header-loyalty-ribbon-progress { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.qdl-header-loyalty-ribbon-label {
    display: block;
    color: #285E3E;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.qdl-header-loyalty-ribbon-balance strong {
    display: block;
    margin-top: 1px;
    color: #173D2A;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
.qdl-header-loyalty-ribbon-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
    color: #344B3B;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}
.qdl-header-loyalty-ribbon-progress-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qdl-header-loyalty-ribbon-progress-head strong {
    flex: 0 0 auto;
    color: #9A3412;
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.qdl-header-loyalty-ribbon-track {
    display: block;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #FDE7C7;
    box-shadow: inset 0 1px 2px rgba(53, 20, 95, .06);
}
.qdl-header-loyalty-ribbon-track > span {
    position: relative;
    display: block;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(100deg, #7C3AED 0%, #A855F7 30%, #C084FC 52%, #9333EA 78%, #6D28D9 100%);
    box-shadow: 0 0 9px rgba(168, 85, 247, .34), 0 0 14px rgba(124, 58, 237, .17), inset 0 1px 0 rgba(255, 255, 255, .36);
    transition: width .25s ease;
}
.qdl-header-loyalty-ribbon-track > span::before,
.qdl-header-loyalty-ribbon-track > span::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.qdl-header-loyalty-ribbon-track > span::before {
    top: 0;
    bottom: 0;
    left: -36%;
    width: 34%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .12) 78%, transparent 100%);
    opacity: 0;
    transform: translateX(0);
    animation: qdlDiamondProgressShimmer 1.25s ease-out .12s 1 both;
}
.qdl-header-loyalty-ribbon-track > span::after {
    top: 50%;
    inset-inline-end: 2px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #FFFFFF;
    box-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 8px rgba(233, 213, 255, .9);
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
    opacity: .82;
    transform: translateY(-50%) scale(.9);
    animation: qdlDiamondProgressSpark .85s ease-out .08s 1 both;
}
@keyframes qdlDiamondProgressShimmer {
    0% { opacity: 0; transform: translateX(0); }
    18% { opacity: .9; }
    78% { opacity: .58; transform: translateX(330%); }
    100% { opacity: 0; transform: translateX(390%); }
}
@keyframes qdlDiamondProgressSpark {
    0% { opacity: 0; transform: translateY(-50%) scale(.45) rotate(0deg); }
    58% { opacity: 1; transform: translateY(-50%) scale(1.18) rotate(45deg); }
    100% { opacity: .82; transform: translateY(-50%) scale(.9) rotate(45deg); }
}
.qdl-header-loyalty-ribbon-hint {
    display: block;
    margin-top: 2px;
    color: #285E3E;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qdl-header-loyalty-ribbon-arrow {
    display: grid;
    place-items: center;
    width: 18px;
    height: 28px;
    color: #166534;
}
.qdl-header-loyalty-ribbon-arrow svg { display: block; width: 17px; height: 17px; transform: scaleX(-1); }
@media (max-width: 680px) {
    .qdl-notification-header-has-loyalty .qdl-header-user-row { gap: 7px; }
    .qdl-header-loyalty-ribbon {
        grid-template-columns: 32px minmax(63px, max-content) minmax(0, 1fr) 15px;
        gap: 7px;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
        padding: 4px 7px;
        border-radius: 13px;
    }
    .qdl-header-loyalty-ribbon-icon { width: 32px; height: 32px; border-radius: 10px; }
    .qdl-header-loyalty-ribbon-icon svg { width: 20px; height: 20px; }
    .qdl-header-loyalty-ribbon-label { font-size: 12px; }
    .qdl-header-loyalty-ribbon-balance strong { font-size: 16px; }
    .qdl-header-loyalty-ribbon-progress-head { gap: 5px; font-size: 12px; margin-bottom: 3px; }
    .qdl-header-loyalty-ribbon-progress-head strong { font-size: 12px; }
    .qdl-header-loyalty-ribbon-track { height: 5px; }
    .qdl-header-loyalty-ribbon-hint { display: none; }
    .qdl-header-loyalty-ribbon-arrow { width: 15px; }
    .qdl-header-loyalty-ribbon-arrow svg { width: 15px; height: 15px; }
}
@media (max-width: 390px) {
    .qdl-notification-header-has-loyalty .qdl-header-user-row { gap: 5px; }
    .qdl-notification-header-has-loyalty .qdl-avatar-trigger { flex-basis: 48px; width: 48px; height: 50px; }
    .qdl-header-loyalty-ribbon {
        grid-template-columns: 29px minmax(56px, max-content) minmax(0, 1fr) 13px;
        gap: 5px;
        padding-inline: 6px;
        height: 50px;
        min-height: 50px;
        max-height: 50px;
    }
    .qdl-header-loyalty-ribbon-icon { width: 29px; height: 30px; }
    .qdl-header-loyalty-ribbon-icon svg { width: 18px; height: 18px; }
    .qdl-header-loyalty-ribbon-label { font-size: 12px; }
    .qdl-header-loyalty-ribbon-balance strong { font-size: 15px; }
    .qdl-header-loyalty-ribbon-progress-head { font-size: 12px; }
    .qdl-header-loyalty-ribbon-progress-head strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .qdl-header-loyalty-ribbon,
    .qdl-header-loyalty-ribbon-track > span { transition: none !important; }
    .qdl-header-loyalty-ribbon-track > span::before,
    .qdl-header-loyalty-ribbon-track > span::after { animation: none !important; }
    .qdl-header-loyalty-ribbon-track > span::before { display: none !important; }
    .qdl-header-loyalty-ribbon-track > span::after { opacity: .82; transform: translateY(-50%) scale(.9); }
    .qdl-header-loyalty-ribbon:hover { transform: none; }
}
@media (forced-colors: active) {
    .qdl-header-loyalty-ribbon { border: 1px solid LinkText; background: Canvas; color: LinkText !important; box-shadow: none; }
    .qdl-header-loyalty-ribbon-icon,
    .qdl-header-loyalty-ribbon-track { border: 1px solid CanvasText; background: Canvas; }
    .qdl-header-loyalty-ribbon-label,
    .qdl-header-loyalty-ribbon-balance strong,
    .qdl-header-loyalty-ribbon-progress-head,
    .qdl-header-loyalty-ribbon-progress-head strong,
    .qdl-header-loyalty-ribbon-hint,
    .qdl-header-loyalty-ribbon-arrow { color: LinkText; }
    .qdl-header-loyalty-ribbon-track > span { background: Highlight; }
    .qdl-header-loyalty-ribbon-track > span::before,
    .qdl-header-loyalty-ribbon-track > span::after { display: none !important; animation: none !important; }
}


/* v4.38.102 — Quest HUD visual unification for the complete [qdl_notifications] header.
 * Bright lavender glass, deep indigo text, vivid violet focus accents and restrained holographic cyan.
 * Scope stays inside the header shortcode; notification-center styling and event-type accents remain canonical.
 */
.qdl-notification-shell.qdl-notification-header {
    --qdl-hud-violet: #8224E3;
    --qdl-hud-violet-deep: #6D28D9;
    --qdl-hud-purple: #A855F7;
    --qdl-hud-cyan: #27D7E8;
    --qdl-hud-ice: #E7FBFF;
    --qdl-hud-lavender: #F3EEFF;
    --qdl-hud-ink: #35345B;
    --qdl-hud-muted: #514F75;
    --qdl-hud-border: rgba(130, 36, 227, .22);
    color: var(--qdl-hud-ink);
}

/* Authenticated Quest HUD: keep the existing compact single-row geometry. */
.qdl-notification-header .qdl-header-loyalty-ribbon {
    border-color: rgba(130, 36, 227, .26);
    background: linear-gradient(112deg, rgba(243, 238, 255, .98) 0%, rgba(255, 255, 255, .97) 43%, rgba(231, 251, 255, .97) 100%);
    box-shadow: 0 6px 18px rgba(109, 40, 217, .10), 0 0 0 1px rgba(39, 215, 232, .07) inset, 0 1px 0 rgba(255,255,255,.95) inset;
    color: #35345B !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
}
.qdl-notification-header .qdl-header-loyalty-ribbon:visited,
.qdl-notification-header .qdl-header-loyalty-ribbon:active,
.qdl-notification-header .qdl-header-loyalty-ribbon:hover { color: #35345B !important; }
.qdl-notification-header .qdl-header-loyalty-ribbon:hover {
    border-color: rgba(130, 36, 227, .26);
    box-shadow: 0 6px 18px rgba(109, 40, 217, .10), 0 0 0 1px rgba(39, 215, 232, .07) inset, 0 1px 0 rgba(255,255,255,.95) inset;
    transform: none;
}
.qdl-notification-header .qdl-header-loyalty-ribbon:focus-visible {
    outline: 3px solid #6D28D9;
    outline-offset: 3px;
}
.qdl-notification-header .qdl-header-loyalty-ribbon-icon {
    border-color: rgba(130, 36, 227, .18);
    background: linear-gradient(145deg, #E9D5FF 0%, #F3EEFF 48%, #CFFAFE 100%);
    color: #6D28D9;
    box-shadow: 0 4px 10px rgba(109, 40, 217, .08), 0 0 0 1px rgba(255,255,255,.82) inset;
}
.qdl-notification-header .qdl-header-loyalty-ribbon-label,
.qdl-notification-header .qdl-header-loyalty-ribbon-hint { color: #514F75; }
.qdl-notification-header .qdl-header-loyalty-ribbon-balance strong { color: #302653; }
.qdl-notification-header .qdl-header-loyalty-ribbon-progress-head { color: #35345B; }
.qdl-notification-header .qdl-header-loyalty-ribbon-progress-head strong { color: #6D28D9; }
.qdl-notification-header .qdl-header-loyalty-ribbon-track {
    background: #E8DDFB;
    box-shadow: inset 0 1px 2px rgba(53, 36, 91, .12), 0 0 0 1px rgba(130, 36, 227, .06);
}
.qdl-notification-header .qdl-header-loyalty-ribbon-arrow { color: #6D28D9; }

/* Static holographic ring: event-driven unread feedback remains, continuous decoration is removed. */
.qdl-notification-header .qdl-avatar-ring {
    background: conic-gradient(from 210deg, #8224E3, #A855F7, #27D7E8, #E9D5FF, #8224E3);
    animation: none;
}
.qdl-notification-header .qdl-avatar-halo-two {
    background: conic-gradient(from 30deg, rgba(130,36,227,0), rgba(168,85,247,.38), rgba(39,215,232,.48), rgba(130,36,227,0) 72%);
    animation: none;
}
.qdl-notification-header .qdl-avatar-spark.spark-one {
    box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 0 0 4px rgba(168,85,247,.12), 0 0 12px rgba(168,85,247,.45);
}
.qdl-notification-header .qdl-avatar-spark.spark-two {
    background: #CFFAFE;
    box-shadow: 0 0 0 3px rgba(39,215,232,.12), 0 0 12px rgba(39,215,232,.48);
}
.qdl-notification-header .qdl-avatar-wrap {
    background: linear-gradient(145deg, #FFFFFF 0%, #F3EEFF 57%, #E7FBFF 100%);
    box-shadow: 0 10px 24px rgba(109,40,217,.13), 0 0 0 1px rgba(255,255,255,.96) inset;
}

/* The popover becomes a light HUD glass panel with a violet/cyan edge vocabulary. */
.qdl-notification-header .qdl-notification-popover {
    border-color: rgba(130, 36, 227, .22);
    background:
        radial-gradient(circle at 94% 0%, rgba(39,215,232,.12), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(168,85,247,.085), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.99) 0%, rgba(249,246,255,.985) 58%, rgba(242,252,255,.99) 100%);
    box-shadow: 0 30px 84px rgba(53, 41, 92, .22), 0 0 0 1px rgba(168,85,247,.055), 0 2px 0 rgba(255,255,255,.96) inset;
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
}
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::before {
    border-color: rgba(130,36,227,.20);
    background: linear-gradient(145deg, #FFFFFF, #F0FBFF);
    box-shadow: 0 5px 12px rgba(109,40,217,.08);
}
.qdl-notification-header .qdl-notification-popover.qdl-viewport-positioned::after {
    background: linear-gradient(180deg, rgba(168,85,247,.60), rgba(39,215,232,.65));
}
.qdl-notification-header .qdl-popover-head {
    background: linear-gradient(112deg, rgba(233,213,255,.48) 0%, rgba(243,238,255,.72) 43%, rgba(207,250,254,.58) 100%);
    border-bottom-color: rgba(130,36,227,.12);
}
.qdl-notification-header .qdl-popover-head::after {
    background: linear-gradient(90deg, transparent, rgba(130,36,227,.35), rgba(39,215,232,.38), transparent);
}
.qdl-notification-header .qdl-popover-title-copy strong { color: #35345B; }
.qdl-notification-header .qdl-popover-title-copy > span { color: #514F75; }

/* Live synchronization is a status chip, not an ordinary low-contrast caption. */
.qdl-notification-header .qdl-popover-sync {
    color: #115E59;
    border-color: rgba(39, 215, 232, .46);
    background: linear-gradient(110deg, rgba(207,250,254,.84), rgba(243,238,255,.86));
    box-shadow: 0 3px 10px rgba(39,215,232,.08), 0 1px 0 rgba(255,255,255,.9) inset;
    font-weight: 750;
}
.qdl-notification-header .qdl-popover-sync > i {
    background: #0F9FAE;
    box-shadow: 0 0 0 3px rgba(39,215,232,.14), 0 0 8px rgba(39,215,232,.30);
}
.qdl-notification-header .qdl-popover-sync[data-qdl-live-state="checking"] > i,
.qdl-notification-header .qdl-popover-sync[data-qdl-live-state="retrying"] > i {
    background: #B45309;
    box-shadow: 0 0 0 3px rgba(245,158,11,.14);
}
.qdl-notification-header .qdl-popover-sync.is-offline > i {
    background: #BE123C;
    box-shadow: 0 0 0 3px rgba(225,29,72,.13);
}

/* Every header control shares the Quest HUD shape: readable glass, clear focus, no hover jump. */
.qdl-notification-header .qdl-popover-read-all {
    color: #6D28D9;
    border-color: rgba(130,36,227,.22);
    background: linear-gradient(115deg, rgba(243,238,255,.96), rgba(255,255,255,.96) 58%, rgba(231,251,255,.78));
    box-shadow: 0 3px 9px rgba(109,40,217,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
.qdl-notification-header .qdl-read-all-icon {
    color: #6D28D9;
    background: linear-gradient(145deg, #E9D5FF, #CFFAFE);
}
.qdl-notification-header .qdl-popover-read-all:hover {
    color: #6D28D9;
    border-color: rgba(130,36,227,.22);
    background: linear-gradient(115deg, rgba(243,238,255,.96), rgba(255,255,255,.96) 58%, rgba(231,251,255,.78));
    box-shadow: 0 3px 9px rgba(109,40,217,.06), 0 1px 0 rgba(255,255,255,.9) inset;
    transform: none;
}
.qdl-notification-header .qdl-popover-close {
    color: #6D28D9;
    border: 1px solid rgba(130,36,227,.20);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,238,255,.90));
    box-shadow: 0 3px 9px rgba(109,40,217,.06), 0 1px 0 rgba(255,255,255,.95) inset;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.qdl-notification-header .qdl-popover-close:hover {
    color: #6D28D9;
    border-color: rgba(130,36,227,.20);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,238,255,.90));
    box-shadow: 0 3px 9px rgba(109,40,217,.06), 0 1px 0 rgba(255,255,255,.95) inset;
    transform: none;
}
.qdl-notification-header .qdl-popover-close .qdl-ui-icon svg { stroke-width: 2.5; }

/* Notification cards retain their approved per-category colors while gaining one shared glass frame. */
.qdl-notification-header .qdl-popover-list {
    scrollbar-color: rgba(130,36,227,.34) rgba(243,238,255,.68);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item {
    border-radius: 17px;
    box-shadow: 0 7px 18px rgba(53,41,92,.055), 0 1px 0 rgba(255,255,255,.88) inset;
    backdrop-filter: blur(7px);
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item:hover {
    transform: none;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-title-row strong { color: #35345B; }
.qdl-notification-header .qdl-popover-list .qdl-notification-content p { color: #35345B !important; }
.qdl-notification-header .qdl-popover-list .qdl-notification-meta,
.qdl-notification-header .qdl-popover-list .qdl-notification-time { color: #514F75; }
.qdl-notification-header .qdl-popover-list .qdl-notification-action,
.qdl-notification-header .qdl-popover-list .qdl-notification-expand,
.qdl-notification-header .qdl-popover-list .qdl-notification-more,
.qdl-notification-header .qdl-popover-list .qdl-notification-delete {
    border-radius: 10px;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-action:hover,
.qdl-notification-header .qdl-popover-list .qdl-notification-expand:hover,
.qdl-notification-header .qdl-popover-list .qdl-notification-more:hover,
.qdl-notification-header .qdl-popover-list .qdl-notification-delete:hover { transform: none; }

/* Both the authenticated three-action footer and guest single-action footer use the same HUD rail. */
.qdl-notification-header .qdl-popover-footer {
    border-top: 1px solid rgba(130,36,227,.13);
    background: linear-gradient(112deg, rgba(243,238,255,.82), rgba(255,255,255,.94) 48%, rgba(231,251,255,.80));
    box-shadow: 0 -4px 15px rgba(109,40,217,.025), 0 1px 0 rgba(255,255,255,.92) inset;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary,
.qdl-notification-header .qdl-popover-footer-guest .qdl-popover-footer-primary {
    border-color: rgba(130,36,227,.22);
    background: linear-gradient(112deg, #8224E3 0%, #6D28D9 58%, #5145CD 100%);
    box-shadow: 0 6px 15px rgba(109,40,217,.18), 0 0 0 1px rgba(255,255,255,.18) inset;
    color: #FFFFFF !important;
    transition: box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary:hover {
    background: linear-gradient(112deg, #8224E3 0%, #6D28D9 58%, #5145CD 100%);
    border-color: rgba(130,36,227,.22);
    box-shadow: 0 6px 15px rgba(109,40,217,.18), 0 0 0 1px rgba(255,255,255,.18) inset;
    transform: none;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary) {
    color: #514F75;
    border-color: rgba(130,36,227,.16);
    background: linear-gradient(120deg, rgba(255,255,255,.97), rgba(243,238,255,.90) 55%, rgba(231,251,255,.78));
    box-shadow: 0 3px 9px rgba(53,41,92,.035), 0 1px 0 rgba(255,255,255,.94) inset;
}
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover {
    color: #514F75;
    border-color: rgba(130,36,227,.16);
    background: linear-gradient(120deg, rgba(255,255,255,.97), rgba(243,238,255,.90) 55%, rgba(231,251,255,.78));
    box-shadow: 0 3px 9px rgba(53,41,92,.035), 0 1px 0 rgba(255,255,255,.94) inset;
    transform: none;
}
.qdl-notification-header .qdl-popover-footer-link-icon {
    color: #6D28D9;
    background: linear-gradient(145deg, #E9D5FF, #CFFAFE);
    border: 1px solid rgba(130,36,227,.11);
}
.qdl-notification-header .qdl-popover-footer-primary .qdl-popover-footer-link-icon { color: #FFFFFF; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.12); }
.qdl-notification-header .qdl-popover-footer a:focus-visible,
.qdl-notification-header .qdl-popover-read-all:focus-visible,
.qdl-notification-header .qdl-popover-close:focus-visible,
.qdl-notification-header .qdl-header-loyalty-ribbon:focus-visible {
    outline: 3px solid #6D28D9;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(39,215,232,.42);
}
.qdl-notification-header .qdl-guest-access-v429 {
    border-color: rgba(130,36,227,.20);
    box-shadow: 0 8px 20px rgba(109,40,217,.07), 0 0 0 1px rgba(39,215,232,.08) inset;
}
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger {
    background: linear-gradient(145deg, #8224E3 0%, #6D28D9 66%, #5145CD 100%);
    box-shadow: 0 9px 20px rgba(109,40,217,.20), 0 0 0 1px rgba(255,255,255,.20) inset;
}
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link { box-shadow: 0 5px 13px rgba(109,40,217,.14), 0 0 0 1px rgba(39,215,232,.12) inset; }
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link::before { animation: none; }
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link:hover,
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger:hover { transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    .qdl-notification-header .qdl-avatar-ring,
    .qdl-notification-header .qdl-avatar-halo-two,
    .qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link::before,
    .qdl-notification-header .qdl-header-loyalty-ribbon-track > span::before,
    .qdl-notification-header .qdl-header-loyalty-ribbon-track > span::after {
        animation: none !important;
    }
    .qdl-notification-header .qdl-avatar-trigger,
    .qdl-notification-header .qdl-guest-notification-trigger,
    .qdl-notification-header .qdl-guest-auth-link,
    .qdl-notification-header .qdl-header-loyalty-ribbon,
    .qdl-notification-header .qdl-popover-close,
    .qdl-notification-header .qdl-popover-read-all,
    .qdl-notification-header .qdl-popover-footer a,
    .qdl-notification-header .qdl-popover-list .qdl-notification-item { transition: none !important; }
}
@media (forced-colors: active) {
    .qdl-notification-header .qdl-notification-popover,
    .qdl-notification-header .qdl-popover-head,
    .qdl-notification-header .qdl-popover-footer,
    .qdl-notification-header .qdl-header-loyalty-ribbon,
    .qdl-notification-header .qdl-popover-sync,
    .qdl-notification-header .qdl-popover-read-all,
    .qdl-notification-header .qdl-popover-close,
    .qdl-notification-header .qdl-popover-footer a {
        background: Canvas !important;
        color: CanvasText !important;
        border-color: ButtonText !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .qdl-notification-header .qdl-header-loyalty-ribbon-label,
    .qdl-notification-header .qdl-header-loyalty-ribbon-balance strong,
    .qdl-notification-header .qdl-header-loyalty-ribbon-progress-head,
    .qdl-notification-header .qdl-header-loyalty-ribbon-progress-head strong,
    .qdl-notification-header .qdl-header-loyalty-ribbon-hint,
    .qdl-notification-header .qdl-header-loyalty-ribbon-arrow,
    .qdl-notification-header .qdl-popover-title-copy strong,
    .qdl-notification-header .qdl-popover-title-copy > span,
    .qdl-notification-header .qdl-popover-sync,
    .qdl-notification-header .qdl-popover-read-all,
    .qdl-notification-header .qdl-popover-close,
    .qdl-notification-header .qdl-popover-footer a { color: CanvasText !important; }
    .qdl-notification-header .qdl-header-loyalty-ribbon-track > span,
    .qdl-notification-header .qdl-header-loyalty-ribbon-track > span::before,
    .qdl-notification-header .qdl-header-loyalty-ribbon-track > span::after { background: Highlight !important; box-shadow: none !important; display: none !important; animation: none !important; }
    .qdl-notification-header .qdl-header-loyalty-ribbon-track { border-color: CanvasText !important; background: Canvas !important; }
    .qdl-notification-header :is(.qdl-popover-close, .qdl-popover-read-all, .qdl-popover-footer a, .qdl-header-loyalty-ribbon):focus-visible { outline: 2px solid Highlight !important; box-shadow: none !important; }
}


/* v4.38.102 — neutral hover contract: keep all header controls visually stable on pointer hover. */
.qdl-notification-header .qdl-avatar-trigger:hover:not(:focus-visible),
.qdl-notification-header .qdl-guest-notification-trigger:hover:not(:focus-visible) {
    transform: none !important;
    filter: none !important;
}
.qdl-notification-header .qdl-avatar-trigger:hover:not(:focus-visible) .qdl-avatar-halo-one { opacity: .7 !important; }
.qdl-notification-header .qdl-avatar-trigger:hover:not(:focus-visible) .qdl-avatar-halo-two { opacity: .56 !important; }
.qdl-notification-header .qdl-avatar-trigger:hover:not(:focus-visible) .qdl-unread-badge { filter: none !important; }
.qdl-notification-header .qdl-guest-access-v429:hover:not(:focus-within) {
    border-color: rgba(130,36,227,.20) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 20px rgba(109,40,217,.07), 0 0 0 1px rgba(39,215,232,.08) inset !important;
}
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-notification-trigger:hover:not(:focus-visible) {
    transform: none !important;
    filter: none !important;
    background: linear-gradient(145deg, #8224E3 0%, #6D28D9 66%, #5145CD 100%) !important;
    box-shadow: 0 9px 20px rgba(109,40,217,.20), 0 0 0 1px rgba(255,255,255,.20) inset !important;
}
.qdl-notification-header .qdl-guest-access-v429 .qdl-guest-auth-link:hover:not(:focus-visible) {
    color: #fff !important;
    background: #8224e3 !important;
    border-color: rgba(130,36,227,.22) !important;
    transform: none !important;
    filter: none !important;
    box-shadow: 0 5px 13px rgba(109,40,217,.14), 0 0 0 1px rgba(39,215,232,.12) inset !important;
}
.qdl-notification-header .qdl-header-loyalty-ribbon:hover:not(:focus-visible),
.qdl-notification-header .qdl-popover-read-all:hover:not(:focus-visible),
.qdl-notification-header .qdl-popover-close:hover:not(:focus-visible),
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-primary:hover:not(:focus-visible),
.qdl-notification-header .qdl-popover-footer-auth .qdl-popover-footer-link:not(.qdl-popover-footer-primary):hover:not(:focus-visible) {
    transform: none !important;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item:hover:not(.is-unread):not(:focus-visible) {
    background: linear-gradient(90deg, var(--qdl-type-tint-strong) 0%, var(--qdl-type-tint-mid) 31%, var(--qdl-type-tint-soft) 62%, rgba(255,255,255,.985) 100%);
    border-color: var(--qdl-type-border);
    box-shadow: 0 7px 18px rgba(53,41,92,.055), 0 1px 0 rgba(255,255,255,.88) inset;
    transform: none !important;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item.is-unread:hover:not(:focus-visible) {
    background: linear-gradient(90deg, var(--qdl-type-unread-strong) 0%, var(--qdl-type-unread-mid) 32%, var(--qdl-type-tint-soft) 62%, rgba(255,255,255,.985) 100%);
    border-color: var(--qdl-type-border-strong);
    box-shadow: 0 12px 27px var(--qdl-type-shadow), inset 0 1px 0 rgba(255,255,255,.93);
    transform: none !important;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-action:hover:not(:focus-visible) {
    color: var(--qdl-type-accent);
    background: var(--qdl-type-action-bg);
    border-color: var(--qdl-type-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    transform: none !important;
    filter: none !important;
}
.qdl-notification-header .qdl-popover-list .qdl-notification-item :is(.qdl-notification-expand, .qdl-notification-more, .qdl-notification-delete):hover:not(:focus-visible) {
    transform: none !important;
    filter: none !important;
}
.qdl-notification-header .qdl-popover-footer :is(.qdl-popover-footer-primary):hover:not(:focus-visible) {
    transform: none !important;
    filter: none !important;
}


/* v4.38.105 — authenticated and guest popover footer actions are text-only. */
.qdl-notification-header .qdl-popover-footer-link-icon { display: none !important; }


/* Stage 107: mobile header controls keep comfortable touch targets; VisualViewport bounds
 * are coordinated by frontend.js and these safe-area environment values. */
:root {
    --qdl-popover-safe-area-top: env(safe-area-inset-top, 0px);
    --qdl-popover-safe-area-right: env(safe-area-inset-right, 0px);
    --qdl-popover-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --qdl-popover-safe-area-left: env(safe-area-inset-left, 0px);
}
@media (max-width: 680px) {
    .qdl-notification-header .qdl-popover-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 44px;
        box-sizing: border-box;
    }
    .qdl-notification-header .qdl-popover-read-all {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
}
@media (max-width: 390px) {
    .qdl-notification-header .qdl-popover-read-all {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding-inline: 0;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* v4.38.109 — Enforce natural notification-card height across header popover and Center.
 * Header cards previously only had min-height rules. They did not explicitly cancel a
 * theme/global fixed height, so removing text clamps alone could still leave bodies
 * clipped. These scoped high-specificity resets let each card grow to its full content.
 * Keep the card's own overflow clipping for its rounded surface; overflow on the outer
 * shell stays visible so menus and focus rings are not cut off.
 */
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-day-group-list,
body .qdl-center .qdl-center-list,
body .qdl-center .qdl-day-group-list {
    grid-auto-rows: max-content !important;
    align-content: start !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-day-group,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-day-group-list,
body .qdl-center .qdl-day-group,
body .qdl-center .qdl-day-group-list {
    height: auto !important;
    max-height: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    align-self: start !important;
    overflow: visible !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item-shell,
body .qdl-center .qdl-notification-item-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    align-self: start !important;
    overflow: visible !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item,
body .qdl-center .qdl-day-group-list .qdl-notification-item {
    height: auto !important;
    max-height: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    align-self: start !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-content,
body .qdl-center .qdl-notification-item .qdl-notification-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
    content-visibility: visible !important;
    contain: none !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-title-row,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-title-row strong,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-content p,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-meta,
body .qdl-center .qdl-notification-item .qdl-notification-title-row,
body .qdl-center .qdl-notification-item .qdl-notification-title-row strong,
body .qdl-center .qdl-notification-item .qdl-notification-content p,
body .qdl-center .qdl-notification-item .qdl-notification-meta {
    height: auto !important;
    max-height: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-title-row strong,
body .qdl-notification-shell.qdl-notification-header .qdl-popover-list .qdl-notification-item .qdl-notification-content p,
body .qdl-center .qdl-notification-item .qdl-notification-title-row strong,
body .qdl-center .qdl-notification-item .qdl-notification-content p {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: initial !important;
}