.notification-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.notification-head>div{margin-right:auto}
.notification-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
.notification-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:18px;background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:10px}
.notification-card.unread{border-left:5px solid var(--primary)}
.notification-card.important{box-shadow:inset 0 0 0 1px var(--warning)}
.notification-mark{width:10px;height:10px;border-radius:50%;border:2px solid var(--muted);margin-top:8px}
.unread .notification-mark{background:var(--primary);border-color:var(--primary)}
.notification-card h2{margin:3px 0;font-size:17px}
.notification-card p{margin:3px 0}
.notification-meta{font-size:13px;color:var(--muted)}
.notification-actions{display:flex;gap:6px;flex-wrap:wrap}
.notification-actions form{margin:0}
.notification-actions button{min-height:44px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:#fff}
.notification-dropdown{position:absolute;right:max(18px,calc((100% - 1100px)/2));top:64px;width:min(390px,calc(100vw - 24px));max-height:520px;overflow:auto;background:#fff;border:1px solid var(--border);box-shadow:0 18px 45px #17203326;border-radius:12px;padding:10px;z-index:20}
.notification-dropdown[hidden]{display:none}
.drop-item{display:block;padding:10px;border-bottom:1px solid var(--border)}
.drop-item.unread{font-weight:700}
.bell-button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--primary)}
.bell-button img{width:23px}
.bell-badge{position:absolute;top:1px;right:0;background:var(--danger);color:#fff;border-radius:20px;padding:1px 5px;font-size:11px}
@media(max-width:700px){.notification-filters,.notification-card{grid-template-columns:1fr}
.notification-mark{position:absolute}
.notification-card{position:relative;padding-left:28px}
.notification-actions{grid-column:1}
.notification-dropdown{position:fixed;top:76px;right:8px;left:8px;width:auto;max-height:calc(100vh - 88px)}
}
@media(max-width:420px){.notification-actions>*{flex:1 1 130px}
.notification-actions button,.notification-actions .btn{width:100%}
}