.notification-page { max-width:1100px; margin:0 auto; }
.notification-heading,.notification-filters { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:20px; }
.notification-heading h1 { margin:6px 0 10px; }
.notification-filters { gap:12px; }
.notification-filters .f { margin-left:auto; min-width:170px; }
.notification-list { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.notification-item { display:flex; align-items:center; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); background:#f5fbff; }
.notification-item:last-child { border-bottom:0; }
.notification-item.is-read { background:white; }
.notification-symbol { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#e4f3fd; color:#058ac3; font-size:20px; }
.notification-open { display:flex; flex:1; flex-direction:column; gap:7px; min-width:0; text-align:left; border:0; padding:0; background:none; cursor:pointer; color:var(--text); }
.notification-open b { font-size:14px; }
.notification-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.notification-unread,.notification-count { display:inline-flex; align-items:center; justify-content:center; background:#0789c1; color:white; border-radius:15px; padding:2px 7px; font-size:10px; font-weight:600; }
.notification-count[hidden] { display:none; }
.notification-preview { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.notification-empty { text-align:center; padding:65px 25px; color:var(--muted); }
.notification-empty>span { font-size:32px; }
.notification-more { text-align:center; margin:16px 0; }
.notification-bell { display:inline-flex; align-items:center; gap:7px; }
.notification-bell svg { width:16px; height:16px; }
.notification-detail-body { white-space:pre-wrap; overflow-wrap:anywhere; max-height:50vh; overflow:auto; margin:20px 0; line-height:1.7; }
@media(max-width:600px) { .notification-item { padding:14px 12px; gap:9px; } .notification-symbol { width:32px; height:32px; } .notification-filters .f { margin-left:0; flex:1; } }