/* Miltima – Értesítések panel: jobbról beúszik, a képernyő szélétől 12px-re lebeg */
.npanel{position:fixed;top:66px;right:12px;bottom:12px;width:392px;max-width:calc(100vw - 24px);z-index:80;display:flex;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(var(--t-d0-rgb),.3),0 0 0 1px rgba(var(--navy-rgb),.07);
  transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,visibility 0s linear .4s}
.npanel.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .25s ease,visibility 0s}

.np-h{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;color:#fff;flex:none;
  background:radial-gradient(320px 120px at 100% -30%,rgba(var(--t-a2-rgb),.35),transparent 70%),linear-gradient(110deg,var(--t-d0) 0%,var(--t-d1) 60%,var(--t-d2) 100%)}
.np-ic{width:36px;height:36px;border-radius:10px;background:var(--grad);display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(var(--t-a2-rgb),.35)}
.np-ic svg.i{width:18px;height:18px}
.npanel.open .np-ic svg{animation:ring .9s ease .35s}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
.np-t{flex:1;min-width:0}
.np-t h3{margin:0;font-size:16px;font-weight:700}
.np-t small{font-size:12px;color:var(--on2)}
.np-x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--on2)}
.np-x:hover{background:rgba(255,255,255,.12);color:#fff}
.np-x svg.i{width:18px;height:18px}

.np-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.np-tabs{display:flex;background:#f1f3f7;border-radius:9px;padding:3px}
.np-tabs button{height:26px;padding:0 12px;border-radius:7px;font-size:12px;font-weight:500;color:#3a4057}
.np-tabs button.on{background:#fff;font-weight:700;box-shadow:0 1px 3px rgba(16,24,64,.08)}
.np-read{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);padding:5px 8px;border-radius:8px}
.np-read:hover{background:var(--accent-soft)}
.np-read:disabled{color:var(--faint);background:none;cursor:default}
.np-read svg.i{width:15px;height:15px}

.np-list{flex:1;min-height:0;overflow:auto;padding:4px 8px 10px}
.np-g{margin:12px 8px 6px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.ni{display:flex;align-items:flex-start;gap:11px;width:100%;padding:10px;border-radius:11px;text-align:left;position:relative;transition:background .15s}
.ni:hover{background:#f5f7fc}
.ni.unread{background:linear-gradient(90deg,rgba(var(--accent-rgb),.07),rgba(var(--t-a3-rgb),.03))}
.ni.unread:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),rgba(var(--t-a3-rgb),.05))}
.ni-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--fg);border:1px solid var(--bd)}
.ni-ic svg.i{width:17px;height:17px}
.ni-ic.warn{--bg:#fef6e7;--bd:#f7dfaf;--fg:#c87410}
.ni-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.ni-b b{font-size:13px;font-weight:600;color:var(--text)}
.ni.unread .ni-b b{font-weight:700}
.ni-b span{font-size:12px;color:#3a4057}
.ni-b small{font-size:11px;color:var(--faint)}
.ni-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px;opacity:0;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.ni.unread .ni-dot{opacity:1}
.npanel.open .ni{animation:niIn .45s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(120ms + var(--d,0ms))}
@keyframes niIn{from{opacity:0;transform:translateX(18px)}}
.np-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:60px 20px;color:var(--muted);font-size:12.5px;text-align:center}
.np-empty svg.i{width:42px;height:42px;padding:10px;border-radius:50%;background:#f1f3f7;color:var(--faint);margin-bottom:4px}
.np-empty b{color:var(--text);font-size:14px}

/* csengő: olvasatlan számláló, nyitott állapot */
.iconbtn .cnt{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;line-height:13px;border:2px solid var(--t-d1);display:none;text-align:center}
.iconbtn.has .cnt{display:block;animation:cntIn .3s cubic-bezier(.2,.9,.3,1.4)}
@keyframes cntIn{from{transform:scale(0)}}
.iconbtn.on{background:rgba(255,255,255,.12);color:#fff}

@media (max-width:640px){.npanel{top:62px;width:auto;left:12px}}
@media (prefers-reduced-motion:reduce){.npanel,.npanel.open{transition-duration:.01s}.npanel.open .ni,.npanel.open .np-ic svg{animation:none}}