.notif-topbar{border-bottom:1px solid var(--border-main,#e2e8f0);justify-content:flex-end;align-items:center;gap:12px;padding:12px 20px;display:flex}.notif-bell{display:inline-flex;position:relative}.notif-bell-button{border:1px solid var(--border-main,#e2e8f0);background:var(--bg-card,#fff);width:40px;height:40px;color:var(--text-main,#334155);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:inline-flex;position:relative}.notif-bell-button:hover{background:var(--bg-hover,#f1f5f9);color:var(--text-strong,#0f172a)}.notif-bell-badge{color:#fff;text-align:center;min-width:18px;height:18px;box-shadow:0 0 0 2px var(--bg-card,#fff);background:#dc2626;border-radius:999px;padding:0 5px;font-size:11px;font-weight:700;line-height:18px;position:absolute;top:-4px;right:-4px}.public-notif-enabled-dot{border:2px solid var(--bg-card,#fff);background:#22c55e;border-radius:50%;width:8px;height:8px;position:absolute;top:5px;right:5px}.notif-panel{background:var(--bg-card,#fff);border:1px solid var(--border-main,#e2e8f0);z-index:1000;border-radius:14px;flex-direction:column;width:360px;max-width:calc(100vw - 32px);max-height:460px;display:flex;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 24px 64px #0f172a38}.notif-panel-header{border-bottom:1px solid var(--border-main,#e2e8f0);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.notif-panel-title{color:var(--text-strong,#0f172a);font-size:15px;font-weight:700}.notif-panel-count{color:#fff;text-align:center;background:#dc2626;border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:12px;font-weight:700;line-height:20px}.notif-panel-header-actions{align-items:center;gap:10px;display:inline-flex}.notif-mark-all{color:var(--brand-blue,#2563eb);cursor:pointer;background:0 0;border:none;padding:0;font-size:12.5px;font-weight:600}.notif-mark-all:hover{text-decoration:underline}[data-theme=dark] .notif-mark-all{color:#60a5fa}.notif-panel-close{border:1px solid var(--border-main,#e2e8f0);background:var(--bg-hover,#f8fafc);width:30px;height:30px;color:var(--text-muted,#64748b);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.notif-panel-close:hover{border-color:var(--text-muted,#94a3b8);background:var(--bg-card,#fff);color:var(--text-strong,#0f172a)}[data-theme=dark] .notif-panel-close{color:#aab7cb;background:#172033;border-color:#94a3b838}[data-theme=dark] .notif-panel-close:hover{color:#f8fafc;background:#1f2a3d}.notif-enable-push{border:none;border-bottom:1px solid var(--border-main,#e2e8f0);background:color-mix(in srgb, var(--brand-blue,#2563eb) 10%, transparent);width:100%;color:var(--brand-blue,#2563eb);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:600;transition:background .12s;display:flex}.notif-enable-push:hover{background:color-mix(in srgb, var(--brand-blue,#2563eb) 18%, transparent)}[data-theme=dark] .notif-enable-push{color:#60a5fa;background:#60a5fa1f}[data-theme=dark] .notif-enable-push:hover{background:#60a5fa33}.notif-panel-body{overflow-y:auto}.notif-panel-empty{text-align:center;color:var(--text-muted,#94a3b8);padding:32px 16px;font-size:14px}.notif-list{margin:0;padding:0;list-style:none}.notif-item{cursor:pointer;border-bottom:1px solid var(--border-main,#eef2f6);gap:10px;padding:12px 16px 12px 28px;transition:background .12s;display:flex;position:relative}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--bg-hover,#f8fafc)}.notif-item.unread{background:color-mix(in srgb, var(--brand-blue,#2563eb) 7%, transparent)}.notif-item-dot{background:var(--brand-blue,#2563eb);border-radius:50%;width:8px;height:8px;position:absolute;top:17px;left:12px}.notif-item-content{min-width:0}.notif-item-title{color:var(--text-strong,#0f172a);margin:0 0 2px;font-size:13.5px;font-weight:600}.notif-item-message{color:var(--text-muted,#64748b);word-break:break-word;margin:0 0 4px;font-size:12.5px;line-height:1.4}.notif-item-time{color:var(--text-muted,#94a3b8);font-size:11.5px}@media (max-width:640px){.notif-panel{border-radius:16px;width:auto;max-width:none;max-height:min(520px,100dvh - 92px);position:fixed;top:72px;left:12px;right:12px}.notif-panel-header{padding:14px 16px}.notif-panel-header-actions{gap:8px}.notif-panel-body{max-height:calc(100dvh - 204px)}}@media (max-width:390px){.notif-panel{max-height:calc(100dvh - 78px);top:66px;left:10px;right:10px}}