.site-notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:7px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--primary);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.site-notification-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-notification-bell b{position:absolute;top:-4px;right:-4px;min-width:15px;padding:1px 4px;border:2px solid var(--surface);border-radius:99px;background:var(--primary);color:var(--primary-text);font-size:9px;line-height:1.3;font-weight:600}
.site-notification-bell[hidden],#siteNotificationDialog [hidden]{display:none!important}
.site-notification-bell:disabled{opacity:1;cursor:default}
.desk-brand:has(.site-notification-brand){display:grid;grid-template-columns:46px minmax(0,1fr) 30px;gap:8px;padding-inline:0}
.desk-brand:has(.site-notification-brand)>div:nth-child(2){min-width:0}
.desk-brand:has(.site-notification-brand) strong{letter-spacing:0;white-space:nowrap}
.desk-brand .site-notification-brand{width:30px;height:32px;padding:5px;border-color:transparent;background:transparent;color:#d6e2e2}
.desk-brand .site-notification-brand:hover{background:#ffffff13;color:#fff}
.desk-brand .site-notification-brand b{border-color:var(--theme-deep)}
.site-notification-home{display:none}
.topbar:has(>.site-notification-bell)>.save-state{margin-left:auto}
#siteNotificationDialog{width:min(620px,calc(100vw - 28px));max-height:85dvh;padding:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
#siteNotificationDialog::backdrop{background:#0005;backdrop-filter:blur(3px)}
.site-notice-head{display:flex;justify-content:space-between;align-items:center;padding:20px 23px;border-bottom:1px solid var(--border)}
.site-notice-head h2{margin:0;font-size:20px}.site-notice-head p{margin:6px 0 0;color:var(--muted);font-size:11px}
.site-notice-close{background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}
.site-notice-scroll{max-height:calc(85dvh - 90px);overflow:auto;overscroll-behavior:contain;padding:18px 23px 24px}
.site-notice-actions{display:flex;gap:8px;flex-wrap:wrap}
#siteNotificationDialog button:not(.site-notice-close){font:inherit;font-size:11px;border:1px solid var(--border);border-radius:9px;padding:8px 11px;color:var(--primary);background:var(--surface-2);cursor:pointer}
#siteNotificationDialog button:disabled{opacity:.6;cursor:wait}
#siteNotificationDialog #noticePublish,#siteNotificationDialog #noticeCompose{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}
#noticeStatus{font-size:11px;color:var(--muted);line-height:1.8;margin:15px 0}
#noticeStatus:empty{display:none}
.site-notice-tabs{display:flex;gap:5px}
#siteNotificationDialog .site-notice-tabs button{border-color:transparent;background:transparent;color:var(--muted)}
#siteNotificationDialog .site-notice-tabs button[aria-pressed="true"]{border-color:var(--border);background:var(--surface-3);color:var(--primary);font-weight:600}
#noticeUnreadCount{font-size:10px;margin-left:3px}
.site-notice-actions{justify-content:space-between;align-items:center}
.site-notice-secondary{display:flex;justify-content:flex-end;gap:8px;margin:13px 0}
#siteNotificationDialog .site-notice-secondary button{padding:3px 5px;border:0;background:none;color:var(--muted);font-size:10px}
.site-notice-empty{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.site-notice-empty svg{width:34px;height:34px;fill:none;stroke:var(--primary);stroke-width:1.3;opacity:.7;margin-bottom:15px}
.site-notice-empty strong{font-size:14px;color:var(--text)}
.site-notice-empty p{font-size:11px;line-height:1.8;max-width:280px;margin-top:9px}
.site-notice-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;color:var(--muted);line-height:1.7;margin-top:8px;overflow-wrap:anywhere}
.site-notice-item[open] .site-notice-preview{display:none}
.site-notice-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#siteNotificationDialog #noticeBack{border:0;background:none;padding:0;color:var(--muted);margin-bottom:18px}
#siteNotificationDialog #noticeNew{display:block;width:100%;margin-bottom:12px;color:var(--primary);background:var(--surface-3)}
#noticeForm{padding:16px;margin-top:16px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px}
#noticeForm h3{margin:0 0 15px;font-size:14px}
#noticeForm label{display:block;font-size:12px;margin-top:12px}
#noticeForm input,#noticeForm textarea{display:block;box-sizing:border-box;width:100%;margin-top:6px;padding:10px;font:inherit;font-size:12px;line-height:1.7;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;resize:vertical}
#noticeForm p{font-size:10px;color:var(--muted);line-height:1.8}
.site-notice-item{border:1px solid var(--border);border-radius:13px;margin-top:10px;background:var(--surface)}
.site-notice-item[data-unread="true"]{border-color:color-mix(in srgb,var(--primary) 40%,var(--border));background:var(--surface-2)}
.site-notice-item summary{padding:15px;cursor:pointer;list-style:none}.site-notice-item summary::-webkit-details-marker{display:none}
.site-notice-item summary strong{font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.site-notice-item[data-unread="true"] summary strong::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:7px;vertical-align:middle}
.site-notice-meta{display:block;font-size:10px;color:var(--muted);margin-top:7px}
.site-notice-body{padding:0 15px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.9}
#siteNotificationDialog .site-notice-withdraw{display:block;margin-top:15px;color:var(--danger)}
#noticeMore{display:block;margin:18px auto 0}
@media(min-width:641px) and (max-width:800px){.desk-brand:has(.site-notification-brand){display:flex;flex-direction:column;gap:10px}.desk-brand:has(.site-notification-brand)>div:nth-child(2){display:none}}
@media(max-width:720px){.today-copy{position:relative;padding-right:38px}.site-notification-home{display:inline-flex;position:absolute;right:0;top:8px}.site-notice-scroll{padding:15px}.site-notice-head{padding:17px}}

/* A quieter inbox: compact chrome, clear message hierarchy, restrained theme accents. */
#siteNotificationDialog{width:min(600px,calc(100vw - 28px));border-radius:22px;box-shadow:0 24px 90px #101c3030}
#siteNotificationDialog::backdrop{background:#14203255;backdrop-filter:blur(5px)}
.site-notice-head{gap:13px;padding:21px 24px;background:linear-gradient(120deg,var(--surface),var(--surface-2));border-color:var(--border)}
.site-notice-heading-icon{display:grid;place-items:center;width:41px;height:41px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--primary);flex:none}
.site-notice-heading-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-notice-heading-copy{flex:1;min-width:0}.site-notice-head h2{font-size:19px;letter-spacing:-.03em}.site-notice-head p{margin-top:4px;font-size:11px}
.site-notice-close{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;font-size:23px}.site-notice-close:hover{background:var(--surface-3);color:var(--primary)}
.site-notice-scroll{padding:18px 24px 24px;max-height:calc(85dvh - 88px)}
.site-notice-actions{gap:10px}.site-notice-tabs{gap:3px;background:var(--surface-2);padding:3px;border:1px solid var(--border);border-radius:11px}
#siteNotificationDialog .site-notice-tabs button{padding:7px 11px;border-radius:8px;font-size:11px}
#siteNotificationDialog .site-notice-tabs button[aria-pressed="true"]{background:var(--surface);border-color:transparent;box-shadow:0 2px 5px color-mix(in srgb,var(--primary) 8%,transparent)}
#siteNotificationDialog #noticeCompose{padding:9px 12px;border-radius:10px;font-size:11px}
.site-notice-secondary{gap:10px;align-items:center;margin:13px 0 8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
#siteNotificationDialog #noticeSound{margin-right:auto;color:var(--muted)}
#siteNotificationDialog .site-notice-secondary button{font-size:10px;padding:4px 0;white-space:nowrap}
.site-notice-item{border:0;border-radius:10px;margin-top:0;background:var(--surface);position:relative}
.site-notice-item+.site-notice-item{border-top:1px solid var(--border);border-radius:0}
.site-notice-item[data-unread="true"]{background:linear-gradient(90deg,var(--surface-2),var(--surface));border-color:var(--border)}
.site-notice-item summary{padding:16px 28px 16px 13px;position:relative}
.site-notice-item summary::after{content:'›';position:absolute;right:9px;top:17px;font-size:20px;color:var(--muted);transition:transform .18s}
.site-notice-item[open] summary::after{transform:rotate(90deg)}
.site-notice-item summary strong{font-size:13px;font-weight:600;line-height:1.65}
.site-notice-item[data-unread="false"] summary strong{font-weight:500}
.site-notice-meta{font-size:10px;margin-top:5px}.site-notice-preview{font-size:11px;margin-top:7px;line-height:1.75}
.site-notice-body{padding:0 25px 18px 13px;font-size:12px;line-height:1.9;color:var(--text)}
.site-notice-empty{min-height:210px}.site-notice-empty svg{width:32px;height:32px}
#noticeForm{padding:0;margin:0;border:0;background:transparent}#noticeForm h3{font-size:14px;margin-bottom:17px}#noticeForm input,#noticeForm textarea{padding:10px 12px;border-radius:10px}#noticeForm p{font-size:10px;line-height:1.8}
#noticeStatus{margin:0 0 13px}.site-notice-form-actions{padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:420px){.site-notice-head{padding:17px;gap:10px}.site-notice-heading-icon{width:35px;height:35px;border-radius:11px}.site-notice-head h2{font-size:17px}.site-notice-scroll{padding:15px}.site-notice-secondary{gap:9px}}
@media(prefers-reduced-motion:reduce){.site-notice-item summary::after{transition:none}}

/* Sound preference is an explicit switch; preview works without publishing a notice. */
.site-notice-sound-control{display:flex;align-items:center;gap:10px;margin-right:auto}
#siteNotificationDialog .site-notice-sound-control #noticeSound{display:inline-flex;align-items:center;gap:7px;margin:0;color:var(--text);font-size:11px;font-weight:500}
#noticeSound::before{content:'';width:26px;height:15px;flex:none;border-radius:99px;background:var(--muted);opacity:.6}
#noticeSound::after{content:'';position:absolute;width:11px;height:11px;left:2px;top:50%;transform:translateY(-50%);border-radius:50%;background:var(--surface)}
#noticeSound{position:relative}
#noticeSound[aria-pressed="true"]::before{background:var(--primary);opacity:1}
#noticeSound[aria-pressed="true"]::after{left:13px}
.site-notice-sound-hint{margin:0 0 13px;color:var(--muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere}
.site-notice-secondary{flex-wrap:wrap;row-gap:9px}
@media(max-width:420px){.site-notice-sound-control{flex-basis:100%;justify-content:space-between}}

/* Keep the inbox anchored while its data revalidates in the background. */
#siteNotificationDialog[open]{display:flex;flex-direction:column;height:min(480px,85dvh);box-sizing:border-box}
.site-notice-head{flex:0 0 auto}
#siteNotificationDialog .site-notice-scroll{flex:1;min-height:0;max-height:none;scrollbar-gutter:stable}
.site-notice-sound-hint{min-height:17px}
#noticeSkeleton{display:grid;gap:14px;padding:12px 0}
#noticeSkeleton i{display:block;height:84px;border-radius:10px;background:linear-gradient(110deg,var(--surface-2),var(--surface-3));opacity:.65}