.av-32 { width:32px; height:32px; font-size:.75rem; }
.av-40 { width:40px; height:40px; font-size:.9rem; }
.av-48 { width:48px; height:48px; font-size:1rem; }
.av-56 { width:56px; height:56px; font-size:1.2rem; }
.av-72 { width:72px; height:72px; font-size:1.6rem; }
.av-96 { width:96px; height:96px; font-size:2rem; }
.av-ring {
  padding:2.5px;
  background:conic-gradient(var(--yellow) 0%, var(--orange) 40%, var(--purple) 80%, var(--yellow) 100%);
  border-radius:50%;
}
.av-ring .av { border:2px solid var(--bg); }
.av-online::after {
  content:''; position:absolute; bottom:1px; right:1px;
  width:10px; height:10px; background:var(--green);
  border-radius:50%; border:2px solid var(--bg);
}
/* .av clips to a circle via overflow:hidden, so a corner dot on .av itself
   gets cut off - .av-wrap sits outside that clip as the positioning parent. */
.av-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.av-dot {
  position:absolute; right:-1px; bottom:-1px;
  width:10px; height:10px; background:var(--green);
  border-radius:50%; border:2px solid var(--bg);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.1rem .45rem; border-radius:var(--full);
  font-size:.65rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.badge-y   { background:var(--yellow);  color:#000; }
.badge-r   { background:var(--red);     color:#fff; }
.badge-g   { background:var(--green);   color:#000; }
.badge-b   { background:var(--blue);    color:#fff; }
.badge-dim { background:var(--border);  color:var(--text-2); }

.notif-dot {
  min-width:18px; height:18px; padding:0 4px;
  background:var(--red); color:#fff; border-radius:var(--full);
  font-size:.65rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── Alerts / Toasts ─────────────────────────────────────────── */
.alert {
  padding:.65rem .9rem; border-radius:var(--r4);
  font-size:.84rem; display:flex; align-items:flex-start; gap:.5rem; line-height:1.4;
}
.alert-r { background:rgba(255,59,48,.1);  border:1px solid rgba(255,59,48,.25);  color:#ff6b62; }
.alert-g { background:rgba(50,215,75,.1);  border:1px solid rgba(50,215,75,.25);  color:#32d74b; }
.alert-y { background:rgba(47,128,237,.1);  border:1px solid rgba(47,128,237,.25);  color:var(--yellow); }

#toasts {
  position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; align-items:center;
  gap:.35rem; pointer-events:none; width:max-content; max-width:88vw;
}
.toast {
  padding:.6rem 1.1rem; border-radius:var(--full);
  font-size:.82rem; font-weight:600;
  box-shadow:var(--shadow-2);
  animation:slideUp .2s var(--ease);
  pointer-events:auto;
}
.toast-info    { background:var(--yellow); color:#000; }
.toast-success { background:var(--green);  color:#000; }