/* Shared notification UI. Colour lives in OKLCH tokens; assets are local. */
.notification-center {
    --notification-accent: var(--c-red-500, oklch(.45 .13 15));
    --notification-paper: var(--c-surface, oklch(.995 .004 65));
    --notification-soft: var(--c-red-50, oklch(.97 .009 15));
    --notification-ink: var(--c-ink, oklch(.28 .009 320));
    --notification-muted: var(--c-ink-soft, oklch(.44 .013 345));
    --notification-line: var(--c-line, oklch(.91 .009 65));
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--font-body, var(--font-text));
}
.notification-center [hidden], .notification-retry[hidden] { display: none !important; }
.notification-trigger, .notification-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.notification-trigger { position: relative; text-decoration: none; }
.notification-trigger:hover, .notification-icon-button:hover { background: var(--c-red-50); border-color: var(--c-red-200); color: var(--c-red-600); }
.notification-trigger > svg { width: 23px; height: 23px; }
.notification-icon-button > svg { width: 20px; height: 20px; }
.notification-trigger__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding-inline: 4px;
    border: 2px solid var(--c-surface-alt);
    border-radius: 999px;
    background: var(--c-red-500);
    color: oklch(1 0 0);
    font-family: var(--font-numeric, monospace);
    font-size: .625rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
