.navbar-notification-button { align-items: center; background: rgba(255,255,255,.72); border: 1px solid rgba(148,163,184,.28); border-radius: 50%; color: #475569; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 40px; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; position: relative; transition: background .18s ease, color .18s ease, transform .18s ease; width: 44px; }
.navbar-notification-button:hover, .navbar-notification-button[aria-expanded="true"] { background: rgba(234,249,243,.9); color: #277a61; transform: translateY(-1px); }
.navbar-notification-button svg { height: 21px; stroke: currentColor; width: 21px; }
.navbar-notification-badge { align-items: center; background: #ef4444; border: 2px solid #fff; border-radius: 999px; color: #fff; display: flex; font-size: 10px; font-weight: 800; height: 19px; justify-content: center; min-width: 19px; padding: 0 4px; position: absolute; right: -3px; top: -3px; }
.navbar-notification-badge[hidden] { display: none; }
.notification-panel-backdrop { background: rgba(15,23,42,.18); height: calc(100vh / var(--site-page-zoom, 1)); inset: 0; position: fixed; width: calc(100vw / var(--site-page-zoom, 1)); z-index: 1210; }
.notification-panel-backdrop[hidden] { display: none; }
.notification-panel { background: rgba(255,255,255,.98); border: 1px solid rgba(226,232,240,.9); border-radius: 18px; box-shadow: 0 24px 70px rgba(15,23,42,.18); display: flex; flex-direction: column; max-height: min(680px, calc((100vh / var(--site-page-zoom, 1)) - 86px)); opacity: 0; overflow: hidden; pointer-events: none; position: fixed; right: 24px; top: 70px; transform: translateY(-8px) scale(.98); transition: opacity .18s ease, transform .18s ease; visibility: hidden; width: min(410px, calc((100vw / var(--site-page-zoom, 1)) - 32px)); z-index: 1211; }
.notification-panel.is-open { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.notification-panel-head { align-items: center; border-bottom: 1px solid #eef2f7; display: flex; justify-content: space-between; padding: 18px; }
.notification-panel-head h2 { color: #1e293b; font-size: 19px; margin: 0; }
.notification-panel-head p { color: #94a3b8; font-size: 12px; margin: 4px 0 0; }
.notification-panel-head-actions { align-items: center; display: flex; gap: 8px; }
.notification-panel-head-actions button { background: transparent; border: 0; color: #64748b; cursor: pointer; min-height: 44px; padding: 6px; }
#notificationReadAll { color: #277a61; font-size: 13px; }
#notificationPanelClose { align-items: center; border: 1px solid rgba(15,23,42,.1); border-radius: 50%; display: inline-flex; font-size: 24px; height: 44px; justify-content: center; padding: 0; width: 44px; }
.notification-list { overflow-y: auto; overscroll-behavior: contain; padding: 10px; }
.notification-list-state { color: #94a3b8; padding: 34px 10px; text-align: center; }
.notification-item { border: 1px solid transparent; border-radius: 13px; padding: 13px; position: relative; }
.notification-item + .notification-item { border-top-color: #f1f5f9; }
.notification-item.is-unread { background: rgba(240,253,248,.76); border-color: rgba(74,188,153,.14); }
.notification-item-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.notification-item-type { background: #f1f5f9; border-radius: 999px; color: #475569; font-size: 11px; font-weight: 700; padding: 4px 8px; }
.notification-item-type--system_announcement { background: #fff4df; color: #9a5b11; }
.notification-item-type--website_update { background: #eaf2ff; color: #365faa; }
.notification-item-type--ordinary_message { background: #eaf9f3; color: #277a61; }
.notification-item-time { color: #94a3b8; font-size: 11px; }
.notification-item h3 { color: #1e293b; font-size: 15px; margin: 10px 0 6px; }
.notification-item-content { color: #64748b; display: -webkit-box; font-size: 13px; line-height: 1.6; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.notification-item-actions { align-items: center; display: flex; gap: 12px; justify-content: flex-end; margin-top: 9px; }
.notification-item-actions a, .notification-item-actions button { background: transparent; border: 0; color: #277a61; cursor: pointer; font-size: 12px; min-height: 36px; padding: 5px 0; text-decoration: none; }
.notification-popup { align-items: center; background: rgba(15,23,42,.48); border: 0; display: none; height: calc(100vh / var(--site-page-zoom, 1)); inset: 0; justify-content: center; margin: 0; max-height: none; max-width: none; padding: 24px; pointer-events: none; position: fixed; width: calc(100vw / var(--site-page-zoom, 1)); z-index: 99989; }
.notification-popup[data-fallback-open="true"] { display: flex !important; opacity: 1 !important; visibility: visible !important; }
.notification-popup-card { background: #fff; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; box-shadow: 0 30px 90px rgba(15,23,42,.24); max-height: min(720px, calc((100vh / var(--site-page-zoom, 1)) - 48px)); max-width: 560px; overflow: auto; padding: 28px; pointer-events: auto; width: 100%; }
.notification-popup-icon { align-items: center; background: #fef3c7; border-radius: 14px; color: #d97706; display: flex; height: 48px; justify-content: center; margin-bottom: 16px; width: 48px; }
.notification-popup-icon svg { height: 25px; stroke: currentColor; width: 25px; }
.notification-popup-type { color: #277a61; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.notification-popup h2 { color: #172033; font-size: 23px; margin: 9px 0 13px; }
.notification-popup-content { color: #475569; line-height: 1.75; overflow-wrap: anywhere; }
.notification-popup-suppress { align-items: center; color: #64748b; cursor: pointer; display: flex; gap: 8px; margin-top: 20px; }
.notification-popup-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.notification-popup-actions a, .notification-popup-actions button { border-radius: 10px; min-height: 44px; padding: 10px 18px; }
.notification-popup-action { background: rgba(94,137,238,.12); color: #365faa; text-decoration: none; }
.notification-popup-close { background: #4abc99; border: 0; color: #173f34; cursor: pointer; }
.notification-popup-more { color: #94a3b8; font-size: 12px; margin: 14px 0 0; text-align: right; }
.notification-popup-open-list { background: transparent; border: 0; color: #365faa; cursor: pointer; display: block; margin: 4px 0 0 auto; min-height: 44px; padding: 6px 0; }
.notification-popup-open-list[hidden] { display: none; }
body.notification-layer-lock { overflow: hidden; }

.notification-rich-content { overflow-wrap: anywhere; }
.notification-rich-content > :first-child { margin-top: 0; }
.notification-rich-content > :last-child { margin-bottom: 0; }
.notification-rich-content h2 { color: #1e293b; font-size: 1.35em; line-height: 1.4; margin: 1.25em 0 .55em; }
.notification-rich-content h3 { color: #334155; font-size: 1.15em; line-height: 1.45; margin: 1.15em 0 .5em; }
.notification-rich-content p { margin: .7em 0; }
.notification-rich-content ul, .notification-rich-content ol { margin: .75em 0; padding-left: 1.6em; }
.notification-rich-content li { margin: .35em 0; }
.notification-rich-content blockquote { background: #f8fafc; border-left: 4px solid #4abc99; border-radius: 0 10px 10px 0; color: #475569; margin: 1em 0; padding: .8em 1em; }
.notification-rich-content a { color: #365faa; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.notification-rich-content figure { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; margin: 1.1em 0; overflow: hidden; padding: 10px; text-align: center; }
.notification-rich-content img, .notification-rich-content video { border-radius: 9px; display: block; height: auto; margin: 0 auto; max-width: 100%; }
.notification-rich-content audio { display: block; margin: 4px 0; max-width: 100%; width: 100%; }
.notification-rich-content figcaption { color: #64748b; font-size: 12px; line-height: 1.55; margin-top: 8px; }
.notification-rich-content .notification-align-left { text-align: left; }
.notification-rich-content .notification-align-center { text-align: center; }
.notification-rich-content .notification-align-right { text-align: right; }
.notification-rich-content .notification-color-red { color: #dc2626; }
.notification-rich-content .notification-color-orange { color: #ea580c; }
.notification-rich-content .notification-color-green { color: #059669; }
.notification-rich-content .notification-color-blue { color: #2563eb; }
.notification-rich-content .notification-color-purple { color: #654ea3; }
.notification-rich-content .notification-indent-1 { margin-left: 1.5em; }
.notification-rich-content .notification-indent-2 { margin-left: 3em; }
.notification-rich-content .notification-indent-3 { margin-left: 4.5em; }
.notification-rich-content .notification-indent-4 { margin-left: 6em; }

/* Notification surfaces follow the site's navigation drawer. */
.notification-panel { background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.72); border-radius: 16px; box-shadow: -20px 20px 42px rgba(15,23,42,.12); width: min(390px, calc((100vw / var(--site-page-zoom, 1)) - 32px)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.notification-panel-head { background: transparent; border-bottom: 1px solid rgba(15,23,42,.08); padding: 20px 20px 16px; }
.notification-panel-head h2 { color: #333333; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.notification-panel-head p { color: #64748b; }
.notification-panel-head-actions button { border-radius: 10px; }
.notification-panel-head-actions button:hover { background: rgba(255,255,255,.72); color: #277a61; }
.notification-panel-head-actions button:focus-visible,
.notification-item-trigger:focus-visible,
.notification-detail-close:focus-visible,
.notification-detail-action:focus-visible,
.notification-detail-done:focus-visible { outline: 3px solid rgba(94,137,238,.28); outline-offset: 2px; }
.notification-list { display: grid; gap: 4px; padding: 10px 12px 14px; scrollbar-color: #cbd5e1 transparent; }
.notification-item { border: 0; border-bottom: 1px solid rgba(15,23,42,.06); border-radius: 0; padding: 0; }
.notification-item.is-unread { background: transparent; }
.notification-item:last-child { border-bottom: 0; }
.notification-item + .notification-item { border-top: 0; }
.notification-item-trigger { align-items: stretch; background: transparent; border: 1px solid transparent; border-radius: 14px; box-shadow: none; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); min-height: 108px; padding: 13px 10px; text-align: left; transform: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; width: 100%; }
.notification-item-trigger:hover { background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.05); box-shadow: 1px 1px 3px rgba(15,23,42,.1); transform: none; }
.notification-item.is-unread .notification-item-trigger { background: rgba(240,253,248,.76); border-color: rgba(74,188,153,.14); box-shadow: inset 3px 0 0 #4abc99; }
.notification-item-number { align-items: center; align-self: start; background: rgba(15,23,42,.05); border-radius: 8px; color: #64748b; display: inline-flex; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; height: 28px; justify-content: center; letter-spacing: .02em; position: relative; width: 28px; }
.notification-item.is-unread .notification-item-number { background: #4abc99; color: #fff; }
.notification-item.is-unread .notification-item-number::after { background: #fff; border: 2px solid #4abc99; border-radius: 50%; content: ""; height: 7px; position: absolute; right: -3px; top: -3px; width: 7px; }
.notification-item-main { display: block; min-width: 0; }
.notification-item-head { justify-content: flex-start; }
.notification-item-time { font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.notification-item-title { color: #1f2937; display: block; font-size: 15px; font-weight: 600; line-height: 1.45; margin: 9px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-item-summary { color: #64748b; display: -webkit-box; font-size: 13px; line-height: 1.55; min-height: 40px; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-item-foot { align-items: center; display: flex; justify-content: space-between; margin-top: 7px; }
.notification-item-status { color: #94a3b8; font-size: 12px; }
.notification-item.is-unread .notification-item-status { color: #277a61; font-weight: 700; }
.notification-item-chevron { height: 18px; stroke: #94a3b8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 18px; }
.notification-list-state { align-items: center; color: #64748b; display: flex; justify-content: center; min-height: 180px; }

.notification-detail-layer { align-items: center; background: rgba(15,23,42,.42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; height: calc(100vh / var(--site-page-zoom, 1)); inset: 0; justify-content: center; padding: 24px; position: fixed; width: calc(100vw / var(--site-page-zoom, 1)); z-index: 2147483001; }
.notification-detail-layer[hidden] { display: none !important; }
.notification-detail-layer.is-open { display: flex; }
.notification-detail-card { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; box-shadow: 0 20px 60px rgba(15,23,42,.2); max-height: min(760px, calc((100vh / var(--site-page-zoom, 1)) - 48px)); max-width: 680px; overflow-y: auto; padding: 28px; width: 100%; }
.notification-detail-head { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.notification-detail-eyebrow { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.notification-detail-type { background: #eaf9f3; border-radius: 999px; color: #277a61; font-size: 12px; font-weight: 700; padding: 6px 10px; }
.notification-detail-layer[data-message-type="system_announcement"] .notification-detail-type { background: #fff4df; color: #9a5b11; }
.notification-detail-layer[data-message-type="website_update"] .notification-detail-type { background: #eaf2ff; color: #365faa; }
.notification-detail-layer[data-message-type="ordinary_message"] .notification-detail-type { background: #eaf9f3; color: #277a61; }
.notification-detail-number { color: #64748b; font-size: 12px; font-weight: 600; }
.notification-detail-close { align-items: center; background: rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.1); border-radius: 50%; color: #334155; cursor: pointer; display: inline-flex; flex: 0 0 auto; font-size: 25px; height: 44px; justify-content: center; line-height: 1; min-height: 44px; width: 44px; }
.notification-detail-close:hover { background: #f8fafc; color: #1f2937; }
.notification-detail-card h2 { color: #1e293b; font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.35; margin: 18px 0 8px; overflow-wrap: anywhere; }
.notification-detail-time { color: #64748b; display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.notification-detail-content { border-top: 1px solid rgba(15,23,42,.08); color: #475569; font-size: 15px; line-height: 1.75; margin-top: 22px; overflow-wrap: anywhere; padding-top: 22px; }
.notification-detail-content > :first-child { margin-top: 0; }
.notification-detail-content > :last-child { margin-bottom: 0; }
.notification-detail-actions { align-items: center; border-top: 1px solid rgba(15,23,42,.08); display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 26px; padding-top: 20px; }
.notification-detail-action,
.notification-detail-done { align-items: center; border-radius: 12px; cursor: pointer; display: inline-flex; font-size: 14px; font-weight: 750; justify-content: center; min-height: 44px; padding: 10px 18px; text-decoration: none; }
.notification-detail-action { background: rgba(94,137,238,.12); color: #365faa; }
.notification-detail-action:hover { background: rgba(94,137,238,.18); }
.notification-detail-action[hidden] { display: none; }
.notification-detail-done { background: #4abc99; border: 0; color: #173f34; box-shadow: none; }
.notification-detail-done:hover { background: #3cae8d; }
.site-zoom-transform .notification-detail-layer { height: 100vh; width: 100vw; }
.site-zoom-transform .notification-detail-card { max-height: min(760px, calc(100vh - 48px)); }

@media (max-width: 767px) {
    .navbar-notification-button { height: 44px; min-height: 44px; width: 44px; }
    .notification-panel { border-radius: 18px 18px 0 0; bottom: 0; left: 0; max-height: min(78vh, calc(100vh / var(--site-page-zoom, 1))); right: auto; top: auto; transform: translateY(105%); width: calc(100vw / var(--site-page-zoom, 1)); }
    .notification-panel.is-open { transform: none; }
    .notification-panel-head { padding: 15px 16px; }
    .notification-popup { padding: 14px; }
    .notification-popup-card { border-radius: 18px; max-height: calc((100vh / var(--site-page-zoom, 1)) - 28px); padding: 20px; }
    .notification-popup h2 { font-size: 20px; }
    .notification-popup-actions > * { flex: 1 1 120px; text-align: center; }
    .notification-list { gap: 3px; padding: 8px 10px 12px; }
    .notification-item-trigger { gap: 9px; grid-template-columns: 28px minmax(0, 1fr); min-height: 106px; padding: 12px 8px; }
    .notification-item-number { border-radius: 8px; height: 28px; width: 28px; }
    .notification-detail-layer { align-items: flex-end; padding: 0; }
    .notification-detail-card { border-radius: 16px 16px 0 0; max-height: min(88dvh, calc(88vh / var(--site-page-zoom, 1))); max-width: none; padding: 22px 18px max(20px, env(safe-area-inset-bottom)); width: calc(100vw / var(--site-page-zoom, 1)); }
    .notification-detail-card h2 { font-size: 22px; }
    .notification-detail-content { font-size: 14px; line-height: 1.8; }
    .notification-detail-actions > * { flex: 1 1 130px; }
    .site-zoom-transform .notification-detail-card { max-height: 88dvh; width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-notification-button, .notification-panel, .notification-item-trigger, .notification-detail-card { animation: none; scroll-behavior: auto; transition: none; }
}