/* VOLT v9.7 · «اعلان‌ها»: a narrow list, grouped by day, with motion */
.nt-page{max-width:720px;margin:0 auto;display:grid;gap:14px}
.nt-page .ps-card{margin:0}
@keyframes ntIn{from{opacity:0;transform:translateY(14px) scale(.98);filter:blur(4px)}}
@keyframes ntRing{0%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}50%{transform:rotate(0)}}
@keyframes ntPulse{0%{box-shadow:0 0 0 0 #FF6B3D88}70%{box-shadow:0 0 0 9px #FF6B3D00}100%{box-shadow:0 0 0 0 #FF6B3D00}}
@keyframes ntPop{from{transform:scale(0)}60%{transform:scale(1.25)}}
@keyframes ntFloat{50%{transform:translateY(-6px)}}

/* header: bell, counts, tools */
.nt-head{display:flex;align-items:center;gap:14px;padding:6px 2px 4px;animation:ntIn .5s both}
.nt-bell{position:relative;flex:0 0 54px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#FF946655,#FF6B3D22 60%,#ffffff08);border:1px solid #FF946655;color:#FFB08F}
.nt-bell-ic{display:grid;transform-origin:50% 10%;animation:ntRing 2.8s ease-in-out .6s infinite}
.nt-bell svg{width:26px;height:26px}
.nt-bell>i{position:absolute;top:-6px;left:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#FF8A5B,#FF5618);color:#fff;font-style:normal;font-size:11.5px;font-weight:900;box-shadow:0 4px 12px #FF561866;animation:ntPop .5s cubic-bezier(.3,1.6,.5,1) .3s both}
.nt-head-tx{flex:1;min-width:0}
.nt-head-tx h1{margin:0;font-size:24px;font-weight:900;line-height:1.3}
.nt-head-tx p{margin:2px 0 0;font-size:13px;color:var(--v8-t2,#B9BEC7)}
.nt-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nt-tool{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:13px;border:1px solid var(--v8-line2,#ffffff24);background:#ffffff08;color:var(--v8-t1,#F4F5F7);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.nt-tool:hover{background:#ffffff12;transform:translateY(-1px)}
.nt-tool:active{transform:scale(.96)}
.nt-tool:focus-visible{outline:2px solid #FFB08F;outline-offset:2px}
.nt-tool svg{width:16px;height:16px}
.nt-tool.danger{border-color:#ff8a7a55;color:#FFC2B8;background:#ff8a7a12}
.nt-tool[hidden]{display:none}

/* filter */
.nt-filter{display:inline-flex;justify-self:start;gap:4px;padding:4px;border-radius:15px;background:var(--v8-card,#17191D);border:1px solid var(--v8-line,#ffffff14);animation:ntIn .5s .05s both}
.nt-filter button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:var(--v8-t2,#B9BEC7);cursor:pointer;transition:background .25s,color .25s}
.nt-filter button.on{background:linear-gradient(135deg,#FF8A5B,#FF6B3D);color:#1A0B05}
.nt-filter button:disabled{opacity:.45;cursor:default}
.nt-filter button:focus-visible{outline:2px solid #FFB08F;outline-offset:2px}
.nt-filter em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#ffffff14;font-size:11px}
.nt-filter button.on em{background:#1A0B0522}

/* groups and cards */
.nt-list{display:grid;gap:18px}
.nt-group{display:grid;gap:8px}
.nt-day{position:sticky;top:0;z-index:3;margin:0;padding:6px 2px;font-size:12.5px;font-weight:900;letter-spacing:.02em;color:var(--v8-t3,#8E95A0);backdrop-filter:blur(8px)}
.nt-cards{display:grid;gap:8px}
.nt-card{--dx:0px;--c:#7CC7FF;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;border-radius:20px;border:1px solid var(--v8-line,#ffffff14);background:var(--v8-card,#17191D);overflow:hidden;transform:translateX(var(--dx));transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s,background .3s,border-color .3s;animation:ntIn .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i,0)*45ms + 80ms);touch-action:pan-y}
.nt-card.tone-lime{--c:#C5E86C}.nt-card.tone-sky{--c:#7CC7FF}.nt-card.tone-gold{--c:#FFC24A}.nt-card.tone-peach{--c:#FF9466}.nt-card.tone-mint{--c:#7FD3A0}.nt-card.tone-red{--c:#FF8A7A}
.nt-card::before{content:"";position:absolute;inset:0 0 0 auto;width:3px;background:var(--c);opacity:0;transition:opacity .3s}
.nt-card.unread{background:linear-gradient(105deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 55%),var(--v8-card,#17191D);border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.nt-card.unread::before{opacity:1}
.nt-card:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.nt-card.drag{transition:none}
.nt-card.arm{opacity:.55;border-color:#ff8a7a88}
.nt-card.gone{animation:ntOut .42s cubic-bezier(.4,0,.2,1) forwards}
.nt-card.gone.cascade{animation-delay:calc(var(--k,0)*35ms)}
@keyframes ntOut{0%{max-height:var(--h,120px);opacity:1}45%{opacity:0;transform:translateX(calc(var(--dx) + 40px)) scale(.96)}100%{max-height:0;opacity:0;margin-top:-8px;border-width:0;transform:translateX(calc(var(--dx) + 40px)) scale(.96)}}
.nt-main{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:13px 14px;min-width:0;cursor:pointer;color:var(--v8-t1,#F4F5F7);font:inherit}
.nt-main:focus-visible{outline:2px solid #FFB08F;outline-offset:-3px;border-radius:20px}
.nt-ic{position:relative;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.nt-ic svg{width:19px;height:19px}
.nt-card.unread .nt-ic::after{content:"";position:absolute;top:-3px;left:-3px;width:10px;height:10px;border-radius:50%;background:#FF6B3D;border:2px solid var(--v8-card,#17191D);animation:ntPulse 2s infinite}
.nt-tx{display:grid;gap:3px;min-width:0}
.nt-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.nt-top b{flex:1;min-width:0;font-size:14px;font-weight:900;line-height:1.6;overflow-wrap:anywhere}
.nt-card:not(.unread) .nt-top b{font-weight:700;color:var(--v8-t2,#B9BEC7)}
.nt-top time{flex-shrink:0;font-size:11px;color:var(--v8-t3,#8E95A0);white-space:nowrap}
.nt-body{font-size:12.5px;line-height:1.8;color:var(--v8-t2,#B9BEC7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nt-card.open .nt-body{-webkit-line-clamp:unset;display:block}
.nt-go .chev{width:13px;height:13px;vertical-align:-2px;margin-inline-start:2px}
.nt-go{justify-self:start;margin-top:3px;font-size:11.5px;font-weight:900;color:var(--c);transition:transform .25s}
.nt-card:hover .nt-go{transform:translateX(-4px)}
.nt-x{all:unset;box-sizing:border-box;width:34px;height:34px;margin:10px 0 0 8px;border-radius:11px;display:grid;place-items:center;color:var(--v8-t3,#8E95A0);cursor:pointer;opacity:.7;transition:background .2s,color .2s,opacity .2s,transform .2s}
.nt-x svg{width:15px;height:15px}
.nt-x:hover{background:#ff8a7a1f;color:#FFC2B8;opacity:1;transform:rotate(90deg)}
.nt-x:focus-visible{outline:2px solid #FFB08F;opacity:1}

/* empty */
.nt-empty{display:grid;justify-items:center;gap:6px;padding:46px 20px;text-align:center;border-radius:24px;border:1px dashed var(--v8-line2,#ffffff24);animation:ntIn .5s both}
.nt-empty-ic{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:#ffffff08;color:var(--v8-t3,#8E95A0);animation:ntFloat 3s ease-in-out infinite}
.nt-empty-ic svg{width:30px;height:30px}
.nt-empty h2{margin:6px 0 0;font-size:17px}
.nt-empty p{margin:0;font-size:13px;color:var(--v8-t2,#B9BEC7)}
.notification-dot[hidden]{display:none!important}

@media(max-width:600px){
  .nt-head{flex-wrap:wrap;gap:12px}
  .nt-bell{flex-basis:46px;width:46px;height:46px;border-radius:15px}
  .nt-head-tx h1{font-size:21px}
  .nt-tools{flex-basis:100%;justify-content:stretch}
  .nt-tool{flex:1;justify-content:center;height:40px}
  .nt-main{padding:12px;gap:10px}
  .nt-ic{width:36px;height:36px;border-radius:12px}
  .nt-x{width:32px;height:32px;margin:8px 0 0 6px}
}
@media(prefers-reduced-motion:reduce){.nt-head,.nt-filter,.nt-card,.nt-empty,.nt-empty-ic,.nt-bell-ic,.nt-bell>i,.nt-card.unread .nt-ic::after{animation:none!important}.nt-card.gone{opacity:0}}