html.has-notification-dialog { overflow: hidden; }
.notification-drawer {
    position: fixed;
    inset: clamp(.5rem, 1.4vw, 1rem) clamp(.5rem, 1.4vw, 1rem) clamp(.5rem, 1.4vw, 1rem) auto;
    width: min(28.5rem, calc(100vw - 1rem));
    height: calc(100dvh - clamp(1rem, 2.8vw, 2rem));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--notification-line);
    border-radius: clamp(1rem, 1.4vw, 1.5rem);
    background: var(--notification-paper);
    color: var(--notification-ink);
    box-shadow: -12px 12px 64px oklch(.2 .015 15 / .18);
    overflow: hidden;
    overscroll-behavior: contain;
}
.notification-drawer::backdrop { background: oklch(.2 .015 15 / .36); backdrop-filter: blur(3px); }
.notification-drawer[open] { animation: notification-enter 240ms var(--ease-out, ease-out); }
.notification-drawer__shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.notification-drawer__header { display: flex; align-items: flex-start; gap: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: clamp(1.25rem, 2vw, 1.5rem); }
.notification-drawer__heading { flex: 1; min-width: 0; }
.notification-eyebrow { display: block; margin: 0 0 .75rem; color: var(--c-red-500); font-size: clamp(.625rem, .6rem + .12vw, .6875rem); font-weight: 650; letter-spacing: .13em; line-height: 1.5; }
.notification-drawer__heading h2 { margin: 0 0 .625rem; color: var(--notification-ink); font-family: var(--font-body, var(--font-text)); font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem); font-weight: 550; letter-spacing: -.045em; line-height: 1.15; }
.notification-drawer__heading p { margin: 0; max-width: 28ch; color: var(--notification-muted); font-size: clamp(.8125rem, .78rem + .15vw, .875rem); line-height: 1.7; }
.notification-drawer__header .notification-icon-button { flex: 0 0 36px; width: 36px; height: 36px; margin-top: -.25rem; background: transparent; }
.notification-drawer__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .875rem clamp(1.25rem, 2.5vw, 2rem); border-block: 1px solid var(--notification-line); background: var(--c-surface-alt); }
.notification-count { color: var(--notification-muted); font-size: .6875rem; line-height: 1.5; }
.notification-drawer__toolbar form, .notification-item__actions form { margin: 0; }
.notification-text-button { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 36px; padding: .375rem 0; border: 0; background: transparent; color: var(--c-red-600); font: inherit; font-size: .6875rem; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: none; cursor: pointer; }
.notification-text-button svg { width: 16px; height: 16px; flex-shrink: 0; }
.notification-text-button:hover { color: var(--c-red-700); text-decoration: underline; text-underline-offset: 3px; }
.notification-text-button:disabled { color: var(--c-muted); cursor: default; text-decoration: none; }
.notification-drawer__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.notification-status { margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); color: var(--notification-muted); font-size: .875rem; line-height: 1.8; }
.notification-status:empty { display: none; }
.notification-list { display: grid; }
.notification-item { position: relative; display: flex; align-items: flex-start; gap: .875rem; min-width: 0; margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid var(--c-line-soft); }
.notification-item--unread { background: var(--c-red-50); }
.notification-item__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface); color: var(--c-red-500); }
.notification-item__icon svg { width: 20px; height: 20px; }
.notification-item__content { flex: 1; min-width: 0; }
.notification-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-bottom: .5rem; color: var(--c-ink-soft); font-size: .625rem; line-height: 1.5; }
.notification-item__meta time, .notification-number { font-family: var(--font-numeric, monospace); font-variant-numeric: tabular-nums; }
.notification-unread-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-red-600); font-size: .6875rem; font-weight: 500; }
.notification-unread-label::before { content: ''; inline-size: .35rem; block-size: .35rem; flex: none; border-radius: 50%; background: currentColor; }
.notification-item h2, .notification-item h3 { margin: 0 0 .5rem; color: var(--c-ink); font-size: clamp(.9375rem, .9rem + .15vw, 1rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.45; overflow-wrap: anywhere; }
.notification-item p { margin: 0; color: var(--c-ink-soft); font-size: .8125rem; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-line; }
.notification-item__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .625rem; }
.notification-drawer__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .875rem clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid var(--notification-line); }
.notification-drawer__footer > span { display: inline-flex; align-items: center; gap: .375rem; color: var(--notification-muted); font-size: .625rem; }
.notification-drawer__footer > span svg { width: 15px; height: 15px; }
.notification-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem); text-align: center; }
.notification-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: .5rem; border: 1px solid var(--c-red-100); border-radius: 21px; background: var(--c-red-50); color: var(--c-red-500); }
.notification-empty__icon svg { width: 32px; height: 32px; }
.notification-empty h2, .notification-empty h3 { margin: 0; color: var(--c-ink); font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); font-weight: 550; letter-spacing: -.035em; }
.notification-empty p { max-width: 40ch; margin: 0; color: var(--c-ink-soft); font-size: .8125rem; line-height: 1.9; }
.notification-action { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--c-red-200); border-radius: 10px; background: var(--c-surface); color: var(--c-red-600); font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; }
.notification-action svg { flex-shrink: 0; width: 18px; height: 18px; }
.notification-action:hover { background: var(--c-red-50); color: var(--c-red-700); border-color: var(--c-red-400); }
.notification-retry { margin: 0 clamp(1.25rem, 2.5vw, 2rem) 1.25rem; }
.announcements-page { padding-block: clamp(2.5rem, 6vw, 6rem); }
.announcements-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.announcements-heading h1 { margin: 0 0 1rem; color: var(--c-ink); font-family: var(--font-body, var(--font-text)); font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); font-weight: 550; letter-spacing: -.055em; line-height: 1.1; }
.announcements-heading p:last-child { max-width: 48ch; margin: 0; color: var(--c-ink-soft); font-size: clamp(.875rem, .8rem + .3vw, 1rem); line-height: 1.9; }
.announcements-heading__icon { display: flex; align-items: center; justify-content: center; width: clamp(5rem, 10vw, 8rem); aspect-ratio: 1; flex-shrink: 0; border: 1px solid var(--c-red-200); border-radius: 32%; background: var(--c-red-50); color: var(--c-red-500); }
.announcements-heading__icon svg { width: 46%; height: 46%; }
.announcement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.announcement-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--c-line); border-radius: clamp(1rem, 2vw, 1.5rem); background: var(--c-surface); }
.notification-category { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-red-600); font-size: .625rem; font-weight: 600; letter-spacing: .1em; }
.notification-category svg { width: 18px; height: 18px; }
.announcement-card h2 { margin: 1.5rem 0 1rem; font-size: clamp(1.25rem, 1rem + .75vw, 1.75rem); font-weight: 550; letter-spacing: -.035em; line-height: 1.35; overflow-wrap: anywhere; }
.announcement-card h2 a { color: var(--c-ink); text-decoration: none; }
.announcement-card h2 a:hover { color: var(--c-red-600); }
.announcement-card > p { margin: 0 0 1.5rem; color: var(--c-ink-soft); font-size: .875rem; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.announcement-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.notification-meta { color: var(--c-ink-soft); font-size: .6875rem; }
.notification-empty--page { border: 1px solid var(--c-line); border-radius: 20px; background: var(--c-surface); }
.notification-empty--page .notification-action { margin-top: .75rem; }
.notification-inbox { font-family: var(--font-body, var(--font-text)); }
.notification-inbox__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.notification-inbox__header h1 { margin: 0 0 .625rem; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); font-weight: 550; letter-spacing: -.045em; line-height: 1.2; }
.notification-inbox__header p:last-child { margin: 0; color: var(--c-ink-soft); font-size: .8125rem; line-height: 1.8; }
.notification-inbox__summary { display: flex; align-items: center; gap: 1rem; padding: clamp(1.125rem, 2vw, 1.5rem); margin-bottom: 1.25rem; border: 1px solid var(--c-red-100); border-radius: 14px; background: var(--c-red-50); }
.notification-inbox__summary-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--c-surface); color: var(--c-red-500); }
.notification-inbox__summary-icon svg { width: 24px; height: 24px; }
.notification-inbox__summary strong { color: var(--c-ink); font-size: .8125rem; font-weight: 600; }
.notification-inbox__list { overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); }
.notification-inbox__list .notification-item:last-child { border-bottom: 0; }
.notification-item--inbox { gap: clamp(.875rem, 2vw, 1.25rem); padding: clamp(1.25rem, 2vw, 1.75rem); }
.notification-item--inbox .notification-item__actions { gap: .5rem 1.5rem; }
.notification-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
@keyframes notification-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 600px) {
    .notification-drawer { inset: .5rem; width: calc(100vw - 1rem); }
    .announcements-heading { gap: 1rem; }
    .announcements-heading__icon { display: none; }
    .announcement-grid { grid-template-columns: 1fr; }
    .notification-drawer__footer { gap: .25rem; }
    .notification-item { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .notification-drawer[open] { animation: none; } }
.notification-center--admin .request-notification-meta,.notification-inbox .request-notification-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .65rem;margin:.7rem 0 0;font-size:clamp(.72rem,.68rem + .15vw,.8rem);line-height:1.5}
.request-notification-meta__type,.request-notification-meta__model{color:var(--c-ink-soft);overflow-wrap:anywhere}
.request-notification-meta__type{font-weight:500}.request-notification-meta__model{padding-left:.65rem;border-left:1px solid var(--c-line)}
.request-notification-meta__verification{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .5rem;border-radius:999px;font-size:.7rem;font-weight:400;white-space:normal}
.request-notification-meta__verification--verified{color:oklch(.38 .075 155);background:oklch(.95 .025 155)}
.request-notification-meta__verification--unknown{color:var(--c-ink-soft);background:var(--c-surface-alt)}