.online-indicator{position:absolute;top:-2px;right:-2px;background:linear-gradient(135deg,#10b981,#059669);border:2px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a;z-index:10}.online-indicator-inner{background:linear-gradient(135deg,#34d399,#10b981);border-radius:50%;animation:pulse-green 2s infinite}@keyframes pulse-green{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.online-indicator:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;opacity:.3;animation:glow-green 3s infinite;z-index:-1}@keyframes glow-green{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.online-indicator-sm{width:12px;height:12px}.online-indicator-sm .online-indicator-inner{width:6px;height:6px}.online-indicator-md{width:16px;height:16px}.online-indicator-md .online-indicator-inner{width:8px;height:8px}.online-indicator-lg{width:20px;height:20px}.online-indicator-lg .online-indicator-inner{width:10px;height:10px}.online-indicator:hover{transform:scale(1.1);transition:transform .2s ease}.online-indicator:hover:before{opacity:.8}@media (prefers-color-scheme: dark){.online-indicator{border-color:#1f2937;box-shadow:0 2px 4px #0000004d}}