/* Scoped notification workspace: only the message list scrolls. */
.modal-card.notification-center {
  --notice-zoom:1;
  display:flex; flex-direction:column; width:min(1120px,calc(100vw / var(--notice-zoom) - 48px));
  height:min(790px,calc(100dvh / var(--notice-zoom) - 48px)); max-height:none;
  padding:0; overflow:hidden; color:var(--ink,#233e50);
}
html[data-font-size="small"] .modal-card.notification-center { --notice-zoom:.94; }
html[data-font-size="large"] .modal-card.notification-center { --notice-zoom:1.06; }
.notification-center .notice-header { display:flex; align-items:center; justify-content:space-between; flex:none; gap:24px; padding:24px 66px 22px 28px; border-bottom:1px solid #e0e9ee; }
.notification-center .notice-eyebrow { color:#16808a; font-size:11px; letter-spacing:.12em; font-weight:650; }
.notification-center .notice-header h2 { margin:5px 0 7px; font-size:24px; }
.notification-center .notice-header p { margin:0; font-size:12px; color:#69808f; }
.notification-center .notice-unread-summary { display:flex; gap:8px; align-items:baseline; white-space:nowrap; color:#67808c; font-size:12px; }
.notification-center .notice-unread-summary b { font-size:30px; color:#167581; font-variant-numeric:tabular-nums; font-weight:650; }
.notification-center .notice-workspace { display:grid; grid-template-columns:172px minmax(0,1fr); flex:1; min-height:0; }
.notification-center .notice-categories { padding:22px 12px; background:#f6f9fa; border-right:1px solid #e0e9ee; overflow:auto; }
.notification-center .notice-nav-label { display:block; margin:0 12px 14px; font-size:11px; color:#7b8f9a; }
.notification-center .notice-categories button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:40px; margin-bottom:6px; padding:9px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#506b7a; text-align:left; font-size:12px; }
.notification-center .notice-categories button b { font-size:11px; font-weight:550; font-variant-numeric:tabular-nums; }
.notification-center .notice-categories button:hover { background:#edf3f5; }
.notification-center .notice-categories button[aria-pressed="true"] { border-color:#cde3e7; background:#e5f2f3; color:#106a76; font-weight:650; }
.notification-center .notice-main { display:flex; flex-direction:column; min-width:0; min-height:0; padding:0 24px; }
.notification-center .notice-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0 14px; }
.notification-center .notice-status-tabs { display:flex; gap:4px; padding:3px; border:1px solid #e1e9ed; border-radius:9px; background:#f5f8fa; }
.notification-center .notice-status-tabs button { display:flex; align-items:center; gap:7px; min-height:32px; padding:5px 12px; border:1px solid transparent; border-radius:6px; color:#647d8d; background:transparent; font-size:12px; }
.notification-center .notice-status-tabs button span { font-size:11px; font-variant-numeric:tabular-nums; }
.notification-center .notice-status-tabs button[aria-pressed="true"] { background:#fff; border-color:#d9e4e9; color:#176c79; box-shadow:0 1px 3px #1f40500a; font-weight:650; }
.notification-center .notice-sort { font-size:11px; color:#7e919b; }
.notification-center .notice-list-heading { display:flex; justify-content:space-between; gap:16px; padding:0 0 12px; border-bottom:1px solid #e3ebef; font-size:11px; color:#7c909b; }
.notification-center .notice-list-heading b { font-size:12px; color:#466272; font-weight:600; }
.notification-center .notice-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:20px; outline-offset:-2px; }
.notification-center .notice-entry { display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:20px; padding:17px 14px; border-bottom:1px solid #e4ecf0; border-left:3px solid transparent; }
.notification-center .notice-entry.is-unread { border-left-color:#8bbfc6; background:#f8fbfc; }
.notification-center .notice-message { display:block; width:100%; min-width:0; padding:0; text-align:left; border:0; border-radius:4px; background:transparent; color:inherit; }
.notification-center .notice-entry-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:8px; font-size:10px; color:#7c909d; }
.notification-center .notice-category-tag { padding:2px 6px; border:1px solid #dbe7eb; border-radius:4px; color:#627e8d; background:#fff; }
.notification-center .notice-title { display:block; color:#294e62; font-size:13px; font-weight:650; line-height:1.55; overflow-wrap:anywhere; }
.notification-center .notice-message:hover .notice-title { color:#087685; text-decoration:underline; text-underline-offset:3px; }
.notification-center .notice-description { display:block; margin-top:5px; font-size:12px; line-height:1.7; font-weight:400; color:#69818f; white-space:pre-wrap; overflow-wrap:anywhere; }
.notification-center .notice-entry-action { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; }
.notification-center .notice-entry-action .row-action { min-height:32px; padding:5px 10px; font-size:11px; white-space:nowrap; }
.notification-center .notice-read-label, .notification-center .notice-unread-label { font-size:10px; color:#7b909c; }
.notification-center .notice-unread-label { color:#237b86; }
.notification-center .notice-unread-label::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:currentColor; vertical-align:middle; }
.notification-center .notice-pagination { flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #e1e9ee; font-size:11px; color:#718893; }
.notification-center .notice-pagination>div { display:flex; gap:8px; }
.notification-center .notice-pagination button { min-height:30px; padding:4px 10px; font-size:11px; }
.notification-center .notice-footer { display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-top:1px solid #dde7ec; background:#fff; }
.notification-center .notice-footer>div { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.notification-center .notice-footer span { font-size:11px; color:#7c909b; }
.notification-center .notice-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; padding:28px; text-align:center; color:#728b97; font-size:12px; }
.notification-center .notice-empty b { font-size:14px; color:#4c6b7a; }
.notification-center .notice-empty p { line-height:1.7; }
.notification-center button:focus-visible { outline:2px solid #21808d; outline-offset:2px; }
.notification-center button:disabled { opacity:.5; cursor:default; }
@media(max-width:900px) {
  .notification-center .notice-workspace { grid-template-columns:142px minmax(0,1fr); }
  .notification-center .notice-main { padding:0 16px; }
  .notification-center .notice-entry { gap:12px; padding-left:10px; padding-right:10px; }
  .notification-center .notice-sort { display:none; }
}
