/* Notification drawer; its trigger lives in the shared navigation menu. */
.notification-layer[hidden] { display: none !important; }
.notification-layer { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; padding: 18px; background: #112d4560; }
.notification-drawer { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 24px; border: 1px solid #dce9ed; border-radius: 22px; color: #17263f; background: #fff; font: 14px/1.6 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; box-shadow: 0 20px 70px #162c4333; }
.notification-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-drawer-head h2 { margin: 6px 0 16px; color: #17263f; font-size: 23px; }
.notification-drawer-head .eyebrow { color: #348d77; font-size: 11px; letter-spacing: .08em; }
.notification-close { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid #dce9ed; border-radius: 10px; color: #17263f; background: #fff; font-size: 24px; cursor: pointer; }
.notification-list { display: grid; gap: 12px; }
.notification-item { display: flex; align-items: start; gap: 10px; padding: 16px; border: 1px solid #dce9ed; border-radius: 14px; color: #526780; background: #f7fbfa; text-decoration: none; }
.notification-item.is-read { opacity: .75; }
.notification-item-copy { display: grid; gap: 6px; }
.notification-item-copy small { color: #258a70; font-size: 12px; }
.notification-item-copy strong { color: #17263f; font-size: 14px; }
.notification-item-copy > span { font-size: 13px; }
.notification-tone { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #6cc4ae; }
.notification-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.notification-mark-all { padding: 10px 14px; border: 1px solid #cce3df; border-radius: 10px; color: #226855; background: #eff9f5; font: inherit; cursor: pointer; }
.notification-drawer-foot a { color: #247961; text-decoration: none; }
.notification-drawer :is(a, button):focus-visible { outline: 3px solid #2466d8; outline-offset: 3px; }
@media (max-width: 600px) { .notification-layer { padding: 12px; } .notification-drawer { padding: 20px; } }