/* Optimized CSS (v1.3.0) */
.ana-notif{
  --an-size: 52px; --an-icon: calc(var(--an-size)*.5);
  --an-bg:#fff; --an-fg:#0f172a; --an-border:#d9d9d9;
  --an-hover-bg:#e11d48; --an-hover-fg:#fff;
  --an-shadow:0 4px 14px rgba(0,0,0,.12); --an-panel-max:380px;
}
.ana-notif, .ana-notif *{ box-sizing:border-box; font-family: IRANSans, Tahoma, sans-serif; }
.ana-notif{ width:100%; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; direction:rtl; text-align:right; }
.an-bell{ inline-size:var(--an-size); block-size:var(--an-size); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; background:var(--an-bg); color:var(--an-fg); border:1px solid var(--an-border); box-shadow:var(--an-shadow); position:relative; transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; will-change:transform; }
.an-bell:hover{ background:var(--an-hover-bg); color:var(--an-hover-fg); border-color:var(--an-hover-bg); transform:translateY(-1px); }
.an-bell:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.an-bell svg{ display:block; inline-size:var(--an-icon); block-size:var(--an-icon); margin:0; transform:none; vertical-align:middle; fill:currentColor; }
.notibedge{ position:absolute; inset-block-start:-8px; inset-inline-end:-8px; min-inline-size:22px; block-size:22px; padding:0 6px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#e11d48; color:#fff; font-weight:800; font-size:12px; line-height:1; box-shadow:0 0 0 2px #fff; font-variant-numeric:tabular-nums; }
.notibedge[hidden]{ display:none; }
.notibedge:not([hidden]) ~ svg{ transform:none; }
.an-panel{ display:none; position:fixed; z-index:9999; inline-size:clamp(280px,90vw,var(--an-panel-max)); background:#fff; border:1px solid #e6e6e6; border-radius:12px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.an-panel.is-open{ display:block; }
.an-hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #eee; background:#fafafa; }
.an-ttl{ font-weight:800; display:flex; align-items:center; gap:8px; }
.an-dot{ inline-size:7px; block-size:7px; border-radius:50%; background:#e11d48; }
.an-close{ background:none; border:0; cursor:pointer; color:#555; font-size:18px; padding:4px 6px; border-radius:8px; }
.an-close:hover{ background:#f1f1f1; }
.an-list{ max-block-size:calc(100dvh - 140px); overflow-y:auto; padding:10px; -webkit-overflow-scrolling:touch; }
.an-item{ position:relative; display:block; text-decoration:none; color:#111; background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:12px 14px; margin:8px 0; transition:background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.an-item:hover{ background:#f9f9f9; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.an-meta{ font-size:12px; color:#777; margin-bottom:6px; }
.an-title{ font-weight:800; font-size:15px; margin-bottom:4px; }
.an-ex{ font-size:13px; color:#333; line-height:1.9; }
.an-item.unread::after{ content:""; position:absolute; inset-inline-start:10px; inset-block-start:14px; inline-size:8px; block-size:8px; border-radius:50%; background:#e11d48; }
@media (max-width:480px){ .ana-notif{ --an-size:56px; --an-icon:28px; } }
@media (prefers-reduced-motion:reduce){ .an-bell,.an-item{ transition:none; } }