.header-notifications {flex:0 0 auto}
.notification-toggle {position:relative;display:grid;place-items:center;width:36px;height:36px;padding:6px;border:1px solid #776346;background:#242124;color:#eadfc3;border-radius:3px;cursor:pointer}
.notification-toggle svg {width:22px;height:22px}
.notification-toggle [data-notification-count] {position:absolute;right:-8px;top:-8px;min-width:19px;padding:1px 4px;border-radius:12px;background:#b9914f;color:#111;font:700 11px/17px Arial,sans-serif}
.notification-panel {position:absolute;right:12px;top:calc(100% + 10px);width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 160px);overflow:auto;padding:20px;background:#211f22;border:1px solid #927748;box-shadow:0 16px 45px #000b;color:#eadfc3;text-align:left}
.notification-panel h2 {margin:0 0 12px;font-size:24px}
.notification-panel h3 {margin:0 0 5px;font:600 16px/1.4 Arial,sans-serif}
.notification-panel time {font:12px/1.4 Arial,sans-serif;color:#b6b0ac}
.notification-panel p {font:14px/1.6 Arial,sans-serif;overflow-wrap:anywhere}
.notification-item {padding:15px 12px;border-top:1px solid #66543a}
.notification-item.unread {border-left:3px solid #d4b476;background:#d4b4760b}
.notification-item p {white-space:pre-wrap;margin:10px 0 0}
.notification-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.notification-actions .button {padding:9px 12px;font-size:12px;white-space:normal}
@media(min-width:1601px) and (max-width:1800px) {
  .header:has(#header-notifications:not([hidden])) {gap:12px;padding-inline:16px}
  .header:has(#header-notifications:not([hidden])) .header-actions {gap:8px}
}