.notification-center { grid-column: 1 / -1; border-top: 3px solid #d6af64; }
.notification-center [hidden] { display: none !important; }
.notification-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.notification-center h2 { margin-top: 8px; }
.notification-center p { color: #b8c9d2; line-height: 1.6; }
.notification-center a { color: #f4d49a; }
.notification-count { flex-shrink: 0; padding: 8px 14px; border: 1px solid #d6af64; border-radius: 20px; color: #f4d49a; }
.notification-center label { display: grid; gap: 8px; color: #dbe7ec; font-size: .9rem; }
.notification-center input, .notification-center select { padding: 12px; color: #ecf2f4; background: #172737; border: 1px solid #526273; border-radius: 8px; font: inherit; min-width: 0; }
.notification-center button { padding: 11px 16px; border: 1px solid #d6af64; border-radius: 8px; background: #d6af64; color: #172737; font: inherit; font-weight: 700; cursor: pointer; }
.notification-center button:hover { background: #e6c68c; }
.notification-center button:disabled { opacity: .55; cursor: wait; }
.notification-center :focus-visible { outline: 3px solid #a7d9ca; outline-offset: 4px; }
.notification-center .notification-secondary { background: transparent; color: #e4c793; }
#notification-login { display: grid; max-width: 480px; gap: 16px; }
.notification-google-access { max-width: 600px; padding: 20px; border: 1px solid #526273; border-radius: 12px; background: #172737; }
.notification-google-access h3 { margin-top: 0; color: #f4e7d0; }
#notification-google { display: inline-flex; align-items: center; gap: 12px; }
#notification-google-check { font-size: .85rem; padding: 8px 12px; }
.notification-password-access { max-width: 600px; margin-top: 20px; padding: 16px 0; border-top: 1px solid #394b5c; }
.notification-password-access summary { color: #b8c9d2; cursor: pointer; margin-bottom: 16px; }
.notification-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.notification-item { border: 1px solid #394b5c; border-left: 3px solid #718a93; border-radius: 8px; padding: 18px; margin-bottom: 12px; background: #172737; }
.notification-item.is-unread { border-left-color: #e4c793; }
.notification-item h3 { margin: 0; font-size: 1.05rem; color: #f4e7d0; }
.notification-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: .8rem; color: #a8bcc6; }
.notification-detail { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
.notification-item button { padding: 7px 11px; margin-right: 8px; font-size: .85rem; }
.notification-item .delivery-failed { color: #f0af9e; }
.notification-item .delivery-sent { color: #9fd6b9; }
.notification-members-heading { margin-top: 32px; border-top: 1px solid #394b5c; padding-top: 20px; }
.notification-member { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-bottom: 1px solid #394b5c; overflow-wrap: anywhere; }
.notification-member strong, .notification-member span { display: block; }
.notification-member span { color: #b8c9d2; margin-top: 5px; font-size: .88rem; }
.notification-empty { padding: 24px; border: 1px dashed #526273; border-radius: 8px; color: #b8c9d2; }
.notification-footnote, .notification-metrics-note { font-size: .85rem; color: #a8bcc6; line-height: 1.6; }
.notification-metrics-note { grid-column: 1 / -1; }
@media (max-width: 600px) { .notification-heading { flex-direction: column; } .notification-toolbar { align-items: stretch; flex-direction: column; } }