.notification-anchor{position:relative;display:flex;align-items:center}.notification-toggle{border:0;background:#f2eae3;border-radius:50%;height:43px;width:43px;min-width:43px;display:grid;place-items:center;cursor:pointer;color:#785849;padding:0;position:relative}.notification-toggle:hover,.notification-toggle[aria-expanded=true]{background:#ecd9d2;color:#792d30}.notification-toggle>.icon{width:23px;height:23px}.notification-toggle .notification-count{position:absolute;right:-3px;top:-4px;min-width:20px;height:20px;padding:1px 4px;border:2px solid #fff;font-size:10px;line-height:15px;border-radius:12px;background:#a82e40;color:#fff}.topbar:has(.notification-popover:not([hidden])){z-index:50}.notification-popover{position:absolute;right:0;top:53px;width:410px;max-width:calc(100vw - 24px);background:#fffdfb;border:1px solid #e5d9d0;border-radius:15px;box-shadow:0 12px 45px #34201929;overflow:hidden;display:flex;flex-direction:column;max-height:min(680px,calc(100dvh - 108px));text-align:left;color:#3f2c25;z-index:55}.notification-popover-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 5px;gap:12px}.notification-popover-heading h2{font-size:24px;font-weight:750;letter-spacing:-.5px}.notice-icon-button{border:0;border-radius:50%;background:#f4ede7;color:#785f50;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}.notice-icon-button:hover{background:#ebddd3}.notification-popover-tools{padding:8px 18px 10px;border-bottom:1px solid #eee5dc}.notice-filters{display:flex;gap:7px}.notice-filters>button{border:0;background:transparent;padding:10px 15px;min-height:40px;font-size:14px;font-weight:650;border-radius:22px;color:#6d5b50}.notice-filters>button[aria-pressed=true]{background:#f2dfdb;color:#8d2f3b}.notice-read-all{display:flex;gap:8px;align-items:center;background:transparent;border:0;color:#8b3440;font-size:12px;padding:12px 2px 3px;min-height:36px;cursor:pointer}.notice-read-all>.icon{width:16px;height:16px}.notice-read-all:disabled{opacity:.45;cursor:default}.notice-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:120px;scrollbar-width:thin;flex:1}.notice-list{padding:7px}.notice-item{width:100%;display:flex;gap:12px;align-items:flex-start;background:transparent;border:0;border-radius:10px;padding:13px 10px;text-align:left;color:#3e302b;cursor:pointer;position:relative}.notice-item:hover{background:#f4ede7}.notice-item.is-unread{background:#fbefed}.notice-item.is-unread:hover{background:#f4e4e0}.notice-item+.notice-item{margin-top:3px}.notice-symbol{width:45px;height:45px;flex-shrink:0;border-radius:50%;background:#f0e5dc;color:#805338;display:grid;place-items:center}.is-unread .notice-symbol{background:#f1d7d4;color:#9b3340}.notice-symbol.deadline{background:#fff0d5;color:#966313}.notice-symbol>.icon{width:23px;height:23px}.notice-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.notice-copy>strong{font-size:14px;font-weight:600;line-height:1.55;overflow-wrap:anywhere}.is-unread .notice-copy>strong{font-weight:700}.notice-message{font-size:12px;color:#75645a;line-height:1.65;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.notice-copy time{font-size:11px;color:#8a786c;line-height:1.5}.is-unread .notice-copy time{color:#9a3040;font-weight:600}.notice-unread-dot{height:8px;width:8px;border-radius:50%;background:#a72f42;align-self:center;flex-shrink:0}.notice-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:35px 24px}.notice-empty>.icon{width:38px;height:38px;color:#9e7761}.notice-empty strong{font-size:15px}.notice-empty p{font-size:13px;line-height:1.7;color:#8b7464}.notice-loading{padding:35px 20px;text-align:center;color:#8b7464;font-size:13px}.notice-feedback:empty{display:none}.notice-feedback{padding:10px 18px;margin:0;font-size:12px;color:#38724e;background:#f1f8f1}.notice-feedback.error{color:#a22639;background:#fff0f2}.notice-load-more,.notification-popover-footer>button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;background:transparent;color:#8a3340;min-height:47px;font-size:13px;font-weight:600;padding:13px;cursor:pointer}.notice-load-more:hover,.notification-popover-footer>button:hover{background:#f5eae3}.notification-popover-footer{border-top:1px solid #eaddd3;flex-shrink:0}.notification-popover-footer>.icon{width:17px}.notification-popover button:focus-visible,.notification-toggle:focus-visible{outline:2px solid #a74651;outline-offset:-3px}
@media(max-width:600px){.notification-toggle{height:39px;width:39px;min-width:39px}.notification-popover{position:fixed;top:70px;left:10px;right:10px;width:auto;max-width:none;max-height:calc(100dvh - 155px);border-radius:13px}.notification-popover-heading{padding:14px 15px 4px}.notification-popover-heading h2{font-size:22px}.notification-popover-tools{padding:7px 15px 10px}.notice-item{padding:12px 9px;gap:10px}.notice-symbol{height:40px;width:40px}.notice-read-all{min-height:42px}.notice-icon-button{height:40px;width:40px}}
/* Keep controls visible while the notification list uses the remaining space. */
.notification-popover-heading,.notification-popover-tools,.notice-feedback{flex-shrink:0}
.notice-scroll{min-height:0;flex:1 1 auto}
@media(max-width:600px){.notification-popover{max-height:calc(100dvh - 155px - env(safe-area-inset-bottom,0px))}}
/* A short viewport cannot fit a dropdown between both navigation bars. */
@media(max-height:500px){
 .notification-popover{position:fixed;top:max(8px,env(safe-area-inset-top,0px));bottom:max(8px,env(safe-area-inset-bottom,0px));right:max(8px,env(safe-area-inset-right,0px));left:auto;width:min(520px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:none}
 .notification-popover-heading{padding:8px 12px 4px}
 .notification-popover-heading h2{font-size:20px}
 .notice-icon-button{width:40px;height:40px}
 .notification-popover-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;padding:4px 12px 8px}
 .notice-filters>button{padding:8px 12px}
 .notice-read-all{min-height:40px;padding:4px 2px}
 .notice-feedback{padding:6px 12px}
}