/* ============================================================
   通知中心 2.0 + 「派友」传说徽章
   覆盖层文件：index.html 里删掉这一行 <link> 就完全回退到旧下拉。
   ============================================================ */

/* ══ 派友徽章：自绘 SVG ══
   emoji 是位图字形，内部动不了；换成 SVG 才能做金色流光。
   尺寸跟着父级字号走（1em），所以在徽章格子、名字后缀、
   解锁卡片里都能自适应，不用各处单独调。 */
.badge-svg{width:1em;height:1em;display:inline-block;vertical-align:-.14em;overflow:visible}
.badge-svg .palShape{fill:url(#palG);
  filter:drop-shadow(0 0 3px rgba(251,191,36,.85)) drop-shadow(0 0 7px rgba(251,146,36,.45))}
.badge-svg .s1{stop-color:#fff3c4}
.badge-svg .s2{stop-color:#fbbf24}
.badge-svg .s3{stop-color:#d97706}
/* 斜向流光：沿着形状本身扫过去，比整体闪烁更像“传说品质”。
   整段包在 @supports 里：流光是靠 clip-path 裁出一道窄缝实现的，
   浏览器不认 clip-path 的话这层就会整片白，把徽章盖住——
   那种情况下宁可没有流光，也不能糊成一坨。 */
.badge-svg .palSheen{fill:#fffbe8;opacity:0}
@supports (clip-path: polygon(0 0, 1px 0, 1px 1px)){
  .badge-svg .palSheen{animation:palSheen 3.4s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes palSheen{
    0%,62%{opacity:0;clip-path:polygon(-40% 0,-10% 0,-30% 100%,-60% 100%)}
    70%{opacity:.9}
    86%,100%{opacity:0;clip-path:polygon(110% 0,140% 0,130% 100%,100% 100%)}}
}
/* 有 SVG 的徽章不要再叠 emoji 的整体摆动，两层动画会互相打架 */
.badge-dyn.has-svg{animation:palPulse 2.6s ease-in-out infinite!important}
@keyframes palPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  .badge-svg .palSheen{animation:none}
  .badge-dyn.has-svg{animation:none!important}}

/* ══ 通知中心 3.0：右侧抽屉 ══
   颜色全部取 tool-kit.css 的 --tk-* 变量，和便签 / 计算器同一套 */
html.nc-lock{overflow:hidden}
#nc-mask{position:fixed;inset:0;z-index:9300;display:none;justify-content:flex-end;align-items:stretch;padding:12px;
  background:rgba(6,4,14,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#nc-mask.open{display:flex;animation:ncFade .2s ease both}
@keyframes ncFade{from{opacity:0}to{opacity:1}}
#nc-mask #nc-win{position:relative;width:min(430px,100%);height:100%;max-height:none;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  color:var(--tk-ink);background:var(--tk-bg);border:0;box-shadow:var(--tk-shadow),inset 0 0 0 1px var(--tk-line-2);
  backdrop-filter:blur(26px) saturate(1.4);-webkit-backdrop-filter:blur(26px) saturate(1.4);
  animation:ncIn .42s var(--tk-spring) both;transition:none}
#nc-mask.mo-out > #nc-win{animation:ncOut .2s ease-in both !important}
@keyframes ncIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes ncOut{to{opacity:0;transform:translateX(30px)}}
#nc-win::after{content:'';position:absolute;top:0;left:26px;right:26px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,183,197,.55) 35%,rgba(233,199,137,.5) 65%,transparent)}
#nc-win svg.ico{width:16px;height:16px;flex:none}

#nc-head{display:flex;align-items:center;gap:10px;padding:16px 14px 12px 18px;flex:none}
.nc-head-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--tk-petal);
  background:linear-gradient(145deg,rgba(247,168,200,.22),rgba(169,139,255,.12));box-shadow:inset 0 0 0 1px rgba(247,168,200,.24)}
.nc-head-ic svg.ico{width:18px;height:18px}
.nc-head-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.nc-head-t b{font-size:16px;font-weight:700;letter-spacing:.02em}
.nc-head-t span{font-size:11.5px;color:var(--tk-ink-3)}
.nc-sp{flex:1}
.nc-hbtn{height:32px;padding:0 11px;border:0;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--tk-ink-2);background:var(--tk-bg-2);box-shadow:inset 0 0 0 1px var(--tk-line)}
.nc-hbtn:hover{color:var(--tk-mint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tk-mint) 50%,transparent)}
.nc-x{width:32px;height:32px;border:0;border-radius:10px;cursor:pointer;display:grid;place-items:center;background:none;color:var(--tk-ink-2)}
.nc-x:hover{background:var(--tk-bg-3);color:var(--tk-ink)}

#nc-filters{display:flex;gap:6px;padding:0 14px 12px 18px;overflow-x:auto;scrollbar-width:none;flex:none;border-bottom:1px solid var(--tk-line)}
#nc-filters::-webkit-scrollbar{display:none}
#nc-filters button{flex:none;height:32px;padding:0 11px;border:0;border-radius:16px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--tk-ink-2);background:var(--tk-bg-2);box-shadow:inset 0 0 0 1px var(--tk-line);transition:color .16s,background .16s}
#nc-filters button svg.ico{width:14px;height:14px}
#nc-filters button:hover{color:var(--tk-ink)}
#nc-filters button.on{color:#fff;background:var(--tk-grad);box-shadow:0 8px 18px -10px rgba(242,140,181,.95)}
#nc-filters em{font-style:normal;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font-size:10.5px;font-weight:750;line-height:16px;text-align:center;
  color:#fff;background:#FF5A7A;font-variant-numeric:tabular-nums}
#nc-filters em:empty{display:none}
#nc-filters button.on em{background:rgba(255,255,255,.28)}

#nc-mask #nc-body{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 18px;border:0;overscroll-behavior:contain;scrollbar-width:thin}
.nc-sec{padding:14px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--tk-ink-3)}
.nc-it{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 26px 11px 10px;border-radius:15px;cursor:pointer;outline:0;
  transition:background .15s;animation:ncItem .34s var(--tk-spring) both}
