.onlineuserlist-module{background:#fff;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}.onlineuserlist-module-header{background:linear-gradient(135deg,#2563eb,#1e40af);padding:12px 16px;color:#fff}.onlineuserlist-module-title{margin:0;font-size:1.1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center}.onlineuserlist-count{background:#fff3;color:#fff;padding:4px 12px;border-radius:20px;font-size:.875rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.onlineuserlist-module-container{padding:8px}.onlineuserlist-users{display:flex;flex-direction:column;max-height:400px;overflow-y:auto}.onlineuserlist-user{display:flex;align-items:center;padding:8px 12px;border-radius:8px;transition:all .2s ease;border:1px solid #f1f5f9;margin-bottom:4px}.onlineuserlist-user:hover{background-color:#f8fafc;border-color:#e2e8f0;transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}.onlineuserlist-user-avatar{position:relative;margin-right:12px;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.avatar-image{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #e2e8f0}.avatar-initials{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#1e40af);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;border:2px solid #e2e8f0;text-transform:uppercase}.status-indicator{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;border:2px solid white;box-shadow:0 2px 4px #0000001a;transform:translate(25%,25%)}.status-indicator.online{background-color:#10b981}.status-indicator.inactive{background-color:#f59e0b}.status-indicator.away{background-color:#ef4444}.status-indicator.custom{background-color:#3b82f6}.onlineuserlist-user-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.onlineuserlist-rank-icon{font-size:16px;flex-shrink:0;line-height:1}.onlineuserlist-username{font-weight:500;color:#1f2937;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.onlineuserlist-guest-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;white-space:nowrap;flex-shrink:0}.onlineuserlist-status{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:.75rem;color:#6b7280;white-space:nowrap;flex-shrink:0}.onlineuserlist-status-icon{font-size:.8rem;line-height:1}.onlineuserlist-empty{text-align:center;color:#6b7280;font-style:italic;padding:40px 20px;background:#f8fafc;border-radius:8px}.onlineuserlist-users::-webkit-scrollbar{width:6px}.onlineuserlist-users::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.onlineuserlist-users::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.onlineuserlist-users::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media(max-width:768px){.onlineuserlist-user{padding:6px 8px}.onlineuserlist-user-avatar{width:28px;height:28px}.avatar-image,.avatar-initials{width:28px;height:28px;font-size:11px}.onlineuserlist-username{font-size:.85rem}.onlineuserlist-rank-icon{font-size:14px}.status-indicator{width:10px;height:10px}}