.notifications-page {
  --notification-info-bg: #edf4ff;
  --notification-info-ink: #0755bd;
  --notification-urgent-bg: #fff0f1;
  --notification-urgent-ink: #b3243d;
  --notification-important-bg: #fff1e4;
  --notification-important-ink: #9a4b0b;
  --notification-warning-bg: #fff7d9;
  --notification-warning-ink: #806000;
  --notification-reminder-bg: #f2edff;
  --notification-reminder-ink: #6742a4;
  --notification-system-bg: #edf2f5;
  --notification-system-ink: #536575;
  width: 100%; max-width: 1120px; min-width: 0; margin-inline: auto; color: var(--portal-ink);
}
:root[data-theme="dark"] .notifications-page {
  --notification-info-bg: #193554;
  --notification-info-ink: #9cc7ff;
  --notification-urgent-bg: #47252f;
  --notification-urgent-ink: #ffa4b4;
  --notification-important-bg: #45301e;
  --notification-important-ink: #ffc28d;
  --notification-warning-bg: #403820;
  --notification-warning-ink: #f5d879;
  --notification-reminder-bg: #352b4b;
  --notification-reminder-ink: #ceb4ff;
  --notification-system-bg: #2d3642;
  --notification-system-ink: #bdccdc;
}
.notifications-page [hidden] { display: none !important; }
.notifications-page :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
.notifications-page :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--portal-blue); outline-offset: 3px; }
.notifications-page .notifications-heading { transform: none; padding-right: 0; gap: 20px; margin-bottom: 28px; }
.notifications-heading > div { min-width: 0; }
.notifications-heading h1 { font-size: 28px; }
.notifications-heading .eyebrow { margin-bottom: 8px; }
.notifications-heading p { max-width: 700px; font-size: 14px; line-height: 1.6; }
.notifications-heading .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--portal-muted); font-size: 13px; text-decoration: none; }
.notifications-feedback .form-feedback { max-width: none; margin-bottom: 20px; }
.notification-push-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 22px 24px; margin-bottom: 28px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); }
.notification-feature-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 10px; background: var(--notification-info-bg); }
.notification-feature-icon .ui-icon { width: 22px; height: 22px; }
.notification-push-panel > div:not(.notification-push-actions) { min-width: 170px; flex: 1; }
.notification-push-panel h2 { margin: 0; font-size: 16px; line-height: 1.5; }
.notification-push-panel p { max-width: 620px; margin: 6px 0 0; color: var(--portal-muted); font-size: 13px; line-height: 1.65; }
.notification-push-actions { display: flex; flex-wrap: wrap; flex: 0 1 auto; gap: 10px; max-width: 100%; }
.notification-push-actions button { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; font-size: 13px; }
.notification-push-panel > noscript { flex: 1 1 100%; }
.notification-settings-link { margin: 0 0 24px; font-size: 14px; }
.notification-settings { min-width: 0; overflow-wrap: anywhere; }
.notification-settings [hidden] { display: none !important; }
.notification-settings :is(a, button, input):focus-visible { outline: 3px solid var(--portal-blue); outline-offset: 3px; }
.notification-settings .notification-settings-intro { margin: -8px 0 24px; color: var(--portal-muted); font-size: 14px; line-height: 1.7; }
.notification-settings .notification-push-panel { padding: 18px; margin: 0 0 28px; border-radius: 6px; }
.notification-settings h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.notification-preferences > p { margin: 0 0 22px; color: var(--portal-muted); font-size: 14px; line-height: 1.7; }
.notification-preferences fieldset { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.notification-preferences legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 650; }
.notification-preference-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.notification-preference-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--portal-border); border-radius: 6px; cursor: pointer; }
.notification-preference-option:has(input:checked) { border-color: var(--portal-blue); }
.notification-preference-option input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 2px 0 0; accent-color: var(--portal-blue); }
.notification-preference-option > span { min-width: 0; }
.notification-preference-option strong { display: block; color: var(--portal-ink); font-size: 14px; font-weight: 600; line-height: 1.55; }
.notification-preference-option small { display: block; margin-top: 4px; color: var(--portal-muted); font-size: 13px; line-height: 1.65; }
.notification-preferences .form-actions { margin: 0; padding: 0; justify-content: flex-start; }
.notification-preferences .form-actions button { min-height: 44px; max-width: 100%; white-space: normal; }
.notification-settings > .notification-preferences + :is(p, .notification-push-panel, .notification-preferences),
.notification-settings > .notification-preferences + .notification-preferences { margin-top: 28px; }
.notification-settings [data-notification-permission] .form-actions { margin-top: 16px; }
.notification-settings [data-sms-notification-preferences] { padding-top: 28px; border-top: 1px solid var(--portal-border); }
.notification-inbox { min-width: 0; }
.notification-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.notification-inbox-heading h2 { margin: 0; font-size: 20px; line-height: 1.5; }
.notification-inbox-heading p { margin: 4px 0 0; color: var(--portal-muted); font-size: 13px; }
.notification-inbox-heading strong { color: var(--portal-ink); }
.notification-read-all { display: grid; gap: 5px; justify-items: center; }
.notification-read-all small { color: var(--portal-muted); font-size: 11px; }
.notification-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; padding: 20px; border: 1px solid var(--portal-border); border-radius: 10px; margin-bottom: 20px; background: var(--portal-surface); }
.notification-filters label { display: grid; min-width: 160px; flex: 1; gap: 8px; margin: 0; color: var(--portal-muted); font-size: 12px; }
.notification-filters select { width: 100%; min-height: 44px; margin: 0; background-color: var(--portal-surface); color: var(--portal-ink); font-size: 14px; }
.notification-filters button { min-height: 44px; }
.notification-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--notification-info-ink); font-size: 13px; font-weight: 600; }
.notification-list { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.notification-card { min-width: 0; padding: 24px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); scroll-margin-top: 100px; }
.notification-card.is-unread { border-left: 4px solid var(--portal-blue); padding-left: 21px; }
.notification-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.notification-card-meta time { color: var(--portal-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.notification-category { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 650; line-height: 1.5; }
.notification-category .ui-icon { width: 15px; height: 15px; }
.notification-category-info { color: var(--notification-info-ink); background: var(--notification-info-bg); }
.notification-category-urgent { color: var(--notification-urgent-ink); background: var(--notification-urgent-bg); }
.notification-category-important { color: var(--notification-important-ink); background: var(--notification-important-bg); }
.notification-category-warning { color: var(--notification-warning-ink); background: var(--notification-warning-bg); }
.notification-category-reminder { color: var(--notification-reminder-ink); background: var(--notification-reminder-bg); }
.notification-category-system { color: var(--notification-system-ink); background: var(--notification-system-bg); }
.notification-card h3 { margin: 0 0 10px; color: var(--portal-ink); font-size: 18px; line-height: 1.55; }
.notification-body { color: var(--portal-ink); font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-sender { margin: 12px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.notification-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--portal-border); }
.notification-read-status { display: inline-flex; align-items: center; gap: 7px; color: var(--portal-muted); font-size: 12px; }
.notification-read-status .ui-icon { width: 15px; height: 15px; }
.notification-unread-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--portal-blue); }
.notification-card-footer button { min-height: 42px; padding: 9px 15px; font-size: 13px; }
.notification-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 24px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); text-align: center; }
.notification-empty h3 { margin: 4px 0 0; font-size: 19px; }
.notification-empty p { max-width: 460px; margin: 0 0 4px; color: var(--portal-muted); font-size: 14px; line-height: 1.7; }
.notification-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; color: var(--portal-muted); font-size: 13px; }
.notification-pagination p { margin: 0; }
.notification-pagination > div { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.notification-pagination .secondary-button { min-height: 42px; font-size: 13px; }
.notification-compose-page { max-width: 1040px; }
.notification-compose-form { border-radius: 10px; overflow: hidden; }
.notification-compose-form .notification-editor-feedback:has(.form-feedback) { padding: 24px 28px 0; }
.notification-editor-feedback .form-feedback { max-width: none; margin-bottom: 0; }
.notification-compose-form > section { padding: 28px; }
.notification-compose-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr); gap: 20px; }
.notification-compose-form :is(input, textarea, select) { min-width: 0; }
.notification-compose-form label { color: var(--portal-muted); font-size: 13px; }
.notification-compose-form > section > label:last-child { margin-bottom: 0; }
.notification-compose-form :is(textarea, select, input:not([type="checkbox"], [type="radio"])) { background-color: var(--portal-surface); color: var(--portal-ink); }
.notification-compose-form textarea { resize: vertical; line-height: 1.7; }
.notification-body-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.notification-compose-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.notification-compose-form legend { color: var(--portal-ink); font-size: 14px; font-weight: 600; }
.notification-compose-form .notification-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option) { display: flex; align-items: flex-start; gap: 11px; padding: 16px; margin: 0; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-surface); cursor: pointer; }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option):has(input:checked) { border-color: var(--portal-blue); background: color-mix(in srgb, var(--notification-info-bg) 60%, var(--portal-surface)); }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option):hover { border-color: var(--portal-blue); }
.notification-compose-form :is(input[type="checkbox"], input[type="radio"]) { flex: 0 0 19px; width: 19px; height: 19px; min-height: 19px; margin: 1px 0 0; accent-color: var(--portal-blue); }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option) > span { display: grid; min-width: 0; gap: 5px; }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option) strong { color: var(--portal-ink); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.notification-compose-form :is(.notification-audience-option, .notification-recipient-option) small { color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.notification-muted { color: var(--portal-muted); font-size: 13px; line-height: 1.7; }
.notification-recipient-panel { margin-top: 24px; }
.notification-recipient-panel fieldset > p { margin: 7px 0 14px; }
.notification-compose-form .notification-recipient-search { display: flex; align-items: center; gap: 10px; min-height: 46px; margin: 0 0 14px; padding: 0 14px; border: 1px solid var(--portal-border); border-radius: 8px; }
.notification-recipient-search .ui-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.notification-compose-form .notification-recipient-search input { width: 100%; min-height: 44px; margin: 0; padding-inline: 0; border: 0; box-shadow: none; outline: 0; font-size: 14px; }
.notification-recipient-search:focus-within { outline: 3px solid var(--portal-blue); outline-offset: 2px; }
.notification-recipient-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; max-height: 330px; overflow-y: auto; padding: 4px; margin: -4px; overscroll-behavior: contain; }
.notification-recipient-list .notification-recipient-option { align-items: center; padding: 13px 14px; }
.notification-recipient-empty { grid-column: 1 / -1; padding: 14px; text-align: center; }
.notification-role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notification-all-users { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--portal-border); border-radius: 8px; }
.notification-all-users p { margin: 0; font-size: 14px; line-height: 1.7; }
.notification-compose-footer { padding: 24px 28px; }
.notification-send-summary { margin-bottom: 20px; color: var(--portal-ink); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.notification-compose-footer .form-actions { padding: 0; }
.notification-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .notifications-page .notifications-heading { align-items: stretch; flex-direction: column; gap: 18px; }
  .notifications-heading h1 { font-size: 26px; }
  .notifications-heading > a { align-self: flex-start; }
  .notification-push-actions { flex-basis: 100%; }
  .notification-push-actions button { flex: 1 1 auto; }
  .notification-compose-fields { grid-template-columns: 1fr; gap: 0; }
  .notification-compose-form .notification-audience { grid-template-columns: 1fr; }
  .notification-compose-form .notification-audience-option { padding: 14px; }
}
@media (max-width: 480px) {
  .notification-preference-options { grid-template-columns: 1fr; }
  .notifications-heading > a { align-self: stretch; }
  .notification-push-panel { padding: 18px; gap: 12px; }
  .notification-push-panel > div:not(.notification-push-actions) { min-width: 120px; }
  .notification-push-panel .notification-feature-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .notification-inbox-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .notification-read-all { justify-items: start; gap: 7px; }
  .notification-filters { padding: 16px; gap: 14px; }
  .notification-filters label { min-width: 0; flex-basis: 100%; }
  .notification-filters > button { width: 100%; }
  .notification-filters .notification-text-link { justify-content: center; width: 100%; }
  .notification-card { padding: 18px; }
  .notification-card.is-unread { padding-left: 15px; }
  .notification-card h3 { font-size: 17px; }
  .notification-card-meta { align-items: flex-start; flex-direction: column; }
  .notification-card-footer { align-items: flex-start; flex-direction: column; gap: 16px; }
  .notification-card-footer form, .notification-card-footer button { width: 100%; }
  .notification-pagination > div { width: 100%; justify-content: space-between; gap: 8px; }
  .notification-compose-form > section { padding: 20px 16px; }
  .notification-compose-form .notification-editor-feedback:has(.form-feedback) { padding: 20px 16px 0; }
  .notification-recipient-list, .notification-role-options { grid-template-columns: 1fr; }
  .notification-all-users { align-items: flex-start; padding: 14px; }
  .notification-all-users .notification-feature-icon { display: none; }
  .notification-compose-footer { padding: 20px 16px; }
  .notification-compose-footer .form-actions { flex-direction: column-reverse; }
  .notification-compose-footer .form-actions > * { width: 100%; }
  .notification-compose-form :is(input:not([type="checkbox"], [type="radio"]), textarea, select), .notification-filters select { font-size: 16px; }
}