@keyframes ncItem{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nc-it:hover{background:var(--tk-bg-3)}
.nc-it:focus-visible{box-shadow:inset 0 0 0 2px var(--tk-violet)}
.nc-it.unread{background:linear-gradient(90deg,rgba(247,168,200,.09),rgba(247,168,200,.02) 70%,transparent)}
.nc-it.unread:hover{background:linear-gradient(90deg,rgba(247,168,200,.15),rgba(247,168,200,.05))}
.nc-av{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:750;color:#fff;
  background:linear-gradient(145deg,hsl(var(--h) 55% 58%),hsl(calc(var(--h) + 40) 50% 42%))}
.nc-av img{border-radius:50% !important}
.nc-av-b{position:absolute;right:-4px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--c);
  box-shadow:0 0 0 2.5px var(--tk-solid)}
.nc-av-b svg.ico{width:11px !important;height:11px !important}
.nc-av-on{position:absolute;right:0;top:0;width:10px;height:10px;border-radius:50%;background:#43C98A;box-shadow:0 0 0 2px var(--tk-solid)}
.nc-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)}
.nc-ic svg.ico{width:20px !important;height:20px !important}
.nc-ic.fun{font-size:22px;color:var(--tk-gold);background:rgba(245,197,99,.12);box-shadow:inset 0 0 0 1px rgba(245,197,99,.26)}
.nc-main{flex:1;min-width:0}
.nc-line{font-size:13.5px;line-height:1.45;color:var(--tk-ink-2)}
.nc-line b{color:var(--tk-ink);font-weight:650}
.nc-line b.gold{color:var(--tk-gold)}
.nc-prev{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--tk-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-prev.quote{padding-left:8px;box-shadow:inset 2px 0 0 var(--tk-line-2)}
.nc-ann-text{margin-top:4px;font-size:13px;line-height:1.7;color:var(--tk-ink);white-space:pre-wrap;word-break:break-word}
.nc-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
.nc-meta time{font-size:11px;color:var(--tk-ink-3);font-variant-numeric:tabular-nums}
.nc-count{font-style:normal;height:17px;padding:0 6px;border-radius:9px;font-size:10.5px;font-weight:750;line-height:17px;color:#fff;background:var(--tk-grad)}
.nc-acts{display:flex;gap:6px;margin-top:9px}
.nc-btn{height:30px;padding:0 14px;border:0;border-radius:10px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:650;color:var(--tk-ink);
  background:var(--tk-bg-3);box-shadow:inset 0 0 0 1px var(--tk-line-2)}
.nc-btn:hover{background:var(--tk-bg-4)}
.nc-btn.pri{color:#fff;background:var(--tk-grad);box-shadow:0 8px 18px -10px rgba(242,140,181,.95)}
.nc-btn:disabled{opacity:.5;cursor:default}
.nc-done{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:12px;color:var(--tk-ink-3)}
.nc-done.ok{color:var(--tk-mint)}
.nc-done svg.ico{width:13px !important;height:13px !important}
.nc-dot{position:absolute;right:11px;top:17px;width:8px;height:8px;border-radius:50%;background:#FF5A7A;box-shadow:0 0 8px rgba(255,90,122,.8)}
.nc-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:60px 20px;text-align:center;color:var(--tk-ink-3)}
.nc-empty svg{width:120px;height:96px;color:var(--tk-petal);margin-bottom:6px}
.nc-empty b{font-size:14px;color:var(--tk-ink-2);font-weight:650}
.nc-empty span{font-size:12px;line-height:1.6}
.nc-hint{display:flex;gap:8px;align-items:flex-start;margin:14px 6px 0;padding:10px 12px;border-radius:12px;font-size:11.5px;line-height:1.65;
  color:var(--tk-ink-3);background:var(--tk-bg-2);box-shadow:inset 0 0 0 1px var(--tk-line)}
.nc-hint svg.ico{width:14px !important;height:14px !important;margin-top:1px}

.nc-skel{padding:8px 4px}
.nc-sk-row{display:flex;align-items:center;gap:12px;padding:12px 8px}
.nc-sk-row span{width:42px;height:42px;border-radius:50%;flex:none;background:var(--tk-bg-3)}
.nc-sk-row div{flex:1;display:flex;flex-direction:column;gap:8px}
.nc-sk-row i{height:11px;width:80%;border-radius:6px;background:var(--tk-bg-3)}
.nc-sk-row i.s{width:50%}
.nc-skel span,.nc-skel i{animation:ncSkel 1.3s ease-in-out infinite}
@keyframes ncSkel{0%,100%{opacity:.5}50%{opacity:1}}

@media (max-width:640px){
  #nc-mask{padding:0;align-items:flex-end;justify-content:stretch}
  #nc-mask #nc-win{width:100%;height:88dvh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom);animation-name:ncUp}
  #nc-mask.mo-out > #nc-win{animation:ncDown .22s ease-in both !important}
  #nc-head{padding-top:18px}
  .nc-hbtn span{display:none}
}
@keyframes ncUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes ncDown{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  #nc-mask.open,#nc-mask #nc-win,.nc-it,.nc-skel span,.nc-skel i{animation:none !important}
}

/* ══ 被封禁说明页（session-guard.js 触发）══
   只弹一个 toast 不够：用户需要知道发生了什么、以及该找谁。 */
#sg-banned{position:fixed;inset:0;z-index:2147483000;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 90% at 50% -10%,#2a1420 0%,#170b14 50%,#0b0509 100%);
  animation:sgIn .28s ease both}
@keyframes sgIn{from{opacity:0}to{opacity:1}}
#sg-banned .sg-card{width:min(400px,100%);padding:36px 30px 28px;border-radius:22px;
  text-align:center;color:#f0e6ec;
  background:linear-gradient(165deg,rgba(48,22,34,.92),rgba(30,12,20,.94));
  border:1px solid rgba(248,113,113,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  animation:sgPop .32s cubic-bezier(.16,1,.3,1) both}
@keyframes sgPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
#sg-banned .sg-ico{font-size:2.6rem;margin-bottom:14px;
  filter:drop-shadow(0 0 18px rgba(248,113,113,.45))}
#sg-banned h1{margin:0 0 12px;font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:.04em}
#sg-banned .sg-msg{margin:0 0 16px;font-size:.86rem;line-height:1.8;color:#f8b4b4;
  word-break:break-word}
#sg-banned .sg-msg:empty{display:none}
#sg-banned .sg-note{font-size:.76rem;line-height:1.9;color:#a89aa2;margin-bottom:22px}
#sg-banned .sg-btn{width:100%;padding:12px;border-radius:12px;border:0;cursor:pointer;
  font-size:.86rem;font-weight:700;font-family:inherit;color:#2a0f14;
  background:linear-gradient(135deg,#fca5a5,#f87171);transition:filter .15s,transform .12s}
#sg-banned .sg-btn:hover{filter:brightness(1.07)}
#sg-banned .sg-btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  #sg-banned,#sg-banned .sg-card{animation:none}}