.notification-bell-container{align-items:center;display:inline-flex;position:relative}.notification-bell-btn{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-pill,999px);box-shadow:var(--raise-1,0 3px 0 var(--edge-soft), 0 8px 16px -12px #0f346059);color:var(--ink);cursor:pointer;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s,transform .15s;display:inline-flex;position:relative}.notification-bell-btn:hover,.notification-bell-btn[aria-expanded=true]{background:color-mix(in srgb, var(--blue) 16%, var(--surface));border-color:var(--blue);box-shadow:0 3px 0 var(--blue-dark), 0 8px 18px -6px color-mix(in srgb, var(--blue) 40%, transparent);color:var(--blue);transform:translateY(-1px)}.notification-bell-btn:active{box-shadow:0 1px 0 var(--edge-soft);transform:translateY(2px)}.notification-bell-svg{flex-shrink:0;width:20px;height:20px}.notification-badge{background:var(--danger,#dc2626);color:#fff;text-align:center;min-width:18px;height:18px;box-shadow:0 0 0 2px var(--surface);border-radius:999px;padding:0 4px;font-size:.68rem;font-weight:800;line-height:18px;position:absolute;top:-3px;right:-3px}.notification-dropdown{background:var(--surface);border:1.5px solid var(--line);width:min(380px,100vw - 32px);box-shadow:0 6px 0 var(--edge-soft), 0 22px 44px -16px #0a192d59;z-index:100;border-radius:18px;gap:10px;padding:14px;animation:.18s notif-slide-down;display:grid;position:absolute;top:calc(100% + 10px);right:0}@keyframes notif-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.notification-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:2px;padding-bottom:10px;display:flex}.notification-header h4{margin:0;font-size:1.05rem;font-weight:800}.notif-view-all-link{color:var(--blue);font-size:.8rem;font-weight:600;text-decoration:none}.notif-view-all-link:hover{text-decoration:underline}.notification-empty{text-align:center;color:var(--muted);gap:6px;padding:24px 12px;display:grid}.notification-list{gap:6px;max-height:360px;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.notif-card-wrapper{list-style:none}.notif-card-link,.notif-card-btn{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;padding:0;text-decoration:none;display:block}.notif-card-inner{background:var(--surface);border:1px solid #0000;border-radius:12px;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:10px;padding:10px;transition:background-color .16s;display:grid}.notif-card-inner:hover{background:var(--surface-soft)}.notif-card-inner.is-unread{background:color-mix(in srgb, var(--blue) 8%, var(--surface));border-color:color-mix(in srgb, var(--blue) 24%, transparent)}.notif-card-icon{font-size:1.25rem}.notif-card-content{gap:2px;min-width:0;display:grid}.notif-card-title{color:var(--ink);font-size:.88rem;font-weight:700;line-height:1.3}.notif-card-body{color:var(--muted);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.78rem;line-height:1.4;display:-webkit-box;overflow:hidden}.notif-card-time{color:var(--muted);margin-top:2px;font-size:.7rem}.notif-card-unread-badge{background:var(--blue);border-radius:50%;width:8px;height:8px;margin-top:6px}.notifications-page-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--raise-card);border-radius:20px;padding:24px}.notifications-page-header h1{margin:0 0 6px;font-size:1.6rem}.notifications-page-header p{color:var(--muted);margin:0;font-size:.92rem}.notification-page-list{gap:8px;margin:16px 0 0;padding:0;list-style:none;display:grid}@media (max-width:560px){.notification-dropdown{top:calc(70px + env(safe-area-inset-top));width:auto;max-height:calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));position:fixed;left:12px;right:12px;overflow-y:auto}.notification-list{max-height:none}}
