.notif-center{display:inline-flex;position:relative}.notif-panel{z-index:300;background:var(--surface,#fff);border:1px solid var(--border-strong,#d2d2d7);width:340px;max-width:min(340px,100vw - 24px);box-shadow:var(--shadow-pop,0 24px 64px #00000029);border-radius:14px;flex-direction:column;animation:.16s cubic-bezier(.2,.8,.3,1) notif-pop;display:flex;position:fixed;overflow:hidden}.notif-panel.tone-light{--surface:#fff;--panel:#eef2f7;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#111827;--text-dim:#64748b;--text-faint:#94a3b8;--accent:#2563eb;--accent-soft:#eff6ff;--shadow-pop:0 4px 12px #0f172a0f, 0 12px 32px #0f172a1a}.notif-panel.align-right{right:0}.notif-panel.align-left{left:0}@keyframes notif-pop{0%{opacity:0;transform:translateY(-6px)}}@keyframes notif-pop-up{0%{opacity:0;transform:translateY(6px)}}.notif-panel.up{animation-name:notif-pop-up}.notif-head{border-bottom:1px solid var(--border,#e8e8ed);justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.notif-title{color:var(--text,#1d1d1f);margin:0;font-size:14px;font-weight:700}.notif-head-actions{align-items:center;gap:8px;display:flex}.notif-readall{color:var(--accent,#4f46e5);font-size:12px;font-weight:600;transition:opacity .15s}.notif-readall:hover{opacity:.75}.notif-close{width:28px;height:28px;color:var(--text-faint,#86868b);border-radius:8px;flex:none;place-items:center;font-size:18px;line-height:1;transition:color .13s,background .13s;display:grid}.notif-close:hover{color:var(--text,#1d1d1f);background:var(--panel,#0000000d)}.notif-list{flex:auto;min-height:0;max-height:400px;overflow-y:auto}.notif-empty{text-align:center;color:var(--text-faint,#86868b);padding:34px 14px;font-size:13px}.notif-empty.rich{flex-direction:column;align-items:center;gap:4px;padding:40px 14px 44px;display:flex}.notif-empty.rich svg{fill:none;width:28px;height:28px;stroke:var(--text-faint,#86868b);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;opacity:.7;margin-bottom:6px}.notif-empty.rich b{color:var(--text-dim,#6e6e73);font-size:13.5px;font-weight:600}.notif-empty.rich span{color:var(--text-faint,#86868b);font-size:12px}.notif-ic{background:var(--panel,#0000000d);border:1px solid var(--border,#0000000f);border-radius:9px;flex-shrink:0;place-items:center;width:30px;height:30px;display:grid}.notif-ic svg{fill:none;width:15px;height:15px;stroke:var(--text-dim,#6e6e73);stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round}.notif-item{border-bottom:1px solid var(--border,#e8e8ed);align-items:flex-start;padding:0;transition:background .13s;display:flex;position:relative}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:color-mix(in oklab, var(--accent,#4f46e5) 8%, transparent)}.notif-item.unread{background:color-mix(in oklab, var(--accent,#4f46e5) 6%, transparent)}.notif-item-open{min-width:0;color:inherit;text-align:left;flex:auto;align-items:flex-start;gap:10px;padding:12px 6px 12px 16px;display:flex}.notif-dot{background:var(--accent,#4f46e5);border-radius:50%;width:6px;height:6px;position:absolute;top:17px;left:6px}.notif-body{flex:1;min-width:0;display:block}.notif-item-title{color:var(--text,#1d1d1f);font-size:13px;font-weight:600;line-height:1.35;display:block}.notif-item-text{color:var(--text-dim,#494950);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:2px;font-size:12px;line-height:1.4;display:-webkit-box;overflow:hidden}.notif-item-time{color:var(--text-faint,#86868b);margin-top:4px;font-size:11px;display:block}.notif-del{width:22px;height:22px;color:var(--text-faint,#86868b);opacity:0;border-radius:6px;flex-shrink:0;margin:12px 8px 0 0;font-size:16px;line-height:1;transition:all .13s}.notif-item:hover .notif-del,.notif-item:focus-within .notif-del,.notif-del:focus-visible{opacity:1}.notif-del:hover{color:#ee6b78;background:#e052602e;background:lab(55.4235% 56.8646 23.481/.18)}.notif-dmask{z-index:1050;background:#0000008c;justify-content:center;align-items:flex-start;padding-top:14vh;animation:.16s cubic-bezier(.2,.8,.3,1) notif-pop;display:flex;position:fixed;inset:0}.notif-dmask.tone-light{--surface:#fff;--panel:#eef2f7;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#111827;--text-dim:#64748b;--text-faint:#94a3b8;--accent:#2563eb;background:#00000052}.notif-detail{background:var(--surface,#17171a);border:1px solid var(--border,#ffffff1f);width:min(420px,100vw - 48px);max-height:min(72vh,560px);box-shadow:var(--shadow-pop,0 24px 64px #00000080);border-radius:16px;flex-direction:column;padding:22px;display:flex;position:relative}.nd-x{width:26px;height:26px;color:var(--text-faint,#86868b);border-radius:8px;font-size:17px;line-height:1;transition:all .13s;position:absolute;top:14px;right:14px}.nd-x:hover{color:var(--text,#f5f5f7);background:var(--panel,#ffffff14)}.nd-head{align-items:center;gap:12px;padding-right:30px;display:flex}.nd-head .notif-ic{border-radius:11px;width:36px;height:36px}.nd-head .notif-ic svg{width:17px;height:17px}.nd-ht{flex:1;min-width:0}.nd-ht h2{letter-spacing:-.01em;color:var(--text,#f5f5f7);margin:0;font-size:15px;font-weight:600;line-height:1.4;display:block}.nd-ht span{color:var(--text-faint,#86868b);margin-top:2px;font-size:12px;display:block}.nd-body{background:var(--panel,#ffffff0d);min-height:0;color:var(--text-dim,#ffffffb8);white-space:pre-wrap;word-break:break-word;border-radius:10px;flex:auto;margin-top:16px;padding:13px 14px;font-size:13.5px;line-height:1.75;overflow-y:auto}.nd-acts{margin-top:16px;display:flex}.nd-btn{border-radius:999px;width:100%;height:38px;font-size:13.5px;font-weight:500;transition:background .14s,opacity .14s}.nd-btn.pri{background:var(--text,#fff);color:var(--surface,#0a0a0b)}.nd-btn.pri:hover{opacity:.9}.notif-dmask.tone-light .nd-btn{border-radius:10px}.notif-dmask.tone-light .nd-btn.pri{background:var(--accent,#2563eb);color:#fff}.notif-panel :is(button,[tabindex]):focus-visible,.notif-detail :is(button,[tabindex]):focus-visible{outline:2px solid var(--accent,#4f46e5);outline-offset:2px}@media (hover:none){.notif-del{opacity:1}}@media (prefers-reduced-motion:reduce){.notif-panel,.notif-panel.up,.notif-dmask{animation:none}.notif-readall,.notif-close,.notif-item,.notif-del,.nd-x,.nd-btn{transition:none}}.notif-badge{text-align:center;color:#fff;min-width:16px;height:16px;box-shadow:0 0 0 2px var(--surface,#fff);background:#ef4d5e;border-radius:8px;padding:0 4px;font-size:10px;font-weight:700;line-height:16px;position:absolute;top:-2px;right:-2px}