/* ─── Notifications section ─── */
    .notif-pane { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
    .notif-head { flex-shrink: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .notif-scroll { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
    .notif-item {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 14px; border-radius: 14px;
      background: var(--bg3); border: 1px solid rgba(255,255,255,.06);
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
      transition: box-shadow .18s var(--ease), background .18s;
    }
    .notif-item:hover { background: var(--bg4); }
    .notif-dot {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(91,178,249,.18); color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0;
    }
    .notif-body { flex: 1; min-width: 0; }
    .notif-title { font-size: 13px; font-weight: 500; }
    .notif-text { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
    .notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; color: var(--muted); font-size: 13px; }
    .notif-empty .ti { font-size: 48px; opacity: .2; }
    .notif-status { font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 6px; }