/* SITE UX: toast + loading states */
.l2-toast-stack{
  position:fixed;right:18px;bottom:18px;z-index:10000;
  display:grid;gap:10px;width:min(360px,calc(100vw - 36px));pointer-events:none
}
.l2-toast{
  pointer-events:auto;
  display:grid;grid-template-columns:10px 1fr auto;gap:11px;align-items:center;
  padding:13px 14px;border:1px solid var(--p-line-strong);border-radius:11px;
  background:linear-gradient(145deg,rgba(9,31,42,.98),rgba(4,17,25,.99));
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  animation:l2ToastIn .24s ease both
}
.l2-toast>i{width:8px;height:8px;border-radius:50%;background:#6ed9ea;box-shadow:0 0 12px rgba(110,217,234,.45)}
.l2-toast.success>i{background:#67dfa4;box-shadow:0 0 12px rgba(103,223,164,.45)}
.l2-toast.warn>i{background:#e1bd73;box-shadow:0 0 12px rgba(225,189,115,.45)}
.l2-toast b{display:block;color:#edf8fa;font-size:.8rem}.l2-toast span{display:block;margin-top:2px;color:#8fa7b0;font-size:.68rem}
.l2-toast button{color:#819ba5;font-size:1rem}
.l2-toast.out{animation:l2ToastOut .18s ease both}
@keyframes l2ToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes l2ToastOut{to{opacity:0;transform:translateY(8px)}}

/* Ready for future API-backed ranking/profile loads. */
.ux-skeleton{
  position:relative;overflow:hidden;border-radius:8px;
  background:rgba(116,180,196,.08)!important;color:transparent!important
}
.ux-skeleton:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 66%);
  transform:translateX(-100%);animation:uxSkeleton 1.25s infinite
}
@keyframes uxSkeleton{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.l2-toast,.l2-toast.out,.ux-skeleton:after{animation:none!important}}