@font-face{
  font-family:"Vazirmatn";
  src:url("/assets/fonts/vazirmatn/Vazirmatn.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
:root{
  --base-font-size: 1rem;
  --brand: #6d5efc;
  --brand-2: #9b8cff;
  --bg: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f6f7fc;
  --text: #1f2430;
  --muted: #7a8194;
  --border: #e7e9f2;
  --sidebar-bg: #ffffff;
  --shadow-sm: 0 1px 2px rgba(28,30,60,.05), 0 4px 14px rgba(28,30,60,.05);
  --shadow-md: 0 8px 30px rgba(40,40,90,.10);
  --radius: 16px;
}
html[data-theme="dark"]{
  --bg:#0d0f16; --surface:#161a24; --surface-2:#1c2130; --text:#e8eaf2; --muted:#9aa2b8;
  --border:#262b38; --sidebar-bg:#12151f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 10px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Vazirmatn",system-ui,sans-serif;
  font-size:var(--base-font-size); background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
a{text-decoration:none;color:inherit}

/* ===== Layout ===== */
.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:var(--sidebar-bg);border-inline-start:1px solid var(--border);
  padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-bottom:18px;padding:6px}
.brand-name{font-weight:800;color:var(--brand);font-size:1.15rem}
.brand-badge{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 6px 16px rgba(109,94,252,.35)}
.menu{display:flex;flex-direction:column;gap:4px}
.menu-item{display:flex;align-items:center;gap:12px;justify-content:flex-start;text-align:right;
  padding:11px 14px;border-radius:12px;color:var(--text);font-weight:600;min-height:44px;transition:.15s}
.menu-item i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
  font-size:.9rem;flex-shrink:0}
.menu-item span{flex:1}
.menu-item:hover{background:var(--surface-2);transform:translateX(-3px)}
.menu-item.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 8px 20px rgba(109,94,252,.38)}
.menu-item.active i{background:rgba(255,255,255,.22)!important;color:#fff!important}

/* آیکون‌های رنگی منو */
.menu-item:nth-child(1) i{background:#e8f0ff;color:#3b82f6}
.menu-item:nth-child(2) i{background:#fff4e0;color:#e0a92e}
.menu-item:nth-child(3) i{background:#e6f9f0;color:#22b07d}
.menu-item:nth-child(4) i{background:#f0ecff;color:#8b7cff}
.menu-item:nth-child(5) i{background:#e0f5ff;color:#0ea5e9}
.menu-item:nth-child(6) i{background:#ffe6e6;color:#e0454f}
.menu-item:nth-child(7) i{background:#fdf0d5;color:#d97706}
.menu-item:nth-child(8) i{background:#ffe9f3;color:#ec4899}
.menu-item:nth-child(9) i{background:#e8f0ff;color:#6366f1}
.menu-item:nth-child(10) i{background:#e6f9f0;color:#10b981}
.menu-item:nth-child(11) i{background:#fff4e0;color:#f59e0b}
.menu-item:nth-child(12) i{background:#f0ecff;color:#a855f7}
.menu-item:nth-child(13) i{background:#e0f5ff;color:#06b6d4}
.menu-item:nth-child(14) i{background:#ffe6e6;color:#ef4444}
.menu-item:nth-child(15) i{background:#e6f9f0;color:#059669}
.menu-item:nth-child(16) i{background:#f0ecff;color:#7c3aed}
html[data-theme="dark"] .menu-item i{background:rgba(255,255,255,.08)}

/* backdrop منوی موبایل */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,17,25,.5);backdrop-filter:blur(2px);
  z-index:55;opacity:0;visibility:hidden;transition:.2s}
.sidebar-backdrop.show{opacity:1;visibility:visible}

/* ===== Topbar ===== */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px;
  border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-title h1{font-size:1.25rem;margin:0;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;
  padding:8px 12px;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.icon-btn:hover{background:var(--surface-2);border-color:var(--brand)}
.logout{color:#e0454f;border-color:#f3c9cc}
.logout:hover{background:#fdeaec;border-color:#e0454f}
.fontctl{display:flex;gap:4px}
.nav-toggle{display:none}
.hdr-balance{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.9rem;
  padding:8px 12px;border-radius:10px;border:1px solid var(--border);white-space:nowrap}
.hdr-balance.pos{color:#12805a;background:#d7f5e8;border-color:#a7e6cb}
.hdr-balance.neg{color:#b02a33;background:#fbd9db;border-color:#f0b8bc}
html[data-theme="dark"] .hdr-balance.pos{background:#123a2c;border-color:#1c5a43}
html[data-theme="dark"] .hdr-balance.neg{background:#3a1518;border-color:#5c2429}
.page{padding:22px}

/* ===== Cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat-card{display:flex;align-items:center;gap:14px;flex-direction:row-reverse;justify-content:flex-end;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:.18s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff;flex-shrink:0}
.stat-num{font-size:1.5rem;font-weight:800}
.stat-lbl{color:var(--muted);font-size:.85rem}
.c-green .stat-ico{background:linear-gradient(135deg,#22b07d,#12805a)}
.c-blue .stat-ico{background:linear-gradient(135deg,#3b9bf0,#2563eb)}
.c-purple .stat-ico{background:linear-gradient(135deg,#8b7cff,#6d5efc)}
.c-gold .stat-ico{background:linear-gradient(135deg,#f0bd4a,#e0a92e)}
.c-red .stat-ico{background:linear-gradient(135deg,#f0636c,#e0454f)}

.wide-card{margin-top:16px;display:flex;align-items:center;gap:26px;flex-direction:row-reverse;justify-content:flex-end;
  background:linear-gradient(120deg,#fff0f5,#f4f0ff);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
html[data-theme="dark"] .wide-card{background:linear-gradient(120deg,#231a25,#1b1a2b)}
.wide-ico{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#ff7eb3,#8b7cff);color:#fff;display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
.wide-num{font-size:1.5rem;font-weight:800}.wide-lbl{color:var(--muted)}

/* ===== Filters ===== */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters .form-control,.filters .form-select{max-width:220px}

/* ===== Accounts grid ===== */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.acc-card{background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--brand);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:.18s}
.acc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.acc-card.active{border-inline-start-color:#22b07d}.acc-card.expired{border-inline-start-color:#e0a92e}
.acc-card.depleted{border-inline-start-color:#e0454f}.acc-card.disabled{border-inline-start-color:#9aa2b8}
.acc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.acc-id{display:flex;align-items:center;gap:8px;min-width:0}
.acc-user{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.acc-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#e6e8ef;color:#9aa2b8;font-size:.85rem;position:relative;flex-shrink:0}
.acc-avatar.online{background:linear-gradient(135deg,#22b07d,#12805a);color:#fff;
  box-shadow:0 0 0 3px rgba(34,176,125,.25)}
.acc-oncount{font-weight:800}
html[data-theme="dark"] .acc-avatar{background:#2a2f3d}
.usage-bar{height:7px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin:2px 0 6px}
.usage-fill{height:100%;background:linear-gradient(90deg,#22b07d,#3b9bf0);border-radius:6px;transition:width .3s}
.usage-fill.warn{background:linear-gradient(90deg,#e0a92e,#f59e0b)}
.usage-fill.danger{background:linear-gradient(90deg,#e0454f,#ef4444)}
.acc-row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;color:var(--muted);font-size:.9rem}
.acc-row b{color:var(--text);text-align:left;word-break:break-word}
.acc-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.acc-actions>form{margin:0;min-width:0}
.acc-actions .btn,.acc-actions .form-select{width:100%;padding-inline:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
.acc-actions .acc-transfer{grid-column:1/-1}

/* ===== User portal (پنل کاربر نهایی) ===== */
.up-wrap{max-width:640px;margin:0 auto;padding:16px}
.up-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.up-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.up-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.up-stat-num{font-size:1.25rem;font-weight:800;color:var(--brand)}
.up-stat-lbl{font-size:.78rem;color:var(--muted);margin-top:2px}
@media(max-width:420px){.up-stat-num{font-size:1.05rem}.up-stat-lbl{font-size:.7rem}}

/* ===== Notification alerts (بالای صفحه، با صدا) ===== */
.notify-host{position:fixed;top:12px;left:50%;transform:translateX(-50%);
  z-index:1080;display:flex;flex-direction:column;gap:10px;width:min(560px,94vw);pointer-events:none}
.notify-alert{display:flex;align-items:flex-start;gap:12px;pointer-events:auto;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-inline-start:5px solid var(--brand);border-radius:14px;padding:14px 16px;
  box-shadow:0 12px 40px rgba(30,30,70,.22);
  opacity:0;transform:translateY(-18px);transition:opacity .25s ease,transform .25s ease}
.notify-alert.show{opacity:1;transform:translateY(0)}
.notify-alert.important{border-inline-start-color:#e0454f;background:linear-gradient(90deg,rgba(224,69,79,.10),var(--surface))}
.notify-ico{width:38px;height:38px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:1rem;
  animation:notify-ring 1s ease 0s 2}
.notify-alert.important .notify-ico{background:linear-gradient(135deg,#f0636c,#e0454f)}
@keyframes notify-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.notify-body{flex:1;min-width:0}
.notify-title{font-weight:800;margin-bottom:2px}
.notify-text{color:var(--muted);font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.notify-close{background:none;border:none;color:var(--muted);font-size:1.4rem;line-height:1;
  cursor:pointer;padding:0 4px;flex-shrink:0}
.notify-close:hover{color:var(--text)}
@media(max-width:640px){.notify-host{top:8px;width:96vw}}

/* ===== Plan groups ===== */
.plan-group{margin-bottom:22px}
.plan-group-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 14px;
  border-radius:12px;font-weight:800;color:var(--brand);
  background:linear-gradient(90deg,rgba(109,94,252,.12),transparent)}
html[data-theme="dark"] .plan-group-title{background:linear-gradient(90deg,rgba(155,140,255,.18),transparent)}
.plan-price{font-size:1.35rem;font-weight:800;color:var(--brand);margin:6px 0 10px}
.plan-price span{font-size:.8rem;font-weight:600;color:var(--muted)}

/* ===== Pager ===== */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:18px}
.pager a,.pager span{min-width:38px;text-align:center;padding:6px 10px;border-radius:8px;
  border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:.9rem}
.pager a:hover{background:var(--surface-2)}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:800}
.pager .disabled{opacity:.4;pointer-events:none}

.badge-status{padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:700}
.s-active{background:#d7f5e8;color:#12805a}.s-expired{background:#fbeecd;color:#a5761a}
.s-depleted{background:#fbd9db;color:#b02a33}.s-disabled{background:#e6e8ef;color:#5c6376}
html[data-theme="dark"] .s-active{background:#123a2c;color:#4fd6a0}
html[data-theme="dark"] .s-disabled{background:#2a2f3d;color:#aab1c5}
html[data-theme="dark"] .s-expired{background:#3a2f12;color:#e6c169}
html[data-theme="dark"] .s-depleted{background:#3a1518;color:#f08a90}

/* ===== Buttons polish ===== */
.btn{border-radius:10px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none}
.btn-primary:hover{filter:brightness(1.05)}

/* ===== Login ===== */
.login-body{display:grid;place-items:center;min-height:100vh;padding:16px;
  background:linear-gradient(120deg,#c9b8ff,#bfeaff)}
.login-card{background:#fff;border-radius:20px;padding:34px;width:min(400px,94vw);box-shadow:0 20px 60px rgba(60,40,120,.18)}
.login-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}

/* ===== Tables ===== */
table{color:var(--text)}
.table>:not(caption)>*>*{background:transparent;color:var(--text)}
.table-responsive{border-radius:12px}

/* ===== Responsive ===== */
@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  /* سایدبار به‌صورت کشویی از سمت راست (RTL) — موقعیت فیزیکی برای جلوگیری از باگ منطقی */
  .sidebar{position:fixed;right:0;left:auto;top:0;bottom:0;width:min(280px,82vw);height:100vh;
    transform:translateX(100%);box-shadow:var(--shadow-md);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .page{padding:16px}
  .topbar{padding:12px 16px}
}
@media(max-width:640px){
  .topbar-title h1{font-size:1.05rem}
  .logout-txt{display:none}
  .page{padding:12px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .stat-num{font-size:1.25rem}
  .stat-ico{width:44px;height:44px;font-size:1.1rem}
  .acc-grid{grid-template-columns:1fr}
  .filters .form-control,.filters .form-select{max-width:100%;flex:1 1 140px}
  .wide-card{flex-direction:column;text-align:center;gap:14px}
  /* جدول‌ها روی موبایل افقی اسکرول شوند */
  .page table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .modal-body{max-height:76vh;overflow-y:auto}
}

/* کارت آماری کوچک — استفاده در صفحه‌ی زیرمجموعه‌ها */
.stat-mini{
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:.7rem .9rem; height:100%;
  display:flex; flex-direction:column; gap:.25rem;
}
.stat-mini span{ font-size:.78rem; color:var(--muted); }
.stat-mini b{ font-size:1.05rem; font-weight:700; }

/* ============ صفحه‌ی جزئیات اکانت ============ */
.det-hero{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1rem 1.1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.det-hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; flex-wrap:wrap; padding-bottom:.9rem;
  border-bottom:1px solid var(--border);
}
.det-id{display:flex; align-items:center; gap:.75rem; min-width:0}
.det-avatar{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  font-size:1.15rem; flex:0 0 auto; background:var(--surface-2);
}
.det-avatar.s-active{background:linear-gradient(135deg,#22b07d,#12805a); color:#fff}
.det-avatar.s-expired{background:linear-gradient(135deg,#e0a53a,#a5761a); color:#fff}
.det-avatar.s-depleted{background:linear-gradient(135deg,#e2705f,#b23b28); color:#fff}
.det-avatar.s-disabled{background:linear-gradient(135deg,#9aa1ae,#6b7280); color:#fff}
.det-user{font-size:1.35rem; font-weight:800; line-height:1.2; word-break:break-all}
.det-sub{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  font-size:.85rem; margin-top:.25rem}
.det-quick{display:flex; gap:.4rem; flex-wrap:wrap; align-items:flex-start}
.det-quick form{margin:0}

.det-tiles{
  display:grid; gap:.75rem; padding-top:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.det-tile{
  background:var(--surface-2); border-radius:12px; padding:.65rem .8rem;
  display:flex; flex-direction:column; gap:.15rem;
}
.det-tile > span{font-size:.75rem; color:var(--muted)}
.det-tile > b{font-size:1.05rem; font-weight:700}
.det-tile small{font-size:.72rem}
.det-tile .usage-bar{margin:.3rem 0 .15rem}

.det-tabs{margin-top:1.1rem; border-bottom:2px solid var(--border); gap:.2rem}
.det-tabs .nav-link{
  border:0; border-radius:10px 10px 0 0; font-weight:700; color:var(--muted);
  padding:.55rem 1rem;
}
.det-tabs .nav-link:hover{background:var(--surface-2)}
.det-tabs .nav-link.active{
  color:var(--brand); background:transparent;
  box-shadow:inset 0 -3px 0 var(--brand);
}
.det-tabbody{padding-top:1rem}
.det-tabbody .card{border-radius:14px}
.det-tabbody .card-title{font-size:.95rem; font-weight:800; margin-bottom:.75rem}

.qr-thumb{
  width:130px; height:130px; background:#fff; padding:6px;
  border-radius:10px; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--border);
}


@media (max-width:576px){
  .det-quick{width:100%}
  .det-quick .btn{flex:1 1 auto}
  .det-user{font-size:1.1rem}
}

/* ---- سلسله‌مراتب نماینده‌ها در پنل ادمین ---- */
.acc-card.is-sub{
  /* تورفتگی به‌اندازه‌ی عمق + نوار رنگی سمت راست (RTL) برای دیده‌شدن سطح */
  margin-inline-start: calc(var(--lvl, 1) * 14px);
  border-inline-start: 3px solid var(--brand);
}
.res-lineage{display:flex; flex-wrap:wrap; gap:.3rem; margin:.1rem 0 .5rem}
.lin-badge{
  font-size:.72rem; padding:.15rem .5rem; border-radius:20px;
  border:1px solid var(--border); color:var(--muted); white-space:nowrap;
}
.lin-badge b{color:var(--text); font-weight:700}
.lin-badge.root{background:rgba(109,94,252,.08); border-color:rgba(109,94,252,.25)}
.lin-badge.sub{background:rgba(34,176,125,.08); border-color:rgba(34,176,125,.28)}
.lin-badge.has{background:rgba(224,165,58,.10); border-color:rgba(224,165,58,.30)}

/* --- toast اکشن‌ها + زنگوله‌ی اعلان --------------------------------------- */
/* گوشه‌ی پایین می‌نشیند تا با اسکرول و محتوای صفحه کاری نداشته باشد */
.panel-toasts{position:fixed;bottom:16px;inset-inline-start:16px;z-index:1090;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(92vw,420px)}
.panel-toast{display:flex;align-items:flex-start;gap:10px;pointer-events:auto;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-inline-start:4px solid var(--muted);border-radius:12px;padding:11px 13px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);opacity:0;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease}
.panel-toast.show{opacity:1;transform:translateY(0)}
.panel-toast .pt-ico{font-size:1.05rem;line-height:1.5;flex:none}
.panel-toast .pt-body{flex:1;min-width:0}
.panel-toast .pt-title{font-weight:700;margin-bottom:2px}
.panel-toast .pt-text{font-size:.9rem;line-height:1.7;word-break:break-word}
.panel-toast .pt-close{background:none;border:0;color:var(--muted);font-size:1.25rem;
  line-height:1;cursor:pointer;padding:0 2px;flex:none}
.panel-toast.t-ok{border-inline-start-color:#22b07d}
.panel-toast.t-ok .pt-ico{color:#22b07d}
.panel-toast.t-err{border-inline-start-color:#e0454f}
.panel-toast.t-err .pt-ico{color:#e0454f}
.panel-toast.t-info{border-inline-start-color:#4b86f5}
.panel-toast.t-info .pt-ico{color:#4b86f5}

.notif-wrap{position:relative}
.notif-badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:#e0454f;color:#fff;font-size:.7rem;
  font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none}
.notif-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:min(94vw,340px);
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.20);z-index:1080;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 13px;border-bottom:1px solid var(--border);font-weight:700}
.notif-list{max-height:min(60vh,420px);overflow-y:auto}
.notif-item{display:block;padding:10px 13px;border-bottom:1px solid var(--border);
  color:inherit;text-decoration:none}
.notif-item:last-child{border-bottom:0}
.notif-item.unread{background:rgba(75,134,245,.07)}
.notif-item .ni-title{font-weight:600;font-size:.9rem}
.notif-item .ni-body{font-size:.84rem;color:var(--muted);line-height:1.7;word-break:break-word}
.notif-item .ni-time{font-size:.74rem;color:var(--muted);margin-top:3px}
.notif-empty{padding:18px 13px;text-align:center;color:var(--muted);font-size:.88rem}